Class ComputePass

Used to create a ComputePass, i.e. run computations on the GPU.
A ComputePass is basically a wrapper around a ComputeMaterial that handles most of the process.

The default render behaviour of a ComputePass is to set its bind groups and then dispatch the workgroups based on the provided dispatchSize.
However, most of the time you'd want a slightly more complex behaviour. The useCustomRender hook lets you define a totally custom behaviour, but you'll have to set all the bind groups and dispatch the workgroups by yourself.

Example

// set our main GPUCurtains instance
const gpuCurtains = new GPUCurtains({
  container: '#canvas' // selector of our WebGPU canvas container
})

// set the GPU device
// note this is asynchronous
await gpuCurtains.setDevice()

// let's assume we are going to compute the positions of 100.000 particles
const nbParticles = 100_000

const computePass = new ComputePass(gpuCurtains, {
  label: 'My compute pass',
  shaders: {
    compute: {
      code: computeShaderCode, // assume it is a valid WGSL compute shader
    },
  },
  dispatchSize: Math.ceil(nbParticles / 64),
  storages: {
    particles: {
      access: 'read_write',
      struct: {
        position: {
          type: 'array<vec4f>',
          value: new Float32Array(nbParticles * 4),
        },
      },
    },
  },
})

Constructors

constructor

Properties

type uuid index renderer renderOrder options material _ready userData #autoRender _onReadyCallback _onBeforeRenderCallback _onRenderCallback _onAfterRenderCallback _onAfterResizeCallback

Accessors

ready domTextures textures uniforms storages

Methods

addToScene removeFromScene setMaterial useMaterial loseContext restoreContext createDOMTexture createTexture addTexture resize onReady onBeforeRender onRender onAfterRender useCustomRender onAfterResize onBeforeRenderPass onRenderPass onAfterRenderPass render copyBufferToResult getComputeResult remove destroy

Constructors

constructor

Properties

type

type: string

The type of the ComputePass

uuid

uuid: string

The universal unique id of the ComputePass

index

index: number

The index of the ComputePass, incremented each time a new one is instanced

renderer

renderer: Renderer

The Renderer used

renderOrder

renderOrder: number

Controls the order in which this ComputePass should be rendered by our Scene

options

options: ComputePassOptions

Options used to create this ComputePass

material

material: ComputeMaterial

ComputeMaterial used by this ComputePass

_ready

_ready: boolean

Flag indicating whether this ComputePass is ready to be rendered

userData

userData: Record<string, unknown>

Empty object to store any additional data or custom properties into your ComputePass

Private #autoRender

#autoRender: boolean = true

Whether this ComputePass should be added to our Scene to let it handle the rendering process automatically

_onReadyCallback

_onReadyCallback: (() => void) = ...

function assigned to the onReady callback

Type declaration

    • (): void

    • function assigned to the onReady callback

      Returns void

_onBeforeRenderCallback

_onBeforeRenderCallback: (() => void) = ...

function assigned to the onBeforeRender callback

Type declaration

_onRenderCallback

_onRenderCallback: (() => void) = ...

function assigned to the onRender callback

Type declaration

    • (): void

    • function assigned to the onRender callback

      Returns void

_onAfterRenderCallback

_onAfterRenderCallback: (() => void) = ...

function assigned to the onAfterRender callback

Type declaration

    • (): void

    • function assigned to the onAfterRender callback

      Returns void

_onAfterResizeCallback

_onAfterResizeCallback: (() => void) = ...

function assigned to the onAfterResize callback

Type declaration

    • (): void

    • function assigned to the onAfterResize callback

      Returns void

Accessors

ready

domTextures

textures

uniforms

storages

Methods

addToScene

removeFromScene

setMaterial

useMaterial

loseContext

  • loseContext(): void

  • Called when the device has been lost to prepare everything for restoration. Basically set all the GPUBuffer to null so they will be reset next time we try to render

    Returns void

restoreContext

createDOMTexture

createTexture

addTexture

resize

onReady

onBeforeRender

onRender

onAfterRender

useCustomRender

  • useCustomRender(callback): ComputePass

  • Callback used to run a custom render function instead of the default one.

    Parameters

    • callback: ((pass) => void)

      Your custom render function where you will have to set all the bind groups and dispatch the workgroups by yourself.

        • (pass): void

        • Parameters

          • pass: GPUComputePassEncoder

          Returns void

    Returns ComputePass

onAfterResize

onBeforeRenderPass

onRenderPass

onAfterRenderPass

render

copyBufferToResult

  • copyBufferToResult(commandEncoder): void

  • Copy the result of our read/write GPUBuffer into our result binding array

    Parameters

    • commandEncoder: GPUCommandEncoder

      current GPU command encoder

    Returns void

getComputeResult

  • getComputeResult(parameters): Promise<Float32Array>

  • Get the result GPU buffer content by binding and buffer element names

    Parameters

    • parameters: {
          bindingName?: string;
          bufferElementName?: string;
      }

      parameters used to get the result

      • Optional bindingName?: string

        binding name from which to get the result

      • Optional bufferElementName?: string

        optional buffer element (i.e. struct member) name if the result needs to be restrained to only one element

    Returns Promise<Float32Array>

    • the mapped content of the GPUBuffer as a Float32Array

    Async

remove

destroy

Settings

Member Visibility

Theme

On This Page