Sprites JavaScript Shader Media

The shader media: a stack of GLSL layers rendered into an image, each layer an effect over the layer below. The core module holds the model, the plain data the store keeps, the pure text work that assembles each layer's full GLSL, and the editor and its stage; each window, Tool, Layer, Layers, Parameters, Globals and Info, is a module of its own directly under Sprites.Media.Shader. Parameters passed to the shaders as uniforms have their own control per type. The code boxes use the generic Sprites.Ui.Code, and the Move tool is shared with the sprite editor. The stored format is set out under Storage. The stage folds the layers through the WebGL2 render driver Sprites.Shader and draws the result live; where WebGL2 is missing it shows a message and the windows and model still work.

Sprites.Media.Shader Modules

Sprites.Media.Shader.Params

A list of parameters and its Add button, and the Parameters window that holds the image wide set.

Sprites.Media.Shader.Layer

The Layer window: the selected layer's name, visible flag, code and its own parameters.

Sprites.Media.Shader.Globals

The Globals window: a code editor over the shared global GLSL added to every layer.

Sprites.Media.Shader.Info

The Info window: the image's pixel size and its layer count.

Sprites.Media.Shader.Tool

The tool infrastructure: the tool selector, the Windows buttons, and the Tools window.

Sprites.Media.Shader.Canvas

The stage: it folds the visible layers through the render driver into a chain of passes and draws the result, with pan and zoom, per-layer previews, the compile-error overlay and the thumbnail saver.

Shared parts

Sprites.Shader

The WebGL2 render driver, a graphics-library module. A render pass turns GLSL plus inputs into a reused texture buffer, and Render returns a reactive handle, so the layer chain composes like reactive code.

Sprites.Ui.Code

The generic code editor, a monospace textarea two-way bound to a string. The layer code and the globals both use it. It lives in the UI library, not the shader media, since any editor can hold source in it.

Sprites.Media.Sprite.Move

The Move tool window, shared with the sprite editor: pan and zoom the view, with a Reset that refits the image. The shader editor reuses it directly.