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

6
RotatingCube/RotatingCube.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Draw cube with specification of face color</title> <title>Draw cube with specification of face color</title>
@ -9,6 +10,10 @@
<canvas id="webgl" width="400" height="400"> <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>
@ -16,4 +21,5 @@
<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>

56
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
// /| /| // /| /|
@ -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);
}