CameraFrame / RenderPass Questions

[Xander_Dice]

Hello everyone,

I’m encountering an issue where after adding a pc.CameraFrame and associating it with the camera, the scene appears much brighter.

I’m using Editor v2 and PlayCanvas v2.x. There is a script in the root that adds the target frame or render pass, or whatever it’s called, to the camera.

The default camera is set to TONEMAP_LINEAR and GAMMA 1.0.

The idea is to apply Bloom, SSAO, and TAA. I’ve seen in several examples that the approach is as follows:

javascript

`this.cameraFrame = new pc.CameraFrame(this.app, `this.camera.camera);
         
this.cameraFrame.rendering.samples = 4; 
this.cameraFrame.rendering.toneMapping = pc.TONEMAP_LINEAR;

this.cameraFrame.bloom.enabled = false;
this.cameraFrame.bloom.intensity = 0.05;
this.cameraFrame.bloom.blurLevel = 7;

this.cameraFrame.vignette.inner = 0.5;
this.cameraFrame.vignette.outer = 1;
this.cameraFrame.vignette.curvature = 0.5;
this.cameraFrame.vignette.intensity = 0.5;

this.cameraFrame.taa.enabled = true;
this.cameraFrame.taa.jitter = 1;
this.cameraFrame.rendering.sharpness = 1;
//this.cameraFrame.debug = "scene";

this.cameraFrame.update();`

This works fine, but it makes everything look too bright, even when I just include this line:

javascript

this.cameraFrame = new pc.CameraFrame(this.app, this.camera.camera);

Without adding anything else (bloom, etc.).

I’ve attached two images, and the brighter one is obviously the one with the added camera target/render pass or whatever it’s called.

I tried reducing the exposure, but the scene looks more washed out and way too bright, which isn’t ideal (in my opinion).

So my questions are:

1. What is the correct and most optimal way to set up cameras with the new v2.x version to avoid the scenes looking overexposed? I prefer using Gamma 1.0 and Linear, and don’t need more brightness.
2. Is it better now to use these render passes, or is post-processing still preferred (as it was done before) for effects like Bloom and SSAO?

Thanks a lot for any help!

[mvaligursky]

Try and download this script: engine/scripts/esm/camera-frame.mjs at main · playcanvas/engine · GitHub

import it to your project, add on the camera and try setting it up this way. Not sure why it’s brighter for you, I have not had that issue.

Actually, maybe I know. If you normally use gamma 1.0, that is the problem, as the result is not gamma correct. But when you use the CameraFrame, it forces the gamma correction as that is the correct rendering.

[mvaligursky]

@Xander_Dice

s it better now to use these render passes, or is post-processing still preferred (as it was done before) for effects like Bloom and SSAO?

You can use either. The new post-effects are faster and use modern / high quality implementation. The bloom is HDR, and so you need emissive material color with high emissiveIntensity for it to bloom.