Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ The most flexible approach is to implement completely custom render passes that

## Overview

This approach does not use `CameraFrame` at all. Instead, you create your own render passes and assign them directly to the camera's `renderPasses` array. This is ideal when you need complete control or want to implement a custom post-processing pipeline.
This approach does not use `CameraFrame` at all. Instead, you create your own render passes and assign them directly to the camera's `framePasses` array. This is ideal when you need complete control or want to implement a custom post-processing pipeline.

## Example: Simple Tint Render Pass

Expand Down Expand Up @@ -79,7 +79,7 @@ const tintPass = new RenderPassTint(device, renderTarget.colorBuffer);
tintPass.init(camera.renderTarget);

// Assign passes to the camera
camera.renderPasses = [scenePass, tintPass];
camera.framePasses = [scenePass, tintPass];
```

## Multi-Pass Example
Expand Down Expand Up @@ -115,7 +115,7 @@ const blurVPass = new RenderPassBlurVertical(device, rt2.colorBuffer);
blurVPass.init(camera.renderTarget); // Final output

// Set the pass chain
camera.renderPasses = [scenePass, blurHPass, blurVPass];
camera.framePasses = [scenePass, blurHPass, blurVPass];
```

## Resources
Expand Down
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
---
title: Extending RenderPassCameraFrame Class
title: Extending FramePassCameraFrame Class
---

For more advanced customization, you can extend the `RenderPassCameraFrame` class to add custom render passes or modify the rendering pipeline. This approach gives you full control over the pass creation and ordering while still leveraging the built-in CameraFrame effects.
For more advanced customization, you can extend the `FramePassCameraFrame` class to add custom passes or modify the rendering pipeline. This approach gives you full control over the pass creation and ordering while still leveraging the built-in CameraFrame effects.

## Overview

By extending `RenderPassCameraFrame`, you can:
By extending `FramePassCameraFrame`, you can:

- Add custom render passes to the pipeline
- Add custom passes to the pipeline
- Modify or replace existing passes
- Control the order of pass execution
- Access intermediate textures from the rendering pipeline

## Example: Adding a Custom Render Pass

This example demonstrates how to extend the `RenderPassCameraFrame` class to insert a custom render pass into the rendering pipeline. By overriding the `createPasses()` method, you can add your own processing step that operates on the scene texture. The `collectPasses()` method then controls where in the pipeline your custom pass executes—in this case, right before the final compose pass. This is useful when you need to apply custom effects that require their own render pass, such as edge detection, custom blur effects, or any processing that needs intermediate render targets.
This example demonstrates how to extend the `FramePassCameraFrame` class to insert a custom render pass into the rendering pipeline. By overriding the `createPasses()` method, you can add your own processing step that operates on the scene texture. The `collectPasses()` method then controls where in the pipeline your custom pass executes—in this case, right before the final compose pass. This is useful when you need to apply custom effects that require their own render pass, such as edge detection, custom blur effects, or any processing that needs intermediate render targets.

```javascript
import * as pc from 'playcanvas';

class CustomRenderPassCameraFrame extends pc.RenderPassCameraFrame {
class CustomFramePassCameraFrame extends pc.FramePassCameraFrame {
createPasses(options) {
// Call the base implementation to create standard passes
super.createPasses(options);
Expand All @@ -46,7 +46,7 @@ class CustomRenderPassCameraFrame extends pc.RenderPassCameraFrame {
// Use your custom class by extending CameraFrame
class MyCameraFrame extends pc.CameraFrame {
createRenderPass() {
return new CustomRenderPassCameraFrame(this.app, this, this.cameraComponent, this.options);
return new CustomFramePassCameraFrame(this.app, this, this.cameraComponent, this.options);
}
}

Expand Down
4 changes: 2 additions & 2 deletions docs/user-manual/graphics/posteffects/cameraframe/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,9 @@ Extend the `CameraFrame` by adding effects to the final compose pass only. This

**Best for:** Simple screen-space effects, color adjustments, quick prototyping.

### [Extending RenderPassCameraFrame Class](extending-class)
### [Extending FramePassCameraFrame Class](extending-class)

Extend the `CameraFrame` by adding custom render passes. This allows you to integrate additional rendering techniques while leveraging built-in effects.
Extend the `CameraFrame` by adding custom frame passes. This allows you to integrate additional rendering techniques while leveraging built-in effects.

**Best for:** Multi-pass effects, advanced integrations, processing intermediate results.

Expand Down