Course notebooks for CSE 4/6413: Introduction to Computer Graphics as Mississippi State University. Course notes, assignments, and similar.
indices_2tris = new Uint8Array([
0,
1,
2, // triangle 1
1,
0,
3
])
geometry_2tris_indexed = new Float32Array(
[
0,
0,
1,
0,
0, // x0,y0 r0,g0,b0
1,
0,
0,
1,
0, // x1,y1 r1,g1,b1
0.5,
1,
0,
0,
1, // x2,y2 r2,g2,b2
0.5,
-1,
0,
0,
1
] // x3,y3, r3,g3,b3
)
vertexBuffer_2tris_indexex = {
// Create and bind the appropriate buffer type
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// Load the buffer data
gl.bufferData(gl.ARRAY_BUFFER, geometry_2tris_indexed, gl.STATIC_DRAW);
// Some clean-up for Observable: Make sure buffer deleted when done.
invalidation.then(() => gl.deleteBuffer(buffer));
return buffer;
}
indexBuffer_2tris_indexex = {
// Create and bind the appropriate buffer type
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
// Load the buffer data
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices_2tris, gl.STATIC_DRAW);
// Some clean-up for Observable: Make sure buffer deleted when done.
invalidation.then(() => gl.deleteBuffer(buffer));
return buffer;
}
{
// Make sure we are updating the correct buffer
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer_2tris_indexex);
// Enable the two attributes (vertex & color)
gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(1);
// Bind the array parts to the attributes
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, FLOAT_SIZE * 5, 0);
gl.vertexAttribPointer(1, 3, gl.FLOAT, false, FLOAT_SIZE * 5, FLOAT_SIZE * 2);
return md`Updating the buffers for indexed rendering.`;
}
function draw() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer_2tris_indexex);
gl.bindAttribLocation(program, 0, "position");
gl.bindAttribLocation(program, 1, "color");
gl.drawElements(
gl.TRIANGLES,
6,
gl.UNSIGNED_BYTE,
Uint8Array.BYTES_PER_ELEMENT * 0
);
}
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.
