gkjohnson · DennisSmolek · Jul 23, 2024 · Jul 23, 2024 · Jul 24, 2024 · Jul 24, 2024
diff --git a/example/denoiser.html b/example/denoiser.html
@@ -0,0 +1,384 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>OIDN Denoiser with Pathtracing</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+	<style>
+		html,
+		body {
+			margin: 0;
+			padding: 0;
+			background-color: #111;
+		}
+
+		.checkerboard {
+			background-image:
+				linear-gradient(45deg, #222 25%, transparent 25%),
+				linear-gradient(-45deg, #222 25%, transparent 25%),
+				linear-gradient(45deg, transparent 75%, #222 75%),
+				linear-gradient(-45deg, transparent 75%, #222 75%);
+			background-size: 20px 20px;
+			background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+		}
+
+		#rawCanvas {
+			transform: scaleY(-1);
+			position: absolute;
+		}
+	</style>
+
+</head>
+
+<body>
+	<script type="module">
+		import { MeshPhysicalMaterial, Color, DoubleSide, Mesh, CylinderGeometry, Box3 } from 'three';
+		import { FogVolumeMaterial } from '..';
+
+		window.MODEL_LIST = {
+			'M2020 Rover': {
+				url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/nasa-m2020/Perseverance.glb',
+				credit: 'Model credit NASA / JPL-Caltech',
+			},
+			'M2020 Helicopter': {
+				url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/nasa-m2020/Ingenuity.glb',
+				credit: 'Model credit NASA / JPL-Caltech',
+			},
+			'Stalenhag Winter': {
+				url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/colourdrafts/scene.glb',
+				credit: 'Model by "ganzhugav" on Sketchfab',
+				bounces: 3,
+				postProcess(model) {
+
+					const box = new Box3();
+					box.setFromObject(model);
+
+					const fog = new Mesh(new CylinderGeometry(0.5, 0.5, 1, 20), new FogVolumeMaterial({
+
+						color: 0xaaaaaa,
+						density: 1,
+
+					}));
+
+					fog.scale.subVectors(box.max, box.min);
+					fog.scale.x += 0.1;
+					fog.scale.y += 0.01;
+					fog.scale.z += 0.1;
+
+					fog.scale.x = fog.scale.z = Math.max(fog.scale.x, fog.scale.z);
+
+					box.getCenter(fog.position);
+					fog.position.y += 0.02;
+
+					model.traverse(c => {
+
+						if (c.material && c.material.emissive.r < 0.1) {
+
+							c.material.emissive.set(0);
+
+						}
+
+					});
+
+					model.add(fog);
+
+				}
+			},
+			'Gelatinous Cube': {
+				url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/gelatinous-cube/scene.gltf',
+				credit: 'Model by "glenatron" on Sketchfab.',
+				rotation: [0, - Math.PI / 8, 0.0],
+				opacityToTransmission: true,
+				bounces: 8,
+				postProcess(model) {
+
+					const toRemove = [];
+					model.traverse(c => {
+
+						if (c.material) {
+
+							if (c.material instanceof MeshPhysicalMaterial) {
+
+								const material = c.material;
+								material.metalness = 0.0;
+								material.ior = 1.2;
+								material.map = null;
+
+								c.geometry.computeVertexNormals();
+
+							} else if (c.material.opacity < 1.0) {
+
+								toRemove.push(c);
+
+							}
+
+						}
+
+					});
+
+					toRemove.forEach(c => {
+
+						c.parent.remove(c);
+
+					});
+
+				}
+			},
+			'Octopus Tea': {
+				url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/octopus-tea/scene.gltf',
+				credit: 'Model by "AzTiZ" on Sketchfab.',
+				opacityToTransmission: true,
+				bounces: 8,
+				postProcess(model) {
+
+					const toRemove = [];
+
+					model.updateMatrixWorld();
+
+					model.traverse(c => {
+
+						if (c.material) {
+
+							c.material.emissiveIntensity = 0;
+							if (c.material instanceof MeshPhysicalMaterial) {
+
+								const material = c.material;
+								material.metalness = 0.0;
+								if (material.transmission === 1.0) {
+
+									material.roughness = 0.0;
+									material.metalness = 0.0;
+
+									// 29 === glass
+									// 27 === liquid top
+									// 23 === liquid
+									if (c.name.includes('29')) {
+
+										material.ior = 1.52;
+										material.color.set(0xffffff);
+
+									} else {
+
+										material.ior = 1.2;
+
+									}
+
+								}
+
+							} else if (c.material.opacity < 1.0) {
+
+								toRemove.push(c);
+
+							}
+
+						}
+
+					});
+
+					toRemove.forEach(c => {
+
+						c.parent.remove(c);
+
+					});
+
+				}
+			},
+			'Scifi Toad': {
+				url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/scifi-toad/scene.gltf',
+				credit: 'Model by "YuryTheCreator" on Sketchfab.',
+				opacityToTransmission: true,
+				bounces: 8,
+				postProcess(model) {
+
+					model.traverse(c => {
+
+						if (c.material && c.material instanceof MeshPhysicalMaterial) {
+
+							const material = c.material;
+							material.metalness = 0.0;
+							material.ior = 1.645;
+							material.color.lerp(new Color(0xffffff), 0.65);
+
+						}
+
+					});
+
+				}
+			},
+			'Halo Twist Ring': {
+				url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/ring-twist-halo/scene.glb',
+				credit: 'Model credit NASA / JPL-Caltech',
+				opacityToTransmission: true,
+				bounces: 15,
+				postProcess(model) {
+
+					model.traverse(c => {
+
+						if (c.material) {
+
+							if (c.material instanceof MeshPhysicalMaterial) {
+
+								if (c.material.transmission === 1.0) {
+
+									const material = c.material;
+									material.metalness = 0.0;
+									material.ior = 1.8;
+									material.color.set(0xffffff);
+
+								}
+
+							}
+
+						}
+
+					});
+
+				}
+			},
+			// 'Vino Bike': {
+			// 	url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/vino-bike/scene.gltf',
+			// 	credit: 'glTF Sample Model.',
+			// 	postProcess( model ) {
+
+			// 		model.traverse( c => {
+			// 			console.log(c.name);
+			// 			if ( c.name === 'mesh_0') {
+
+			// 				// TODO: remove this
+			// 				c.material.clearcoatRoughness = 0;
+			// 				c.material.clearcoatMap = null;
+			// 				c.material.clearcoatNormalMap = null;
+			// 				c.material.clearcoatNormalScale.setScalar( 1. );
+
+			// 			}
+			// 		})
+
+			// 	}
+			// },
+			'Damaged Helmet': {
+				url: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF/DamagedHelmet.gltf',
+				credit: 'glTF Sample Model.',
+			},
+			'Flight Helmet': {
+				url: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/FlightHelmet/glTF/FlightHelmet.gltf',
+				credit: 'glTF Sample Model.',
+			},
+			'Statue': {
+				url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/threedscans/Le_Transi_De_Rene_De_Chalon.glb',
+				credit: 'Model courtesy of threedscans.com.',
+			},
+			'Crab Sculpture': {
+				url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/threedscans/Crab.glb',
+				rotation: [- 2 * Math.PI / 4, 0, 0],
+				credit: 'Model courtesy of threedscans.com.',
+
+				bounces: 15,
+				floorColor: '#eeeeee',
+				floorRoughness: 1.0,
+				floorMetalness: 0.0,
+				gradientTop: '#eeeeee',
+				gradientBot: '#eeeeee',
+
+				postProcess(model) {
+
+					let mat = new MeshPhysicalMaterial({
+						roughness: 0.05,
+						transmission: 1,
+						ior: 1.2,
+						attenuationDistance: 0.06,
+						attenuationColor: 0x46dfea
+					});
+
+					model.traverse(c => {
+
+						if (c.material) c.material = mat;
+
+					});
+
+				}
+			},
+			'Elbow Crab Sculpture': {
+				url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/threedscans/Elbow_Crab.glb',
+				rotation: [2.5 * Math.PI / 4, Math.PI, 0],
+				credit: 'Model courtesy of threedscans.com.',
+
+				bounces: 15,
+				floorColor: '#eeeeee',
+				floorRoughness: 1.0,
+				floorMetalness: 0.0,
+				gradientTop: '#eeeeee',
+				gradientBot: '#eeeeee',
+
+				postProcess(model) {
+
+					let mat = new MeshPhysicalMaterial({
+						color: 0xcc8888,
+						roughness: 0.25,
+						transmission: 1,
+						ior: 1.5,
+						side: DoubleSide,
+					});
+
+					model.traverse(c => {
+
+						if (c.material) c.material = mat;
+
+					});
+
+				}
+			},
+			'Japanese Bridge Garden': {
+				url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/japanese-bridge-garden/scene.glb',
+				credit: 'Model by "kristenlee" on Sketchfab.',
+			},
+			'Imaginary Friend Room': {
+				url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/imaginary-friend-room/scene.glb',
+				credit: 'Model by "Iman Aliakbar" on Sketchfab.',
+			},
+			'Botanists Study': {
+				url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/botanists-study/scene.gltf',
+				credit: 'Model by "riikkakilpelainen" on Sketchfab.',
+			},
+			'Botanists Greenhouse': {
+				url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/botanists-greenhouse/scene.gltf',
+				credit: 'Model by "riikkakilpelainen" on Sketchfab.',
+			},
+			'Low Poly Rocket': {
+				url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/lowpoly-space/space_exploration.glb',
+				credit: 'Model by "The Sinking Sun" on Sketchfab',
+				rotation: [0, - Math.PI / 3, 0.0],
+			},
+			'Astraia': {
+				url: 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/astraia/scene.gltf',
+				credit: 'Model by "Quentin Otani" on Sketchfab',
+				removeEmission: true,
+				postProcess(model) {
+
+					const toRemove = [];
+					model.traverse(c => {
+
+						if (c.name.includes('ROND')) {
+
+							toRemove.push(c);
+
+						}
+
+					});
+
+					toRemove.forEach(c => {
+
+						c.parent.remove(c);
+
+					});
+
+				}
+			},
+
+		};
+	</script>
+	<script src="./denoiser.js" type="module"></script>
+	<canvas id="rawCanvas"> </canvas>
+</body>
+
+</html>