Quick start

Install

git submodule add https://github.com/typeshade/typeshade vendor/shader-dsl

The package ships TypeScript source, so your build needs a toolchain that compiles it. This is the fragment stage of the gradient example, 10 lines as authored in gradient-pass.ts:

const fsGradient = fn(
  'fs_gradient',
  { vo: VsOut },
  (p) => {
    const t = p.vo.uv.y.add(U.field.mix_bias)
    const rgb = mix(U.field.bottom.rgb, U.field.top.rgb, t)
    return vec4(rgb, f32(1))
  },
  { stage: 'fragment', retAttr: '@location(0)' },
)

It emits this WGSL entry point:

@fragment
fn fs_gradient(vo: VsOut) -> @location(0) vec4<f32> {
  return vec4<f32>(mix(u.bottom.rgb, u.top.rgb, (vo.uv.y + u.mix_bias)), 1.0);
}

The GLSL ES 3.00 stage for the same function, and the uniform layout reflect() recovers for it, are on the examples page. The authoring guide covers the rest of the surface.

Edit this page