GPUCameraRenderer constructor
parameters used to create this GPUCameraRenderer
Camera used by this GPUCameraRenderer.
bind group handling the camera, lights and shadows BufferBinding.
Array of all the created Light.
An object defining the current lights binding parameters, including the maximum number of lights for each type and the structure used to create the associated BufferBinding.
An object defining the structure used to create the shadows BufferBinding.
The bindings used by the camera, lights and shadows bind group.
Options used to create this GPUCameraRenderer.
The type of the GPURenderer
Readonly uuidThe universal unique id of this GPURenderer
The GPUDeviceManager used to create this GPURenderer
HTMLCanvasElement onto everything is drawn
The WebGPU GPUCanvasContext | context used
Optional alphaSet the GPUCanvasContext | context alpha mode
The render pass used to render our result to screen
Additional render pass used by ShaderPass for compositing / post processing. Does not handle depth
The Scene used
Whether we should render our GPURenderer or not. If set to false, the render hooks onBeforeCommandEncoderCreation, onBeforeRenderScene, onAfterRenderScene and onAfterCommandEncoderSubmission won't be called, the scene graph will not be updated and the scene will not be rendered, completely pausing the renderer. Default to true.
Whether we should explicitly update our Scene or not. If set to false, the scene graph will not be updated and the scene will not be rendered. Default to true.
An array containing all our created ComputePass
An array containing all our created PingPongPlane
An array containing all our created ShaderPass
An array containing all our created RenderTarget
An array containing all our created meshes
An array containing all our created Texture
Pixel ratio to use for rendering
An object defining the width, height, top and left position of the canvas. Mainly used internally. If you need to get the renderer dimensions, use boundingRect instead.
DOMElement that will track our canvas container size
Allow to add callbacks to be executed at each render before the GPUCommandEncoder is created
Allow to add callbacks to be executed at each render after the GPUCommandEncoder has been created but before the Scene is rendered
Allow to add callbacks to be executed at each render after the GPUCommandEncoder has been created and after the Scene has been rendered
Allow to add callbacks to be executed at each render after the Scene has been rendered and the GPUCommandEncoder has been submitted
function assigned to the resizeObjects callback
function assigned to the resizeObjects callback
function assigned to the onAfterResize callback
function assigned to the onAfterResize callback
Get all the current lights that can cast shadows.
Get our DOM Element bounding rectangle. If there's no DOM Element (like when using an offscreen canvas for example), the rectBBox values are used.
Get our device
Get whether our GPUDeviceManager is ready (i.e. its adapter and device are set) its context is set and its size is set
Get our GPUDeviceManager production flag
Get all the created GPU buffers
Get the pipeline manager
Get all the rendered objects (i.e. compute passes, meshes, ping pong planes and shader passes) created by the GPUDeviceManager
Get all created bind group tracked by our GPUDeviceManager
Get all created DOMTexture tracked by our GPUDeviceManager
Get all this GPURenderer rendered objects (i.e. compute passes, meshes, ping pong planes and shader passes)
Called when the device is lost. Reset all our samplers, force all our scene objects and camera bind group to lose context.
Called when the device has been restored. Configure the context again, resize the render targets and textures, restore our rendered objects context, re-write our camera, lights and shadows bind group bindings.
Set the camera
parameters used to create the camera
Tell our GPUCameraRenderer to use this Camera. If a camera has already been set, reset the .camera | camera binding inputs view values and the meshes Camera object.
Update the projected meshes sizes and positions when the camera position changes
Set the .camera | camera buffer binding and camera bind group
Set the lights BufferBinding based on the lightsBindingParams.
Set or reset the BufferBinding for a given type of light.
Type of light for which to create the BufferBinding.
Called when a type of light has overflown its maximum capacity. Destroys the associated BufferBinding (and eventually the associated shadow BufferBinding), recreates the camera, lights and shadows bind group and reset all lights for this type of light.
Type of light that has overflown its maximum capacity.
Set the shadows BufferBinding based on the shadowsBindingsStruct.
Set or reset the associated shadow BufferBinding for a given type of light.
Type of light for which to create the associated shadow BufferBinding.
Create the camera, lights and shadows bind group buffers
Tell our camera, lights and shadows bind group to update.
Tell our .camera | camera buffer binding that we should update its bindings and update the bind group. Called each time the camera matrices change.
Get all objects (rendered meshes or compute passes) using a given bind group, including camera and lights bind group. Useful to know if a resource is used by multiple objects and if it is safe to destroy it or not.
bind group to check
Set our camera perspective matrix new parameters (fov, near plane and far plane)
parameters to use for the perspective
Resize our GPUCameraRenderer and resize our camera before anything else.
Set the camera bind group if needed and then call our GPURenderer render method
current GPUCommandEncoder
Destroy our GPUCameraRenderer
function assigned to the onBeforeRender callback
function assigned to the onAfterRender callback
Set the renderer RectBBox and canvas sizes
Set the renderer pixel ratio and resize it
new pixel ratio to use
Resize all tracked objects (textures, render passes, render targets, compute passes and meshes).
Resize the meshes.
Clamp to max WebGPU texture dimensions
width and height dimensions to clamp
Configure our context with the given options
Set our context if possible and set main render pass and scene
Set our main render pass that will be used to render the result of our draw commands back to the screen and our postprocessing pass that will be used for any additional postprocessing render passes.
Set our scene
Remove a Buffer from our buffers Map
Copy a source Buffer GPUBuffer into a destination Buffer GPUBuffer
Add a bind group to our bind groups array
bind group to add
Remove a bind group from our bind groups array
bind group to remove
Asynchronously create a GPURenderPipeline
GPURenderPipelineDescriptor | GPU render pipeline descriptor
Asynchronously create a GPUComputePipeline
GPUComputePipelineDescriptor | GPU compute pipeline descriptor
Add a DOMTexture to our textures array
DOMTexture to add
Remove a DOMTexture from our textures array
DOMTexture to remove
Upload a {@linkDOMTexture#texture | texture} to the GPU
DOMTexture class object with the texture to upload
Check if a Sampler has already been created with the same parameters. Use it if found, else create a new one and add it to the samplers array.
Remove a Sampler from our samplers array
Set different tasks queue managers to execute callbacks at different phases of our render call:
Get all objects (rendered meshes or compute passes) using a given DOMTexture or Texture. Useful to know if a resource is used by multiple objects and if it is safe to destroy it or not.
DOMTexture or Texture to check
Assign a callback function to _onBeforeRenderCallback
callback to run just before the render method will be executed
Optional commandEncoder: GPUCommandEncoderAssign a callback function to _onAfterRenderCallback
callback to run just after the render method has been executed
Optional commandEncoder: GPUCommandEncoderCallback to run after the GPURenderer has been resized but before the resizeObjects method has been executed (before the textures, render passes, render targets, compute passes and meshes are resized).
callback to execute.
Optional commandEncoder: GPUCommandEncoderCallback to run after the GPURenderer has been resized and after the resizeObjects method has been executed (after the textures, render passes, render targets, compute passes and meshes have been resized).
callback to execute.
Optional commandEncoder: GPUCommandEncoderRender a single ComputePass
current GPUCommandEncoder
Render a single Mesh
current GPUCommandEncoder
Mesh to render
Render an array of objects (either Meshes or ComputePass) once. This method won't call any of the renderer render hooks like onBeforeRender, onAfterRender
Array of Meshes or ComputePass to render
Force to clear a GPURenderer content to its .clearValue | clear value by rendering and empty pass.
Optional commandEncoder: GPUCommandEncoderCalled by the GPUDeviceManager render method before the GPUCommandEncoder has been created. Used to update the Scene matrix stack.
Called by the GPUDeviceManager render method after the GPUCommandEncoder has been created.
This renderer is meant to render meshes projected by a Camera. It therefore creates a Camera with its associated bindings as well as lights and shadows bindings used for lighting and their associated bind group.
Can be safely used to render compute passes and meshes if they do not need to be tied to the DOM.
Example