javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js white furnace test</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 {
				color: #444;
			}
		</style>

	</head>
	<body>

		<div id="container">
			<div id="info">
				<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> -
				<a href="https://google.github.io/filament/Filament.md.html#toc4.7.2" target="_blank" rel="noopener">White Furnace</a> energy conservation test by <a href="https://jsantell.com/" target="_blank" rel="noopener">Jordan Santell</a><br/><br/>
				There are 11 fully metal spheres with full white specular color and increasing roughness values rendered here. A metal object, no matter how rough, fully reflects all energy. If uniformly lit, the spheres should be indistinguishable from the environment. If spheres are visible, then some energy has been lost or gained after reflection.<br />
			</div>
		</div>

		<script type="module">
			import {
				Color,
				CubeCamera,
				DoubleSide,
				Mesh,
				MeshBasicMaterial,
				MeshPhysicalMaterial,
				OrthographicCamera,
				Scene,
				SphereBufferGeometry,
				WebGLRenderer
			} from "../build/three.module.js";

			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
			import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';

			var scene, camera, renderer, envMap, radianceMap;
			var right = 6;

			function init() {

				var width = window.innerWidth;
				var height = window.innerHeight;
				var aspect = width / height;

				// renderer

				renderer = new WebGLRenderer( { antialias: true } );
				renderer.setSize( width, height );
				renderer.setPixelRatio( window.devicePixelRatio );
				document.body.appendChild( renderer.domElement );

				window.addEventListener( 'resize', onResize, false );

				// scene

				scene = new Scene();

				// camera

				camera = new OrthographicCamera( - right, right, right / aspect, - right / aspect, 1, 30 );
				camera.position.set( 0, 0, 9 );

			}

			function createObjects() {

				var geo = new SphereBufferGeometry( 0.4, 32, 32 );
				var count = 10;
				for ( var x = 0; x <= count; x ++ ) {

					var mesh = new Mesh( geo, new MeshPhysicalMaterial( {
						roughness: x / count,
						metalness: 1,
						color: 0xffffff,
						envMap: radianceMap,
						envMapIntensity: 1,
						reflectivity: 1,
					} ) );
					mesh.position.x = x - ( Math.floor( count / 2 ) );
					scene.add( mesh );

				}

			}

			function createEnvironment() {

				var color = new Color( 0xcccccc );
				var sky = new Mesh( new SphereBufferGeometry( 1, 32, 32 ), new MeshBasicMaterial( {
					color: color,
					side: DoubleSide,
				} ) );
				sky.scale.setScalar( 100 );

				var envScene = new Scene();
				envScene.add( sky );
				envScene.background = color;
				var cubeCamera = new CubeCamera( 1, 100, 256, 256 );
				cubeCamera.update( renderer, envScene );

				envMap = cubeCamera.renderTarget.texture;

				scene.background = color;

			}

			function getRadiance() {

				return new Promise( function ( resolve ) {

					var pmremGenerator = new PMREMGenerator( envMap );
					pmremGenerator.update( renderer );
					var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
					pmremCubeUVPacker.update( renderer );
					var cubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;

					pmremGenerator.dispose();
					pmremCubeUVPacker.dispose();
					radianceMap = cubeRenderTarget.texture;
					resolve();

				} );

			}

			function onResize() {

				var aspect = window.innerWidth / window.innerHeight;
				camera.top = right / aspect;
				camera.bottom = - camera.top;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );
				render();

			}

			function render() {

				renderer.render( scene, camera );

			}

			Promise.resolve()
				.then( init )
				.then( createEnvironment )
				.then( getRadiance )
				.then( createObjects )
				.then( render );

		</script>
	</body>
</html>