@tmrw-realityos/charm • Docs

---

@tmrw-realityos/charm / 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.

Check the tutorial about dynamicBuffer to see how you can pass uniforms to your shaders easily without having to create a buffer.

See

WebGPUDynamicUniforms

Constructors

new WebGPURenderContext()

new WebGPURenderContext(device): WebGPURenderContext

Parameters

• device: GPUDevice

Returns

WebGPURenderContext

Defined in

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

Properties

bindGroupCache

bindGroupCache: Map<number, GPUBindGroup>

Defined in

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

---

bindGroupLayoutCache

bindGroupLayoutCache: Map<string, GPUBindGroupLayout>

Defined in

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

---

buffersPendingUpdate

buffersPendingUpdate: WebGPUBuffer[] = []

Defined in

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

---

computeCache

computeCache: Cache<GPUShaderModule>

Defined in

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

---

computePipelineCache

computePipelineCache: Cache<GPUComputePipeline>

Defined in

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

---

currentRenderBuffer?

optional currentRenderBuffer: GPUTexture

Defined in

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

---

currentRenderPass?

optional currentRenderPass: GPURenderPassEncoder

Defined in

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

---

device

device: GPUDevice

Defined in

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

---

dynUniforms

dynUniforms: WebGPUDynamicUniforms

Defined in

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

---

globalsUniformBuffer?

optional globalsUniformBuffer: WebGPUBuffer

Defined in

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

---

mipmapGenerator

readonly mipmapGenerator: WebGPUMipmapGenerator

Defined in

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

---

renderPipelineCache

renderPipelineCache: Cache<GPURenderPipeline>

Defined in

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

---

renderPipelineDescriptorCache

renderPipelineDescriptorCache: Cache<GPURenderPipelineDescriptor>

Defined in

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

---

samplerCache

samplerCache: Map<number, GPUSampler>

Defined in

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

---

shaderCache

shaderCache: Cache<WebGPUShader>

Defined in

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

---

textureBindGroupsCache

textureBindGroupsCache: WeakMap<GPUTexture, GPUBindGroup>

Defined in

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

---

textureSampler

textureSampler: TextureSampler

Defined in

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

---

texturesCache

texturesCache: Cache<WebGPUTexture>

Defined in

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

---

current

static current: WebGPURenderContext

Defined in

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

Accessors

renderPipelineDescriptorCacheValues

get renderPipelineDescriptorCacheValues(): GPURenderPipelineDescriptor[]

Returns

GPURenderPipelineDescriptor[]

Defined in

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

Methods

addBufferToPending()

addBufferToPending(buffer): void

Used to avoid writing to the same buffer over a over when you just want to modify it once with the final data

Parameters

• buffer: WebGPUBuffer

Returns

void

Defined in

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

---

applyShaderToTexture()

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

Parameters

• encoder: GPUCommandEncoder

• input: GPUTexture

• destination: GPUTexture

• shader: WebGPUShader

• data: ArrayBuffer

Returns

void

Defined in

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

---

clearCache()

clearCache(): void

Returns

void

Defined in

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

---

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

• layout: string | GPUBindGroupLayout

• items: (null | WebGPUBuffer | GPUSampler | GPUTextureView | GPUBufferBinding | WebGPUTexture)[]

• label: string

Returns

GPUBindGroup

Defined in

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

---

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
• texture_depth: depth texture
• texture_depth_multisampled: depth 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

• types_key: string

• label: string

Returns

GPUBindGroupLayout

Defined in

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

---

createSimpleRenderPassDescriptor()

createSimpleRenderPassDescriptor(targetTexture): GPURenderPassDescriptor

An easy way to create a RenderPassDescriptor given a texture

Parameters

• targetTexture: GPUTexture

Returns

GPURenderPassDescriptor

Defined in

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

---

destroy()

destroy(): void

Returns

void

Defined in

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

---

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

• input: GPUTexture

Returns

GPUBindGroup

Defined in

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

---

getSampler()

getSampler(textureSampler): GPUSampler

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

Parameters

• textureSampler: TextureSampler

Returns

GPUSampler

Defined in

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

---

getTexture()

getTexture(name, url?): WebGPUTexture

Retrieves a texture, and if doesnt exist, it tryes to load it.

Parameters

• name: string

• url?: string

Returns

WebGPUTexture

Defined in

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

---

getTextureBindGroup()

getTextureBindGroup(input): GPUBindGroup

Parameters

• input: GPUTexture

Returns

GPUBindGroup

Defined in

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

---

getTextureSamplerDescriptor()

getTextureSamplerDescriptor(textureSampler): GPUSamplerDescriptor

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

Parameters

• textureSampler: TextureSampler

Returns

GPUSamplerDescriptor

Defined in

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

---

loadTexture()

loadTexture(url, sRGB): WebGPUTexture

Parameters

• url: string

• sRGB: boolean = true

Returns

WebGPUTexture

Defined in

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

---

registerTexture()

registerTexture(name, texture): void

Parameters

• name: string

• texture: WebGPUTexture

Returns

void

Defined in

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

---

reset()

reset(): void

called to prepare for next frame, it sets up some offset to 0

Returns

void

Defined in

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

---

setAsCurrent()

setAsCurrent(): void

Makes it the current one so it can be fetched from other places using WebGPURenderContext.current.

Returns

void

Defined in

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

---

updatePendingBuffers()

updatePendingBuffers(): void

Called at the end of the framegraph

Returns

void

Defined in

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