← PluginsLooks
look-screen-passesOfficial · by ShadereraScreen looks
The frame in another medium, one WebGPU pass over a texture or a canvas: ascii, halftone, ordered dither, heat map, contours, pixelate, inverse, and a row glitch with pixel sorting.
Add it to a filmOr ask your agent
“Use the shaderera-plugins skill to add look-screen-passes to this film and wire it in, then run check and show me a still.”
- Type
- component · Looks
- Version
- 0.1.0 · published
- Licence
- MIT
- Built on
- No other plugins
- npm
- No packages
- Tags
- ascii, halftone, dither, heat map, contours, pixelate, glitch, pixel sort, post, shader, wgsl
READMElook-screen-passes
How to
use it.
Screen looks over any frame, as one WebGPU pass: ascii, halftone, dither, heat, contours, pixels, inverse, and a row glitch with pixel sorting.
import { createLooks, LOOKS } from './looks/looks.ts'// in open (a monospace face registered with host.io.font, for the ASCII glyphs)const looks = createLooks(host, { width: W, height: H, face: 'IBM Plex Mono' })// in render(t): your frame (a GPUTexture of host.gpu, or a Canvas2D canvas) in another mediumconst k = clock.sixteenthAt(t)const color = looks.apply(frame, { look: LOOKS[1 + (k % 7)], // a medium a 1/16 glitch: inDrop ? 0.3 : 0, grain: 0.03, seed: options.frame,})return [{ color, alpha: 'opaque' }]The input is a finished frame (display values 0–1): tone-map HDR first. A source texture needs TEXTURE_BINDING. Needs WebGPU (host.gpu), in the browser or in Node with webgpu.