Beruflich Dokumente
Kultur Dokumente
SUBMITTED BY:
NAME:
WebGL 3D Project
Page 1
WebGL 3D Project
To begin, we would implement an animated cube. The declaration of objects that we would need comes
first:
The init() function creates and sets the position of the camera, creates a cubic geometrical shape,
defines the material of the mesh that the shape would be composed of, adds the shape and the mesh onto
the scene, and renders the entire scene on a canvas element.
The code for the entire init() function is listed below;
Page 2
WebGL 3D Project
There are multiple types of camera classes provided by Three.js, out of which
THREE.PerspectivCamera is used for a perspective view of the scene. The scene can be added
with a mesh (where mesh is composed of a geometrical shape and the color, or texture, or image
that defines how the shape would look), which is implemented by using the
THREE.meshBasicMaterial class. Again, Three.js provides a vast collection of classes of
material that can be applied to different geometrical shapes.
The most important aspect is the rendering of the objects that makes WebGL with Three.js or
Babylon.js easy to work with. Three.js provides a class THREE.CanvasRenderer that renders the
objects automatically on the HTML5 canvas element. This provides a very graceful fallback in
case WebGL (which is dependent on the compatibility of the latest browsers) is not compatible
with the browser being used at client end.
The animate () function makes use of the requestAnimationFrame() function to perform a call back of
the animate() function itself, which updates the animation before the next repaint takes place in the
browser. For this example, the rotation vector is updated for the mesh in the scene in any subsequent
repaints. The code for the animate() function is listed below:
Page 3
WebGL 3D Project
Code
<!doctype html>
<html>
<body>
<canvas width = "570" height = "570" id = "my_Canvas"></canvas>
<script>
/*Creating a canvas */
var canvas = document.getElementById('my_Canvas');
gl = canvas.getContext('experimental-webgl');
var vertices = [
-1,-1,-1, 1,-1,-1, 1, 1,-1, -1, 1,-1,
-1,-1, 1, 1,-1, 1, 1, 1, 1, -1, 1, 1,
-1,-1,-1, -1, 1,-1, -1, 1, 1, -1,-1, 1,
1,-1,-1, 1, 1,-1, 1, 1, 1, 1,-1, 1,
-1,-1,-1, -1,-1, 1, 1,-1, 1, 1,-1,-1,
-1, 1,-1, -1, 1, 1, 1, 1, 1, 1, 1,-1,
];
var colors = [
Page 4
WebGL 3D Project
var indices = [
0,1,2, 0,2,3, 4,5,6, 4,6,7,
8,9,10, 8,10,11, 12,13,14, 12,14,15,
16,17,18, 16,18,19, 20,21,22, 20,22,23
];
Page 5
WebGL 3D Project
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices),
gl.STATIC_DRAW);
/*Adding Shades */
Page 6
WebGL 3D Project
gl.compileShader(vertShader);
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
var position = gl.getAttribLocation(shaderProgram, "position");
gl.vertexAttribPointer(position, 3, gl.FLOAT, false,0,0) ;
// Position
gl.enableVertexAttribArray(position);
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
var color = gl.getAttribLocation(shaderProgram, "color");
gl.vertexAttribPointer(color, 3, gl.FLOAT, false,0,0) ;
Page 7
WebGL 3D Project
// Color
gl.enableVertexAttribArray(color);
gl.useProgram(shaderProgram);
// translating z
view_matrix[14] = view_matrix[14]-6;//zoom
Page 8
WebGL 3D Project
m[0] = c*m[0]-s*m[1];
m[4] = c*m[4]-s*m[5];
m[8] = c*m[8]-s*m[9];
m[1]=c*m[1]+s*mv0;
m[5]=c*m[5]+s*mv4;
m[9]=c*m[9]+s*mv8;
}
m[1] = m[1]*c-m[2]*s;
m[5] = m[5]*c-m[6]*s;
m[9] = m[9]*c-m[10]*s;
m[2] = m[2]*c+mv1*s;
m[6] = m[6]*c+mv5*s;
m[10] = m[10]*c+mv9*s;
Page 9
WebGL 3D Project
m[0] = c*m[0]+s*m[2];
m[4] = c*m[4]+s*m[6];
m[8] = c*m[8]+s*m[10];
m[2] = c*m[2]-s*mv0;
m[6] = c*m[6]-s*mv4;
m[10] = c*m[10]-s*mv8;
}
var dt = time-time_old;
rotateZ(mov_matrix, dt*0.005);//time
rotateY(mov_matrix, dt*0.002);
rotateX(mov_matrix, dt*0.003);
time_old = time;
Page 10
WebGL 3D Project
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clearColor(0.5, 0.5, 0.5, 0.9);
gl.clearDepth(1.0);
window.requestAnimationFrame(animate);
}
animate(0);
</script>
</body>
</html>
Animation Results
Page 11
WebGL 3D Project
Page 12
WebGL 3D Project
Page 13
WebGL 3D Project
References
[1] https://www.3pillarglobal.com/
[2] https://www.merixstudio.com/blog/getting-started-WebGL-using-threejs/
Page 14
WebGL 3D Project
Page 15