Aspire to be a full-stack developer.
md`# WebGL Instancing Template`
canvas = DOM.canvas(width, height);
{
draw()
}
function draw() {
// clear
gl.clearColor(1., 1., 1., 1.);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// use program
gl.useProgram(program);
// bind VAO
gl.bindVertexArray(vao)
{
// connect uniforms
gl.uniform2f(uniformLocations.resolution, width, height);
}
// draw
const offset = 0;
const vertexCount = 6;
const indexType = gl.UNSIGNED_SHORT;
const instanceCount = data.pos.length;
gl.drawElementsInstanced(gl.TRIANGLES, vertexCount, indexType, offset, instanceCount)
}
posBuffer = createBuffer(gl, data.pos.flat())
sizeBuffer = createBuffer(gl, data.size)
shapePosBuffer = createBuffer(gl, shapeData.positions)
attributeLocations = {
return {
position: gl.getAttribLocation(program, "in_position"),
centerPos: gl.getAttribLocation(program, "in_centerPos"),
size: gl.getAttribLocation(program, "in_size"),
}
}
uniformLocations = {
return {
resolution: gl.getUniformLocation(program, "u_resolution"),
}
}
program = createProgram(gl, vertexShaderSource, fragmentShaderSource)
gl = canvas.getContext('webgl2')
height = width * 0.75
width
fragmentShaderSource = `#version 300 es
precision highp float;
out vec4 fragColor;
void main() {
fragColor = vec4(0., 0., 0., 1.);
}
`
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.
