@shapediver/viewer.rendering-engine.rendering-engine-threejs 3.0.0

package/src/managers/postprocessing/ao/ao/AOPass.ts

@@ -0,0 +1,128 @@
+import { Pass } from 'postprocessing';
+import {
+	Camera,
+	HalfFloatType,
+	Matrix4,
+	NearestFilter,
+	NoBlending,
+	NoColorSpace,
+	PerspectiveCamera,
+	RepeatWrapping,
+	Scene,
+	ShaderMaterial,
+	TextureLoader,
+	Vector2,
+	WebGLRenderTarget,
+	WebGLRenderer
+} from 'three';
+import { basic as vertexShader } from '../utils/shader/basic';
+import { sampleBlueNoise } from '../utils/shader/sampleBlueNoise';
+import { PoissionDenoisePass } from '../poissionDenoise/PoissionDenoisePass';
+
+// a general AO pass that can be used for any AO algorithm
+class AOPass extends Pass {
+	// #region Properties (3)
+
+	private _camera: PerspectiveCamera;
+	private _scene: Scene;
+
+	public renderTarget: WebGLRenderTarget;
+
+	// #endregion Properties (3)
+
+	// #region Constructors (1)
+
+	constructor(camera: Camera, scene: Scene, fragmentShader: string) {
+		super();
+		this._camera = camera as PerspectiveCamera;
+		this._scene = scene;
+
+		this.renderTarget = new WebGLRenderTarget(1, 1, {
+			type: HalfFloatType,
+			depthBuffer: false
+		});
+
+		const finalFragmentShader = fragmentShader.replace('#include <sampleBlueNoise>', sampleBlueNoise);
+
+		this.fullscreenMaterial = new ShaderMaterial({
+			fragmentShader: finalFragmentShader,
+			vertexShader,
+
+			uniforms: {
+				depthTexture: { value: null },
+				normalTexture: { value: null },
+				cameraNear: { value: 0 },
+				cameraFar: { value: 0 },
+				viewMatrix: { value: this._camera.matrixWorldInverse },
+				projectionViewMatrix: { value: new Matrix4() },
+				projectionMatrixInverse: { value: this._camera.projectionMatrixInverse },
+				cameraMatrixWorld: { value: this._camera.matrixWorld },
+				texSize: { value: new Vector2() },
+				blueNoiseTexture: { value: null },
+				blueNoiseRepeat: { value: new Vector2() },
+				aoDistance: { value: 0 },
+				distancePower: { value: 0 },
+				bias: { value: 0 },
+				thickness: { value: 0 },
+				power: { value: 0 },
+				frame: { value: 0 }
+			},
+
+			blending: NoBlending,
+			depthWrite: false,
+			depthTest: false,
+			toneMapped: false
+		});
+			
+		(this.fullscreenMaterial as ShaderMaterial).uniforms.blueNoiseTexture.value = PoissionDenoisePass.blueNoiseTexture;
+	}
+
+	// #endregion Constructors (1)
+
+	// #region Public Accessors (1)
+
+	public get texture() {
+		return this.renderTarget.texture;
+	}
+
+	// #endregion Public Accessors (1)
+
+	// #region Public Methods (2)
+
+	public render(renderer: WebGLRenderer) {
+		const spp = +(this.fullscreenMaterial as ShaderMaterial).defines.spp;
+
+		(this.fullscreenMaterial as ShaderMaterial).uniforms.frame.value = ((this.fullscreenMaterial as ShaderMaterial).uniforms.frame.value + spp) % 65536;
+
+		(this.fullscreenMaterial as ShaderMaterial).uniforms.cameraNear.value = this._camera.near;
+		(this.fullscreenMaterial as ShaderMaterial).uniforms.cameraFar.value = this._camera.far;
+
+		(this.fullscreenMaterial as ShaderMaterial).uniforms.projectionViewMatrix.value.multiplyMatrices(
+			this._camera.projectionMatrix,
+			this._camera.matrixWorldInverse
+		);
+
+		const noiseTexture = (this.fullscreenMaterial as ShaderMaterial).uniforms.blueNoiseTexture.value;
+		if (noiseTexture) {
+			const { width, height } = noiseTexture.source.data;
+
+			(this.fullscreenMaterial as ShaderMaterial).uniforms.blueNoiseRepeat.value.set(
+				this.renderTarget.width / width,
+				this.renderTarget.height / height
+			);
+		}
+
+		renderer.setRenderTarget(this.renderTarget);
+		renderer.render(this.scene, this.camera);
+	}
+
+	public setSize(width: number, height: number) {
+		this.renderTarget.setSize(width, height);
+
+		(this.fullscreenMaterial as ShaderMaterial).uniforms.texSize.value.set(this.renderTarget.width, this.renderTarget.height);
+	}
+
+	// #endregion Public Methods (2)
+}
+
+export { AOPass };

package/src/managers/postprocessing/ao/ao/shader/ao_compose.glsl

@@ -0,0 +1,17 @@
+uniform sampler2D inputTexture;
+uniform sampler2D depthTexture;
+uniform float power;
+uniform vec3 color;
+
+void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+    float unpackedDepth = textureLod(depthTexture, uv, 0.).r;
+
+    float ao = unpackedDepth > 0.9999 ? 1.0 : textureLod(inputTexture, uv, 0.0).a;
+    ao = pow(ao, power);
+
+    vec3 aoColor = mix(color, vec3(1.), ao);
+
+    aoColor *= inputColor.rgb;
+
+    outputColor = vec4(aoColor, inputColor.a);
+}

package/src/managers/postprocessing/ao/ao/shader/ao_compose.ts

@@ -0,0 +1,19 @@
+export const ao_compose = `
+uniform sampler2D inputTexture;
+uniform highp sampler2D depthTexture;
+uniform float power;
+uniform vec3 color;
+
+void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+    float unpackedDepth = textureLod(depthTexture, uv, 0.).r;
+
+    float ao = unpackedDepth > 0.9999 ? 1.0 : textureLod(inputTexture, uv, 0.0).a;
+    ao = pow(ao, power);
+
+    vec3 aoColor = mix(color, vec3(1.), ao);
+
+    aoColor *= inputColor.rgb;
+
+    outputColor = vec4(aoColor, inputColor.a);
+}
+`

package/src/managers/postprocessing/ao/hbao/HBAOEffect.ts

@@ -0,0 +1,41 @@
+import { EffectComposer } from 'postprocessing';
+import { Camera, Scene } from 'three';
+import { AOEffect } from '../ao/AOEffect';
+
+import { AOPass } from '../ao/AOPass';
+import { hbao as fragmentShader } from './shader/hbao';
+import { hbao_utils } from './shader/hbao_utils';
+
+const finalFragmentShader = fragmentShader.replace('#include <hbao_utils>', hbao_utils);
+
+class HBAOPass extends AOPass {
+	// #region Constructors (1)
+
+	constructor(camera: Camera, scene: Scene) {
+		super(camera, scene, finalFragmentShader);
+	}
+
+	// #endregion Constructors (1)
+}
+
+class HBAOEffect extends AOEffect {
+	// #region Properties (1)
+
+	public lastSize = { width: 0, height: 0, resolutionScale: 0 };
+
+	// #endregion Properties (1)
+
+	// #region Constructors (1)
+
+	constructor(composer: EffectComposer, camera: Camera, scene: Scene, options: { [key: string]: unknown } = AOEffect.DefaultOptions) {
+		super(composer, camera, scene, new HBAOPass(camera, scene), {
+			...AOEffect.DefaultOptions,
+			...HBAOEffect.DefaultOptions,
+			...options
+		});
+	}
+
+	// #endregion Constructors (1)
+}
+
+export { HBAOEffect };

package/src/managers/postprocessing/ao/hbao/shader/hbao.glsl

@@ -0,0 +1,96 @@
+varying vec2 vUv;
+
+uniform sampler2D depthTexture;
+
+uniform mat4 projectionViewMatrix;
+uniform int frame;
+
+uniform sampler2D blueNoiseTexture;
+uniform vec2 blueNoiseRepeat;
+uniform vec2 texSize;
+
+uniform float aoDistance;
+uniform float distancePower;
+uniform float bias;
+uniform float thickness;
+
+#include <packing>
+// HBAO Utils
+#include <hbao_utils>
+
+float getOcclusion(const vec3 cameraPosition, const vec3 worldPos, const vec3 worldNormal, const float depth, const int seed, inout float totalWeight) {
+    vec4 blueNoise = sampleBlueNoise(blueNoiseTexture, seed, blueNoiseRepeat, texSize);
+
+    vec3 sampleWorldDir = cosineSampleHemisphere(worldNormal, blueNoise.rg);
+
+    vec3 sampleWorldPos = worldPos + aoDistance * pow(blueNoise.b, distancePower + 1.0) * sampleWorldDir;
+
+    // Project the sample position to screen space
+    vec4 sampleUv = projectionViewMatrix * vec4(sampleWorldPos, 1.);
+    sampleUv.xy /= sampleUv.w;
+    sampleUv.xy = sampleUv.xy * 0.5 + 0.5;
+
+    // Get the depth of the sample position
+    float sampleDepth = textureLod(depthTexture, sampleUv.xy, 0.0).r;
+
+    // Compute the horizon line
+    float deltaDepth = depth - sampleDepth;
+
+    // distance based bias
+    float d = distance(sampleWorldPos, cameraPosition) / aoDistance;
+    deltaDepth *= 0.001 * d * d;
+
+    float th = thickness * 0.01;
+
+    float theta = dot(worldNormal, sampleWorldDir);
+    totalWeight += theta;
+
+    if (deltaDepth < th) {
+        float horizon = sampleDepth + deltaDepth * bias * 1000.;
+
+        float occlusion = max(0.0, horizon - depth) * theta;
+
+        float m = max(0., 1. - deltaDepth / th);
+        occlusion = 10. * occlusion * m / d;
+
+        occlusion = max(0.0, occlusion);
+        occlusion = sqrt(occlusion);
+        return occlusion;
+    }
+
+    return 0.;
+}
+
+void main() {
+    float depth = textureLod(depthTexture, vUv, 0.0).r;
+
+    // filter out background
+    if (depth == 1.0) {
+        discard;
+        return;
+    }
+
+    vec4 cameraPosition = cameraMatrixWorld * vec4(0.0, 0.0, 0.0, 1.0);
+
+    vec3 worldPos = getWorldPos(depth, vUv);
+    vec3 worldNormal = getWorldNormal(vUv);
+
+    float ao = 0.0, totalWeight = 0.0;
+
+    for (int i = 0; i < spp; i++) {
+        int seed = i;
+#ifdef animatedNoise
+        seed += frame;
+#endif
+
+        float occlusion = getOcclusion(cameraPosition.xyz, worldPos, worldNormal, depth, seed, totalWeight);
+        ao += occlusion;
+    }
+
+    if (totalWeight > 0.) ao /= totalWeight;
+
+    // clamp ao to [0, 1]
+    ao = clamp(1. - ao, 0., 1.);
+
+    gl_FragColor = vec4(worldNormal, ao);
+}

package/src/managers/postprocessing/ao/hbao/shader/hbao.ts

@@ -0,0 +1,98 @@
+export const hbao = `
+varying vec2 vUv;
+
+uniform highp sampler2D depthTexture;
+
+uniform mat4 projectionViewMatrix;
+uniform int frame;
+
+uniform sampler2D blueNoiseTexture;
+uniform vec2 blueNoiseRepeat;
+uniform vec2 texSize;
+
+uniform float aoDistance;
+uniform float distancePower;
+uniform float bias;
+uniform float thickness;
+
+#include <packing>
+// HBAO Utils
+#include <hbao_utils>
+
+float getOcclusion(const vec3 cameraPosition, const vec3 worldPos, const vec3 worldNormal, const float depth, const int seed, inout float totalWeight) {
+    vec4 blueNoise = sampleBlueNoise(blueNoiseTexture, seed, blueNoiseRepeat, texSize);
+
+    vec3 sampleWorldDir = cosineSampleHemisphere(worldNormal, blueNoise.rg);
+
+    vec3 sampleWorldPos = worldPos + aoDistance * pow(blueNoise.b, distancePower + 1.0) * sampleWorldDir;
+
+    // Project the sample position to screen space
+    vec4 sampleUv = projectionViewMatrix * vec4(sampleWorldPos, 1.);
+    sampleUv.xy /= sampleUv.w;
+    sampleUv.xy = sampleUv.xy * 0.5 + 0.5;
+
+    // Get the depth of the sample position
+    float sampleDepth = textureLod(depthTexture, sampleUv.xy, 0.0).r;
+
+    // Compute the horizon line
+    float deltaDepth = depth - sampleDepth;
+
+    // distance based bias
+    float d = distance(sampleWorldPos, cameraPosition) / aoDistance;
+    deltaDepth *= 0.001 * d * d;
+
+    float th = thickness * 0.01;
+
+    float theta = dot(worldNormal, sampleWorldDir);
+    totalWeight += theta;
+
+    if (deltaDepth < th) {
+        float horizon = sampleDepth + deltaDepth * bias * 1000.;
+
+        float occlusion = max(0.0, horizon - depth) * theta;
+
+        float m = max(0., 1. - deltaDepth / th);
+        occlusion = 10. * occlusion * m / d;
+
+        occlusion = max(0.0, occlusion);
+        occlusion = sqrt(occlusion);
+        return occlusion;
+    }
+
+    return 0.;
+}
+
+void main() {
+    float depth = textureLod(depthTexture, vUv, 0.0).r;
+
+    // filter out background
+    if (depth == 1.0) {
+        discard;
+        return;
+    }
+
+    vec4 cameraPosition = cameraMatrixWorld * vec4(0.0, 0.0, 0.0, 1.0);
+
+    vec3 worldPos = getWorldPos(depth, vUv);
+    vec3 worldNormal = getWorldNormal(vUv);
+
+    float ao = 0.0, totalWeight = 0.0;
+
+    for (int i = 0; i < spp; i++) {
+        int seed = i;
+#ifdef animatedNoise
+        seed += frame;
+#endif
+
+        float occlusion = getOcclusion(cameraPosition.xyz, worldPos, worldNormal, depth, seed, totalWeight);
+        ao += occlusion;
+    }
+
+    if (totalWeight > 0.) ao /= totalWeight;
+
+    // clamp ao to [0, 1]
+    ao = clamp(1. - ao, 0., 1.);
+
+    gl_FragColor = vec4(worldNormal, ao);
+}
+`

package/src/managers/postprocessing/ao/hbao/shader/hbao_utils.glsl

@@ -0,0 +1,92 @@
+#include <sampleBlueNoise>
+
+uniform sampler2D normalTexture;
+uniform float cameraNear;
+uniform float cameraFar;
+uniform mat4 projectionMatrixInverse;
+uniform mat4 cameraMatrixWorld;
+
+// source: https://github.com/mrdoob/three.js/blob/342946c8392639028da439b6dc0597e58209c696/examples/js/shaders/SAOShader.js#L123
+float getViewZ(const float depth) {
+#ifdef PERSPECTIVE_CAMERA
+    return perspectiveDepthToViewZ(depth, cameraNear, cameraFar);
+#else
+    return orthographicDepthToViewZ(depth, cameraNear, cameraFar);
+#endif
+}
+
+// source: https://github.com/N8python/ssao/blob/master/EffectShader.js#L52
+vec3 getWorldPos(const float depth, const vec2 coord) {
+    float z = depth * 2.0 - 1.0;
+    vec4 clipSpacePosition = vec4(coord * 2.0 - 1.0, z, 1.0);
+    vec4 viewSpacePosition = projectionMatrixInverse * clipSpacePosition;
+
+    // Perspective division
+    vec4 worldSpacePosition = cameraMatrixWorld * viewSpacePosition;
+    worldSpacePosition.xyz /= worldSpacePosition.w;
+
+    return worldSpacePosition.xyz;
+}
+
+vec3 slerp(const vec3 a, const vec3 b, const float t) {
+    float cosAngle = dot(a, b);
+    float angle = acos(cosAngle);
+
+    if (abs(angle) < 0.001) {
+        return mix(a, b, t);
+    }
+
+    float sinAngle = sin(angle);
+    float t1 = sin((1.0 - t) * angle) / sinAngle;
+    float t2 = sin(t * angle) / sinAngle;
+
+    return (a * t1) + (b * t2);
+}
+
+vec3 computeWorldNormal() {
+    vec2 size = vec2(textureSize(depthTexture, 0));
+    ivec2 p = ivec2(vUv * size);
+    float c0 = texelFetch(depthTexture, p, 0).x;
+    float l2 = texelFetch(depthTexture, p - ivec2(2, 0), 0).x;
+    float l1 = texelFetch(depthTexture, p - ivec2(1, 0), 0).x;
+    float r1 = texelFetch(depthTexture, p + ivec2(1, 0), 0).x;
+    float r2 = texelFetch(depthTexture, p + ivec2(2, 0), 0).x;
+    float b2 = texelFetch(depthTexture, p - ivec2(0, 2), 0).x;
+    float b1 = texelFetch(depthTexture, p - ivec2(0, 1), 0).x;
+    float t1 = texelFetch(depthTexture, p + ivec2(0, 1), 0).x;
+    float t2 = texelFetch(depthTexture, 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 / size.x, 0.0))).xyz
+                          : -ce + getWorldPos(r1, (vUv + vec2(1.0 / size.x, 0.0))).xyz;
+    vec3 dpdy = (db < dt) ? ce - getWorldPos(b1, (vUv - vec2(0.0, 1.0 / size.y))).xyz
+                          : -ce + getWorldPos(t1, (vUv + vec2(0.0, 1.0 / size.y))).xyz;
+    return normalize(cross(dpdx, dpdy));
+}
+
+vec3 getWorldNormal(const vec2 uv) {
+#ifdef useNormalTexture
+    vec3 worldNormal = unpackRGBToNormal(textureLod(normalTexture, uv, 0.).rgb);
+
+    worldNormal = (vec4(worldNormal, 1.) * viewMatrix).xyz;  // view-space to world-space
+    return normalize(worldNormal);
+#else
+    return computeWorldNormal();  // compute world normal from depth
+#endif
+}
+
+#define PI 3.14159265358979323846264338327950288
+
+// source: https://www.shadertoy.com/view/cll3R4
+vec3 cosineSampleHemisphere(const vec3 n, const vec2 u) {
+    float r = sqrt(u.x);
+    float theta = 2.0 * PI * u.y;
+
+    vec3 b = normalize(cross(n, vec3(0.0, 1.0, 1.0)));
+    vec3 t = cross(b, n);
+
+    return normalize(r * sin(theta) * b + sqrt(1.0 - u.x) * n + r * cos(theta) * t);
+}

package/src/managers/postprocessing/ao/hbao/shader/hbao_utils.ts

@@ -0,0 +1,95 @@
+export const hbao_utils = `
+#include <sampleBlueNoise>
+
+uniform sampler2D normalTexture;
+uniform float cameraNear;
+uniform float cameraFar;
+uniform mat4 projectionMatrixInverse;
+uniform mat4 cameraMatrixWorld;
+
+// source: https://github.com/mrdoob/three.js/blob/342946c8392639028da439b6dc0597e58209c696/examples/js/shaders/SAOShader.js#L123
+float getViewZ(const float depth) {
+#ifdef PERSPECTIVE_CAMERA
+    return perspectiveDepthToViewZ(depth, cameraNear, cameraFar);
+#else
+    return orthographicDepthToViewZ(depth, cameraNear, cameraFar);
+#endif
+}
+
+// source: https://github.com/N8python/ssao/blob/master/EffectShader.js#L52
+vec3 getWorldPos(const float depth, const vec2 coord) {
+    float z = depth * 2.0 - 1.0;
+    vec4 clipSpacePosition = vec4(coord * 2.0 - 1.0, z, 1.0);
+    vec4 viewSpacePosition = projectionMatrixInverse * clipSpacePosition;
+
+    // Perspective division
+    vec4 worldSpacePosition = cameraMatrixWorld * viewSpacePosition;
+    worldSpacePosition.xyz /= worldSpacePosition.w;
+
+    return worldSpacePosition.xyz;
+}
+
+vec3 slerp(const vec3 a, const vec3 b, const float t) {
+    float cosAngle = dot(a, b);
+    float angle = acos(cosAngle);
+
+    if (abs(angle) < 0.001) {
+        return mix(a, b, t);
+    }
+
+    float sinAngle = sin(angle);
+    float t1 = sin((1.0 - t) * angle) / sinAngle;
+    float t2 = sin(t * angle) / sinAngle;
+
+    return (a * t1) + (b * t2);
+}
+
+vec3 computeWorldNormal() {
+    vec2 size = vec2(textureSize(depthTexture, 0));
+    ivec2 p = ivec2(vUv * size);
+    float c0 = texelFetch(depthTexture, p, 0).x;
+    float l2 = texelFetch(depthTexture, p - ivec2(2, 0), 0).x;
+    float l1 = texelFetch(depthTexture, p - ivec2(1, 0), 0).x;
+    float r1 = texelFetch(depthTexture, p + ivec2(1, 0), 0).x;
+    float r2 = texelFetch(depthTexture, p + ivec2(2, 0), 0).x;
+    float b2 = texelFetch(depthTexture, p - ivec2(0, 2), 0).x;
+    float b1 = texelFetch(depthTexture, p - ivec2(0, 1), 0).x;
+    float t1 = texelFetch(depthTexture, p + ivec2(0, 1), 0).x;
+    float t2 = texelFetch(depthTexture, 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 / size.x, 0.0))).xyz
+                          : -ce + getWorldPos(r1, (vUv + vec2(1.0 / size.x, 0.0))).xyz;
+    vec3 dpdy = (db < dt) ? ce - getWorldPos(b1, (vUv - vec2(0.0, 1.0 / size.y))).xyz
+                          : -ce + getWorldPos(t1, (vUv + vec2(0.0, 1.0 / size.y))).xyz;
+    return normalize(cross(dpdx, dpdy));
+}
+
+vec3 getWorldNormal(const vec2 uv) {
+#ifdef useNormalTexture
+    vec3 worldNormal = unpackRGBToNormal(textureLod(normalTexture, uv, 0.).rgb);
+
+    worldNormal = (vec4(worldNormal, 1.) * viewMatrix).xyz;  // view-space to world-space
+    return normalize(worldNormal);
+#else
+    return computeWorldNormal();  // compute world normal from depth
+#endif
+}
+
+#define PI 3.14159265358979323846264338327950288
+
+// source: https://www.shadertoy.com/view/cll3R4
+vec3 cosineSampleHemisphere(const vec3 n, const vec2 u) {
+    float r = sqrt(u.x);
+    float theta = 2.0 * PI * u.y;
+
+    vec3 b = normalize(cross(n, vec3(0.0, 1.0, 1.0)));
+    vec3 t = cross(b, n);
+
+    return normalize(r * sin(theta) * b + sqrt(1.0 - u.x) * n + r * cos(theta) * t);
+}
+
+`