Computer Graphics & Visualization @ufrj.br
canvas = html`<canvas width=640 height=480>`
gl = canvas.getContext("webgl")
program = createProgram(gl, shaders.vertex, shaders.fragment)
view = mat4.lookAt([],[0,0,6],[0,0,0],[0,1,0])
projection = mat4.perspective ([], 40 * Math.PI/180, 1.333, 0.01, 100)
drawFrame = {
// Clear color and depth buffer
{
gl.clearColor(1.0, 0.0, 0.0, 1.0); // Opaque black
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
gl.clearDepth(1.0); // Clear everything
gl.enable(gl.DEPTH_TEST); // Enable depth testing
gl.depthFunc(gl.LEQUAL); // Near things obscure far things
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
}
// Load shader program
gl.useProgram(program);
// Tell WebGL how to pull out the positions from the position
// buffer into the vertexPosition attribute
{
const numComponents = 3;
const type = gl.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(
attribLocations.vertexPosition,
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(attribLocations.vertexPosition);
}
// Tell WebGL how to pull out the colors from the color buffer
// into the vertexColor attribute.
{
const numComponents = 4;
const type = gl.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.vertexAttribPointer(
attribLocations.vertexColor,
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(attribLocations.vertexColor);
}
// Set the viewport to the whole canvas
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
for (let frame = 0; ;frame++) {
// Set the model matrix
let xangle = frame*0.5*Math.PI/180;
let yangle = frame*0.7*Math.PI/180;
let model = mat4.rotateY([], mat4.fromXRotation([],xangle), yangle);
// Set the shader uniforms
{
gl.uniformMatrix4fv(
uniformLocations.projection,
false,
projection);
gl.uniformMatrix4fv(
uniformLocations.modelview,
false,
mat4.mul([],view,model));
}
// Draw the frame
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
const vertexCount = 36;
const type = gl.UNSIGNED_SHORT;
const offset = 0;
gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
yield frame;
}
}
vec3 = glmatrix.vec3
mat4 = glmatrix.mat4
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.
