Published
Edited
Jul 4, 2019
4 stars
md`# WebGL Sketches: image processing`
gl = {
const gl = canvas.getContext('webgl');
if (!gl) {
throw new Error('WebGL not supported by your browser');
}
return gl;
}
draw = (image) => {
// Clear the canvas
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.uniform2f(resolutionUniformLocation, canvas.width, canvas.height);
// Set the shader position attribute
gl.enableVertexAttribArray(positionAttributeLocation); // enable individual attributes
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position); // bind position buffer to ARRAY_BUFFER
const size = 2;
const type = gl.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset); // Binds the buffer currently bound to gl.ARRAY_BUFFER to a generic vertex attribute
setRectangle(gl, 0, 0, canvas.width, canvas.height); // The rectangle covers the whole space.
// texturing stuff
const texture = gl.createTexture();
{
// Create a texture.
gl.bindTexture(gl.TEXTURE_2D, texture);
// Set the parameters so we can render any size image.
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
// Upload the image into the texture.
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
}
gl.enableVertexAttribArray(texCoordLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textCoord);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
0.0, 1.0,
1.0, 0.0,
1.0, 1.0,
]), gl.STATIC_DRAW);
gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
// set the resolution
gl.uniform2f(resolutionLocation, gl.canvas.width, gl.canvas.height);
// set the size of the image
gl.uniform2f(textureSizeLocation, image.width, image.height);
// set kernel uniform
gl.uniform1fv(kernelLocation, kernel);
gl.uniform1f(kernelWeightLocation, computeKernelWeight(kernel));
const primitiveType = gl.TRIANGLES; // Draws a triangle for a group of three vertices
const count = 6; // Specify the number of indices (vertices) to be rendered
gl.drawArrays(primitiveType, offset, count); // Render primitives from array data
}
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.
