replaces ssao dependency by local TS implementation of the same techn…

…ique (#80)

packages/3d-web-client-core/package.json

@@ -21,7 +21,6 @@
     "@tweakpane/core": "2.0.0",
     "@tweakpane/plugin-essentials": "0.2.0",
     "mml-web": "0.11.2",
-    "n8ao": "^1.6.8",
     "postprocessing": "6.33.0",
     "three-mesh-bvh": "0.6.4",
     "tweakpane": "4.0.0"

packages/3d-web-client-core/src/rendering/composer.ts

@@ -1,5 +1,3 @@
-/* @ts-ignore */
-import { N8AOPostPass } from "n8ao";
 import {
   EffectComposer,
   RenderPass,
@@ -46,6 +44,7 @@ import { TweakPane } from "../tweakpane/TweakPane";
 
 import { BrightnessContrastSaturation } from "./post-effects/bright-contrast-sat";
 import { GaussGrainEffect } from "./post-effects/gauss-grain";
+import { N8SSAOPass } from "./post-effects/n8-ssao/N8SSAOPass";
 
 export class Composer {
   private width: number = 1;
@@ -68,7 +67,7 @@ export class Composer {
   private readonly normalTextureEffect: TextureEffect;
   private readonly ppssaoEffect: SSAOEffect;
   private readonly ppssaoPass: EffectPass;
-  private readonly n8aopass: N8AOPostPass;
+  private readonly n8aopass: N8SSAOPass;
 
   private readonly fxaaEffect: FXAAEffect;
   private readonly fxaaPass: EffectPass;
@@ -150,7 +149,7 @@ export class Composer {
       intensity: extrasValues.bloom,
     });
 
-    this.n8aopass = new N8AOPostPass(this.scene, this.camera, this.width, this.height);
+    this.n8aopass = new N8SSAOPass(this.scene, this.camera, this.width, this.height);
     this.n8aopass.configuration.aoRadius = n8ssaoValues.aoRadius;
     this.n8aopass.configuration.distanceFalloff = n8ssaoValues.distanceFalloff;
     this.n8aopass.configuration.intensity = n8ssaoValues.intensity;

packages/3d-web-client-core/src/rendering/post-effects/n8-ssao/DepthDownSample.ts

@@ -0,0 +1,138 @@
+// Original code from: https://github.com/N8python/n8ao
+// ported to TypeScript
+
+import { Matrix4, Uniform, Vector2 } from "three";
+
+const DepthDownSample = {
+  uniforms: {
+    sceneDepth: new Uniform(null),
+    resolution: new Uniform(new Vector2()),
+    near: new Uniform(0.1),
+    far: new Uniform(1000.0),
+    viewMatrixInv: new Uniform(new Matrix4()),
+    projectionMatrixInv: new Uniform(new Matrix4()),
+    logDepth: new Uniform(false),
+  },
+
+  depthWrite: false,
+
+  depthTest: false,
+
+  vertexShader: /* glsl */ `
+    varying vec2 vUv;
+    void main(void) {
+      vUv = uv;
+      gl_Position = vec4(position, 1);
+    }`,
+
+  fragmentShader: /* glsl */ `
+    uniform highp sampler2D sceneDepth;
+    uniform vec2 resolution;
+    uniform float near;
+    uniform float far;
+    uniform bool logDepth;
+    uniform mat4 viewMatrixInv;
+    uniform mat4 projectionMatrixInv;
+    varying vec2 vUv;
+
+    layout(location = 1) out vec4 gNormal;
+
+    vec3 getWorldPosLog(vec3 posS) {
+      vec2 uv = posS.xy;
+      float z = posS.z;
+      float nearZ = near;
+      float farZ = far;
+      float depth = pow(2.0, z * log2(farZ + 1.0)) - 1.0;
+      float a = farZ / (farZ - nearZ);
+      float b = farZ * nearZ / (nearZ - farZ);
+      float linDepth = a + b / depth;
+      vec4 clipVec = vec4(uv, linDepth, 1.0) * 2.0 - 1.0;
+      vec4 wpos = projectionMatrixInv * clipVec;
+      return wpos.xyz / wpos.w;
+    }
+
+    vec3 getWorldPos(float depth, vec2 coord) {
+      if (logDepth) {
+        return getWorldPosLog(vec3(coord, depth));
+      }
+      float z = depth * 2.0 - 1.0;
+      vec4 clipSpacePosition = vec4(coord * 2.0 - 1.0, z, 1.0);
+      vec4 viewSpacePosition = projectionMatrixInv * clipSpacePosition;
+
+      vec4 worldSpacePosition = viewSpacePosition;
+      worldSpacePosition.xyz /= worldSpacePosition.w;
+
+      return worldSpacePosition.xyz;
+    }
+
+    vec3 computeNormal(vec3 worldPos, vec2 vUv) {
+      ivec2 p = ivec2(vUv * resolution);
+      float c0 = texelFetch(sceneDepth, p, 0).x;
+      float l2 = texelFetch(sceneDepth, p - ivec2(2, 0), 0).x;
+      float l1 = texelFetch(sceneDepth, p - ivec2(1, 0), 0).x;
+      float r1 = texelFetch(sceneDepth, p + ivec2(1, 0), 0).x;
+      float r2 = texelFetch(sceneDepth, p + ivec2(2, 0), 0).x;
+      float b2 = texelFetch(sceneDepth, p - ivec2(0, 2), 0).x;
+      float b1 = texelFetch(sceneDepth, p - ivec2(0, 1), 0).x;
+      float t1 = texelFetch(sceneDepth, p + ivec2(0, 1), 0).x;
+      float t2 = texelFetch(sceneDepth, p + ivec2(0, 2), 0).x;
+      float dl = abs((2.0 * l1 - l2) - c0);
+      float dr = abs((2.0 * r1 - r2) - c0);
+      float db = abs((2.0 * b1 - b2) - c0);
+      float dt = abs((2.0 * t1 - t2) - c0);
+      vec3 ce = getWorldPos(c0, vUv).xyz;
+      vec3 dpdx = (
+        (dl < dr)
+          ? ce - getWorldPos(l1, (vUv - vec2(1.0 / resolution.x, 0.0))).xyz
+          : -ce + getWorldPos(r1, (vUv + vec2(1.0 / resolution.x, 0.0))).xyz
+      );
+      vec3 dpdy = (
+        (db < dt)
+          ? ce - getWorldPos(b1, (vUv - vec2(0.0, 1.0 / resolution.y))).xyz
+          : -ce + getWorldPos(t1, (vUv + vec2(0.0, 1.0 / resolution.y))).xyz
+      );
+      return normalize(cross(dpdx, dpdy));
+    }
+
+    void main(void) {
+      vec2 uv = vUv - vec2(0.5) / resolution;
+      vec2 pixelSize = vec2(1.0) / resolution;
+      vec2[] uvSamples = vec2[4](
+        uv,
+        uv + vec2(pixelSize.x, 0.0),
+        uv + vec2(0.0, pixelSize.y),
+        uv + pixelSize
+      );
+      float depth00 = texture2D(sceneDepth, uvSamples[0]).r;
+      float depth10 = texture2D(sceneDepth, uvSamples[1]).r;
+      float depth01 = texture2D(sceneDepth, uvSamples[2]).r;
+      float depth11 = texture2D(sceneDepth, uvSamples[3]).r;
+      float minDepth = min(min(depth00, depth10), min(depth01, depth11));
+      float maxDepth = max(max(depth00, depth10), max(depth01, depth11));
+      float targetDepth = minDepth;
+
+      if (mod(gl_FragCoord.x + gl_FragCoord.y, 2.0) > 0.5) { 
+        targetDepth = maxDepth;
+      }
+
+      int chosenIndex = 0;
+      float[] samples = float[4](depth00, depth10, depth01, depth11);
+
+      for(int i = 0; i < 4; ++i) {
+        if (samples[i] == targetDepth) {
+          chosenIndex = i;
+          break;
+        }
+      }
+
+      gl_FragColor = vec4(samples[chosenIndex], 0.0, 0.0, 1.0);
+      gNormal = vec4(
+        computeNormal(
+          getWorldPos(samples[chosenIndex], uvSamples[chosenIndex]), uvSamples[chosenIndex]
+        ),
+        0.0
+      );
+    }`,
+};
+
+export { DepthDownSample };