Option to apply SSAO during lighting instead of during postprocessing

examples/src/examples/graphics/ambient-occlusion.controls.mjs

@@ -1,3 +1,5 @@
+import * as pc from 'playcanvas';
+
 /**
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
@@ -10,11 +12,16 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             { headerText: 'Ambient Occlusion' },
             jsx(
                 LabelGroup,
-                { text: 'enabled' },
-                jsx(BooleanInput, {
-                    type: 'toggle',
+                { text: 'Type' },
+                jsx(SelectInput, {
                     binding: new BindingTwoWay(),
-                    link: { observer, path: 'data.ssao.enabled' }
+                    link: { observer, path: 'data.ssao.type' },
+                    type: 'string',
+                    options: [
+                        { v: pc.SSAOTYPE_NONE, t: 'None' },
+                        { v: pc.SSAOTYPE_LIGHTING, t: 'Lighting' },
+                        { v: pc.SSAOTYPE_COMBINE, t: 'Combine' }
+                    ]
                 })
             ),
             jsx(

examples/src/examples/graphics/ambient-occlusion.example.mjs

@@ -179,7 +179,7 @@ assetListLoader.load(() => {
         // enable temporal anti-aliasing
         taaEnabled: false,
 
-        ssaoEnabled: true,
+        ssaoType: pc.SSAOTYPE_LIGHTING,
         ssaoBlurEnabled: true
     };
 
@@ -193,7 +193,7 @@ assetListLoader.load(() => {
         // Internally this sets up additional passes it needs, based on the options passed to it.
         const renderPassCamera = new pc.RenderPassCameraFrame(app, currentOptions);
 
-        renderPassCamera.ssaoEnabled = currentOptions.ssaoEnabled;
+        renderPassCamera.ssaoType = currentOptions.ssaoType;
 
         const composePass = renderPassCamera.composePass;
         composePass.sharpness = 0;
@@ -206,12 +206,14 @@ assetListLoader.load(() => {
     };
 
     const applySettings = () => {
+
+        const ssaoType = data.get('data.ssao.type');
+
         // if settings require render passes to be re-created
         const noPasses = cameraEntity.camera.renderPasses.length === 0;
-        const ssaoEnabled = data.get('data.ssao.enabled');
         const blurEnabled = data.get('data.ssao.blurEnabled');
-        if (noPasses || ssaoEnabled !== currentOptions.ssaoEnabled || blurEnabled !== currentOptions.ssaoBlurEnabled) {
-            currentOptions.ssaoEnabled = ssaoEnabled;
+        if (noPasses || ssaoType !== currentOptions.ssaoType || blurEnabled !== currentOptions.ssaoBlurEnabled) {
+            currentOptions.ssaoType = ssaoType;
             currentOptions.ssaoBlurEnabled = blurEnabled;
 
             // create new pass
@@ -254,7 +256,7 @@ assetListLoader.load(() => {
     // initial settings
     data.set('data', {
         ssao: {
-            enabled: true,
+            type: pc.SSAOTYPE_LIGHTING,
             blurEnabled: true,
             radius: 30,
             samples: 12,

src/extras/index.js

@@ -14,6 +14,7 @@ export { UsdzExporter } from './exporters/usdz-exporter.js';
 export { GltfExporter } from './exporters/gltf-exporter.js';
 
 // RENDER PASSES
+export { SSAOTYPE_NONE, SSAOTYPE_LIGHTING, SSAOTYPE_COMBINE } from './render-passes/render-pass-camera-frame.js';
 export { RenderPassCameraFrame } from './render-passes/render-pass-camera-frame.js';
 export { RenderPassCompose } from './render-passes/render-pass-compose.js';
 export { RenderPassDepthAwareBlur } from './render-passes/render-pass-depth-aware-blur.js';

src/extras/render-passes/render-pass-camera-frame.js

@@ -20,6 +20,10 @@ import { RenderPassSsao } from './render-pass-ssao.js';
 import { RenderingParams } from '../../scene/renderer/rendering-params.js';
 import { Debug } from '../../core/debug.js';
 
+export const SSAOTYPE_NONE = 'none';
+export const SSAOTYPE_LIGHTING = 'lighting';
+export const SSAOTYPE_COMBINE = 'combine';
+
 /**
  * Render pass implementation of a common camera frame rendering with integrated  post-processing
  * effects.
@@ -44,7 +48,7 @@ class RenderPassCameraFrame extends RenderPass {
 
     _bloomEnabled = false;
 
-    _ssaoEnabled = false;
+    _ssaoType = SSAOTYPE_NONE;
 
     _renderTargetScale = 1;
 
@@ -100,7 +104,7 @@ class RenderPassCameraFrame extends RenderPass {
             bloomEnabled: false,
 
             // SSAO
-            ssaoEnabled: false,
+            ssaoType: SSAOTYPE_NONE,
             ssaoBlurEnabled: true
         };
 
@@ -123,16 +127,20 @@ class RenderPassCameraFrame extends RenderPass {
         return this._bloomEnabled;
     }
 
-    set ssaoEnabled(value) {
-        if (this._ssaoEnabled !== value) {
-            this._ssaoEnabled = value;
-            this.composePass.ssaoTexture = value ? this.ssaoPass.ssaoTexture : null;
-            this.ssaoPass.enabled = value;
-        }
+    set ssaoType(value) {
+
+        this._ssaoType = value;
+
+        // SSAO is applied in the compose pass
+        this.composePass.ssaoTexture = this.ssaoType === SSAOTYPE_COMBINE ? this.ssaoPass.ssaoTexture : null;
+
+        // SSAO is applied during lighting
+        const cameraComponent = this.options.camera;
+        cameraComponent.rendering.ssaoEnabled = this.ssaoType === SSAOTYPE_LIGHTING;
     }
 
-    get ssaoEnabled() {
-        return this._ssaoEnabled;
+    get ssaoType() {
+        return this._ssaoType;
     }
 
     set lastMipLevel(value) {
@@ -156,6 +164,7 @@ class RenderPassCameraFrame extends RenderPass {
             const renderingParams = new RenderingParams();
             renderingParams.gammaCorrection = GAMMA_NONE;
             renderingParams.toneMapping = TONEMAP_NONE;
+            renderingParams.ssaoEnabled = options.ssaoType === SSAOTYPE_LIGHTING;
             cameraComponent.rendering = renderingParams;
         }
 
@@ -303,8 +312,8 @@ class RenderPassCameraFrame extends RenderPass {
     }
 
     setupSsaoPass(options) {
-        const { camera, ssaoBlurEnabled, ssaoEnabled } = options;
-        if (ssaoEnabled) {
+        const { camera, ssaoBlurEnabled, ssaoType } = options;
+        if (ssaoType !== SSAOTYPE_NONE) {
             this.ssaoPass = new RenderPassSsao(this.device, this.sceneTexture, camera, ssaoBlurEnabled);
         }
     }

src/extras/render-passes/render-pass-ssao.js

@@ -277,6 +277,9 @@ class RenderPassSsao extends RenderPassShaderQuad {
             this.afterPasses.push(blurPassHorizontal);
             this.afterPasses.push(blurPassVertical);
         }
+
+        this.ssaoTextureId = device.scope.resolve('ssaoTexture');
+        this.ssaoTextureSizeInvId = device.scope.resolve('ssaoTextureSizeInv');
     }
 
     destroy() {
@@ -362,6 +365,13 @@ class RenderPassSsao extends RenderPassShaderQuad {
 
         super.execute();
     }
+
+    after() {
+        this.ssaoTextureId.setValue(this.ssaoTexture);
+
+        const srcTexture = this.sourceTexture;
+        this.ssaoTextureSizeInvId.setValue([1.0 / srcTexture.width, 1.0 / srcTexture.height]);
+    }
 }
 
 export { RenderPassSsao };

src/scene/materials/standard-material-options-builder.js

@@ -55,7 +55,7 @@ class StandardMaterialOptionsBuilder {
         this._updateMaterialOptions(options, stdMat);
         options.litOptions.hasTangents = objDefs && ((objDefs & SHADERDEF_TANGENTS) !== 0);
         this._updateLightOptions(options, scene, stdMat, objDefs, sortedLights);
-        this._updateUVOptions(options, stdMat, objDefs, false);
+        this._updateUVOptions(options, stdMat, objDefs, false, renderParams);
     }
 
     _updateSharedOptions(options, scene, stdMat, objDefs, pass) {
@@ -96,7 +96,7 @@ class StandardMaterialOptionsBuilder {
         }
     }
 
-    _updateUVOptions(options, stdMat, objDefs, minimalOptions) {
+    _updateUVOptions(options, stdMat, objDefs, minimalOptions, renderParams) {
         let hasUv0 = false;
         let hasUv1 = false;
         let hasVcolor = false;
@@ -115,13 +115,17 @@ class StandardMaterialOptionsBuilder {
         }
         this._mapXForms = null;
 
+        // true if ssao is applied directly in the lit shaders. Also ensure the AO part is generated in the front end
+        options.litOptions.ssao = renderParams?.ssaoEnabled;
+        options.useAO = true;
+
         // All texture related lit options
         options.litOptions.lightMapEnabled = options.lightMap;
         options.litOptions.dirLightMapEnabled = options.dirLightMap;
         options.litOptions.useHeights = options.heightMap;
         options.litOptions.useNormals = options.normalMap;
         options.litOptions.useClearCoatNormals = options.clearCoatNormalMap;
-        options.litOptions.useAo = options.aoMap || options.aoVertexColor;
+        options.litOptions.useAo = options.aoMap || options.aoVertexColor || options.litOptions.ssao;
         options.litOptions.diffuseMapEnabled = options.diffuseMap;
     }
 

src/scene/materials/standard-material-options.js

@@ -75,6 +75,13 @@ class StandardMaterialOptions {
      */
     clearCoatGlossInvert = false;
 
+    /**
+     * True to include AO variables even if AO is not used, which allows SSAO to be used in the lit shader.
+     *
+     * @type {boolean}
+     */
+    useAO = false;
+
     /**
      * Storage for the options for lit the shader and material.
      *

src/scene/renderer/rendering-params.js

@@ -17,6 +17,9 @@ class RenderingParams {
     /** @private */
     _srgbRenderTarget = false;
 
+    /** @private */
+    _ssaoEnabled = true;
+
     /** @private */
     _fog = FOG_NONE;
 
@@ -67,7 +70,7 @@ class RenderingParams {
      */
     get hash() {
         if (this._hash === undefined) {
-            const key = `${this.gammaCorrection}_${this.toneMapping}_${this.srgbRenderTarget}_${this.fog}`;
+            const key = `${this.gammaCorrection}_${this.toneMapping}_${this.srgbRenderTarget}_${this.fog}_${this.ssaoEnabled}`;
             this._hash = hashCode(key);
         }
         return this._hash;
@@ -105,6 +108,17 @@ class RenderingParams {
         return this._fog;
     }
 
+    set ssaoEnabled(value) {
+        if (this._ssaoEnabled !== value) {
+            this._ssaoEnabled = value;
+            this.markDirty();
+        }
+    }
+
+    get ssaoEnabled() {
+        return this._ssaoEnabled;
+    }
+
     /**
      * The gamma correction to apply when rendering the scene. Can be:
      *

src/scene/shader-lib/chunks/standard/frag/ao.js

@@ -1,18 +1,31 @@
 export default /* glsl */`
-uniform float material_aoIntensity;
+
+#ifdef MAPTEXTURE
+    #define AO_INTENSITY
+#endif
+
+#ifdef MAPVERTEX
+    #define AO_INTENSITY
+#endif
+
+#ifdef AO_INTENSITY
+    uniform float material_aoIntensity;
+#endif
 
 void getAO() {
     dAo = 1.0;
 
     #ifdef MAPTEXTURE
-    float aoBase = texture2DBias($SAMPLER, $UV, textureBias).$CH;
-    dAo *= addAoDetail(aoBase);
+        float aoBase = texture2DBias($SAMPLER, $UV, textureBias).$CH;
+        dAo *= addAoDetail(aoBase);
     #endif
 
     #ifdef MAPVERTEX
-    dAo *= saturate(vVertexColor.$VC);
+        dAo *= saturate(vVertexColor.$VC);
     #endif
 
-    dAo = mix(1.0, dAo, material_aoIntensity);
+    #ifdef AO_INTENSITY
+        dAo = mix(1.0, dAo, material_aoIntensity);
+    #endif
 }
 `;

src/scene/shader-lib/programs/lit-shader-options.js

@@ -110,6 +110,13 @@ class LitShaderOptions {
      */
     ambientSH = false;
 
+    /**
+     * Apply SSAO during the lighting.
+     *
+     * @type {boolean}
+     */
+    ssao = false;
+
     /**
      * The value of {@link StandardMaterial#twoSidedLighting}.
      *

src/scene/shader-lib/programs/lit-shader.js

@@ -934,6 +934,15 @@ class LitShader {
         // invoke frontend functions
         code.append(this.frontendFunc);
 
+        // apply SSAO
+        if (options.ssao) {
+            func.append(`
+                    uniform sampler2D ssaoTexture;
+                    uniform vec2 ssaoTextureSizeInv;
+                `);
+            backend.append('litArgs_ao *= texture2DLodEXT(ssaoTexture, gl_FragCoord.xy * ssaoTextureSizeInv, 0.0).r;');
+        }
+
         // transform tangent space normals to world space
         if (this.needsNormal) {
             if (options.useSpecular) {

src/scene/shader-lib/programs/standard.js

@@ -436,7 +436,7 @@ class ShaderGeneratorStandard extends ShaderGenerator {
             if (options.aoDetail) {
                 code.append(this._addMap('aoDetail', 'aoDetailMapPS', options, litShader.chunks, textureMapping));
             }
-            if (options.aoMap || options.aoVertexColor) {
+            if (options.aoMap || options.aoVertexColor || options.useAO) {
                 decl.append('float dAo;');
                 code.append(this._addMap('ao', 'aoPS', options, litShader.chunks, textureMapping));
                 func.append('getAO();');