Shader

Component that represents output of a user provided WGSL shader. All children components are available as textures inside the shader code. For more information on using shaders in Smelter, please visit Shaders documentation.

Note

To use this component, you need to first register the shader with matching shader_id using register shader request.

Usage

Register a shader with an id example_shader:

Register shader

example_shader.wgsl

struct VertexInput {
    @location(0) position: vec3<f32>,
    @location(1) tex_coords: vec2<f32>,
}

struct VertexOutput {
    @builtin(position) position: vec4<f32>,
    @location(0) tex_coords: vec2<f32>,
}

@vertex
fn vs_main(input: VertexInput) -> VertexOutput {
    var output: VertexOutput;

    output.position = vec4(input.position, 1.0);
    output.tex_coords = input.tex_coords;

    return output;
}

struct BaseShaderParameters {
    plane_id: i32,
    time: f32,
    output_resolution: vec2<u32>,
    texture_count: u32,
}

@group(0) @binding(0) var textures: binding_array<texture_2d<f32>, 16>;
@group(2) @binding(0) var sampler_: sampler;

var<push_constant> base_params: BaseShaderParameters;

@fragment
fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
  // Return transparent frame in case of different input video count
  if (base_params.texture_count != 1u) {
      return vec4(0.0, 0.0, 0.0, 0.0);
  }

  let pi = 3.14159;
  let effect_radius = abs(sin(base_params.time) / 2.0);
  let effect_angle = 2.0 * pi * abs(sin(base_params.time) / 2.0);

  let center = vec2(0.5, 0.5);
  let uv = input.tex_coords - center;

  let len = length(uv);
  let angle = atan2(uv.y, uv.x) + effect_angle * smoothstep(effect_radius, 0.0, len);
  let coords = vec2(len * cos(angle), len * sin(angle)) + center;

  return textureSample(textures[0], sampler_, coords);
}

POST: /api/shader/example_shader/register
Content-Type: application/json

{
  "source": "<SHADER CODE FROM ./example_shader.wgsl>"
}

Update output with a new scene that is using a shader example_shader:

Update request

POST: /api/output/example_output/update
Content-Type: application/json

{
  "video": {
    "root": {
      "type": "shader",
      "shader_id": "example_shader",
      "children": [
        {
          "type": "input_stream",
          "input_id": "example_input"
        }
      ],
      "resolution": { "width": 1920, "height": 1080 }
    }
  }
}

Example output

Reference

Type definitions

type Shader = {
  id?: string;
  children?: Component[];
  shader_id: string;
  shader_param?: ShaderParam;
  resolution: {
    width: u32;
    height: u32;
  };
}

Properties

id

ID of a component.

• Type: string

---

children

A single child component to be transformed.

• Type: Component[]

---

shader_id

ID of a shader. It identifies a shader registered using a register shader method.

• Type: string

---

shaderParam

Object that will be serialized into a struct and passed to the shader as @group(1) @binding(0) var<uniform>. ShaderParam object must match the structure defined in a shader source code.

• Type: ShaderParam

Note

Right now, we don’t handle memory layout automatically. To get the correct memory alignment, you might need to add some extra fields as padding. Visit the WGSL documentation for more details.

---

resolution

Resolution of the texture where shader will be executed.

• Type: { width: u32; height: u32;}

ShaderParam

type ShaderParam =
  | { type: "f32"; value: f32; }
  | { type: "u32"; value: u32; }
  | { type: "i32"; value: i32; }
  | { type: "list"; value: ShaderParam[]; }
  | {
      type: "struct";
      value: ShaderParamStructField[];
    }

ShaderParamStructField

type ShaderParamStructField =
  | { field_name: string; type: "f32"; value: f32; }
  | { field_name: string; type: "u32"; value: u32; }
  | { field_name: string; type: "i32"; value: i32; }
  | {
      field_name: string;
      type: "list";
      value: ShaderParam[];
    }
  | {
      field_name: string;
      type: "struct";
      value: ShaderParamStructField[];
    }