Use gpu-curtains as a 3D engine

gpu-curtains can be used as a genuine 3D engine. Here are a few examples on how to render a basic rotating cube.

HTML & CSS setup

HTML

<body>
  <div id="canvas"></div>
</body>

CSS

body {
  margin: 0;
  height: 100%;
}

#canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

Basic rotating cube scene

Using the library default shaders

import { GPUDeviceManager, GPUCameraRenderer, Mesh, BoxGeometry } from 'gpu-curtains'

// first, we need a WebGPU device, that's what GPUDeviceManager is for
const gpuDeviceManager = new GPUDeviceManager({
  label: 'Custom device manager',
})

// we need to wait for the device to be created
await gpuDeviceManager.init()

// then we can create a camera renderer
const renderer = new GPUCameraRenderer({
  label: 'GPU Camera Renderer',
  deviceManager: gpuDeviceManager, // the renderer is going to use our WebGPU device to create its context
  container: document.querySelector('#canvas'),
})

// render a mesh using its normals as shading colors
// which are gpu-curtains fallback default shaders
const mesh = new Mesh(renderer, {
  label: 'Cube mesh',
  geometry: new BoxGeometry()
})

// rotate it along Y axis
mesh.onBeforeRender(() => {
  mesh.rotation.y += 0.01
})

Using custom shaders

import { GPUDeviceManager, GPUCameraRenderer, Mesh, BoxGeometry, Vec3 } from 'gpu-curtains'

// first, we need a WebGPU device, that's what GPUDeviceManager is for
const gpuDeviceManager = new GPUDeviceManager({
  label: 'Custom device manager',
})

// we need to wait for the device to be created
await gpuDeviceManager.init()

// then we can create a camera renderer
const renderer = new GPUCameraRenderer({
  label: 'GPU Camera Renderer',
  deviceManager: gpuDeviceManager, // the renderer is going to use our WebGPU device to create its context
  container: document.querySelector('#canvas'),
})

const vs = /* wgsl */ `
struct VSOutput {
  @builtin(position) position: vec4f,
  @location(0) uv: vec2f,
  @location(1) normal: vec3f,
};

@vertex fn main(
  attributes: Attributes,
) -> VSOutput {
  var vsOutput: VSOutput;

  // gpu-curtains built-in WGSL functions
  // to get output position and normals in world space
  vsOutput.position = getOutputPosition(attributes.position);
  vsOutput.normal = getWorldNormal(attributes.normal);
  vsOutput.uv = attributes.uv;
  
  return vsOutput;
}`

const fs = /* wgsl */ `
struct VSOutput {
  @builtin(position) position: vec4f,
  @location(0) uv: vec2f,
  @location(1) normal: vec3f,
};

@fragment fn main(fsInput: VSOutput) -> @location(0) vec4f {
  // simple directional lighting model
  let N: vec3f = normalize(fsInput.normal);
  let L: vec3f = normalize(lighting.lightDirection);
  let NDotL: f32 = max(dot(N, L), 0.0);
  
  let outColor: vec3f = (shading.color * lighting.ambient) + (shading.color * NDotL);
  
  return vec4(outColor, 1.0);
}`

// render a mesh with a basic lighting shading
const mesh = new Mesh(renderer, {
  label: 'Cube mesh',
  geometry: new BoxGeometry(),
  shaders: {
    vertex: {
      code: vs,
    },
    fragment: {
      code: fs,
    },
  },
  uniforms: {
    shading: {
      visibility: ['fragment'],
      struct: {
        color: {
          type: 'vec3f',
          value: new Vec3(1, 0, 1),
        },
      },
    },
    lighting: {
      visibility: ['fragment'],
      struct: {
        ambient: {
          type: 'vec3f',
          value: new Vec3(0.03),
        },
        lightDirection: {
          type: 'vec3f',
          value: new Vec3(10),
        },
        lightColor: {
          type: 'vec3f',
          value: new Vec3(1),
        },
      },
    },
  },
})

// rotate it along Y axis
mesh.onBeforeRender(() => {
  mesh.rotation.y += 0.01
})

Using built-in lights and lambert shading

import {
  GPUDeviceManager,
  GPUCameraRenderer,
  AmbientLight,
  DirectionalLight,
  getLambert,
  Mesh,
  BoxGeometry,
  Vec3
} from 'gpu-curtains'

// first, we need a WebGPU device, that's what GPUDeviceManager is for
const gpuDeviceManager = new GPUDeviceManager({
  label: 'Custom device manager',
})

// we need to wait for the device to be created
await gpuDeviceManager.init()

// then we can create a camera renderer
const renderer = new GPUCameraRenderer({
  label: 'GPU Camera Renderer',
  deviceManager: gpuDeviceManager, // the renderer is going to use our WebGPU device to create its context
  container: document.querySelector('#canvas'),
})

// add an ambient light
const ambientLight = new AmbientLight(renderer, {
  intensity: 0.03
})

// add a directional light
const directionalLight = new DirectionalLight(renderer, {
  position: new Vec3(10)
})

const fs = /* wgsl */ `
struct VSOutput {
  @builtin(position) position: vec4f,
  @location(0) uv: vec2f,
  @location(1) normal: vec3f,
  @location(2) worldPosition: vec3f,
};

// lambert shading helpers
${getLambert()}

@fragment fn main(fsInput: VSOutput) -> @location(0) vec4f {
  var outColor: vec3f = shading.color;
  
  let normal = normalize(fsInput.normal);
  let worldPosition = fsInput.worldPosition;
  
  // lambert
  outColor = getLambert(normal, worldPosition, outColor);
  
  return vec4(outColor, 1.0);
}`

// render the mesh
const mesh = new Mesh(renderer, {
  label: 'Cube mesh',
  geometry: new BoxGeometry(),
  shaders: {
    fragment: {
      code: fs,
    },
  },
  uniforms: {
    shading: {
      visibility: ['fragment'],
      struct: {
        color: {
          type: 'vec3f',
          value: new Vec3(1, 0, 1),
        },
      },
    },
  },
})

// rotate it along Y axis
mesh.onBeforeRender(() => {
  mesh.rotation.y += 0.01
})

More examples

Have a look at all the possibilities in the example section.

Use gpu-curtains as a 3D engine

HTML & CSS setup

HTML

CSS

Basic rotating cube scene

Using the library default shaders

Using custom shaders

Using built-in lights and lambert shading

More examples

Settings

On This Page