Computer Graphics & Visualization @ufrj.br
canvas = html`<canvas width=600 height=400>`
gl = canvas.getContext("webgl")
program = {
// create program
let program = gl.createProgram();
// compile vertex shader
let vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSrc);
gl.compileShader(vertexShader);
// compile fragment shader
let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSrc);
gl.compileShader(fragmentShader);
// link compiled shaders into program
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
return program
}
vertices = new Float32Array([-1, 1, 1, 0, 0, -1])
vertices
vertexBuffer = gl.createBuffer()
loadVertices = {
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
}
vertexLocation = gl.getAttribLocation(program, 'position')
triangleColor = [1, 0, 0, 1]
colorLocation = gl.getUniformLocation(program, 'color')
drawFrame = {
loadVertices; // Reactive dependency!
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Opaque black
gl.clear(gl.COLOR_BUFFER_BIT);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(vertexLocation, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vertexLocation);
gl.uniform4fv(colorLocation, triangleColor);
gl.drawArrays(gl.TRIANGLES, 0, 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.
