Tag: #webgl

WebGL’s texImage2D function expects pixels in bottom-to-top order, while browsers provide them top-to-bottom. UNPACK_FLIP_Y_WEBGL fixes this behavior. 2020-10-22

Using a varying to pass the texture coordinates to the fragment shader avoids the need to perform divisions in the fragment shader, improving performance. 2020-10-21

Creating a “floating head” effect using WebGL and the BodyPix machine learning model to segment the face from a webcam feed. 2020-10-06

A WebGL shader that uses BodyPix segmentation to set the alpha channel. 2020-09-24

A step-away background removal technique using WebGL, which compares both chrominance and luminance differences between the webcam feed and a captured background image to create a transparent mask. 2020-09-20

A WebGL fragment shader that implements the Sobel filter, a method for detecting edges in an image. A demo processes your webcam video stream. 2020-08-31

WebGL alpha-transparency may appear wrong because of premultiplied alpha. Fix it by setting premultipliedAlpha: false when creating the WebGL context. 2020-08-12

A green screen implementation in the browser using WebGL and chroma key. Includes a live demo. 2020-08-11

An green screen implementation in the browser using WebGL and a chroma key shader. Includes a demo that replaces sufficiently green pixels with magenta. 2020-08-10

A green screen implementation in the browser using WebGL and chroma key. Includes a live demo. 2020-08-09

A spatial SIR model for simulating epidemics, implemented using WebGL fragment shaders. Tracks susceptible, infected, and recovered populations in a 2D grid. 2020-02-23

A WebGL shader that combines diffuse and specular lighting, allowing the user to adjust the relative contribution of each using keyboard controls. Guest post by Luís Fonseca. 2017-10-28

Implements a 1024x1024 grid of Conway’s Game of Life using WebGL fragment shaders. 2017-10-23

A Conway’s Game of Life simulation implemented using WebGL fragment shaders, with rendering to texture and a Gosper Glider Gun initial state. 2017-10-22

Rendering an animated 3D cube in WebGL using a vertex shader, face color uniforms, and matrix transformations for rotating the cube. 2017-10-21

Generating dynamic normal-mapped ripple effects using WebGL, with the mouse position controlling the light source. 2017-10-20

GLSL varying allows vertex shader outputs to be passed to fragment shaders. A WebGL demo with colors interpolated between vertices. 2017-10-19

A WebGL clock face with moving hands that updates every second, using a vertex shader to convert polar coordinates to 3D positions. 2017-10-07