Simon Willison's Weblog: webgl

Animating Rick and Morty One Pixel at a Time

2025-02-04T20:53:29+00:00

Animating Rick and Morty One Pixel at a Time

Daniel Hooper says he spent 8 months working on the post, the culmination of which is an animation of Rick from Rick and Morty, implemented in 240 lines of GLSL - the OpenGL Shading Language which apparently has been directly supported by browsers for many years.

The result is a comprehensive GLSL tutorial, complete with interactive examples of each of the steps used to generate the final animation which you can tinker with directly on the page. It feels a bit like Logo!

Shaders work by running code for each pixel to return that pixel's color - in this case the color_for_pixel() function is wired up as the core logic of the shader.

Here's Daniel's code for the live shader editor he built for this post. It looks like this is the function that does the most important work:

function loadShader(shaderSource, shaderType) {
    const shader = gl.createShader(shaderType);
    gl.shaderSource(shader, shaderSource);
    gl.compileShader(shader);
    const compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if (!compiled) {
        const lastError = gl.getShaderInfoLog(shader);
        gl.deleteShader(shader);
        return lastError;
    }
    return shader;
}

Where gl is a canvas.getContext("webgl2") WebGL2RenderingContext object, described by MDN here.

Via lobste.rs

Tags: animation, canvas, javascript, webgl

Write shaders for the Vegas sphere

2023-12-01T18:45:27+00:00

Write shaders for the Vegas sphere

Alexandre Devaux built this phenomenal three.js / WebGL demo, which displays a rotating flyover of the Vegas Sphere and lets you directly edit shader code to render your own animations on it and see what they would look like. The via Hacker News thread includes dozens of examples of scripts you can paste in.

Via Hacker News

Tags: 3d, graphics, webgl

three.js examples: webgl_postprocessing_pixel

2022-12-01T21:57:44+00:00

three.js examples: webgl_postprocessing_pixel

Neat new example for three.js that uses a pixel-shader postprocessor to apply an isometric pixel-art feel to a 3D scene.

Via Hacker News

Tags: 3d, javascript, pixelart, webgl

deeplearn.js imagenet webcam demo

2017-12-05T23:15:15+00:00

deeplearn.js imagenet webcam demo

This is pretty astonishing... deeplearn.js is a Google Brain research tool that implements a GPU-accelerated neural network in browser-friendly JavaScript (using WebGL fragment shaders to run the algorithms). This demo hooks into your webcam and runs the SqueezeNet image recognition model against it, showing classification in real-time and providing a live-updating visualization of the different layers of the network.

Via Neural Networks in JavaScript with deeplearn.js

Tags: javascript, machine-learning, webgl