I'm trying to translate my door to open along a certain axis. I can get it to rotate but I don't know how I can get it to translate along an axis. I cannot find any helpful code examples online elsewhere.
This is my html code
<!DOCTYPE html>
<html>
<script id="vertex-shader" type="x-shader/x-vertex">
#version 300 es
in vec4 vPosition;
in vec4 vColor;
out vec4 fColor;
uniform vec3 theta;
uniform mat4 modelView;
uniform mat4 projection;
uniform vec3 translation;
void main()
{
// Compute the sines and cosines of theta for each of
// the three axes in one computation.
vec3 angles = radians( theta );
vec3 c = cos( angles );
vec3 s = sin( angles );
// Remeber: thse matrices are column-major
mat4 rx = mat4( 1.0, 0.0, 0.0, 0.0,
0.0, c.x, s.x, 0.0,
0.0, -s.x, c.x, 0.0,
0.0, 0.0, 0.0, 1.0 );
mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
0.0, 1.0, 0.0, 0.0,
s.y, 0.0, c.y, 0.0,
0.0, 0.0, 0.0, 1.0 );
mat4 rz = mat4( c.z, -s.z, 0.0, 0.0,
s.z, c.z, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0 );
fColor = vColor;
gl_Position =projection * modelView*rz * ry * rx * vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
#version 300 es
precision mediump float;
in vec4 fColor;
out vec4 fragColor;
void main()
{
fragColor = fColor;
}
</script>
<script type="text/javascript" src="./Common/initShaders.js"></script>
<script type="text/javascript" src="./Common/MVnew.js"></script>
<script type="text/javascript" src="assignment3_01.js"></script>
<body>
<canvas id="gl-canvas" width="512"" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
<br/>
<button id= "xButton">Rotate X</button>
<button id= "yButton">Rotate Y</button>
<button id= "zButton">Rotate Z</button>
</body>
</html>
This is my javascript file
"use strict";
var canvas;
var gl;
var NumVertices = 162;
var points = [];
var colors = [];
var xAxis = 0;
var yAxis = 1;
var zAxis = 2;
var tx = 0.0, ty = 0.0 ,tz= 0.0;
var axis = 0;
var theta = [ 0, 0, 0 ];
var thetaLoc;
var flag = false;
var near = 0.1;
var far = 10.0;
var radius = 4.0;
var fovy = 45.0;
var aspect;
var mvMatrix , pMatrix;
var modelView, projection;
var eye;
var at = vec3( 0.0, 0.0, 0.0 );
var up = vec3( 0.0, 1.0, 0.0 );
var x = 2;
window.onload = function init()
{
canvas = document.getElementById( "gl-canvas" );
gl = canvas.getContext('webgl2');
if (!gl) alert("WebGL 2.0 isn't available");
Cubes();
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
gl.enable(gl.DEPTH_TEST);
//
// Load shaders and initialize attribute buffers
//
aspect = canvas.width/canvas.height;
var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );
var cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW );
var vColor = gl.getAttribLocation( program, "vColor" );
gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vColor );
var vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW );
var vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );
thetaLoc = gl.getUniformLocation(program, "theta");
//creating modelview and projection matrices
mvMatrix = mat4();
pMatrix = mat4();
modelView = gl.getUniformLocation( program, "modelView" );
projection = gl.getUniformLocation( program, "projection" );
thetaLoc = gl.getUniformLocation(program, "theta");
//event listeners for buttons
document.getElementById( "xButton" ).onclick = function () {
if(flag == false)
{
flag = true;
axis = xAxis;
}
else
flag = false;
init();
};
document.getElementById( "yButton" ).onclick = function () {
if(flag == false)
{
flag = true;
axis = yAxis;
}
else
flag = false;
init();
};
document.getElementById( "zButton" ).onclick = function () {
if(flag == false)
{
flag = true;
axis = zAxis;
}
else
flag = false;
init();
};
render();
}
function Cubes()
{
colorCube(); //door cube
colorCube2(); //cube above door
colorCube3(); // cube beside door
colorCube4(); // wall cube
colorCube5(); // door handle cube
}
//door
function colorCube()
{
quad( 1, 0, 3, 2 );
quad( 2, 3, 7, 6 );
quad( 3, 0, 4, 7 );
quad( 6, 5, 1, 2 );
quad( 4, 5, 6, 7 );
quad( 5, 4, 0, 1 );
}
function quad(a, b, c, d)
{
var vertices = [
//door
vec3( -0.507 + x, -0.468 + x, -0.771 + x ),
vec3( -0.507 + x, 0.532 + x, -0.771+ x ),
vec3( -0.177 + x, 0.532 + x, -0.396 + x ),
vec3( -0.117 + x, -0.468 + x , -0.396 + x ),
vec3( -0.356 + x, -0.468 + x , -0.903 + x),
vec3( -0.356 + x, 0.532 + x, -0.903 + x),
vec3( -0.026 + x, 0.532 + x, -0.528 + x),
vec3( -0.026 + x, -0.468 + x , -0.528 + x),
];
var vertexColors = [
[ 1.0, 0.0, 0.0, 1.0 ], //red colour
[ 1.0, 0.0, 0.0, 1.0 ],
[ 1.0, 0.0, 0.0, 1.0 ],
[ 1.0, 0.0, 0.0, 1.0 ],
[ 1.0, 0.0, 0.0, 1.0 ],
[ 1.0, 0.0, 0.0, 1.0 ],
[ 1.0, 0.0, 0.0, 1.0 ],
[ 1.0, 0.0, 0.0, 1.0 ]
];
// We need to parition the quad into two triangles in order for
// WebGL to be able to render it. In this case, we create two
// triangles from the quad indices
//vertex color assigned by the index of the vertex
var indices = [ a, b, c, a, c, d ];
for ( var i = 0; i < indices.length; ++i ) {
points.push( vertices[indices[i]] );
colors.push( vertexColors[indices[i]] );
}
}
//cube above door
function colorCube2()
{
quad2( 1, 0, 3, 2 );
quad2( 2, 3, 7, 6 );
quad2( 6, 5, 1, 2 );
quad2( 4, 5, 6, 7 );
quad2( 5, 4, 0, 1 );
}
function quad2(a, b, c, d)
{
var vertices = [
vec3( -0.507 + x, 0.532 + x , -0.771 + x ),
vec3( -0.507 + x, 0.732 + x , -0.771 + x ),
vec3( -0.177 + x, 0.732 + x , -0.396 + x ),
vec3( -0.117 + x, 0.532 + x , -0.396 + x ),
vec3( -0.356 + x, 0.532 + x , -0.903 + x ),
vec3( -0.356 + x, 0.732 + x , -0.903 + x ),
vec3( -0.026 + x, 0.732 + x , -0.528 + x ),
vec3( -0.026 + x, 0.532 + x , -0.528 + x )
];
var vertexColors = [
[ 0.306, 0.208, 0.141, 1.0 ], //dark wood color
[ 0.306, 0.208, 0.141, 1.0 ],
[ 0.306, 0.208, 0.141, 1.0 ],
[ 0.306, 0.208, 0.141, 1.0 ],
[ 0.306, 0.208, 0.141, 1.0 ],
[ 0.306, 0.208, 0.141, 1.0 ],
[ 0.306, 0.208, 0.141, 1.0 ],
[ 0.306, 0.208, 0.141, 1.0 ]
];
// We need to parition the quad into two triangles in order for
// WebGL to be able to render it. In this case, we create two
// triangles from the quad indices
//vertex color assigned by the index of the vertex
var indices = [ a, b, c, a, c, d ];
for ( var i = 0; i < indices.length; ++i ) {
points.push( vertices[indices[i]] );
colors.push( vertexColors[indices[i]] );
}
}
//cube beside door
function colorCube3()
{
quad3( 1, 0, 3, 2 );
quad3( 2, 3, 7, 6 );
quad3( 6, 5, 1, 2 );
quad3( 4, 5, 6, 7 );
quad3( 3, 0, 4, 7 );
}
function quad3(a, b, c, d)
{
var vertices = [
vec3( -0.177 + x, -0.468 + x , -0.396 + x ),
vec3( -0.177 + x, 0.732 + x , -0.396 + x ),
vec3( -0.111 + x, 0.732 + x , -0.321 + x ),
vec3( -0.111 + x, -0.468 + x , -0.321 + x ),
vec3( -0.026 + x, -0.468 + x , -0.528 + x ),
vec3( -0.026 + x, 0.732 + x , -0.528 + x ),
vec3( 0.040 + x, 0.732 + x , -0.453 + x ),
vec3(0.040 + x, -0.468 + x , -0.453 + x )
];
var vertexColors = [
[ 0.306, 0.208, 0.141, 1.0 ], //dark wood color
[ 0.306, 0.208, 0.141, 1.0 ],
[ 0.306, 0.208, 0.141, 1.0 ],
[ 0.306, 0.208, 0.141, 1.0 ],
[ 0.306, 0.208, 0.141, 1.0 ],
[ 0.306, 0.208, 0.141, 1.0 ],
[ 0.306, 0.208, 0.141, 1.0 ],
[ 0.306, 0.208, 0.141, 1.0 ]
];
// We need to parition the quad into two triangles in order for
// WebGL to be able to render it. In this case, we create two
// triangles from the quad indices
//vertex color assigned by the index of the vertex
var indices = [ a, b, c, a, c, d ];
for ( var i = 0; i < indices.length; ++i ) {
points.push( vertices[indices[i]] );
colors.push( vertexColors[indices[i]] );
}
}
//wall
function colorCube4()
{
quad4( 1, 0, 3, 2 );
quad4( 2, 3, 7, 6 );
quad4( 3, 0, 4, 7 );
quad4( 6, 5, 1, 2 );
quad4( 4, 5, 6, 7 );
}
function quad4(a, b, c, d)
{
var vertices = [
vec3( -0.111 + x , -0.468 + x , -0.321 + x ),
vec3( -0.111 + x , 0.732 + x , -0.321 + x ),
vec3( 0.417 + x , 0.732 + x , 0.280 + x ),
vec3( 0.417 + x , -0.468 + x , 0.280 + x ),
vec3( 0.040 + x , -0.468 + x ,-0.453 + x ),
vec3( 0.040 + x , 0.732 + x , -0.453 + x ),
vec3( 0.568 + x , 0.732 + x , 0.148 + x ),
vec3( 0.568 + x , -0.468 + x , 0.148 + x )
];
var vertexColors = [
[ 0.961, 0.855, 0.874 , 1.0], //white
[ 0.961, 0.855, 0.874 , 1.0],
[ 0.961, 0.855, 0.874 , 1.0],
[ 0.961, 0.855, 0.874 , 1.0],
[ 0.961, 0.855, 0.874 , 1.0],
[ 0.961, 0.855, 0.874 , 1.0],
[ 0.961, 0.855, 0.874 , 1.0],
[ 0.961, 0.855, 0.874 , 1.0]
];
// We need to parition the quad into two triangles in order for
// WebGL to be able to render it. In this case, we create two
// triangles from the quad indices
//vertex color assigned by the index of the vertex
var indices = [ a, b, c, a, c, d ];
for ( var i = 0; i < indices.length; ++i ) {
points.push( vertices[indices[i]] );
colors.push( vertexColors[indices[i]] );
}
}
//door handle
function colorCube5()
{
quad5( 1, 0, 3, 2 );
quad5( 2, 3, 7, 6 );
quad5( 3, 0, 4, 7 );
quad5( 6, 5, 1, 2 );
quad5( 4, 5, 6, 7 );
quad5( 5, 4, 0, 1 );
}
function quad5(a, b, c, d)
{
var vertices = [
vec3( -0.140 + x, 0.055 + x, -0.671 + x ),
vec3( -0.140 + x, 0.075 + x, -0.671 + x ),
vec3( -0.041 + x, 0.075 + x, -0.558 + x ),
vec3( -0.041 + x, 0.055 + x, -0.558 + x ),
vec3( -0.117 + x, 0.055 + x, -0.691 + x ),
vec3( -0.117 + x, 0.075 + x, -0.691 + x ),
vec3( -0.018 + x, 0.075 + x, -0.578 + x ),
vec3( -0.018 + x, 0.055 + x, -0.578 + x )
];
var vertexColors = [
[ 1.0, 0.843, 0.0, 1.0 ], //golden
[ 1.0, 0.843, 0.0, 1.0 ],
[ 1.0, 0.843, 0.0, 1.0 ],
[ 1.0, 0.843, 0.0, 1.0 ],
[ 1.0, 0.843, 0.0, 1.0 ],
[ 1.0, 0.843, 0.0, 1.0 ],
[ 1.0, 0.843, 0.0, 1.0 ],
[ 1.0, 0.843, 0.0, 1.0 ]
];
// We need to parition the quad into two triangles in order for
// WebGL to be able to render it. In this case, we create two
// triangles from the quad indices
//vertex color assigned by the index of the vertex
var indices = [ a, b, c, a, c, d ];
for ( var i = 0; i < indices.length; ++i ) {
points.push( vertices[indices[i]] );
colors.push( vertexColors[indices[i]] );
}
}
function render()
{
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
eye = vec3(6.0,3.0,3.0);
at = vec3(0.0, 1.0, 0.0); //looking at the origin
up = vec3(0.0, 1.0, 0.0); //y axis is up
mvMatrix = lookAt(eye, at , up);
pMatrix = perspective(fovy, aspect, near, far);
gl.uniformMatrix4fv( modelView, false, flatten(mvMatrix) );
gl.uniformMatrix4fv( projection, false, flatten(pMatrix) )
theta[axis] += 2.0;
gl.uniform3fv(thetaLoc, theta);
var translation = gl.getUniformLocation( program, "translation");
gl.uniform3fv( translation, tx, ty, tz );
gl.drawArrays( gl.TRIANGLES, 0, NumVertices );
if (flag==true)
{
requestAnimationFrame( render );
}
}
i tried using translation() function but i am lost on how to do it.
