Shader

Shader applies transformation defined via WGSL shader on its children. Learn more.

note

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

Shader

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

Properties

• id - Id of a component.

• children - List of component's children.

• shader_id - Id of a shader. It identifies a shader registered using a register shader request.

• shader_param - Object that will be serialized into a struct and passed inside the shader as:

  @group(1) @binding(0) var<uniform>
  note

  This object's structure must match the structure defined in a shader source code. Currently, we do not handle memory layout automatically. To achieve the correct memory alignment, you might need to pad your data with additional fields. See WGSL documentation for more details.

• resolution - Resolution of a texture where shader will be executed.

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[];
    }