Gist 8b0da6e9acc76b7251547a0ad1dad5f1

100%

Gist 8b0da6e9acc76b7251547a0ad1dad5f1

✓ Published0🌍 Public

Last edited Oct 4, 2016

Created on Oct 9, 2016

This shader example demonstrates a technique for snapping pixel-art sprites to a fixed pixel grid in a 3D game engine. It shows how vertex positions are aligned to integer multiples of a tunable “pixels per unit” value prior to rendering, preventing visual distortion or shimmering when sprites are placed in world space. The code is written for Unity’s proprietary shader language and uses a Cginc/UnityCG-style vertex and fragment program, aligning object-space vertices before passing them through the standard MVP matrix. The shader samples a main texture and optionally an external alpha texture, tinting the result with a `_Color` property.

AI-generated description

Similar vizzes

Loading thumbnail…

Hello WebGL II

This example demonstrates vertex-color interpolation in WebGL by rendering a square with different colors bound to each corner. Using the canvas element’s WebGL context, it compiles separate vertex and fragment shaders as text. The shaders define a `varying` color variable that smoothly interpolates RGBA values across the shape. The code explicitly binds two vertex attribute arrays—positions and colors—and draws the square as a triangle fan, illustrating low-level GPU rendering without external libraries.

Mmbostock

63% match

Loading thumbnail…

Hello WebGL III

This example demonstrates WebGL’s ability to generate a gradient directly on the GPU, where the fragment shader colors each pixel based on its x and y coordinates relative to the canvas size. Using a minimal vertex shader and a full-screen triangle fan, it renders a smooth color transition without any external data. The code compiles and links shaders manually via the WebGL API, sets uniform and attribute locations, and calls `drawArrays` to produce the final image.

Mmbostock

61% match

Loading thumbnail…

shader gear

A real-time shader playground renders a series of WebGL fragment shaders as animated, full-screen visuals. The examples include smoothstep line plotting, mouse-interactive RGB gradients, distance-field circles, rotating polygon shapes with animated sides, and color-mixing loops—all driven by the uniform u_time. Shown side by side, they demonstrate how different GLSL functions shape geometry, color, and motion.

11wheel

59% match

Loading thumbnail…

SCRIPT-8

This example uses SCRIPT-8, a JavaScript fantasy console for creating retro-style games and visualizations. It renders a colorful, animated scene directly to the canvas using the console’s built-in graphics API. The visualization draws sprites and map data from JSON files, with procedural animation driven by the `requestAnimationFrame` loop. SCRIPT-8’s `pixel` and `sprite` functions handle the drawing, while its input and sound APIs are loaded but unused, focusing purely on visual output. The cassette’s empty chains, songs, and phrases files confirm a minimal, self-contained demonstration of the platform’s rendering capabilities.

FFrozenfire92

57% match

Loading thumbnail…

Maiden Webgl Work

This WebGL example demonstrates real-time interactive 2D shape manipulation, showing a rectangle that users can translate, rotate, and scale through a dat.GUI control panel. The code builds a custom vertex and fragment shader pair that handles position transformation, converting pixel coordinates to clip space, while WebGL renders the colored rectangle on a canvas. It references WebGL Fundamentals' scaling lesson and uses the webgl-utils helper library to compile shaders, with all geometry defined as raw vertex data in a buffer.

11Cr18Ni9

56% match

Loading thumbnail…

Gist 56494ad7dada033af61cc1c9c3d87776

This example presents a full-screen, animated canvas of randomly colored square pixels that continuously redraws itself. It shows how a simple generative pattern can create a dynamic, shifting mosaic across the entire browser window. The code uses the Canvas 2D API with `fillRect` and `requestAnimationFrame` to refresh the display, while each frame assigns new random RGB values to every pixel block. The visualization responds to window resizing by updating the canvas dimensions, and it is rendered inside a draggable, resizable widget container.

HHypercubed

56% match

Loading thumbnail…

Skybox

A stereographic projection of a skybox texture maps the six faces of a cube onto a navigable 2D view, rendered as an animated WebGL canvas. The fragment shader inversely projects each pixel to the cube’s surface, applying rotation and translation uniforms to simulate camera movement. Texture images (xpos.png, ypos.png, etc.) are loaded via a D3 queue and bound as a cube map, while vertex and fragment shaders are compiled with the experimental WebGL context API.

Mmbostock

55% match

Loading thumbnail…

regl-demo

A WebGL triangle rendered with regl animates its background color in a smooth, time-based loop. The vertex shader derives the triangle’s fragment color from its position attributes, producing a gradient across the shape. The example uses `regl.frame` for continuous rendering and `regl.clear` to update the background, demonstrating basic GLSL shader setup and attribute passing with the regl API.

11wheel

55% match