Course notebooks for CSE 4/6413: Introduction to Computer Graphics as Mississippi State University. Course notes, assignments, and similar.
{
const FLOAT_SIZE = Float32Array.BYTES_PER_ELEMENT;
// Make the appropriate vertex buffer active
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// Bind and activate the positions: First 3 elements in our 8 element chunk
const position = gl.getAttribLocation(program, "position");
gl.vertexAttribPointer(position, 3, gl.FLOAT, false, FLOAT_SIZE * 8, 0);
gl.enableVertexAttribArray(position);
// Bind and activate the normals: Second 3 element in our 8 element chunk
const normal = gl.getAttribLocation(program, "normal");
gl.vertexAttribPointer(
normal,
3,
gl.FLOAT,
false,
FLOAT_SIZE * 8,
FLOAT_SIZE * 3
);
gl.enableVertexAttribArray(normal);
}
function draw() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.uniformMatrix4fv(u_view, false, view);
gl.uniformMatrix4fv(u_projection, false, projection);
gl.uniform1f(u_ambient, controls.ambient == "on");
gl.uniform1f(u_diffuse, controls.diffuse == "on");
gl.uniform1f(u_specular, controls.specular == "on");
gl.uniform3fv(u_specular_color, hexToRGB(controls.specular_color));
gl.uniform1f(u_specular_exp, controls.specular_exp);
gl.uniform3fv(u_light_color, hexToRGB(controls.light_color));
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
);
}
}
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.
