GPUCameraRenderer constructor
parameters used to create this GPUCameraRenderer
Camera used by this GPUCameraRenderer.
bind group handling the camera, lights and shadows BufferBinding.
Additional RenderPassViewport from the Camera to use if any. Will be contained inside the viewport if any.
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.
An array of BindGroup containing a single BufferBinding with the cube face index onto which we'll want to draw for PointShadow depth cube map. Will be swapped for each face render passes by the PointShadow.
Options used to create this GPUCameraRenderer.
If our scene contains transmissive objects, we need to handle the rendering of transmissive meshes. To do so, we'll need a new screen pass RenderPassEntry and a Texture onto which we'll write the content of the non transmissive objects main buffer rendered objects.
OptionalpassEntry?: RenderPassEntryThe new screen pass RenderPassEntry where we'll draw our transmissive objects.
Optionaltexture?: TextureThe Texture holding the content of all the non transmissive objects we've already drawn onto the main screen buffer.
The Sampler used to sample the background output texture.
The type of the GPURenderer.
ReadonlyuuidThe universal unique id of this GPURenderer.
The GPUDeviceManager used to create this GPURenderer.
HTMLCanvasElement onto everything is drawn.
The WebGPU context used.
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.
A Map containing all the RenderPass handled by this renderer.
An array containing all our created RenderTarget.
An array containing all our created meshes.
An array containing all our created Texture.
A Map containing all the EnvironmentMap handled by this renderer.
A Map containing all the RenderBundle handled by this renderer.
A Map containing all the TargetsAnimationsManager handled by this renderer.
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.
Current RenderPassViewport to use to set the renderPass and postProcessingPass RenderPass viewport if any.
Current scissor RectBBox to use to set the renderPass and postProcessingPass RenderPass scissorRect if any.
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 onResize 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 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 all the created indirect 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 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 our main render pass and our transmissionTarget sampler.
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 cameraViewport if needed (i.e. if the camera use a different aspect ratio than the renderer).
Resize the camera, first by updating the cameraViewport and then resetting the camera projection.
Set the cameraViewport (that should be contained within the renderer viewport if any) and update the renderPass and postProcessingPass viewport values.
RenderPassViewport settings to use if any.
RenderPassViewport settings to use if any. Can be set to null to cancel the viewport.
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.
The light index that caused overflow. Will be used to reset the new max light count.
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.
Update the camera and lights BindGroup.
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
Create the transmissionTarget Texture and RenderPassEntry if not already created.
Destroy the transmissionTarget Texture and RenderPassEntry if already created.
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, renderPass and postProcessingPass scissorRect values. Beware that if you use a scissorRect, you should resize it yourself so it does not overflow the canvas in the onResize callback to avoid issues.
RectBBox settings to use. Can be set to null to cancel the scissorRect.
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 initialize the renderPass and postProcessingPass.
Set our scene.
Remove a Buffer from our buffers Map.
Copy a source Buffer GPUBuffer into a destination Buffer GPUBuffer.
Parameters used to realize the copy.
Source Buffer.
OptionaldstBuffer?: BufferDestination Buffer. Will create a new one if none provided.
OptionalcommandEncoder?: GPUCommandEncoderGPUCommandEncoder to use for the copy. Will create a new one and submit the command buffer if none provided.
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.
Create a GPUBindGroupLayout.
Create a GPUBindGroup.
Create a GPUShaderModule.
Create a GPUPipelineLayout.
Create a GPURenderPipeline.
Asynchronously create a GPURenderPipeline.
Create a GPUComputePipeline.
Asynchronously create a GPUComputePipeline.
Create a GPUTexture.
MediaTexture or DOMTexture containing the GPUTexture to upload.
Index of the source to upload (for cube maps). Default to 0.
Generate mips on the GPU using our GPUDeviceManager.
Texture, MediaTexture or DOMTexture for which to generate the mips.
optional GPUCommandEncoder to use if we're already in the middle of a command encoding process.
Import a GPUExternalTexture.
HTMLVideoElement or VideoFrame source.
Optional label of the texture.
Copy a GPUTexture to a Texture using a GPUCommandEncoder. Automatically generate mips after copy if the Texture needs it.
GPUTexture source to copy from.
Texture destination to copy onto.
GPUCommandEncoder to use for copy operation.
Copy a Texture to a Texture using a GPUCommandEncoder. Automatically generate mips after copy if the destination Texture needs it.
Texture source to copy from.
Texture destination to copy onto.
GPUCommandEncoder to use for copy operation.
Copy a Texture to a GPUTexture using a GPUCommandEncoder.
Texture source to copy from.
GPUTexture destination to copy onto.
GPUCommandEncoder to use for copy operation.
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:
Set all objects arrays and Map that we'll keep track of.
Get all objects (rendered meshes or compute passes) using a given DOMTexture, MediaTexture or Texture. Useful to know if a resource is used by multiple objects and if it is safe to destroy it or not.
DOMTexture, MediaTexture or Texture to check.
Assign a callback function to _onBeforeRenderCallback.
callback to run just before the render method will be executed.
Assign a callback function to _onAfterRenderCallback.
callback to run just after the render method has been executed.
Callback 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.
Callback 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.
Render a single ComputePass.
current GPUCommandEncoder to use.
ComputePass to run.
Whether to copy all writable binding buffers that need it.
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.
OptionalcommandEncoder: GPUCommandEncoderGPUCommandEncoder to use if any.
RenderPass to clear. Default to renderPass.
Called 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