Realtime SSAO?

Grimmy · March 25, 2023, 3:10pm

Hi, anyone have any clue how I could possibly add real time ambient occlusion? …and if one exists somewhere would it work on mobile?

Cheers

Leonidas · March 25, 2023, 3:58pm

Hi @Grimmy,

In the PlayCanvas engine repo you can find a very good SSAO implementation (copy/paste your script in your project, parse it and the ssao effect to your active camera):

github.com

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

// The implementation is based on the code in Filament Engine: https://github.com/google/filament
// specifically, shaders here: https://github.com/google/filament/tree/24b88219fa6148b8004f230b377f163e6f184d65/filament/src/materials/ssao

// --------------- POST EFFECT DEFINITION --------------- //
/**
 * @class
 * @name SSAOEffect
 * @classdesc Implements the SSAOEffect post processing effect.
 * @description Creates new instance of the post effect.
 * @augments PostEffect
 * @param {GraphicsDevice} graphicsDevice - The graphics device of the application.
 * @param {any} ssaoScript - The script using the effect.
 */
function SSAOEffect(graphicsDevice, ssaoScript) {
    pc.PostEffect.call(this, graphicsDevice);

    this.ssaoScript = ssaoScript;
    this.needsDepthBuffer = true;

    var fSsao = [

This file has been truncated. show original

Here you can see it run live, among other effects: PlayCanvas Examples

But I wouldn’t use such a heavy post effect on mobile. Usually I would bake ambient occlusion offline and use it as a texture on the material on the Ambient channel.

Grimmy · March 25, 2023, 4:23pm

Great. Is that a javascript or a shader? I tried dragging on to the camera as a regular script component but its doesnt seem to work.

Leonidas · March 25, 2023, 4:23pm

It’s JavaScript, it should work if you parse it first. Try adding a script component and find the ssao script and add it.

Grimmy · October 18, 2024, 2:15pm

I know this is an old thread but I found a different ssao here which to me looks better and has far more control. How would I implement that example in the editor?
It looks like it use something here: /static/scripts/posteffects/posteffect-ssao.js but where can I get that script?

Cheers

mvaligursky · October 18, 2024, 2:59pm

You cannot use it in the Editor yet, it’s coming with the engine 2. We’re aiming to add support for engine 2 in the editor in about a month, it’s in the works.

mvaligursky · October 18, 2024, 3:02pm

In saying that, if you need it urgently, you could find the implementation here:

github.com

playcanvas/engine/blob/main/src/extras/render-passes/render-pass-ssao.js

import { Color } from '../../core/math/color.js';
import { ADDRESS_CLAMP_TO_EDGE, FILTER_NEAREST, PIXELFORMAT_R8 } from '../../platform/graphics/constants.js';
import { RenderTarget } from '../../platform/graphics/render-target.js';
import { Texture } from '../../platform/graphics/texture.js';
import { RenderPassShaderQuad } from '../../scene/graphics/render-pass-shader-quad.js';
import { shaderChunks } from '../../scene/shader-lib/chunks/chunks.js';
import { RenderPassDepthAwareBlur } from './render-pass-depth-aware-blur.js';

const fs = /* glsl */`
    varying vec2 uv0;

    uniform vec2 uInvResolution;
    uniform float uAspect;

    #define saturate(x) clamp(x,0.0,1.0)

    // Largely based on 'Dominant Light Shadowing'
    // 'Lighting Technology of The Last of Us Part II' by Hawar Doghramachi, Naughty Dog, LLC

    highp float getWFromProjectionMatrix(const mat4 p, const vec3 v) {

This file has been truncated. show original

which also uses these for blurs:

github.com

playcanvas/engine/blob/main/src/extras/render-passes/render-pass-depth-aware-blur.js

import { RenderPassShaderQuad } from '../../scene/graphics/render-pass-shader-quad.js';
import { shaderChunks } from '../../scene/shader-lib/chunks/chunks.js';

/**
 * Render pass implementation of a depth-aware bilateral blur filter.
 *
 * @category Graphics
 * @ignore
 */
class RenderPassDepthAwareBlur extends RenderPassShaderQuad {
    constructor(device, sourceTexture, horizontal) {
        super(device);
        this.sourceTexture = sourceTexture;

        this.shader = this.createQuadShader(`DepthAware${horizontal ? 'Horizontal' : 'Vertical'}BlurShader`, `${shaderChunks.screenDepthPS /* glsl */}

            ${horizontal ? '#define HORIZONTAL' : ''}

            varying vec2 uv0;

This file has been truncated. show original

and port it to the current SSAO script:

github.com

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

// The implementation is based on the code in Filament Engine: https://github.com/google/filament
// specifically, shaders here: https://github.com/google/filament/tree/24b88219fa6148b8004f230b377f163e6f184d65/filament/src/materials/ssao

// --------------- POST EFFECT DEFINITION --------------- //
/**
 * @class
 * @name SSAOEffect
 * @classdesc Implements the SSAOEffect post processing effect.
 * @description Creates new instance of the post effect.
 * @augments PostEffect
 * @param {GraphicsDevice} graphicsDevice - The graphics device of the application.
 * @param {any} ssaoScript - The script using the effect.
 */
function SSAOEffect(graphicsDevice, ssaoScript) {
    pc.PostEffect.call(this, graphicsDevice);

    this.ssaoScript = ssaoScript;
    this.needsDepthBuffer = true;

    var fSsao = [

This file has been truncated. show original

but that’d need some non-trivial changes.

Grimmy · April 23, 2025, 1:16pm

Is the ‘official’ version of the new ssao shader for engine v2 anywhere I can get it yet?
(Asset store version was last updated 4/18/2023)

mvaligursky · April 23, 2025, 1:25pm

It’s this script you need to add on your camera:

github.com

playcanvas/engine/blob/main/scripts/esm/camera-frame.mjs

import { CameraFrame as EngineCameraFrame, Script, Color } from 'playcanvas';

/** @enum {number} */
const ToneMapping = {
    LINEAR: 0,  // TONEMAP_LINEAR
    FILMIC: 1,  // TONEMAP_FILMIC
    HEJL: 2,    // TONEMAP_HEJL
    ACES: 3,    // TONEMAP_ACES
    ACES2: 4,   // TONEMAP_ACES2
    NEUTRAL: 5  // TONEMAP_NEUTRAL
};

/** @enum {string} */
const SsaoType = {
    NONE: 'none',           // SSAOTYPE_NONE
    LIGHTING: 'lighting',   // SSAOTYPE_LIGHTING
    COMBINE: 'combine'      // SSAOTYPE_COMBINE
};

/** @enum {number} */

This file has been truncated. show original

Grimmy · April 23, 2025, 1:36pm

Great. Thanks!

But what is a .mjs script and how do I make that compile in PLaycanvas …and then attach it to the camera?
It doesn’t seem to appear in the dropdown where all the other.js scripts appear. Renaming doesn’t seem to affect it either.
??

Cheers

mvaligursky · April 23, 2025, 1:49pm

It works as other scripts. Just click on Parse button on it to parse it.

Grimmy · April 24, 2025, 11:49am

Thanks. All done but I get the following error:

Writing to the “pc” global is not supported in projects containing ESM Scripts.
To fix this, remove the assignment and import directly from ‘playcanvas’ wherever you need to reference “pc”.

I realize that it tells me the ‘solution’ as part of the error, but it makes no sense to me. Could you clarify? Thanks

mvaligursky · April 24, 2025, 1:44pm

@Mark_Lundin

Mark_Lundin · April 24, 2025, 3:10pm

This is likely because one of your scripts is attempting to store something on the global pc object ie. ‘pc.something = true’. This is not supported in ESM scripts (scripts ending in .mjs). You’ll need to hunt that down in your code and refactor it.

Grimmy · July 2, 2025, 9:05am

I tried it again in another project (with no other other scripts) and I just get this error:

A uSceneColorMap texture is used by the shader but a scene color texture is not available. Use CameraComponent.requestSceneColorMap / enable Color Grabpass on the Camera Component to enable it. Rendering [Pass:RenderPassCompose RT:WebglFramebuffer | Camera: Player_Camera, Layer: World(TRANSP) | Node: passengerside_window2, Material: Glass]

It seems very fragile

yaustar · July 2, 2025, 9:27am

Tick the box on the camera for Color Grabpass

The error refers to a missing colour grabpass on the Camera Component

Use CameraComponent.requestSceneColorMap / enable Color Grabpass on the Camera Component

Grimmy · July 2, 2025, 10:22am

Thanks. Although that removed one error, the addition of this script also seemed to affect my other scripts which previously had no issues. (notably one of my external script urls started to get wierd random errors that had never happened before). Even after disabling this script the error didn’t go away until I fully deleted this new camera script from the project.
In the end I have decided to use the old ssao effect as this one seems way too much hassle to implement.

yaustar · July 2, 2025, 10:23am

@Mark_Lundin Should you be able to mix .mjs and .js scripting systems into the same project?

mvaligursky · July 2, 2025, 10:31am

yes mixing .js and .mjs is supported and should work

mvaligursky · July 2, 2025, 10:32am

could you post the errors you’re getting please