Custom Shader

ShaderMaterial with inline GLSL and animated uniforms.

▶ Run in browser

Tags: 3d

A ShaderMaterial draws a mesh with your own GLSL vertex and fragment shaders instead of the engine’s standard material. Build one from source strings (or vertex_path= / fragment_path= files) and hang it on a MeshInstance3D:

shader = ShaderMaterial(vertex_source=WAVE_VERT, fragment_source=WAVE_FRAG)
sphere = MeshInstance3D(mesh=Mesh.sphere(radius=1.5))
sphere.shader_material = shader

A shader reads the engine’s bindings: the camera’s view and proj at set 0, the per-instance model matrices at set 1 (indexed by gl_InstanceIndex), and the vertex position, normal and UV at locations 0 to 2. Your own uniforms live in one block at set 2, binding 0. Set them by name with shader.set_uniform("time", t); the type is inferred from the Python value, and setting them every frame animates the shader.

Both shaders here share one vertex shader that ripples the surface with a sine wave scaled by amplitude. The sphere’s fragment shader paints a gradient that drifts with time; the cube’s pulses between red and gold. The ground and the three cubes behind use the standard Material, to show the two side by side.

Controls: Drag / right stick - Orbit the camera Scroll / triggers - Zoom A / D - Orbit the camera W / S - Zoom in / out 1 / 2 - Raise / lower the wave amplitude

Source

"""Custom Shader: ShaderMaterial with inline GLSL and animated uniforms.

A ``ShaderMaterial`` draws a mesh with your own GLSL vertex and fragment shaders
instead of the engine's standard material. Build one from source strings (or
``vertex_path=`` / ``fragment_path=`` files) and hang it on a ``MeshInstance3D``:

    shader = ShaderMaterial(vertex_source=WAVE_VERT, fragment_source=WAVE_FRAG)
    sphere = MeshInstance3D(mesh=Mesh.sphere(radius=1.5))
    sphere.shader_material = shader

A shader reads the engine's bindings: the camera's ``view`` and ``proj`` at
set 0, the per-instance model matrices at set 1 (indexed by
``gl_InstanceIndex``), and the vertex position, normal and UV at locations 0 to 2.
Your own uniforms live in one block at set 2, binding 0. Set them by name with
``shader.set_uniform("time", t)``; the type is inferred from the Python value,
and setting them every frame animates the shader.

Both shaders here share one vertex shader that ripples the surface with a sine
wave scaled by ``amplitude``. The sphere's fragment shader paints a gradient that
drifts with ``time``; the cube's pulses between red and gold. The ground and the
three cubes behind use the standard ``Material``, to show the two side by side.

Controls:
    Drag / right stick     - Orbit the camera
    Scroll / triggers      - Zoom
    A / D                  - Orbit the camera
    W / S                  - Zoom in / out
    1 / 2                  - Raise / lower the wave amplitude
"""

import math

from simvx.core import (
    Anchor,
    Axis1D,
    CanvasLayer,
    DirectionalLight3D,
    Input,
    Key,
    Label,
    Material,
    Mesh,
    MeshInstance3D,
    Node,
    OrbitCamera3D,
    Property,
)
from simvx.graphics import App, ShaderMaterial

# The uniform block both stages declare; set_uniform fills it by member name.
PARAMS = """\
layout(set = 2, binding = 0) uniform Params {
    float time;
    float amplitude;
};
"""

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[];
};
"""
    + PARAMS
    + """
layout(location = 0) out vec3 fragWorldPos;
layout(location = 1) out vec3 fragNormal;

void main() {
    mat4 model = models[gl_InstanceIndex];
    vec3 pos = inPosition;
    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;
    gl_Position = proj * view * worldPos;
}
"""
)

WAVE_FRAG = (
    """\
#version 450
layout(location = 0) in vec3 fragWorldPos;
layout(location = 1) in vec3 fragNormal;
layout(location = 0) out vec4 outColour;
"""
    + PARAMS
    + """
void main() {
    vec3 colour = vec3(
        sin(fragWorldPos.x * 0.5 + time) * 0.5 + 0.5,
        sin(fragWorldPos.z * 0.5 + time * 0.7 + 2.094) * 0.5 + 0.5,
        sin(time * 0.5 + 4.189) * 0.5 + 0.5);
    float diffuse = max(dot(normalize(fragNormal), normalize(vec3(1.0, 2.0, 1.0))), 0.15);
    outColour = vec4(colour * diffuse, 1.0);
}
"""
)

PULSE_FRAG = (
    """\
#version 450
layout(location = 0) in vec3 fragWorldPos;
layout(location = 1) in vec3 fragNormal;
layout(location = 0) out vec4 outColour;
"""
    + PARAMS
    + """
void main() {
    vec3 colour = mix(vec3(0.9, 0.2, 0.1), vec3(1.0, 0.8, 0.2), sin(time * 3.0) * 0.5 + 0.5);
    float diffuse = max(dot(normalize(fragNormal), normalize(vec3(-1.0, 2.0, 0.5))), 0.15);
    outColour = vec4(colour * diffuse * (0.8 + amplitude * 0.1), 1.0);
}
"""
)


class CustomShaderDemo(Node):
    input_context = {
        "orbit": [Axis1D(low=Key.D, high=Key.A)],
        "zoom": [Axis1D(low=Key.S, high=Key.W)],
        "amplitude": [Axis1D(low=Key.KEY_2, high=Key.KEY_1)],
    }
    amplitude = Property(1.0, range=(0.1, 3.0))

    def on_ready(self):
        self.time = 0.0
        self.camera = self.add_child(
            OrbitCamera3D(
                pivot=(0.0, 1.0, 0.0),
                distance=14.0,
                yaw=math.radians(30),
                pitch=math.radians(-25),
                min_distance=5.0,
                max_distance=30.0,
            )
        )
        self.add_child(DirectionalLight3D(direction=(-1.0, -2.0, -1.0)))

        self.wave = ShaderMaterial(vertex_source=WAVE_VERT, fragment_source=WAVE_FRAG)
        self.pulse = ShaderMaterial(vertex_source=WAVE_VERT, fragment_source=PULSE_FRAG)
        self.sphere = self.add_child(MeshInstance3D(mesh=Mesh.sphere(radius=1.5), position=(-3.5, 1.5, 0.0)))
        self.sphere.shader_material = self.wave
        self.cube = self.add_child(MeshInstance3D(mesh=Mesh.box(2.0), position=(3.5, 1.5, 0.0)))
        self.cube.shader_material = self.pulse

        ground = Material(colour=(0.35, 0.4, 0.35), roughness=0.9)
        self.add_child(MeshInstance3D(mesh=Mesh.plane(20.0), material=ground))
        for i, colour in enumerate([(0.8, 0.2, 0.3), (0.2, 0.3, 0.8), (0.2, 0.8, 0.3)]):
            material = Material(colour=colour, roughness=0.4, metallic=0.2)
            self.add_child(MeshInstance3D(mesh=Mesh.box(), material=material, position=(-3.0 + i * 3.0, 0.5, -4.0)))

        hud = self.add_child(CanvasLayer())
        self.readout = hud.add_child(Label(anchor=Anchor.TOP_LEFT, inset=10, font_size=16))

        # Example help overlay: not part of the technique shown.
        help_text = "[1/2] amplitude   [A/D] or drag: orbit   [W/S] or scroll: zoom"
        hud.add_child(Label(help_text, anchor=Anchor.BOTTOM_LEFT, inset=10, font_size=14))

    def on_update(self, dt):
        self.time += dt
        self.amplitude += Input.value("amplitude") * 1.5 * dt
        self.camera.orbit(Input.value("orbit") * math.radians(60.0) * dt, 0.0)
        self.camera.zoom(Input.value("zoom") * 8.0 * dt)

        for shader in (self.wave, self.pulse):
            shader.set_uniform("time", self.time)
            shader.set_uniform("amplitude", self.amplitude)

        spin = math.radians(30.0) * dt
        self.sphere.rotate_y(spin)
        self.cube.rotate_y(spin)

        self.readout.text = f"Uniforms: time={self.time:.1f}  amplitude={self.amplitude:.2f}"


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