@tmrw-realityos/charm / Exports / WebGPURenderContext

Class: WebGPURenderContext

This class allows to have some global container for all the shared resources like shaders, pipelines, and bindgroups. It also adds methods that simplify using WebGPU, for storing small uniform buffers, create bindGroups or create Samplers.

To send small blocks of data (< 256bytes) to a shader you can use the storeInGenericBuffer:

//store inside a global shared buffer
const offset = renderContext.storeInGenericBuffer(mydata.buffer);

//during rendering call this method to bind the global uniforms bindgroup
renderContext.bindGenericBufferOffset( renderpass, bind_group_index, offset );

Keep in mind that this buffer must be uploaded to the GPU before the rendering calls are sent to the command buffer. This is already done in the FrameGraph execute method, but if you are not using the frame graph you must call manually to:

renderContext.updateGenericBuffer();

Table of contents

Constructors

• constructor

Properties

• bindGroupCache
• bindGroupLayoutCache
• computeCache
• computePipelineCache
• currentGenericDataOffset
• device
• genericBuffer
• genericData
• genericReadOnlyStorageBufferBindGroup
• genericStagingBuffer
• genericStagingData
• genericStorageBufferBindGroup
• genericUniformBufferBindGroup
• renderPipelineCache
• renderPipelineDescriptorCache
• samplerCache
• shaderCache

Accessors

• renderPipelineDescriptorCacheValues

Methods

• applyShaderToTexture
• bindGenericReadOnlyStorageBufferOffset
• bindGenericStorageBufferOffset
• bindGenericUniformBuffer
• bindGenericUniformBufferOffset
• clearCache
• createSimpleBindGroup
• createSimpleBindGroupLayout
• createSimpleRenderPassDescriptor
• destroy
• getQuadBindGroup
• getSampler
• getTextureSamplerDescriptor
• readGenericBuffer
• resetGenericBufferOffset
• storeInGenericBuffer
• updateGenericBuffer

Constructors

constructor

• new WebGPURenderContext(device): WebGPURenderContext

Parameters

Name	Type
device	GPUDevice

Returns

WebGPURenderContext

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:60

Properties

bindGroupCache

• bindGroupCache: Map<number, GPUBindGroup>

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:38

---

bindGroupLayoutCache

• bindGroupLayoutCache: Map<string, GPUBindGroupLayout>

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:39

---

computeCache

• computeCache: Cache<GPUShaderModule>

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:48

---

computePipelineCache

• computePipelineCache: Cache<GPUComputePipeline>

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:43

---

currentGenericDataOffset

• currentGenericDataOffset: number

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:58

---

device

• device: GPUDevice

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:30

---

genericBuffer

• genericBuffer: WebGPUBuffer

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:52

---

genericData

• genericData: Uint8Array

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:51

---

genericReadOnlyStorageBufferBindGroup

• genericReadOnlyStorageBufferBindGroup: GPUBindGroup

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:57

---

genericStagingBuffer

• genericStagingBuffer: WebGPUBuffer

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:54

---

genericStagingData

• genericStagingData: Uint8Array

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:53

---

genericStorageBufferBindGroup

• genericStorageBufferBindGroup: GPUBindGroup

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:56

---

genericUniformBufferBindGroup

• genericUniformBufferBindGroup: GPUBindGroup

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:55

---

renderPipelineCache

• renderPipelineCache: Cache<GPURenderPipeline>

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:41

---

renderPipelineDescriptorCache

• renderPipelineDescriptorCache: Cache<GPURenderPipelineDescriptor>

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:45

---

samplerCache

• samplerCache: Map<number, GPUSampler>

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:40

---

shaderCache

• shaderCache: Cache<WebGPUShader>

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:47

Accessors

renderPipelineDescriptorCacheValues

• get renderPipelineDescriptorCacheValues(): GPURenderPipelineDescriptor[]

Returns

GPURenderPipelineDescriptor[]

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:114

Methods

applyShaderToTexture

▸ applyShaderToTexture(encoder, input, destination, shader, data): void

Parameters

Name	Type
encoder	GPUCommandEncoder
input	GPUTexture
destination	GPUTexture
shader	WebGPUShader
data	ArrayBuffer

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:470

---

bindGenericReadOnlyStorageBufferOffset

▸ bindGenericReadOnlyStorageBufferOffset(passEncoder, index, offset): void

Parameters

Name	Type
passEncoder	GPURenderPassEncoder | GPUComputePassEncoder
index	number
offset	number

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:175

---

bindGenericStorageBufferOffset

▸ bindGenericStorageBufferOffset(passEncoder, index, offset): void

Parameters

Name	Type
passEncoder	GPURenderPassEncoder | GPUComputePassEncoder
index	number
offset	number

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:165

---

bindGenericUniformBuffer

▸ bindGenericUniformBuffer(renderPass, index, data): void

Parameters

Name	Type
renderPass	GPURenderPassEncoder
index	number
data	ArrayBuffer

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:156

---

bindGenericUniformBufferOffset

▸ bindGenericUniformBufferOffset(passEncoder, index, offset): void

Parameters

Name	Type
passEncoder	GPURenderPassEncoder | GPUComputePassEncoder
index	number
offset	number

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:146

---

clearCache

▸ clearCache(): void

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:103

---

createSimpleBindGroup

▸ createSimpleBindGroup(layout, items, label): GPUBindGroup

Allows to create a bindgroup very easy (single string) and fast (cached descriptor). The layout could be an existing GPUBindGroupLayout or a string describing it, using syntax described in the function createSimpleBindGroupLayout.

Parameters

Name	Type
layout	string | GPUBindGroupLayout
items	(null | WebGPUBuffer | GPUSampler | GPUTextureView | GPUBufferBinding | WebGPUTexture)[]
label	string

Returns

GPUBindGroup

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:394

---

createSimpleBindGroupLayout

▸ createSimpleBindGroupLayout(types_key, label): GPUBindGroupLayout

Helper to build BindGroupLayout using a very simple interface: You must pass a string that contain a description of usage of every bindGroupItem in the right order, separated by commas. The properties of a single item are separated by '|' character: Example: "vs|uniform,fs|texture" means two items, one uniform for the vertex shader and one texture for the fragment shader.

Here is a list of all available keywords:

• vs: used in a vertex shader
• fs: used in a fragment shader
• cs: used in a compute shader
• uniform: used as uniform in a shader
• read: read only buffer
• store: storage buffer
• texture: texture 2D
• texture_multisampled: texture multisampled
• cube: texture Cubemap
• sampler: texture sampler
• dynamic: uniform buffer with dynamic offset All this keywords can be mixed to define all properties of every item. This string also applies as a hash for reusing bindgroup layouts. Use this method in conjunction with createSimpleBindGroup.

Parameters

Name	Type
types_key	string
label	string

Returns

GPUBindGroupLayout

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:304

---

createSimpleRenderPassDescriptor

▸ createSimpleRenderPassDescriptor(targetTexture): GPURenderPassDescriptor

An easy way to create a RenderPassDescriptor given a texture

Parameters

Name	Type
targetTexture	GPUTexture

Returns

GPURenderPassDescriptor

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:437

---

destroy

▸ destroy(): void

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:99

---

getQuadBindGroup

▸ getQuadBindGroup(input): GPUBindGroup

Helper when you want to render a screen quad to apply some fx to a texture. It creates a BindGroup with the texture, sampler and generic uniform together.

Parameters

Name	Type
input	GPUTexture

Returns

GPUBindGroup

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:457

---

getSampler

▸ getSampler(textureSampler): GPUSampler

Creates a GPUSampler from a TextureSampler object, caching the result.

Parameters

Name	Type
textureSampler	TextureSampler

Returns

GPUSampler

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:229

---

getTextureSamplerDescriptor

▸ getTextureSamplerDescriptor(textureSampler): GPUSamplerDescriptor

Transforms a TextureSampler object into a GPUSamplerDescriptor object. It caches the result to go faster.

Parameters

Name	Type
textureSampler	TextureSampler

Returns

GPUSamplerDescriptor

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:243

---

readGenericBuffer

▸ readGenericBuffer(syncStagingbuffer?, offset?, size?): Promise<Uint8Array>

Readback from the generic buffer. The generic stagingbuffer must be unmapped prior to calling this method.

Parameters

Name	Type	Default value	Description
syncStagingbuffer	boolean	true	Copy genericBuffer to genericStagingbuffer. Set to false if the staging buffer is already synchronized.
offset?	number	undefined	Byte offset to read from
size?	number	undefined	Byte size to read

Returns

Promise<Uint8Array>

Readback data

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:194

---

resetGenericBufferOffset

▸ resetGenericBufferOffset(): void

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:224

---

storeInGenericBuffer

▸ storeInGenericBuffer(data): number

Use this function when you want to send a small chunk of data to your shader during rendering for uniforms. Instead of creating a buffer, it will store your data in a global buffer, and return an offset that you can use to bind it later.

Parameters

Name	Type
data	ArrayBuffer

Returns

number

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:122

---

updateGenericBuffer

▸ updateGenericBuffer(): void

Returns

void

Defined in

packages/charm/src/graphics/WebGPU/WebGPURenderContext.ts:140