How to realize the deep scene effect excuse me

yang1117 · June 2, 2023, 6:44am

Reference URL: https://abramovic-traces-wepresent.wetransfer.com/.
The background is a model.

Screenshot of website effect.

Model to capture

Leonidas · June 2, 2023, 7:07am

Hi @yang1117,

If I understand correctly you want to get a closer feel similar to the 1st screenshot, right?

Start by adding post effects used, for example I can see vignette applied. You can find the post effects here:

https://playcanvas.github.io/#/graphics/post-effects

And here is an engine example that demonstrates their use:
https://playcanvas.github.io/#/graphics/post-effects

yang1117 · June 2, 2023, 7:16am

Example error reporting
https://playcanvas.github.io/#/graphics/post-effects

Leonidas · June 2, 2023, 7:34am

Try selecting WebGL 2 from the dropdown and let it reload. It seems it fails to create a WebGPU device on your browser even though it detects support.

yang1117 · June 2, 2023, 9:16am

Can I add a blur effect to the post effect.I did not see the relevant documents in the case.

Leonidas · June 2, 2023, 9:24am

Yes the blur effect is named bokeh, from the depth of field algorithm used:

github.com

playcanvas/engine/blob/main/scripts/posteffects/posteffect-bokeh.js

// --------------- POST EFFECT DEFINITION --------------- //
/**
 * @class
 * @name BokehEffect
 * @classdesc Implements the BokehEffect post processing effect.
 * @description Creates new instance of the post effect.
 * @augments PostEffect
 * @param {GraphicsDevice} graphicsDevice - The graphics device of the application.
 * @property {number} maxBlur The maximum amount of blurring. Ranges from 0 to 1.
 * @property {number} aperture Bigger values create a shallower depth of field.
 * @property {number} focus Controls the focus of the effect.
 */
function BokehEffect(graphicsDevice) {
    pc.PostEffect.call(this, graphicsDevice);

    this.needsDepthBuffer = true;

    // Shader author: alteredq / http://alteredqualia.com/
    // Depth-of-field shader with bokeh
    // ported from GLSL shader by Martins Upitis

This file has been truncated. show original