@shapediver/viewer.rendering-engine.rendering-engine-threejs 3.3.3 → 3.3.6

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

@@ -1,259 +0,0 @@
-import { basic as vertexShader } from '../utils/shader/basic';
-import {
-	Camera,
-	HalfFloatType,
-	Matrix4,
-	NearestFilter,
-	NoColorSpace,
-	RepeatWrapping,
-	ShaderMaterial,
-	Texture,
-	TextureLoader,
-	Vector2,
-	WebGLRenderer,
-	WebGLRenderTarget
-} from 'three';
-import { HttpClient, Logger } from '@shapediver/viewer.shared.services';
-import { Pass } from 'postprocessing';
-import { poissionDenoise as fragmentShader } from './shader/poissionDenoise';
-import { sampleBlueNoise } from '../utils/shader/sampleBlueNoise';
-
-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 (11)
-
-	public static DefaultOptions = defaultPoissonBlurOptions;
-	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 (11)
-
-	// #region Constructors (1)
-
-	constructor(camera: Camera, inputTexture: Texture, depthTexture: Texture, options: { [key: string]: unknown } = defaultPoissonBlurOptions) {
-		super('PoissionBlurPass');
-
-		if (PoissionDenoisePass.blueNoiseTexture === undefined)
-			this.loadBlueNoiseTexture();
-
-		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);
-				}
-			});
-		}
-	}
-
-	private async  loadBlueNoiseTexture() {
-		const result = await HttpClient.instance.loadTexture('https://viewer.shapediver.com/v3/graphics/LDR_RGBA_0.png');
-
-		if (result) {
-			const url = URL.createObjectURL(result.data.blob);
-			new TextureLoader().load(url, texture => {
-				URL.revokeObjectURL(url);
-				PoissionDenoisePass.blueNoiseTexture = texture;
-				PoissionDenoisePass.blueNoiseTexture.minFilter = NearestFilter;
-				PoissionDenoisePass.blueNoiseTexture.magFilter = NearestFilter;
-				PoissionDenoisePass.blueNoiseTexture.wrapS = RepeatWrapping;
-				PoissionDenoisePass.blueNoiseTexture.wrapT = RepeatWrapping;
-				PoissionDenoisePass.blueNoiseTexture.colorSpace = NoColorSpace;
-				PoissionDenoisePass.blueNoiseTexture.needsUpdate = true;
-
-				(this.fullscreenMaterial as ShaderMaterial).uniforms.blueNoiseTexture.value = PoissionDenoisePass.blueNoiseTexture;
-			});
-		} else {
-			Logger.instance.warn('The blue noise texture could not be loaded. This may result in a suboptimal denoising quality. Retrying in 1 second...');
-
-			// if there was an issue loading the texture
-			// set a timeout with 1 second to try again
-			setTimeout(() => {
-				this.loadBlueNoiseTexture();
-			}, 1000);
-		}
-	}
-
-	// #endregion Constructors (1)
-
-	// #region Public Getters And Setters (1)
-
-	public get texture() {
-		return this.renderTargetB.texture;
-	}
-
-	// #endregion Public Getters And Setters (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 !== undefined && noiseTexture !== null && noiseTexture instanceof Texture) {
-			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

@@ -1,125 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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 };