canvas = html`<canvas id='canvas00' width=${width} height=${height}>`
// anything between the { } will be executed as JS code
// the return value of the { } block will be stored in the 'gl' variable
gl = {
let gl;
gl = canvas.getContext("webgl2");
if (!gl) {
throw "Could not get WebGL context!";
}
return gl;
}
// this tells WebGL which color to use to clear the screen
// we use floating-point values [0, 1] to define the color in RGBA
{
//Aggie Blue
gl.clearColor(0.0, 0.15, 0.32, 1.0);
}
// this tells WebGL which area of the canvas to render to
// we set it to cover the whole area from 0 to width and 0 to height
// gl.clear clears the screen to the color we defined previously
// Note that clear takes an argument which tells WebGL which buffer to clear
// The canvas holds multiple image buffers like color, depth, and many more
// Depending on how you render images, different buffers might be filled with data
// Since we have not rendered anything yet and just want to clear to a color, all we need to do is clear the color buffer
{
gl.viewport(0, 0, width, height);
gl.clear(gl.COLOR_BUFFER_BIT);
}
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.
