Post Shader 2D

your own GLSL over a pure-2D scene.

▶ Run in browser

Tags: 2d post-process shader glsl environment

A PostProcessEffect is a fullscreen fragment shader added to a WorldEnvironment. It works on a 2D scene exactly as on a 3D one: the finished frame arrives as a texture and the shader decides what reaches the screen. You write only main(); the engine declares frag_colour and these uniforms for you:

• u_colour_tex: the finished frame

• u_resolution: the target size in pixels

• u_time: elapsed seconds

A uniform of your own needs no declaration either: set_uniform declares it for you, with its GLSL type taken from the first value (a float gives float, a 3-tuple gives vec3, and a bare 0 gives int, so write 0.0). Setting it again every frame animates it:

effect = PostProcessEffect(RIPPLE_SHADER, order=10)
effect.set_uniform("u_strength", 0.02)
env.add_post_process(effect)

The shader here pushes a ripple out from the centre of the screen, adds a sideways scanline wobble and darkens alternate pixel rows. Its strength, u_strength, breathes slowly from on_update. The straight grid lines make the warp easy to see. effect.enabled switches the pass off without removing it.

The labels sit on a CanvasLayer, which draws after the post chain, so the text stays sharp while the world beneath it warps.

Controls: E or a click / tap toggles the effect.

Source

# /// simvx
# tags = ["2d", "post-process", "shader", "glsl", "environment"]
# ///
"""Post Shader 2D: your own GLSL over a pure-2D scene.

A ``PostProcessEffect`` is a fullscreen fragment shader added to a
``WorldEnvironment``. It works on a 2D scene exactly as on a 3D one: the
finished frame arrives as a texture and the shader decides what reaches the
screen. You write only ``main()``; the engine declares ``frag_colour`` and
these uniforms for you:

- ``u_colour_tex``: the finished frame
- ``u_resolution``: the target size in pixels
- ``u_time``: elapsed seconds

A uniform of your own needs no declaration either: ``set_uniform`` declares
it for you, with its GLSL type taken from the first value (a float gives
``float``, a 3-tuple gives ``vec3``, and a bare ``0`` gives ``int``, so write
``0.0``). Setting it again every frame animates it:

    effect = PostProcessEffect(RIPPLE_SHADER, order=10)
    effect.set_uniform("u_strength", 0.02)
    env.add_post_process(effect)

The shader here pushes a ripple out from the centre of the screen, adds a
sideways scanline wobble and darkens alternate pixel rows. Its strength,
``u_strength``, breathes slowly from ``on_update``. The straight grid lines
make the warp easy to see. ``effect.enabled`` switches the pass off without
removing it.

The labels sit on a ``CanvasLayer``, which draws after the post chain, so the
text stays sharp while the world beneath it warps.

Controls: E or a click / tap toggles the effect.
"""

import math

from simvx.core import Anchor, CanvasLayer, Key, Label, Node2D, Pointer, PostProcessEffect, WorldEnvironment, on_input
from simvx.graphics import App

RIPPLE_SHADER = """
void main() {
    vec2 uv = gl_FragCoord.xy / u_resolution;
    float aspect = u_resolution.x / u_resolution.y;
    vec2 centre = (uv - 0.5) * vec2(aspect, 1.0);
    float dist = length(centre);
    vec2 dir = dist > 1e-4 ? centre / dist : vec2(0.0);

    // Concentric ripple radiating from the middle, fading with distance.
    vec2 offset = dir * sin(dist * 48.0 - u_time * 5.0) * u_strength * exp(-dist * 2.2);
    offset.x /= aspect;

    // Scanline warp: a horizontal wobble that varies down the screen.
    vec2 warped = uv + offset;
    warped.x += sin(warped.y * 28.0 + u_time * 6.0) * u_strength * 0.35;

    float scan = 0.88 + 0.12 * sin(warped.y * u_resolution.y * 3.14159);
    frag_colour = vec4(texture(u_colour_tex, warped).rgb * scan, 1.0);
}
"""

GRID = 48  # background grid pitch in pixels
GRID_COLOUR = (0.25, 0.3, 0.4, 1.0)
POLYGONS = (  # (sides, orbit radius, orbit speed, spin speed, colour)
    (3, 150.0, 0.9, 1.7, (1.0, 0.55, 0.25, 1.0)),
    (5, 95.0, -1.3, -1.1, (0.35, 0.85, 0.45, 1.0)),
    (6, 200.0, 0.55, 0.8, (0.4, 0.6, 1.0, 1.0)),
)


class PostShader2D(Node2D):
    dynamic = True  # the polygons move every frame
    input_context = {"toggle_effect": [Key.E, Pointer.PRIMARY]}

    def on_ready(self):
        self.effect = PostProcessEffect(RIPPLE_SHADER, order=10)
        self.effect.set_uniform("u_strength", 0.02)
        self.add_child(WorldEnvironment()).add_post_process(self.effect)

        hud = self.add_child(CanvasLayer())
        self.status = hud.add_child(Label(anchor=Anchor.TOP_LEFT, inset=12, font_size=24))
        hud.add_child(Label("E / click / tap: toggle effect", anchor=Anchor.BOTTOM_LEFT, inset=12))

    @on_input("toggle_effect")
    def _toggle_effect(self, _event):
        self.effect.enabled = not self.effect.enabled

    def on_update(self, dt):
        self.effect.set_uniform("u_strength", 0.02 + 0.012 * math.sin(self.tree.now * 0.8))
        self.status.text = f"Post shader: {'ON' if self.effect.enabled else 'OFF'}"

    def on_draw(self, renderer):
        w, h = self.viewport_size
        for x in range(0, int(w) + 1, GRID):
            renderer.line((x, 0), (x, h), stroke=GRID_COLOUR)
        for y in range(0, int(h) + 1, GRID):
            renderer.line((0, y), (w, y), stroke=GRID_COLOUR)

        t = self.tree.now
        for sides, orbit, orbit_speed, spin_speed, colour in POLYGONS:
            cx = w / 2 + math.cos(t * orbit_speed) * orbit
            cy = h / 2 + math.sin(t * orbit_speed) * orbit
            angles = [t * spin_speed + i * math.tau / sides for i in range(sides)]
            verts = [(cx + math.cos(a) * 46.0, cy + math.sin(a) * 46.0) for a in angles]
            renderer.polygon(verts, fill=colour)
            renderer.polygon(verts, stroke=(1.0, 1.0, 1.0, 0.9))

        renderer.circle((w / 2, h / 2), 10.0, fill=(1.0, 0.9, 0.5, 1.0))


if __name__ == "__main__":
    App(title="Post Shader 2D", width=960, height=540).run(PostShader2D())