initial work for adding gainmap loader example

mrdoob · Mugen87 · Nov 19, 2023 · Nov 13, 2023 · Nov 13, 2023 · Nov 13, 2023
commit 5743618afd617ad858c1fe1f48c2f929ea7474ac
diff --git a/examples/files.json b/examples/files.json
@@ -82,6 +82,7 @@
 		"webgl_loader_collada_skinning",
 		"webgl_loader_draco",
 		"webgl_loader_fbx",
+		"webgl_loader_gainmap",
 		"webgl_loader_fbx_nurbs",
 		"webgl_loader_gcode",
 		"webgl_loader_gltf",

diff --git a/examples/screenshots/webgl_loader_gainmap.jpg b/examples/screenshots/webgl_loader_gainmap.jpg
diff --git a/examples/textures/gainmap/spruit_sunrise_1k.hdr b/examples/textures/gainmap/spruit_sunrise_1k.hdr
diff --git a/examples/textures/gainmap/spruit_sunrise_4k-gainmap.webp b/examples/textures/gainmap/spruit_sunrise_4k-gainmap.webp
diff --git a/examples/textures/gainmap/spruit_sunrise_4k.jpg b/examples/textures/gainmap/spruit_sunrise_4k.jpg
diff --git a/examples/textures/gainmap/spruit_sunrise_4k.json b/examples/textures/gainmap/spruit_sunrise_4k.json
@@ -0,0 +1,29 @@
+{
+  "gainMapMax": [
+    15.99929538702341,
+    15.99929538702341,
+    15.99929538702341
+  ],
+  "gainMapMin": [
+    0,
+    0,
+    0
+  ],
+  "gamma": [
+    1,
+    1,
+    1
+  ],
+  "hdrCapacityMax": 15.99929538702341,
+  "hdrCapacityMin": 0,
+  "offsetHdr": [
+    0.015625,
+    0.015625,
+    0.015625
+  ],
+  "offsetSdr": [
+    0.015625,
+    0.015625,
+    0.015625
+  ]
+}
diff --git a/examples/textures/gainmap/spruit_sunrise_4k.webp b/examples/textures/gainmap/spruit_sunrise_4k.webp
diff --git a/examples/webgl_loader_gainmap.html b/examples/webgl_loader_gainmap.html
@@ -0,0 +1,267 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - gainmap hdr</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
+		<style>
+			body {
+				background-color: #ccc;
+				color: #000;
+			}
+
+			a {
+				color: #f00;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - gainmap hdr loader
+		</div>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/",
+					"@monogrid/gainmap-js": "https://unpkg.com/@monogrid/gainmap-js@2.0.0/dist/decode.js"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three';
+
+			import Stats from 'three/addons/libs/stats.module.js';
+
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
+
+			import { GainMapLoader, JPEGRLoader } from '@monogrid/gainmap-js';
+
+			const params = {
+				envMap: 'Gain map',
+				roughness: 0.0,
+				metalness: 0.0,
+				exposure: 1.0,
+				debug: false
+			};
+
+			let container, stats;
+			let camera, scene, renderer, controls;
+			let torusMesh, planeMesh;
+			let hdrCubeRenderTarget, hdrCubeMap;
+			let gainMap, gainmapRenderTarget, gainmapBackground;
+			let separateGainMap, separateGainmapRenderTarget, separateGainmapBackground;
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.set( 0, 0, 120 );
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x000000 );
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
+
+				//
+
+				let geometry = new THREE.TorusKnotGeometry( 18, 8, 150, 20 );
+				// let geometry = new THREE.SphereGeometry( 26, 64, 32 );
+				let material = new THREE.MeshStandardMaterial( {
+					color: 0xffffff,
+					metalness: params.metalness,
+					roughness: params.roughness
+				} );
+
+				torusMesh = new THREE.Mesh( geometry, material );
+				scene.add( torusMesh );
+
+
+				geometry = new THREE.PlaneGeometry( 200, 200 );
+				material = new THREE.MeshBasicMaterial();
+
+				planeMesh = new THREE.Mesh( geometry, material );
+				planeMesh.position.y = - 50;
+				planeMesh.rotation.x = - Math.PI * 0.5;
+				scene.add( planeMesh );
+
+
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
+				pmremGenerator.compileCubemapShader();
+				pmremGenerator.compileEquirectangularShader();
+
+				THREE.DefaultLoadingManager.onLoad = function ( ) {
+
+					pmremGenerator.dispose();
+
+				};
+
+				hdrCubeMap = new RGBELoader()
+					.load( 'textures/gainmap/spruit_sunrise_1k.hdr', function ( response ) {
+
+						hdrCubeRenderTarget = pmremGenerator.fromEquirectangular( response );
+
+						hdrCubeMap.mapping = THREE.EquirectangularReflectionMapping;
+						hdrCubeMap.minFilter = THREE.LinearFilter;
+						hdrCubeMap.magFilter = THREE.LinearFilter;
+						hdrCubeMap.needsUpdate = true;
+
+					} );
+
+				gainMap = new JPEGRLoader( renderer )
+					.load( 'textures/gainmap/spruit_sunrise_4k.jpg', function ( response ) {
+
+						gainmapRenderTarget = pmremGenerator.fromEquirectangular( response.renderTarget.texture );
+
+						// this would be ideal but it doesn't work:
+						// EquirectangularReflectionMapping is not applied
+						// to this render target
+
+						// gainmapBackground = gainmapRenderer.renderTarget.texture;
+
+						// we do this instead
+						gainmapBackground = gainMap.toDataTexture();
+
+						gainmapBackground.mapping = THREE.EquirectangularReflectionMapping;
+						gainmapBackground.minFilter = THREE.LinearFilter;
+						gainmapBackground.magFilter = THREE.LinearFilter;
+						gainmapBackground.generateMipmaps = false;
+
+						gainmapBackground.needsUpdate = true;
+
+					} );
+
+				separateGainMap = new GainMapLoader( renderer )
+					.load( [ 'textures/gainmap/spruit_sunrise_4k.webp', 'textures/gainmap/spruit_sunrise_4k-gainmap.webp', 'textures/gainmap/spruit_sunrise_4k.json' ], function ( response ) {
+
+						separateGainmapRenderTarget = pmremGenerator.fromEquirectangular( response.renderTarget.texture );
+
+						// this would be ideal but it doesn't work:
+						// EquirectangularReflectionMapping is not applied
+						// to this render target
+
+						// separateGainmapBackground = separateGainMap.renderTarget.texture;
+
+						// we do this instead
+						separateGainmapBackground = separateGainMap.toDataTexture();
+
+						separateGainmapBackground.mapping = THREE.EquirectangularReflectionMapping;
+						separateGainmapBackground.minFilter = THREE.LinearFilter;
+						separateGainmapBackground.magFilter = THREE.LinearFilter;
+						separateGainmapBackground.generateMipmaps = false;
+
+						separateGainmapBackground.needsUpdate = true;
+
+					} );
+
+
+
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
+
+				stats = new Stats();
+				container.appendChild( stats.dom );
+
+				controls = new OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 50;
+				controls.maxDistance = 300;
+
+				window.addEventListener( 'resize', onWindowResize );
+
+				const gui = new GUI();
+
+				gui.add( params, 'envMap', [ 'Gain map', 'Webp Gain map', 'HDR' ] );
+				gui.add( params, 'roughness', 0, 1, 0.01 );
+				gui.add( params, 'metalness', 0, 1, 0.01 );
+				gui.add( params, 'exposure', 0, 2, 0.01 );
+				gui.add( params, 'debug' );
+				gui.open();
+
+			}
+
+			function onWindowResize() {
+
+				const width = window.innerWidth;
+				const height = window.innerHeight;
+
+				camera.aspect = width / height;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( width, height );
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				stats.begin();
+				render();
+				stats.end();
+
+			}
+
+			function render() {
+
+				torusMesh.material.roughness = params.roughness;
+				torusMesh.material.metalness = params.metalness;
+
+				let renderTarget, cubeMap;
+
+				switch ( params.envMap ) {
+
+					case 'Gain map':
+						renderTarget = gainmapRenderTarget;
+						cubeMap = gainmapBackground || gainMap.renderTarget.texture;
+						break;
+					case 'Webp Gain map':
+						renderTarget = separateGainmapRenderTarget;
+						cubeMap = separateGainmapBackground || separateGainMap.renderTarget.texture;
+						break;
+					case 'HDR':
+						renderTarget = hdrCubeRenderTarget;
+						cubeMap = hdrCubeMap;
+						break;
+
+				}
+
+				const newEnvMap = renderTarget ? renderTarget.texture : null;
+
+				if ( newEnvMap && newEnvMap !== torusMesh.material.envMap ) {
+
+					torusMesh.material.envMap = newEnvMap;
+					torusMesh.material.needsUpdate = true;
+
+					planeMesh.material.map = newEnvMap;
+					planeMesh.material.needsUpdate = true;
+
+				}
+
+				torusMesh.rotation.y += 0.005;
+				planeMesh.visible = params.debug;
+
+				scene.background = cubeMap;
+				renderer.toneMappingExposure = params.exposure;
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>