mirror of
https://github.com/visgl/luma.gl.git
synced 2025-12-08 17:36:19 +00:00
91 lines
3.3 KiB
Markdown
91 lines
3.3 KiB
Markdown
# RenderPass
|
|
|
|
:::caution
|
|
The luma.gl v9 API is currently in [public review](/docs/public-review) and may be subject to change.
|
|
:::
|
|
|
|
|
|
## Usage
|
|
|
|
To draw to the screen in luma.gl, simply create a `RenderPass` by calling
|
|
`device.beginRenderPass()` and start rendering. When done rendering, call
|
|
`renderPass.end()`
|
|
|
|
```typescript
|
|
// A renderpass without parameters uses the default framebuffer of the device's default CanvasContext
|
|
const renderPass = device.beginRenderPass();
|
|
model.draw();
|
|
renderPass.end();
|
|
device.submit();
|
|
```
|
|
|
|
`device.canvasContext.getDefaultFramebuffer()` returns a special framebuffer that lets you render to screen (into the swap chain). This framebuffer is used by default when a `device.beginRenderPass()` is called without providing a `framebuffer`, equivalent to:
|
|
|
|
```typescript
|
|
const renderPass = device.beginRenderPass({framebuffer: device.canvasContext.getDefaultFramebuffer()});
|
|
...
|
|
```
|
|
|
|
## Clearing the screen
|
|
|
|
`Framebuffer` attachments are cleared by default when a RenderPass starts. More control is provided via the `clearColor` parameter, setting this will clear the attachments to the corresponding color. The default clear color is fully transparent `[0, 0, 0, 0]`. Clearing can also be disabled by setting `loadOp='load'`.
|
|
|
|
```typescript
|
|
const renderPass = device.beginRenderPass({clearColor: [0, 0, 0, 1]});
|
|
model.draw();
|
|
renderPass.end();
|
|
device.submit();
|
|
```
|
|
|
|
Depth and stencil buffers are also cleared to default values:
|
|
|
|
```typescript
|
|
const renderPass = device.beginRenderPass({
|
|
clearColor: [0, 0, 0, 1],
|
|
depthClearValue: 1,
|
|
stencilClearValue: 0
|
|
});
|
|
renderPass.end();
|
|
device.submit();
|
|
```
|
|
|
|
## Types
|
|
|
|
### `RenderPassProps`
|
|
|
|
| Property | Type | Default | Description |
|
|
| --------------- | -------------------- | -------------- | --------------------------------------------------------- |
|
|
| `framebuffer?` | `Framebuffer` | | Provides render target textures and depth/stencil texture |
|
|
| `parameters?` | `Parameters` | | GPU pipeline parameters |
|
|
| `clearColor?` | `number[]`, `'load'` | `[0, 0, 0, 0]` | |
|
|
| `clearDepth?` | `number`, `'load'` | `1` | |
|
|
| `clearStencil?` | `number`, `'load'` | `0` | |
|
|
|
|
## Members
|
|
|
|
- `device`: `Device` - holds a reference to the `Device` that created this `RenderPass`.
|
|
- `handle`: `unknown` - holds the underlying WebGL or WebGPU shader object
|
|
- `props`: `RenderPassProps` - holds a copy of the `RenderPassProps` used to create this `RenderPass`.
|
|
|
|
## Methods
|
|
|
|
### `constructor()`
|
|
|
|
`RenderPass` is an abstract class and cannot be instantiated directly. Create with `device.beginRenderPass(...)`.
|
|
|
|
### `endPass(): void`
|
|
|
|
Must be called after all draw calls have been completed to guarantee rendering. Frees up any GPU resources associated with this render pass.
|
|
|
|
### `pushDebugGroup(groupLabel: string): void`
|
|
|
|
Adds a debug group (implementation dependent).
|
|
|
|
### `popDebugGroup(): void`
|
|
|
|
Removes a debug group (implementation dependent).
|
|
|
|
### `insertDebugMarker(markerLabel: string): void`
|
|
|
|
Adds a debug marker (implementation dependent).
|