|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | + <head> |
| 4 | + <title>three.js webgpu - PMREM directional light test</title> |
| 5 | + <meta charset="utf-8"> |
| 6 | + <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> |
| 7 | + <link type="text/css" rel="stylesheet" href="main.css"> |
| 8 | + </head> |
| 9 | + <body> |
| 10 | + |
| 11 | + <div id="container"> |
| 12 | + <div id="info"> |
| 13 | + <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - |
| 14 | + PMREM test by <a href="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/elalish" target="_blank" rel="noopener">Emmett Lalish</a> |
| 15 | + <br> |
| 16 | + <br>1: white metal. 2: white dielectric. 3: black dielectric. |
| 17 | + <br>PMREM on: HDR with a single bright pixel. PMREM off: DirectionalLight. |
| 18 | + <br>The difference between these renders indicates the error in the PMREM approximations. |
| 19 | + </div> |
| 20 | + </div> |
| 21 | + |
| 22 | + <script type="importmap"> |
| 23 | + { |
| 24 | + "imports": { |
| 25 | + "three": "../build/three.webgpu.js", |
| 26 | + "three/tsl": "../build/three.webgpu.js", |
| 27 | + "three/addons/": "./jsm/" |
| 28 | + } |
| 29 | + } |
| 30 | + </script> |
| 31 | + |
| 32 | + <script type="module"> |
| 33 | + |
| 34 | + import * as THREE from 'three'; |
| 35 | + |
| 36 | + import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; |
| 37 | + import { HDRLoader } from 'three/addons/loaders/HDRLoader.js'; |
| 38 | + |
| 39 | + import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; |
| 40 | + |
| 41 | + import WebGPU from 'three/addons/capabilities/WebGPU.js'; |
| 42 | + |
| 43 | + let scene, camera, controls, renderer; |
| 44 | + |
| 45 | + async function init() { |
| 46 | + |
| 47 | + const width = window.innerWidth; |
| 48 | + const height = window.innerHeight; |
| 49 | + const aspect = width / height; |
| 50 | + |
| 51 | + // renderer |
| 52 | + |
| 53 | + renderer = new THREE.WebGPURenderer( { antialias: true } ); |
| 54 | + renderer.setPixelRatio( window.devicePixelRatio ); |
| 55 | + renderer.setSize( width, height ); |
| 56 | + |
| 57 | + // tonemapping |
| 58 | + renderer.toneMapping = THREE.ACESFilmicToneMapping; |
| 59 | + renderer.toneMappingExposure = 1; |
| 60 | + |
| 61 | + document.body.appendChild( renderer.domElement ); |
| 62 | + |
| 63 | + window.addEventListener( 'resize', onWindowResize ); |
| 64 | + |
| 65 | + // scene |
| 66 | + |
| 67 | + scene = new THREE.Scene(); |
| 68 | + |
| 69 | + // camera |
| 70 | + |
| 71 | + camera = new THREE.PerspectiveCamera( 40, aspect, 1, 30 ); |
| 72 | + updateCamera(); |
| 73 | + camera.position.set( 0, 0, 16 ); |
| 74 | + |
| 75 | + // controls |
| 76 | + |
| 77 | + controls = new OrbitControls( camera, renderer.domElement ); |
| 78 | + controls.addEventListener( 'change', render ); // use if there is no animation loop |
| 79 | + controls.minDistance = 4; |
| 80 | + controls.maxDistance = 20; |
| 81 | + |
| 82 | + // light |
| 83 | + |
| 84 | + const directionalLight = new THREE.DirectionalLight( 0xffffff, 0 ); // set intensity to 0 to start |
| 85 | + const x = 597; |
| 86 | + const y = 213; |
| 87 | + const theta = ( x + 0.5 ) * Math.PI / 512; |
| 88 | + const phi = ( y + 0.5 ) * Math.PI / 512; |
| 89 | + |
| 90 | + directionalLight.position.setFromSphericalCoords( 100, - phi, Math.PI / 2 - theta ); |
| 91 | + |
| 92 | + scene.add( directionalLight ); |
| 93 | + // scene.add( new THREE.DirectionalLightHelper( directionalLight ) ); |
| 94 | + |
| 95 | + // The spot1Lux HDR environment map is expressed in nits (lux / sr). The directional light has units of lux, |
| 96 | + // so to match a 1 lux light, we set a single pixel with a value equal to 1 divided by the solid |
| 97 | + // angle of the pixel in steradians. This image is 1024 x 512, |
| 98 | + // so the value is 1 / ( sin( phi ) * ( pi / 512 ) ^ 2 ) = 27,490 nits. |
| 99 | + |
| 100 | + const gui = new GUI(); |
| 101 | + gui.add( { enabled: true }, 'enabled' ) |
| 102 | + .name( 'PMREM' ) |
| 103 | + .onChange( value => { |
| 104 | + |
| 105 | + directionalLight.intensity = value ? 0 : 1; |
| 106 | + |
| 107 | + scene.traverse( function ( child ) { |
| 108 | + |
| 109 | + if ( child.isMesh ) { |
| 110 | + |
| 111 | + child.material.envMapIntensity = 1 - directionalLight.intensity; |
| 112 | + |
| 113 | + } |
| 114 | + |
| 115 | + } ); |
| 116 | + |
| 117 | + render(); |
| 118 | + |
| 119 | + } ); |
| 120 | + |
| 121 | + } |
| 122 | + |
| 123 | + async function createObjects() { |
| 124 | + |
| 125 | + let radianceMap = null; |
| 126 | + new HDRLoader() |
| 127 | + // .setDataType( THREE.FloatType ) |
| 128 | + .setPath( 'textures/equirectangular/' ) |
| 129 | + .load( 'spot1Lux.hdr', function ( texture ) { |
| 130 | + |
| 131 | + radianceMap = pmremGenerator.fromEquirectangular( texture ).texture; |
| 132 | + pmremGenerator.dispose(); |
| 133 | + |
| 134 | + scene.background = radianceMap; |
| 135 | + |
| 136 | + const geometry = new THREE.SphereGeometry( 0.4, 32, 32 ); |
| 137 | + |
| 138 | + for ( let x = 0; x <= 10; x ++ ) { |
| 139 | + |
| 140 | + for ( let y = 0; y <= 2; y ++ ) { |
| 141 | + |
| 142 | + const material = new THREE.MeshPhysicalNodeMaterial( { |
| 143 | + roughness: x / 10, |
| 144 | + metalness: y < 1 ? 1 : 0, |
| 145 | + color: y < 2 ? 0xffffff : 0x000000, |
| 146 | + envMap: radianceMap, |
| 147 | + envMapIntensity: 1 |
| 148 | + } ); |
| 149 | + |
| 150 | + const mesh = new THREE.Mesh( geometry, material ); |
| 151 | + mesh.position.x = x - 5; |
| 152 | + mesh.position.y = 1 - y; |
| 153 | + scene.add( mesh ); |
| 154 | + |
| 155 | + } |
| 156 | + |
| 157 | + } |
| 158 | + |
| 159 | + render(); |
| 160 | + |
| 161 | + } ); |
| 162 | + |
| 163 | + const pmremGenerator = new THREE.PMREMGenerator( renderer ); |
| 164 | + pmremGenerator.compileEquirectangularShader(); |
| 165 | + |
| 166 | + } |
| 167 | + |
| 168 | + function onWindowResize() { |
| 169 | + |
| 170 | + const width = window.innerWidth; |
| 171 | + const height = window.innerHeight; |
| 172 | + |
| 173 | + camera.aspect = width / height; |
| 174 | + updateCamera(); |
| 175 | + |
| 176 | + renderer.setSize( width, height ); |
| 177 | + |
| 178 | + render(); |
| 179 | + |
| 180 | + } |
| 181 | + |
| 182 | + function updateCamera() { |
| 183 | + |
| 184 | + const horizontalFoV = 40; |
| 185 | + const verticalFoV = 2 * Math.atan( Math.tan( horizontalFoV / 2 * Math.PI / 180 ) / camera.aspect ) * 180 / Math.PI; |
| 186 | + camera.fov = verticalFoV; |
| 187 | + camera.updateProjectionMatrix(); |
| 188 | + |
| 189 | + } |
| 190 | + |
| 191 | + function render() { |
| 192 | + |
| 193 | + renderer.render( scene, camera ); |
| 194 | + |
| 195 | + } |
| 196 | + |
| 197 | + Promise.resolve() |
| 198 | + .then( init ) |
| 199 | + .then( createObjects ) |
| 200 | + .then( render ); |
| 201 | + |
| 202 | + </script> |
| 203 | + </body> |
| 204 | +</html> |
0 commit comments