j/4230-hw-1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

RotatingCube: Finish RotatingCube

Browse Source
This commit is contained in:
John 2022-07-12 14:11:19 -05:00
parent c179df0fa3
commit e0f68d7ff5
2 changed files with 73 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
RotatingCube/RotatingCube.html
View File

@ -1,19 +1,25 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" />
<title>Draw cube with specification of face color</title>
</head>
<body onload="main()"> <head>
<canvas id="webgl" width="400" height="400"> <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" 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-utils.js"></script>
<script src="../lib/webgl-debug.js"></script> <script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script> <script src="../lib/cuon-utils.js"></script>
<script src="../lib/cuon-matrix.js"></script> <script src="../lib/cuon-matrix.js"></script>
<script src="RotatingCube.js"></script> <script src="RotatingCube.js"></script>
</body> </body>
</html>
</html>

92
RotatingCube/RotatingCube.js
View File

@ -25,49 +25,57 @@ const fragment_shader = `
gl_FragColor = v_Color; gl_FragColor = v_Color;
} `; } `;
function main() var gl, n;
{ var v_rotate = {x: 0, y:0, z:0};
function main() {
// Retrieve <canvas> element // Retrieve <canvas> element
var canvas = document.getElementById('webgl'); var canvas = document.getElementById('webgl');
// Get the rendering context for WebGL // Get the rendering context for WebGL
var gl = getWebGLContext(canvas); gl = getWebGLContext(canvas);
if (!gl) if (!gl) {
{
console.log('Failed to get the rendering context for WebGL'); console.log('Failed to get the rendering context for WebGL');
return; return;
} }
// Initialize shaders // Initialize shaders
if (!initShaders(gl, vertex_shader, fragment_shader)) if (!initShaders(gl, vertex_shader, fragment_shader)) {
{
console.log('Failed to intialize shaders.'); console.log('Failed to intialize shaders.');
return; return;
} }
// Set the vertex information // Set the vertex information
var n = initVertexBuffers(gl); n = initVertexBuffers(gl);
if (n < 0) if (n < 0) {
{
console.log('Failed to set the vertex information'); console.log('Failed to set the vertex information');
return; return;
} }
draw(gl);
}
function draw(gl) {
// Set the clear color and enable the depth test // Set the clear color and enable the depth test
gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST); gl.enable(gl.DEPTH_TEST);
// Get the storage location of u_MvpMatrix // Get the storage location of u_MvpMatrix
var u_MvpMatrix = gl.getUniformLocation(gl.program, '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'); console.log('Failed to get the storage location of u_MvpMatrix');
return; return;
} }
// Set the eye point and the viewing volume // Set the eye point and the viewing volume
var mvpMatrix = new Matrix4(); 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 // Pass the model view projection matrix to u_MvpMatrix
gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements); gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
@ -79,8 +87,7 @@ function main()
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0); gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
} }
function initVertexBuffers(gl) function initVertexBuffers(gl) {
{
// Create a cube // Create a cube
// v6----- v5 // v6----- v5
// /| /| // /| /|
@ -91,30 +98,30 @@ function initVertexBuffers(gl)
// v2------v3 // v2------v3
var vertices = new Float32Array([ // Vertex coordinates 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-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-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, // 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, // 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, // 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 // v4-v7-v6-v5 back
]); ]);
var colors = new Float32Array([ // Colors 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, 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) 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, 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, 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 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, 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 var indices = new Uint8Array([ // Indices of the vertices
0, 1, 2, 0, 2, 3, // front 0, 1, 2, 0, 2, 3, // front
4, 5, 6, 4, 6, 7, // right 4, 5, 6, 4, 6, 7, // right
8, 9,10, 8,10,11, // up 8, 9, 10, 8, 10, 11, // up
12,13,14, 12,14,15, // left 12, 13, 14, 12, 14, 15, // left
16,17,18, 16,18,19, // down 16, 17, 18, 16, 18, 19, // down
20,21,22, 20,22,23 // back 20, 21, 22, 20, 22, 23 // back
]); ]);
// Create a buffer object // Create a buffer object
@ -136,11 +143,9 @@ function initVertexBuffers(gl)
return indices.length; 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 var buffer = gl.createBuffer(); // Create a buffer object
if (!buffer) if (!buffer) {
{
console.log('Failed to create the buffer object'); console.log('Failed to create the buffer object');
return false; return false;
} }
@ -151,8 +156,7 @@ function initArrayBuffer(gl, data, num, type, attribute)
// Assign the buffer object to the attribute variable // Assign the buffer object to the attribute variable
var a_attribute = gl.getAttribLocation(gl.program, attribute); 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); console.log('Failed to get the storage location of ' + attribute);
return false; return false;
} }
@ -164,3 +168,13 @@ function initArrayBuffer(gl, data, num, type, attribute)
return true; 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);
}