RotatingCube: Finish RotatingCube
This commit is contained in:
parent
c179df0fa3
commit
e0f68d7ff5
@ -1,19 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Draw cube with specification of face color</title>
|
||||
</head>
|
||||
|
||||
<body onload="main()">
|
||||
<canvas id="webgl" width="400" height="400">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Draw cube with specification of face color</title>
|
||||
</head>
|
||||
|
||||
<body onload="main()">
|
||||
<canvas id="webgl" width="400" height="400">
|
||||
Please use a browser that supports "canvas"
|
||||
</canvas>
|
||||
</canvas>
|
||||
<p>
|
||||
<button type="button" onclick="rotate('x')">Rotate X</button>
|
||||
<button type="button" onclick="rotate('y')">Rotate Y</button>
|
||||
</p>
|
||||
|
||||
<script src="../lib/webgl-utils.js"></script>
|
||||
<script src="../lib/webgl-debug.js"></script>
|
||||
<script src="../lib/cuon-utils.js"></script>
|
||||
<script src="../lib/cuon-matrix.js"></script>
|
||||
<script src="RotatingCube.js"></script>
|
||||
</body>
|
||||
|
||||
<script src="../lib/webgl-utils.js"></script>
|
||||
<script src="../lib/webgl-debug.js"></script>
|
||||
<script src="../lib/cuon-utils.js"></script>
|
||||
<script src="../lib/cuon-matrix.js"></script>
|
||||
<script src="RotatingCube.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -25,49 +25,57 @@ const fragment_shader = `
|
||||
gl_FragColor = v_Color;
|
||||
} `;
|
||||
|
||||
function main()
|
||||
{
|
||||
var gl, n;
|
||||
var v_rotate = {x: 0, y:0, z:0};
|
||||
|
||||
function main() {
|
||||
// Retrieve <canvas> element
|
||||
var canvas = document.getElementById('webgl');
|
||||
|
||||
// Get the rendering context for WebGL
|
||||
var gl = getWebGLContext(canvas);
|
||||
if (!gl)
|
||||
{
|
||||
gl = getWebGLContext(canvas);
|
||||
if (!gl) {
|
||||
console.log('Failed to get the rendering context for WebGL');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize shaders
|
||||
if (!initShaders(gl, vertex_shader, fragment_shader))
|
||||
{
|
||||
if (!initShaders(gl, vertex_shader, fragment_shader)) {
|
||||
console.log('Failed to intialize shaders.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Set the vertex information
|
||||
var n = initVertexBuffers(gl);
|
||||
if (n < 0)
|
||||
{
|
||||
n = initVertexBuffers(gl);
|
||||
if (n < 0) {
|
||||
console.log('Failed to set the vertex information');
|
||||
return;
|
||||
}
|
||||
draw(gl);
|
||||
}
|
||||
|
||||
function draw(gl) {
|
||||
// Set the clear color and enable the depth test
|
||||
gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
||||
gl.enable(gl.DEPTH_TEST);
|
||||
|
||||
// Get the storage location of u_MvpMatrix
|
||||
var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
|
||||
if (!u_MvpMatrix)
|
||||
{
|
||||
if (!u_MvpMatrix) {
|
||||
console.log('Failed to get the storage location of u_MvpMatrix');
|
||||
return;
|
||||
}
|
||||
|
||||
// Set the eye point and the viewing volume
|
||||
var mvpMatrix = new Matrix4();
|
||||
mvpMatrix.setOrtho(-2, 2, -2, 2, -2, 2);
|
||||
// The longest measure of a cube is the furthest corner diagonal, with a size of sqrt(3)
|
||||
// Here, we take the root of 3, and add a little extra, to make sure it doesn't clip
|
||||
const root_three = Math.sqrt(3) + 0.01;
|
||||
// Then, we define the ortho projection to use this value as the coordinate of each clipping plane.
|
||||
mvpMatrix.setOrtho(-root_three, root_three, -root_three, root_three, -root_three, root_three);
|
||||
// From there, we rotate
|
||||
mvpMatrix.rotate(v_rotate.x, 1, 0, 0).rotate(v_rotate.y, 0, 1, 0).rotate(v_rotate.z, 0, 0, 1);
|
||||
|
||||
|
||||
// Pass the model view projection matrix to u_MvpMatrix
|
||||
gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
|
||||
@ -79,8 +87,7 @@ function main()
|
||||
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
|
||||
}
|
||||
|
||||
function initVertexBuffers(gl)
|
||||
{
|
||||
function initVertexBuffers(gl) {
|
||||
// Create a cube
|
||||
// v6----- v5
|
||||
// /| /|
|
||||
@ -91,30 +98,30 @@ function initVertexBuffers(gl)
|
||||
// v2------v3
|
||||
|
||||
var vertices = new Float32Array([ // Vertex coordinates
|
||||
1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0,-1.0, 1.0, 1.0,-1.0, 1.0, // v0-v1-v2-v3 front
|
||||
1.0, 1.0, 1.0, 1.0,-1.0, 1.0, 1.0,-1.0,-1.0, 1.0, 1.0,-1.0, // v0-v3-v4-v5 right
|
||||
1.0, 1.0, 1.0, 1.0, 1.0,-1.0, -1.0, 1.0,-1.0, -1.0, 1.0, 1.0, // v0-v5-v6-v1 up
|
||||
-1.0, 1.0, 1.0, -1.0, 1.0,-1.0, -1.0,-1.0,-1.0, -1.0,-1.0, 1.0, // v1-v6-v7-v2 left
|
||||
-1.0,-1.0,-1.0, 1.0,-1.0,-1.0, 1.0,-1.0, 1.0, -1.0,-1.0, 1.0, // v7-v4-v3-v2 down
|
||||
1.0,-1.0,-1.0, -1.0,-1.0,-1.0, -1.0, 1.0,-1.0, 1.0, 1.0,-1.0 // v4-v7-v6-v5 back
|
||||
1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, // v0-v1-v2-v3 front
|
||||
1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, // v0-v3-v4-v5 right
|
||||
1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, // v0-v5-v6-v1 up
|
||||
-1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, // v1-v6-v7-v2 left
|
||||
-1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, // v7-v4-v3-v2 down
|
||||
1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0 // v4-v7-v6-v5 back
|
||||
]);
|
||||
|
||||
var colors = new Float32Array([ // Colors
|
||||
0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, // v0-v1-v2-v3 front(blue)
|
||||
0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, // v0-v3-v4-v5 right(green)
|
||||
1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, // v0-v5-v6-v1 up(red)
|
||||
1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, // v1-v6-v7-v2 left
|
||||
1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, // v7-v4-v3-v2 down
|
||||
0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0 // v4-v7-v6-v5 back
|
||||
0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, // v0-v1-v2-v3 front(blue)
|
||||
0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, // v0-v3-v4-v5 right(green)
|
||||
1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, // v0-v5-v6-v1 up(red)
|
||||
1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, // v1-v6-v7-v2 left
|
||||
1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, // v7-v4-v3-v2 down
|
||||
0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0 // v4-v7-v6-v5 back
|
||||
]);
|
||||
|
||||
var indices = new Uint8Array([ // Indices of the vertices
|
||||
0, 1, 2, 0, 2, 3, // front
|
||||
4, 5, 6, 4, 6, 7, // right
|
||||
8, 9,10, 8,10,11, // up
|
||||
12,13,14, 12,14,15, // left
|
||||
16,17,18, 16,18,19, // down
|
||||
20,21,22, 20,22,23 // back
|
||||
0, 1, 2, 0, 2, 3, // front
|
||||
4, 5, 6, 4, 6, 7, // right
|
||||
8, 9, 10, 8, 10, 11, // up
|
||||
12, 13, 14, 12, 14, 15, // left
|
||||
16, 17, 18, 16, 18, 19, // down
|
||||
20, 21, 22, 20, 22, 23 // back
|
||||
]);
|
||||
|
||||
// Create a buffer object
|
||||
@ -136,11 +143,9 @@ function initVertexBuffers(gl)
|
||||
return indices.length;
|
||||
}
|
||||
|
||||
function initArrayBuffer(gl, data, num, type, attribute)
|
||||
{
|
||||
function initArrayBuffer(gl, data, num, type, attribute) {
|
||||
var buffer = gl.createBuffer(); // Create a buffer object
|
||||
if (!buffer)
|
||||
{
|
||||
if (!buffer) {
|
||||
console.log('Failed to create the buffer object');
|
||||
return false;
|
||||
}
|
||||
@ -151,8 +156,7 @@ function initArrayBuffer(gl, data, num, type, attribute)
|
||||
|
||||
// Assign the buffer object to the attribute variable
|
||||
var a_attribute = gl.getAttribLocation(gl.program, attribute);
|
||||
if (a_attribute < 0)
|
||||
{
|
||||
if (a_attribute < 0) {
|
||||
console.log('Failed to get the storage location of ' + attribute);
|
||||
return false;
|
||||
}
|
||||
@ -164,3 +168,13 @@ function initArrayBuffer(gl, data, num, type, attribute)
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function rotate(axis) {
|
||||
if (axis in v_rotate) {
|
||||
v_rotate[axis] += 15.0;
|
||||
v_rotate[axis] %= 360; // bound to [0, 360)
|
||||
|
||||
console.log(`${axis} = ${v_rotate[axis]}`);
|
||||
}
|
||||
draw(gl);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user