Grimmy
March 25, 2023, 3:10pm
1
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
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):
// 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 = [
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.
2 Likes
Grimmy
March 25, 2023, 4:23pm
3
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.
It’s JavaScript, it should work if you parse it first. Try adding a script component and find the ssao script and add it.
1 Like
Grimmy
October 18, 2024, 2:15pm
5
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?
Cheers
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.
In saying that, if you need it urgently, you could find the implementation here:
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) {
show original
which also uses these for blurs:
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;
show original
and port it to the current SSAO script:
// 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 = [
show original
but that’d need some non-trivial changes.
1 Like
Grimmy
April 23, 2025, 1:16pm
8
Is the ‘official’ version of the new ssao shader for engine v2 anywhere I can get it yet?
It’s this script you need to add on your camera:
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} */
show original
1 Like
Grimmy
April 23, 2025, 1:36pm
10
Great. Thanks!
But what is a .mjs script and how do I make that compile in PLaycanvas …and then attach it to the camera?
Cheers
It works as other scripts. Just click on Parse button on it to parse it.
1 Like
