Award-winning creative focused on data-driven art and visualizations, trying to push the boundaries of the web one visual story at a time ✨
Public
Edited
Feb 7, 2023
Importers
1 star
loadShader
initShaderProgram
initPositionBuffer
setPositionAttribute
{
const canvas = DOM.canvas(width, height);
const gl = canvas.getContext("webgl");
// 1. load shaders & create program (load shader is called within create program)
const program = initShaderProgram(gl, vertexSource, fragmentSource);
// 2. supply data to GPU
const positions = [
1.0,
1.0, // right top
-1.0,
1.0, // left top
1.0,
-1.0, // right bottom
-1.0,
-1.0 // left bottom
];
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
const positionBuffer = initPositionBuffer(gl, positions);
// 3. render!
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0.0, 0.0, 0.0, 0.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
setPositionAttribute(gl, positionBuffer, positionAttributeLocation);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
return canvas;
}
{
const canvas = DOM.canvas(width, height);
const gl = canvas.getContext("webgl");
// initiate shader program
const program = initShaderProgram(
gl,
vertexConvertToClipSpaceSource,
fragmentSource
);
// supply data to GPU
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
const resolutionUniformLocation = gl.getUniformLocation(
program,
"u_resolution"
);
const size = 3;
const positions = _.chain(size)
.times((i) => [_.random(width), _.random(height)])
.flatten()
.values();
const positionBuffer = initPositionBuffer(gl, positions);
// draw
gl.viewport(0, 0, width, height);
gl.useProgram(program);
setPositionAttribute(gl, positionBuffer, positionAttributeLocation);
gl.uniform2f(resolutionUniformLocation, width, height);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, size);
return canvas;
}
{
const canvas = DOM.canvas(width, height);
const gl = canvas.getContext("webgl");
// setup
// 1. initialize program with shaders
const program = initShaderProgram(
gl,
vertexConvertToClipSpaceSource,
fragmentRandColorSource
);
// 2. supply data to GPU, start with getting locations
const locations = {
attributes: {
position: gl.getAttribLocation(program, "a_position")
},
uniforms: {
resolution: gl.getUniformLocation(program, "u_resolution"),
color: gl.getUniformLocation(program, "u_color")
}
};
// tell gl the screen size
gl.viewport(0, 0, width, height);
// tell gl the program
gl.useProgram(program);
// 3. draw
while (true) {
// (technically shouldn't do it this way but let's update the vertices and colors in js)
const size = 3;
const positions = _.times(size, (i) => [
_.random(width),
_.random(height)
]).flat();
const [r, g, b, a] = [Math.random(), Math.random(), Math.random(), 1];
// set those positions to ARRAY_BUFFER
const positionBuffer = initPositionBuffer(gl, positions);
// set attributes and uniforms
setPositionAttribute(gl, positionBuffer, locations.attributes.position);
gl.uniform2f(locations.uniforms.resolution, width, height);
gl.uniform4f(locations.uniforms.color, r, g, b, a);
// draw
gl.drawArrays(gl.TRIANGLES, 0, size);
yield Promises.delay(300, canvas); // animate every N ms
}
}
image = FileAttachment("Screenshot 2023-01-17 at 1.39.54 PM.png").image()
import {
loadShader,
initShaderProgram,
initPositionBuffer,
setPositionAttribute
} from "@sxywu/00-webgl-setup"
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.
