Course notebooks for CSE 4/6413: Introduction to Computer Graphics as Mississippi State University. Course notes, assignments, and similar.
lines = [
5,
-Math.tan(glm.glMatrix.toRadian(0.5 * controls.fovy)) * controls.near,
controls.view_z - controls.near,
5,
-Math.tan(glm.glMatrix.toRadian(0.5 * controls.fovy)) * controls.far,
controls.view_z - controls.far,
5,
Math.tan(glm.glMatrix.toRadian(0.5 * controls.fovy)) * controls.far,
controls.view_z - controls.far,
5,
Math.tan(glm.glMatrix.toRadian(0.5 * controls.fovy)) * controls.near,
controls.view_z - controls.near,
5,
0,
controls.view_z,
5,
-Math.tan(glm.glMatrix.toRadian(0.5 * controls.fovy)) * controls.near,
controls.view_z - controls.near,
Math.tan(glm.glMatrix.toRadian(0.5 * controls.fovy)) * controls.near,
5,
controls.view_z - controls.near,
Math.tan(glm.glMatrix.toRadian(0.5 * controls.fovy)) * controls.far,
5,
controls.view_z - controls.far,
-Math.tan(glm.glMatrix.toRadian(0.5 * controls.fovy)) * controls.far,
5,
controls.view_z - controls.far,
-Math.tan(glm.glMatrix.toRadian(0.5 * controls.fovy)) * controls.near,
5,
controls.view_z - controls.near,
0,
5,
controls.view_z,
Math.tan(glm.glMatrix.toRadian(0.5 * controls.fovy)) * controls.near,
5,
controls.view_z - controls.near
]
function draw() {
// Reset to clear everything
gl.viewport(0, 0, viewof gl.width, viewof gl.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Draw camera's perspective on the car in top 2/3 of view
gl.useProgram(cameraProgram);
gl.bindBuffer(gl.ARRAY_BUFFER, carVertexBuffer);
const position = gl.getAttribLocation(cameraProgram, "position");
gl.vertexAttribPointer(position, 3, gl.FLOAT, false, FLOAT_SIZE * 8, 0);
gl.viewport(
0,
(1 / 3) * viewof gl.height,
viewof gl.width,
(2 / 3) * viewof gl.height
);
gl.uniformMatrix4fv(
u_model,
false,
glm.mat4.fromYRotation(
glm.mat4.create(),
glm.glMatrix.toRadian(controls.model_yrot)
)
);
gl.uniformMatrix4fv(
u_view,
false,
glm.mat4.lookAt(
glm.mat4.create(),
[0, 0, controls.view_z],
[0, 0, 0],
[0, 1, 0]
)
);
gl.uniformMatrix4fv(
u_projection,
false,
glm.mat4.perspective(
glm.mat4.create(),
glm.glMatrix.toRadian(controls.fovy),
1.0,
controls.near,
controls.far
)
);
for (const group in geometry.indices) {
gl.uniform3fv(u_color, geometry.materials[group].albedo);
const [start, end] = geometry.indices[group];
gl.drawElements(
gl.TRIANGLES,
end - start,
gl.UNSIGNED_SHORT,
INDEX_SIZE * start
);
}
// Draw +x side perspective on the car in left lower 1/3 of view
gl.useProgram(sideProgram);
const position_side = gl.getAttribLocation(sideProgram, "position");
gl.vertexAttribPointer(position_side, 3, gl.FLOAT, false, FLOAT_SIZE * 8, 0);
gl.enableVertexAttribArray(position_side);
gl.viewport(0, 0, 0.5 * viewof gl.width, 0.5 * viewof gl.width);
gl.uniformMatrix4fv(
u_model_side,
false,
glm.mat4.fromYRotation(
glm.mat4.create(),
glm.glMatrix.toRadian(controls.model_yrot)
)
);
gl.uniformMatrix4fv(
u_view_side,
false,
glm.mat4.lookAt(glm.mat4.create(), [5, 0, -1], [0, 0, -1], [0, 1, 0])
);
gl.uniformMatrix4fv(
u_projection_side,
false,
glm.mat4.ortho(glm.mat4.create(), -8, 8, -8, 8, -1, 10)
);
for (const group in geometry.indices) {
gl.uniform4fv(u_color_side, geometry.materials[group].albedo.concat([1]));
const [start, end] = geometry.indices[group];
gl.drawElements(
gl.TRIANGLES,
end - start,
gl.UNSIGNED_SHORT,
INDEX_SIZE * start
);
}
// Now draw the bounding volume extents
gl.uniformMatrix4fv(u_model_side, false, glm.mat4.create());
gl.bindBuffer(gl.ARRAY_BUFFER, linesBuffer);
gl.vertexAttribPointer(position_side, 3, gl.FLOAT, false, FLOAT_SIZE * 3, 0);
gl.uniform4fv(u_color_side, [0, 0, 0, 1]);
gl.drawArrays(gl.LINE_LOOP, 0, 4);
gl.uniform4fv(u_color_side, [0.3, 0.3, 1, 1]);
gl.drawArrays(gl.LINE_STRIP, 3, 3);
// Draw +y side perspective on the car in right lower 1/3 of view
gl.useProgram(sideProgram);
gl.bindBuffer(gl.ARRAY_BUFFER, carVertexBuffer);
gl.vertexAttribPointer(position_side, 3, gl.FLOAT, false, FLOAT_SIZE * 8, 0);
gl.viewport(
0.5 * viewof gl.width,
0,
0.5 * viewof gl.width,
0.5 * viewof gl.width
);
gl.uniformMatrix4fv(
u_model_side,
false,
glm.mat4.fromYRotation(
glm.mat4.create(),
glm.glMatrix.toRadian(controls.model_yrot)
)
);
gl.uniformMatrix4fv(
u_view_side,
false,
glm.mat4.lookAt(glm.mat4.create(), [0, 5, -1], [0, 0, -1], [-1, 0, 0])
);
for (const group in geometry.indices) {
gl.uniform4fv(u_color_side, geometry.materials[group].albedo.concat([1]));
const [start, end] = geometry.indices[group];
gl.drawElements(
gl.TRIANGLES,
end - start,
gl.UNSIGNED_SHORT,
INDEX_SIZE * start
);
}
// Now draw the bounding volume extents
gl.uniformMatrix4fv(u_model_side, false, glm.mat4.create());
gl.bindBuffer(gl.ARRAY_BUFFER, linesBuffer);
gl.vertexAttribPointer(position_side, 3, gl.FLOAT, false, FLOAT_SIZE * 3, 0);
gl.uniform4fv(u_color_side, [0, 0, 0, 1]);
gl.drawArrays(gl.LINE_LOOP, 6, 4);
gl.uniform4fv(u_color_side, [0.3, 0.3, 1, 1]);
gl.drawArrays(gl.LINE_STRIP, 9, 3);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
