Custom Shader

ShaderMaterial API preview with animated uniforms.

▶ Run in browser

Tags: 3d

Demonstrates:

• ShaderMaterial with inline GLSL vertex and fragment source

• Per-frame uniform animation (time, amplitude, colour)

• Multiple objects with different shader parameters

• Standard Material objects alongside custom shaders

Controls: A / D - Orbit camera W / S - Zoom in / out 1 / 2 - Adjust wave amplitude Escape - Quit

Usage: uv run python examples/features/3d/custom_shader.py

Source

"""Custom Shader: ShaderMaterial API preview with animated uniforms.

Demonstrates:
  - ShaderMaterial with inline GLSL vertex and fragment source
  - Per-frame uniform animation (time, amplitude, colour)
  - Multiple objects with different shader parameters
  - Standard Material objects alongside custom shaders

Controls:
    A / D       - Orbit camera
    W / S       - Zoom in / out
    1 / 2       - Adjust wave amplitude
    Escape      - Quit

Usage:
    uv run python examples/features/3d/custom_shader.py
"""


import math
import sys

from simvx.core import (
    Camera3D,
    DirectionalLight3D,
    Input,
    InputMap,
    Key,
    Material,
    Mesh,
    MeshInstance3D,
    Node,
    Text2D,
)
from simvx.graphics import App, ShaderMaterial

# -- Inline GLSL shaders --
# Wave vertex shader: sine displacement along Y based on time + position
WAVE_VERT = """\
#version 450
layout(location = 0) in vec3 inPosition;
layout(location = 1) in vec3 inNormal;
layout(location = 2) in vec2 inUV;

layout(set = 0, binding = 0) uniform Camera {
    mat4 view;
    mat4 proj;
};

layout(std430, set = 1, binding = 0) readonly buffer Transforms {
    mat4 models[];
};

layout(location = 0) out vec3 fragWorldPos;
layout(location = 1) out vec3 fragNormal;
layout(location = 2) out vec2 fragUV;

layout(set = 2, binding = 0) uniform Params {
    float time;
    float amplitude;
};

void main() {
    mat4 model = models[gl_InstanceIndex];
    vec3 pos = inPosition;
    // Sine-wave vertex displacement
    pos.y += sin(pos.x * 3.0 + time * 2.0) * amplitude * 0.3;
    pos.y += cos(pos.z * 2.5 + time * 1.5) * amplitude * 0.2;

    vec4 worldPos = model * vec4(pos, 1.0);
    fragWorldPos = worldPos.xyz;
    fragNormal = mat3(model) * inNormal;
    fragUV = inUV;
    gl_Position = proj * view * worldPos;
}
"""

# Animated gradient fragment shader: colour shifts with time
WAVE_FRAG = """\
#version 450
layout(location = 0) in vec3 fragWorldPos;
layout(location = 1) in vec3 fragNormal;
layout(location = 2) in vec2 fragUV;

layout(location = 0) out vec4 outColour;

layout(set = 2, binding = 0) uniform Params {
    float time;
    float amplitude;
};

void main() {
    // Animated gradient based on world position and time
    float r = sin(fragWorldPos.x * 0.5 + time) * 0.5 + 0.5;
    float g = sin(fragWorldPos.z * 0.5 + time * 0.7 + 2.094) * 0.5 + 0.5;
    float b = sin(time * 0.5 + 4.189) * 0.5 + 0.5;
    // Simple diffuse lighting
    vec3 N = normalize(fragNormal);
    vec3 L = normalize(vec3(1.0, 2.0, 1.0));
    float diff = max(dot(N, L), 0.15);
    outColour = vec4(vec3(r, g, b) * diff, 1.0);
}
"""

# Colour-pulse fragment shader: single pulsing colour
PULSE_FRAG = """\
#version 450
layout(location = 0) in vec3 fragWorldPos;
layout(location = 1) in vec3 fragNormal;
layout(location = 2) in vec2 fragUV;

layout(location = 0) out vec4 outColour;

layout(set = 2, binding = 0) uniform Params {
    float time;
    float amplitude;
};

void main() {
    // Pulsing warm colour
    float pulse = sin(time * 3.0) * 0.5 + 0.5;
    vec3 colour = mix(vec3(0.9, 0.2, 0.1), vec3(1.0, 0.8, 0.2), pulse);
    // Simple diffuse
    vec3 N = normalize(fragNormal);
    vec3 L = normalize(vec3(-1.0, 2.0, 0.5));
    float diff = max(dot(N, L), 0.15);
    outColour = vec4(colour * diff * (0.8 + amplitude * 0.1), 1.0);
}
"""


class CustomShaderDemo(Node):
    def on_ready(self):
        InputMap.add_action("orbit_left", [Key.A])
        InputMap.add_action("orbit_right", [Key.D])
        InputMap.add_action("zoom_in", [Key.W])
        InputMap.add_action("zoom_out", [Key.S])
        InputMap.add_action("amp_up", [Key.KEY_1])
        InputMap.add_action("amp_down", [Key.KEY_2])
        InputMap.add_action("quit", [Key.ESCAPE])

        # Camera orbit state
        self._yaw = 30.0
        self._distance = 14.0
        self._pitch = 25.0

        self._cam = Camera3D(name="Camera", fov=60, near=0.1, far=100.0)
        self.add_child(self._cam)

        # Directional light
        sun = DirectionalLight3D(name="Sun", intensity=1.0)
        sun.look_at((-1.0, -2.0, -1.0))
        self.add_child(sun)

        # -- Wave shader material (gradient + vertex displacement) --
        self._wave_shader = ShaderMaterial(vertex_source=WAVE_VERT, fragment_source=WAVE_FRAG)
        self._wave_shader.set_uniform("time", 0.0)
        self._wave_shader.set_uniform("amplitude", 1.0)

        # -- Pulse shader material (colour pulse, shared vertex shader) --
        self._pulse_shader = ShaderMaterial(vertex_source=WAVE_VERT, fragment_source=PULSE_FRAG)
        self._pulse_shader.set_uniform("time", 0.0)
        self._pulse_shader.set_uniform("amplitude", 1.0)

        # Sphere with wave shader (left)
        wave_sphere = MeshInstance3D(
            name="WaveSphere",
            mesh=Mesh.sphere(radius=1.5, rings=32, segments=32),
            material=Material(colour=(1.0, 1.0, 1.0)),
            position=(-3.5, 1.5, 0.0),
        )
        wave_sphere.shader_material = self._wave_shader
        self.add_child(wave_sphere)

        # Cube with pulse shader (right)
        pulse_cube = MeshInstance3D(
            name="PulseCube",
            mesh=Mesh.cube(size=2.0),
            material=Material(colour=(1.0, 1.0, 1.0)),
            position=(3.5, 1.5, 0.0),
        )
        pulse_cube.shader_material = self._pulse_shader
        self.add_child(pulse_cube)

        # Ground plane (standard material, no custom shader)
        ground = MeshInstance3D(
            name="Ground",
            mesh=Mesh.cube(),
            material=Material(colour=(0.35, 0.4, 0.35), roughness=0.9),
            position=(0.0, -0.05, 0.0),
            scale=(20.0, 0.1, 20.0),
        )
        self.add_child(ground)

        # Reference cubes (standard materials) for comparison
        for i, colour in enumerate([(0.8, 0.2, 0.3), (0.2, 0.3, 0.8), (0.2, 0.8, 0.3)]):
            ref = MeshInstance3D(
                name=f"Ref{i}",
                mesh=Mesh.cube(),
                material=Material(colour=colour, roughness=0.4, metallic=0.2),
                position=(-3.0 + i * 3.0, 0.5, -4.0),
            )
            self.add_child(ref)

        # HUD
        self._hud = Text2D(name="HUD", text="", font_scale=1.2, position=(10.0, 10.0))
        self.add_child(self._hud)

        self._time = 0.0
        self._amplitude = 1.0
        self._update_camera()

    def on_update(self, dt):
        self._time += dt

        # Camera orbit
        if Input.is_action_pressed("orbit_left"):
            self._yaw += 60.0 * dt
        if Input.is_action_pressed("orbit_right"):
            self._yaw -= 60.0 * dt
        if Input.is_action_pressed("zoom_in"):
            self._distance = max(5.0, self._distance - 8.0 * dt)
        if Input.is_action_pressed("zoom_out"):
            self._distance = min(30.0, self._distance + 8.0 * dt)

        # Amplitude adjustment
        if Input.is_action_pressed("amp_up"):
            self._amplitude = min(3.0, self._amplitude + 1.5 * dt)
        if Input.is_action_pressed("amp_down"):
            self._amplitude = max(0.1, self._amplitude - 1.5 * dt)

        if Input.is_action_just_pressed("quit"):
            self.app.quit()
            return

        # Update shader uniforms each frame
        self._wave_shader.set_uniform("time", self._time)
        self._wave_shader.set_uniform("amplitude", self._amplitude)
        self._pulse_shader.set_uniform("time", self._time)
        self._pulse_shader.set_uniform("amplitude", self._amplitude)

        # Slowly rotate the shader objects
        for child in self.children:
            if child.name in ("WaveSphere", "PulseCube"):
                child.rotate_y(math.radians(30.0) * dt)

        self._update_camera()
        self._update_hud()

    def _update_camera(self):
        yaw_rad = math.radians(self._yaw)
        pitch_rad = math.radians(self._pitch)
        cp = math.cos(pitch_rad)
        x = self._distance * cp * math.sin(yaw_rad)
        y = self._distance * math.sin(pitch_rad)
        z = self._distance * cp * math.cos(yaw_rad)
        self._cam.position = (x, y, z)
        self._cam.look_at((0.0, 1.0, 0.0))

    def _update_hud(self):
        wave_info = f"Uniforms: time={self._time:.1f}  amplitude={self._amplitude:.2f}"
        if sys.platform == "emscripten":
            # Web runtime: shaders are transpiled to WGSL at export time, so the
            # desktop Vulkan compile flag never flips. Report the web reality.
            compiled = "pre-compiled (WGSL)"
        else:
            compiled = "yes" if self._wave_shader.is_compiled else "no"
        lines = [
            "Custom Shader Demo",
            f"  Wave shader compiled: {compiled}",
            f"  Pulse shader uniforms: {len(self._pulse_shader.uniforms)}",
            f"  {wave_info}",
            "[1/2] Amplitude  [A/D] Orbit  [W/S] Zoom  [Esc] Quit",
        ]
        self._hud.text = "\n".join(lines)


if __name__ == "__main__":
    app = App(title="Custom Shader Demo", width=1280, height=720)
    app.run(CustomShaderDemo())