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

package/src/managers/postprocessing/ao/poissionDenoise/PoissionDenoisePass.ts

@@ -0,0 +1,245 @@
+import { Pass } from 'postprocessing';
+import {
+	Camera,
+	HalfFloatType,
+	Matrix4,
+	NearestFilter,
+	NoColorSpace,
+	RepeatWrapping,
+	ShaderMaterial,
+	Texture,
+	TextureLoader,
+	Vector2,
+	WebGLRenderTarget,
+	WebGLRenderer
+} from 'three';
+import { basic as vertexShader } from '../utils/shader/basic';
+import { sampleBlueNoise } from '../utils/shader/sampleBlueNoise';
+import { poissionDenoise as fragmentShader } from './shader/poissionDenoise';
+import { Converter, HttpClient } from '@shapediver/viewer.shared.services';
+
+const finalFragmentShader = fragmentShader.replace('#include <sampleBlueNoise>', sampleBlueNoise);
+
+const defaultPoissonBlurOptions = {
+	iterations: 1,
+	radius: 8,
+	rings: 5.625,
+	lumaPhi: 10,
+	depthPhi: 2,
+	normalPhi: 3.25,
+	samples: 16,
+	distance: 1,
+	normalTexture: null
+};
+
+export class PoissionDenoisePass extends Pass {
+	// #region Properties (9)
+
+	public static DefaultOptions = defaultPoissonBlurOptions;
+
+	public static blueNoiseTextureImage = HttpClient.instance.loadTexture('https://viewer.shapediver.com/v3/graphics/LDR_RGBA_0.png');
+	public static blueNoiseTexture: Texture;
+
+	public index = 0;
+	public inputTexture: Texture;
+	public iterations = defaultPoissonBlurOptions.iterations;
+	public radius = 8;
+	public renderTargetA: WebGLRenderTarget;
+	public renderTargetB: WebGLRenderTarget;
+	public rings = 5.625;
+	public samples = 16;
+
+	// #endregion Properties (9)
+
+	// #region Constructors (1)
+
+	constructor(camera: Camera, inputTexture: Texture, depthTexture: Texture, options: { [key: string]: unknown } = defaultPoissonBlurOptions) {
+		super('PoissionBlurPass');
+
+		if(!PoissionDenoisePass.blueNoiseTexture) {
+			PoissionDenoisePass.blueNoiseTextureImage.then((response) => {
+				Converter.instance.responseToImage(response).then((image) => {
+					PoissionDenoisePass.blueNoiseTexture = new Texture(image);
+					PoissionDenoisePass.blueNoiseTexture.minFilter = NearestFilter;
+					PoissionDenoisePass.blueNoiseTexture.magFilter = NearestFilter;
+					PoissionDenoisePass.blueNoiseTexture.wrapS = RepeatWrapping;
+					PoissionDenoisePass.blueNoiseTexture.wrapT = RepeatWrapping;
+					PoissionDenoisePass.blueNoiseTexture.colorSpace = NoColorSpace;
+				});
+			});
+		}
+
+		options = { ...defaultPoissonBlurOptions, ...options };
+
+		this.inputTexture = inputTexture;
+
+		this.fullscreenMaterial = new ShaderMaterial({
+			fragmentShader: finalFragmentShader,
+			vertexShader,
+			uniforms: {
+				depthTexture: { value: null },
+				inputTexture: { value: null },
+				projectionMatrixInverse: { value: new Matrix4() },
+				cameraMatrixWorld: { value: new Matrix4() },
+				lumaPhi: { value: 5.0 },
+				depthPhi: { value: 5.0 },
+				normalPhi: { value: 5.0 },
+				distance: { value: 1.0 },
+				resolution: { value: new Vector2() },
+				blueNoiseTexture: { value: null },
+				index: { value: 0 },
+				blueNoiseRepeat: { value: new Vector2() }
+			}
+		});
+
+		const renderTargetOptions = {
+			type: HalfFloatType,
+			depthBuffer: false
+		};
+
+		this.renderTargetA = new WebGLRenderTarget(1, 1, renderTargetOptions);
+		this.renderTargetB = new WebGLRenderTarget(1, 1, renderTargetOptions);
+
+		const { uniforms } = (this.fullscreenMaterial as ShaderMaterial);
+
+		uniforms['inputTexture'].value = this.inputTexture;
+		uniforms['depthTexture'].value = depthTexture;
+		uniforms['projectionMatrixInverse'].value = camera.projectionMatrixInverse;
+		uniforms['cameraMatrixWorld'].value = camera.matrixWorld;
+		uniforms['depthPhi'].value = options.depthPhi;
+		uniforms['normalPhi'].value = options.normalPhi;
+		uniforms['distance'].value = options.distance;
+
+		if (options.normalTexture) {
+			uniforms['normalTexture'] = { value: options.normalTexture };
+		} else {
+			(this.fullscreenMaterial as ShaderMaterial).defines.NORMAL_IN_RGB = '';
+		}
+
+		// these properties need the shader to be recompiled
+		for (const prop of ['radius', 'rings', 'samples']) {
+			Object.defineProperty(this, prop, {
+				get: () => options[prop],
+				set: value => {
+					options[prop] = value;
+
+					this.setSize(this.renderTargetA.width, this.renderTargetA.height);
+				}
+			});
+		}
+
+		(this.fullscreenMaterial as ShaderMaterial).uniforms.blueNoiseTexture.value = PoissionDenoisePass.blueNoiseTexture;
+	}
+
+	// #endregion Constructors (1)
+
+	// #region Public Accessors (1)
+
+	public get texture() {
+		return this.renderTargetB.texture;
+	}
+
+	// #endregion Public Accessors (1)
+
+	// #region Public Methods (4)
+
+	public generateDenoiseSamples(numSamples: number, numRings: number, r: number, texelSize: Vector2) {
+		const angleStep = (2 * Math.PI * numRings) / numSamples;
+		const invNumSamples = 1.0 / numSamples;
+		const radiusStep = invNumSamples;
+		const samples = [];
+		let radius = invNumSamples;
+		let angle = 0;
+
+		for (let i = 0; i < numSamples; i++) {
+			const v = new Vector2(Math.cos(angle), Math.sin(angle))
+				.multiplyScalar(Math.pow(radius, 0.75))
+				.multiply(texelSize)
+				.multiplyScalar(r);
+
+			if(isNaN(v.x) || v.x === Infinity || v.x === -Infinity)
+				v.x = 0;
+
+			if(isNaN(v.y) || v.y === Infinity || v.y === -Infinity)
+				v.y = 0;
+
+			samples.push(v);
+			radius += radiusStep;
+			angle += angleStep;
+		}
+
+		return samples;
+	}
+
+	public generatePoissonDiskConstant(poissonDisk: Vector2[]) {
+		const samples = poissonDisk.length;
+
+		let glslCode = 'const vec2 poissonDisk[samples] = vec2[samples](\n';
+
+		for (let i = 0; i < samples; i++) {
+			const sample = poissonDisk[i];
+			glslCode += `    vec2(${sample.x}, ${sample.y})`;
+
+			if (i < samples - 1) {
+				glslCode += ',';
+			}
+
+			glslCode += '\n';
+		}
+
+		glslCode += ');';
+
+		return glslCode;
+	}
+
+	public render(renderer: WebGLRenderer) {
+		(this.fullscreenMaterial as ShaderMaterial).uniforms.index.value = 0;
+
+		const noiseTexture = (this.fullscreenMaterial as ShaderMaterial).uniforms.blueNoiseTexture.value;
+		if (noiseTexture) {
+			const { width, height } = (noiseTexture as Texture).source.data;
+
+			(this.fullscreenMaterial as ShaderMaterial).uniforms.blueNoiseRepeat.value.set(
+				this.renderTargetA.width / width,
+				this.renderTargetA.height / height
+			);
+		}
+
+		for (let i = 0; i < 2 * this.iterations; i++) {
+			const horizontal = i % 2 === 0;
+
+			const inputRenderTarget = horizontal ? this.renderTargetB : this.renderTargetA;
+			(this.fullscreenMaterial as ShaderMaterial).uniforms['inputTexture'].value = i === 0 ? this.inputTexture : inputRenderTarget.texture;
+
+			const renderTarget = horizontal ? this.renderTargetA : this.renderTargetB;
+
+			renderer.setRenderTarget(renderTarget);
+			renderer.render(this.scene, this.camera);
+
+			(this.fullscreenMaterial as ShaderMaterial).uniforms.index.value = ((this.fullscreenMaterial as ShaderMaterial).uniforms.index.value + 1) % 4;
+		}
+	}
+
+	public setSize(width: number, height: number) {
+		this.renderTargetA.setSize(width, height);
+		this.renderTargetB.setSize(width, height);
+
+		(this.fullscreenMaterial as ShaderMaterial).uniforms.resolution.value.set(width, height);
+
+		const poissonDisk = this.generateDenoiseSamples(
+			this.samples,
+			this.rings,
+			this.radius,
+			new Vector2(1 / width, 1 / height)
+		);
+
+		const sampleDefine = `const int samples = ${this.samples};\n`;
+
+		const poissonDiskConstant = this.generatePoissonDiskConstant(poissonDisk);
+
+		(this.fullscreenMaterial as ShaderMaterial).fragmentShader = sampleDefine + poissonDiskConstant + '\n' + finalFragmentShader;
+		(this.fullscreenMaterial as ShaderMaterial).needsUpdate = true;
+	}
+
+	// #endregion Public Methods (4)
+}

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

@@ -0,0 +1,125 @@
+varying vec2 vUv;
+
+uniform sampler2D inputTexture;
+uniform sampler2D depthTexture;
+uniform sampler2D normalTexture;
+uniform mat4 projectionMatrixInverse;
+uniform mat4 cameraMatrixWorld;
+uniform float lumaPhi;
+uniform float depthPhi;
+uniform float normalPhi;
+uniform float distance;
+uniform sampler2D blueNoiseTexture;
+uniform vec2 blueNoiseRepeat;
+uniform int index;
+uniform vec2 resolution;
+
+#include <common>
+#include <sampleBlueNoise>
+
+vec3 getWorldPos(float depth, 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;
+}
+
+#define luminance(a) dot(vec3(0.2125, 0.7154, 0.0721), a)
+
+vec3 getNormal(vec2 uv, vec4 texel) {
+#ifdef NORMAL_IN_RGB
+    // in case the normal is stored in the RGB channels of the texture
+    return texel.rgb;
+#else
+    return normalize(textureLod(normalTexture, uv, 0.).xyz * 2.0 - 1.0);
+#endif
+}
+
+float distToPlane(const vec3 worldPos, const vec3 neighborWorldPos, const vec3 worldNormal) {
+    vec3 toCurrent = worldPos - neighborWorldPos;
+    float distToPlane = abs(dot(toCurrent, worldNormal));
+
+    return distToPlane;
+}
+
+void main() {
+    vec4 depthTexel = textureLod(depthTexture, vUv, 0.);
+
+    if (depthTexel.r == 1.0 || dot(depthTexel.rgb, depthTexel.rgb) == 0.) {
+        discard;
+        return;
+    }
+
+    vec4 texel = textureLod(inputTexture, vUv, 0.0);
+
+    vec3 normal = getNormal(vUv, texel);
+
+#ifdef NORMAL_IN_RGB
+    float denoised = texel.a;
+    float center = texel.a;
+#else
+    vec3 denoised = texel.rgb;
+    vec3 center = texel.rgb;
+#endif
+
+    float depth = depthTexel.x;
+    vec3 worldPos = getWorldPos(depth, vUv);
+
+    float totalWeight = 1.0;
+
+    vec4 blueNoise = sampleBlueNoise(blueNoiseTexture, 0, blueNoiseRepeat, resolution);
+    float angle = blueNoise[index];
+
+    float s = sin(angle), c = cos(angle);
+
+    mat2 rotationMatrix = mat2(c, -s, s, c);
+
+    for (int i = 0; i < samples; i++) {
+        vec2 offset = rotationMatrix * poissonDisk[i];
+        vec2 neighborUv = vUv + offset;
+
+        vec4 neighborTexel = textureLod(inputTexture, neighborUv, 0.0);
+
+        vec3 neighborNormal = getNormal(neighborUv, neighborTexel);
+#ifdef NORMAL_IN_RGB
+        float neighborColor = neighborTexel.a;
+#else
+        vec3 neighborColor = neighborTexel.rgb;
+#endif
+
+        float sampleDepth = textureLod(depthTexture, neighborUv, 0.0).x;
+
+        vec3 worldPosSample = getWorldPos(sampleDepth, neighborUv);
+        float tangentPlaneDist = abs(dot(worldPos - worldPosSample, normal));
+
+        float normalDiff = dot(normal, neighborNormal);
+        float normalSimilarity = pow(max(normalDiff, 0.), normalPhi);
+
+#ifdef NORMAL_IN_RGB
+        float lumaDiff = abs(neighborColor - center);
+#else
+        float lumaDiff = abs(luminance(neighborColor) - luminance(center));
+#endif
+        float lumaSimilarity = max(1.0 - lumaDiff / lumaPhi, 0.0);
+
+        float depthDiff = 1. - (distToPlane(worldPos, worldPosSample, normal) / distance);
+        float depthSimilarity = max(depthDiff / depthPhi, 0.);
+
+        float w = lumaSimilarity * depthSimilarity * normalSimilarity;
+
+        denoised += w * neighborColor;
+        totalWeight += w;
+    }
+
+    if (totalWeight > 0.) denoised /= totalWeight;
+
+#ifdef NORMAL_IN_RGB
+    gl_FragColor = vec4(normal, denoised);
+#else
+    gl_FragColor = vec4(denoised, 1.);
+#endif
+}

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

@@ -0,0 +1,127 @@
+export const poissionDenoise = `
+varying vec2 vUv;
+
+uniform sampler2D inputTexture;
+uniform highp sampler2D depthTexture;
+uniform sampler2D normalTexture;
+uniform mat4 projectionMatrixInverse;
+uniform mat4 cameraMatrixWorld;
+uniform float lumaPhi;
+uniform float depthPhi;
+uniform float normalPhi;
+uniform float distance;
+uniform sampler2D blueNoiseTexture;
+uniform vec2 blueNoiseRepeat;
+uniform int index;
+uniform vec2 resolution;
+
+#include <common>
+#include <sampleBlueNoise>
+
+vec3 getWorldPos(float depth, 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;
+}
+
+#define luminance(a) dot(vec3(0.2125, 0.7154, 0.0721), a)
+
+vec3 getNormal(vec2 uv, vec4 texel) {
+#ifdef NORMAL_IN_RGB
+    // in case the normal is stored in the RGB channels of the texture
+    return texel.rgb;
+#else
+    return normalize(textureLod(normalTexture, uv, 0.).xyz * 2.0 - 1.0);
+#endif
+}
+
+float distToPlane(const vec3 worldPos, const vec3 neighborWorldPos, const vec3 worldNormal) {
+    vec3 toCurrent = worldPos - neighborWorldPos;
+    float distToPlane = abs(dot(toCurrent, worldNormal));
+
+    return distToPlane;
+}
+
+void main() {
+    vec4 depthTexel = textureLod(depthTexture, vUv, 0.);
+
+    if (depthTexel.r == 1.0 || dot(depthTexel.rgb, depthTexel.rgb) == 0.) {
+        discard;
+        return;
+    }
+
+    vec4 texel = textureLod(inputTexture, vUv, 0.0);
+
+    vec3 normal = getNormal(vUv, texel);
+
+#ifdef NORMAL_IN_RGB
+    float denoised = texel.a;
+    float center = texel.a;
+#else
+    vec3 denoised = texel.rgb;
+    vec3 center = texel.rgb;
+#endif
+
+    float depth = depthTexel.x;
+    vec3 worldPos = getWorldPos(depth, vUv);
+
+    float totalWeight = 1.0;
+
+    vec4 blueNoise = sampleBlueNoise(blueNoiseTexture, 0, blueNoiseRepeat, resolution);
+    float angle = blueNoise[index];
+
+    float s = sin(angle), c = cos(angle);
+
+    mat2 rotationMatrix = mat2(c, -s, s, c);
+
+    for (int i = 0; i < samples; i++) {
+        vec2 offset = rotationMatrix * poissonDisk[i];
+        vec2 neighborUv = vUv + offset;
+
+        vec4 neighborTexel = textureLod(inputTexture, neighborUv, 0.0);
+
+        vec3 neighborNormal = getNormal(neighborUv, neighborTexel);
+#ifdef NORMAL_IN_RGB
+        float neighborColor = neighborTexel.a;
+#else
+        vec3 neighborColor = neighborTexel.rgb;
+#endif
+
+        float sampleDepth = textureLod(depthTexture, neighborUv, 0.0).x;
+
+        vec3 worldPosSample = getWorldPos(sampleDepth, neighborUv);
+        float tangentPlaneDist = abs(dot(worldPos - worldPosSample, normal));
+
+        float normalDiff = dot(normal, neighborNormal);
+        float normalSimilarity = pow(max(normalDiff, 0.), normalPhi);
+
+#ifdef NORMAL_IN_RGB
+        float lumaDiff = abs(neighborColor - center);
+#else
+        float lumaDiff = abs(luminance(neighborColor) - luminance(center));
+#endif
+        float lumaSimilarity = max(1.0 - lumaDiff / lumaPhi, 0.0);
+
+        float depthDiff = 1. - (distToPlane(worldPos, worldPosSample, normal) / distance);
+        float depthSimilarity = max(depthDiff / depthPhi, 0.);
+
+        float w = lumaSimilarity * depthSimilarity * normalSimilarity;
+
+        denoised += w * neighborColor;
+        totalWeight += w;
+    }
+
+    if (totalWeight > 0.) denoised /= totalWeight;
+
+#ifdef NORMAL_IN_RGB
+    gl_FragColor = vec4(normal, denoised);
+#else
+    gl_FragColor = vec4(denoised, 1.);
+#endif
+}
+`

package/src/managers/postprocessing/ao/ssao/SSAOEffect.ts

@@ -0,0 +1,106 @@
+import { EffectComposer } from 'postprocessing';
+import { Camera, Scene, Vector3 } from 'three';
+import { AOEffect } from '../ao/AOEffect';
+import { AOPass } from '../ao/AOPass';
+import { ssao as fragmentShader } from './shader/ssao';
+
+class SSAOPass extends AOPass {
+	// #region Constructors (1)
+
+	constructor(camera: Camera, scene: Scene) {
+		super(camera, scene, fragmentShader);
+	}
+
+	// #endregion Constructors (1)
+}
+
+class SSAOEffect extends AOEffect {
+	// #region Properties (1)
+
+	public spp = 16;
+
+	// #endregion Properties (1)
+
+	// #region Constructors (1)
+
+	constructor(composer: EffectComposer, camera: Camera, scene: Scene, options?: { [key: string]: unknown }) {
+		super(composer, camera, scene, new SSAOPass(camera, scene), options);
+
+		SSAOEffect.DefaultOptions = {
+			...AOEffect.DefaultOptions,
+			...{
+				spp: 16,
+				distance: 1,
+				distancePower: 0.25,
+				power: 2
+			}
+		};
+
+		options = {
+			...SSAOEffect.DefaultOptions,
+			...options
+		};
+	}
+
+	// #endregion Constructors (1)
+
+	// #region Public Methods (2)
+
+	public getPointsOnSphere(n: number) {
+		const points = [];
+		const inc = Math.PI * (3 - Math.sqrt(5));
+		const off = 2 / n;
+
+		for (let k = 0; k < n; k++) {
+			const y = k * off - 1 + off / 2;
+			const r = Math.sqrt(1 - y * y);
+			const phi = k * inc;
+			points.push(new Vector3(Math.cos(phi) * r, y, Math.sin(phi) * r));
+		}
+
+		return points;
+	}
+
+	public makeOptionsReactive(options: { [key: string]: unknown }) {
+		super.makeOptionsReactive(options);
+
+		for (const key of ['spp']) {
+			Object.defineProperty(this, key, {
+				get() {
+					return options[key];
+				},
+				set(value) {
+					if (value === null || value === undefined) return;
+
+					options[key] = value;
+
+					switch (key) {
+						case 'spp': {
+							this.aoPass.fullscreenMaterial.defines.spp = value.toFixed(0);
+
+							const samples = this.getPointsOnSphere(value);
+
+							const samplesR = [];
+							for (let i = 0; i < value; i++) {
+								samplesR.push((i + 1) / value);
+							}
+
+							this.aoPass.fullscreenMaterial.uniforms.samples = { value: samples };
+							this.aoPass.fullscreenMaterial.uniforms.samplesR = { value: samplesR };
+
+							this.aoPass.fullscreenMaterial.needsUpdate = true;
+							break;
+						}
+					}
+				},
+				configurable: true
+			});
+		}
+
+		this.spp = options['spp'] as number;
+	}
+
+	// #endregion Public Methods (2)
+}
+
+export { SSAOEffect };