|
@@ -54,7 +54,7 @@
|
|
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
|
|
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
|
|
|
|
|
|
- import { GainMapLoader, HDRJPGLoader } from '@monogrid/gainmap-js';
|
|
|
+ import { HDRJPGLoader } from '@monogrid/gainmap-js';
|
|
|
|
|
|
const params = {
|
|
|
envMap: 'HDR JPG',
|
|
@@ -68,10 +68,9 @@
|
|
|
let camera, scene, renderer, controls;
|
|
|
let torusMesh, planeMesh;
|
|
|
let hdrJpg, hdrJpgPMREMRenderTarget, hdrJpgEquirectangularMap;
|
|
|
- let gainMap, gainMapPMREMRenderTarget, gainMapBackground;
|
|
|
let hdrPMREMRenderTarget, hdrEquirectangularMap;
|
|
|
|
|
|
-
|
|
|
+
|
|
|
const fileSizes = {};
|
|
|
const resolutions = {};
|
|
|
|
|
@@ -127,14 +126,15 @@
|
|
|
|
|
|
|
|
|
hdrJpg = new HDRJPGLoader( renderer )
|
|
|
- .load( 'textures/gainmap/spruit_sunrise_4k.jpg', function ( ) {
|
|
|
+ .load( 'textures/equirectangular/spruit_sunrise_4k.hdr.jpg', function ( ) {
|
|
|
|
|
|
resolutions[ 'HDR JPG' ] = hdrJpg.width + 'x' + hdrJpg.height;
|
|
|
+
|
|
|
displayStats( 'HDR JPG' );
|
|
|
-
|
|
|
+
|
|
|
hdrJpgEquirectangularMap = hdrJpg.renderTarget.texture;
|
|
|
hdrJpgPMREMRenderTarget = pmremGenerator.fromEquirectangular( hdrJpgEquirectangularMap );
|
|
|
-
|
|
|
+
|
|
|
hdrJpgEquirectangularMap.mapping = THREE.EquirectangularReflectionMapping;
|
|
|
hdrJpgEquirectangularMap.needsUpdate = true;
|
|
|
|
|
@@ -143,37 +143,14 @@
|
|
|
}, function ( progress ) {
|
|
|
|
|
|
fileSizes[ 'HDR JPG' ] = humanFileSize( progress.total );
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- gainMap = new GainMapLoader( renderer )
|
|
|
- .load( [
|
|
|
- 'textures/gainmap/spruit_sunrise_4k.webp',
|
|
|
- 'textures/gainmap/spruit_sunrise_4k-gainmap.webp',
|
|
|
- 'textures/gainmap/spruit_sunrise_4k.json'
|
|
|
- ], function ( ) {
|
|
|
-
|
|
|
- resolutions[ 'Webp Gain map (separate)' ] = gainMap.width + 'x' + gainMap.height;
|
|
|
-
|
|
|
- gainMapBackground = gainMap.renderTarget.texture;
|
|
|
- gainMapPMREMRenderTarget = pmremGenerator.fromEquirectangular( gainMapBackground );
|
|
|
-
|
|
|
- gainMapBackground.mapping = THREE.EquirectangularReflectionMapping;
|
|
|
- gainMapBackground.needsUpdate = true;
|
|
|
-
|
|
|
- gainMap.dispose();
|
|
|
-
|
|
|
- }, function ( progress ) {
|
|
|
-
|
|
|
- fileSizes[ 'Webp Gain map (separate)' ] = humanFileSize( progress.total );
|
|
|
|
|
|
} );
|
|
|
|
|
|
hdrEquirectangularMap = new RGBELoader()
|
|
|
- .load( 'textures/gainmap/spruit_sunrise_1k.hdr', function ( ) {
|
|
|
+ .load( 'textures/equirectangular/spruit_sunrise_1k.hdr', function ( ) {
|
|
|
|
|
|
resolutions[ 'HDR' ] = hdrEquirectangularMap.image.width + 'x' + hdrEquirectangularMap.image.height;
|
|
|
-
|
|
|
+
|
|
|
hdrPMREMRenderTarget = pmremGenerator.fromEquirectangular( hdrEquirectangularMap );
|
|
|
|
|
|
hdrEquirectangularMap.mapping = THREE.EquirectangularReflectionMapping;
|
|
@@ -202,13 +179,13 @@
|
|
|
|
|
|
const gui = new GUI();
|
|
|
|
|
|
- gui.add( params, 'envMap', [ 'HDR JPG', 'Webp Gain map (separate)', 'HDR' ] ).onChange( displayStats );
|
|
|
+ gui.add( params, 'envMap', [ 'HDR JPG', 'HDR' ] ).onChange( displayStats );
|
|
|
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 displayStats( value ) {
|
|
|
|
|
|
lbl.innerHTML = value + ' size : ' + fileSizes[ value ] + ', Resolution: ' + resolutions[ value ];
|
|
@@ -281,10 +258,6 @@
|
|
|
pmremRenderTarget = hdrJpgPMREMRenderTarget;
|
|
|
equirectangularMap = hdrJpgEquirectangularMap;
|
|
|
break;
|
|
|
- case 'Webp Gain map (separate)':
|
|
|
- pmremRenderTarget = gainMapPMREMRenderTarget;
|
|
|
- equirectangularMap = gainMapBackground;
|
|
|
- break;
|
|
|
case 'HDR':
|
|
|
pmremRenderTarget = hdrPMREMRenderTarget;
|
|
|
equirectangularMap = hdrEquirectangularMap;
|