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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - tiled forward lighting</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">threejs</a> - Tiled forward lighting<br/>
			Created by <a href="https://github.com/wizgrav" target="_blank" rel="noopener">wizgrav</a>.
		</div>

		<!-- Import maps polyfill -->
		<!-- Remove this when import maps will be widely supported -->
		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';

			import Stats from 'three/addons/libs/stats.module.js';

			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';

			import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';

			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.

			// Simple form of tiled forward lighting
			// using texels as bitmasks of 32 lights

			const RADIUS = 75;

			THREE.ShaderChunk[ 'lights_pars_begin' ] += [
				'',
				'#if defined TILED_FORWARD',
				'uniform vec4 tileData;',
				'uniform sampler2D tileTexture;',
				'uniform sampler2D lightTexture;',
				'#endif'
			].join( '\n' );

			THREE.ShaderChunk[ 'lights_fragment_end' ] += [
				'',
				'#if defined TILED_FORWARD',
				'vec2 tUv = floor(gl_FragCoord.xy / tileData.xy * 32.) / 32. + tileData.zw;',
				'vec4 tile = texture2D(tileTexture, tUv);',
				'for (int i=0; i < 4; i++) {',
				'	float tileVal = tile.x * 255.;',
				'  	tile.xyzw = tile.yzwx;',
				'	if(tileVal == 0.){ continue; }',
				'  	float tileDiv = 128.;',
				'	for (int j=0; j < 8; j++) {',
				'  		if (tileVal < tileDiv) {  tileDiv *= 0.5; continue; }',
				'		tileVal -= tileDiv;',
				'		tileDiv *= 0.5;',
				'  		PointLight pointlight;',
				'		float uvx = (float(8 * i + j) + 0.5) / 32.;',
				'  		vec4 lightData = texture2D(lightTexture, vec2(uvx, 0.));',
				'  		vec4 lightColor = texture2D(lightTexture, vec2(uvx, 1.));',
				'  		pointlight.position = lightData.xyz;',
				'  		pointlight.distance = lightData.w;',
				'  		pointlight.color = lightColor.rgb;',
				'  		pointlight.decay = lightColor.a;',
				'  		getPointLightInfo( pointlight, geometry, directLight );',
				'		RE_Direct( directLight, geometry, material, reflectedLight );',
				'	}',
				'}',
				'#endif'
			].join( '\n' );

			const lights = [];

			const State = {
				rows: 0,
				cols: 0,
				width: 0,
				height: 0,
				tileData: { value: null },
				tileTexture: { value: null },
				lightTexture: {
					value: new THREE.DataTexture( new Float32Array( 32 * 2 * 4 ), 32, 2, THREE.RGBAFormat, THREE.FloatType )
				},
			};

			function resizeTiles() {

				const width = window.innerWidth;
				const height = window.innerHeight;

				State.width = width;
				State.height = height;
				State.cols = Math.ceil( width / 32 );
				State.rows = Math.ceil( height / 32 );
				State.tileData.value = [ width, height, 0.5 / Math.ceil( width / 32 ), 0.5 / Math.ceil( height / 32 ) ];
				State.tileTexture.value = new THREE.DataTexture( new Uint8Array( State.cols * State.rows * 4 ), State.cols, State.rows );

			}

			// Generate the light bitmasks and store them in the tile texture
			function tileLights( renderer, scene, camera ) {

				if ( ! camera.projectionMatrix ) return;

				const d = State.tileTexture.value.image.data;
				const ld = State.lightTexture.value.image.data;

				const viewMatrix = camera.matrixWorldInverse;

				d.fill( 0 );

				const vector = new THREE.Vector3();

				lights.forEach( function ( light, index ) {

					vector.setFromMatrixPosition( light.matrixWorld );

					const bs = lightBounds( camera, vector, light._light.radius );

					vector.applyMatrix4( viewMatrix );
					vector.toArray( ld, 4 * index );
					ld[ 4 * index + 3 ] = light._light.radius;
					light._light.color.toArray( ld, 32 * 4 + 4 * index );
					ld[ 32 * 4 + 4 * index + 3 ] = light._light.decay;

					if ( bs[ 1 ] < 0 || bs[ 0 ] > State.width || bs[ 3 ] < 0 || bs[ 2 ] > State.height ) return;
					if ( bs[ 0 ] < 0 ) bs[ 0 ] = 0;
					if ( bs[ 1 ] > State.width ) bs[ 1 ] = State.width;
					if ( bs[ 2 ] < 0 ) bs[ 2 ] = 0;
					if ( bs[ 3 ] > State.height ) bs[ 3 ] = State.height;

					const i4 = Math.floor( index / 8 ), i8 = 7 - ( index % 8 );

					for ( let i = Math.floor( bs[ 2 ] / 32 ); i <= Math.ceil( bs[ 3 ] / 32 ); i ++ ) {

						for ( let j = Math.floor( bs[ 0 ] / 32 ); j <= Math.ceil( bs[ 1 ] / 32 ); j ++ ) {

							d[ ( State.cols * i + j ) * 4 + i4 ] |= 1 << i8;

						}

					}

				} );

				State.tileTexture.value.needsUpdate = true;
				State.lightTexture.value.needsUpdate = true;

			}

			// Screen rectangle bounds from light sphere's world AABB
			const lightBounds = function () {

				const v = new THREE.Vector3();
				return function ( camera, pos, r ) {

					let minX = State.width, maxX = 0, minY = State.height, maxY = 0;
					const hw = State.width / 2, hh = State.height / 2;

					for ( let i = 0; i < 8; i ++ ) {

						v.copy( pos );
						v.x += i & 1 ? r : - r;
						v.y += i & 2 ? r : - r;
						v.z += i & 4 ? r : - r;
						const vector = v.project( camera );
						const x = ( vector.x * hw ) + hw;
						const y = ( vector.y * hh ) + hh;
						minX = Math.min( minX, x );
						maxX = Math.max( maxX, x );
						minY = Math.min( minY, y );
						maxY = Math.max( maxY, y );

					}

					return [ minX, maxX, minY, maxY ];

				};

			}();


			// Rendering

			const container = document.createElement( 'div' );
			document.body.appendChild( container );
			const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
			camera.position.set( 0.0, 0.0, 240.0 );
			const scene = new THREE.Scene();
			scene.background = new THREE.Color( 0x111111 );

			const renderer = new THREE.WebGLRenderer();
			renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
			renderer.toneMapping = THREE.NoToneMapping;
			container.appendChild( renderer.domElement );

			const renderTarget = new THREE.WebGLRenderTarget();

			scene.add( new THREE.AmbientLight( 0xffffff, 0.33 ) );
			// At least one regular Pointlight is needed to activate light support
			scene.add( new THREE.PointLight( 0xff0000, 0.1, 0.1 ) );

			const bloom = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 0.8, 0.6, 0.8 );
			bloom.renderToScreen = true;

			const stats = new Stats();
			container.appendChild( stats.dom );

			const controls = new OrbitControls( camera, renderer.domElement );
			controls.minDistance = 120;
			controls.maxDistance = 320;

			const materials = [];

			const Heads = [
				{ type: 'physical', uniforms: { 'diffuse': 0x888888, 'metalness': 1.0, 'roughness': 0.66 }, defines: {} },
				{ type: 'standard', uniforms: { 'diffuse': 0x666666, 'metalness': 0.1, 'roughness': 0.33 }, defines: {} },
				{ type: 'phong', uniforms: { 'diffuse': 0x777777, 'shininess': 20 }, defines: {} },
				{ type: 'phong', uniforms: { 'diffuse': 0x555555, 'shininess': 10 }, defines: { TOON: 1 } }
			];

			function init( geom ) {

				const sphereGeom = new THREE.SphereGeometry( 0.5, 32, 32 );
				const tIndex = Math.round( Math.random() * 3 );

				Object.keys( Heads ).forEach( function ( t, index ) {

					const g = new THREE.Group();
					const conf = Heads[ t ];
					const ml = THREE.ShaderLib[ conf.type ];
					const mtl = new THREE.ShaderMaterial( {
						lights: true,
						fragmentShader: ml.fragmentShader,
						vertexShader: ml.vertexShader,
						uniforms: THREE.UniformsUtils.clone( ml.uniforms ),
						defines: conf.defines,
						transparent: tIndex === index ? true : false,
					} );

					mtl.extensions.derivatives = true;

					mtl.uniforms[ 'opacity' ].value = tIndex === index ? 0.9 : 1;
					mtl.uniforms[ 'tileData' ] = State.tileData;
					mtl.uniforms[ 'tileTexture' ] = State.tileTexture;
					mtl.uniforms[ 'lightTexture' ] = State.lightTexture;

					for ( const u in conf.uniforms ) {

						const vu = conf.uniforms[ u ];

						if ( mtl.uniforms[ u ].value.set ) {

							mtl.uniforms[ u ].value.set( vu );

						} else {

							mtl.uniforms[ u ].value = vu;

						}

					}

					mtl.defines[ 'TILED_FORWARD' ] = 1;
					materials.push( mtl );

					const obj = new THREE.Mesh( geom, mtl );
					obj.position.y = - 37;
					mtl.side = tIndex === index ? THREE.FrontSide : THREE.DoubleSide;

					g.rotation.y = index * Math.PI / 2;
					g.position.x = Math.sin( index * Math.PI / 2 ) * RADIUS;
					g.position.z = Math.cos( index * Math.PI / 2 ) * RADIUS;
					g.add( obj );

					for ( let i = 0; i < 8; i ++ ) {

						const color = new THREE.Color().setHSL( Math.random(), 1.0, 0.5 );
						const l = new THREE.Group();

						l.add( new THREE.Mesh(
							sphereGeom,
							new THREE.MeshBasicMaterial( {
								color: color
							} )
						) );

						l.add( new THREE.Mesh(
							sphereGeom,
							new THREE.MeshBasicMaterial( {
								color: color,
								transparent: true,
								opacity: 0.033
							} )
						) );

						l.children[ 1 ].scale.set( 6.66, 6.66, 6.66 );

						l._light = {
							color: color,
							radius: RADIUS,
							decay: 1,
							sy: Math.random(),
							sr: Math.random(),
							sc: Math.random(),
							py: Math.random() * Math.PI,
							pr: Math.random() * Math.PI,
							pc: Math.random() * Math.PI,
							dir: Math.random() > 0.5 ? 1 : - 1
						};

						lights.push( l );
						g.add( l );

					}

					scene.add( g );

				} );

			}

			function update( now ) {

				lights.forEach( function ( l ) {

					const ld = l._light;
					const radius = 0.8 + 0.2 * Math.sin( ld.pr + ( 0.6 + 0.3 * ld.sr ) * now );
					l.position.x = ( Math.sin( ld.pc + ( 0.8 + 0.2 * ld.sc ) * now * ld.dir ) ) * radius * RADIUS;
					l.position.z = ( Math.cos( ld.pc + ( 0.8 + 0.2 * ld.sc ) * now * ld.dir ) ) * radius * RADIUS;
					l.position.y = Math.sin( ld.py + ( 0.8 + 0.2 * ld.sy ) * now ) * radius * 32;

				} );

			}

			function onWindowResize() {

				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderTarget.setSize( window.innerWidth, window.innerHeight );
				bloom.setSize( window.innerWidth, window.innerHeight );
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				resizeTiles();

			}

			function postEffect( renderer ) {

				bloom.render( renderer, null, renderTarget );

			}

			scene.onBeforeRender = tileLights;

			scene.onAfterRender = postEffect;

			const loader = new OBJLoader();

			loader.load( 'models/obj/walt/WaltHead.obj', function ( object ) {

				const geometry = object.children[ 0 ].geometry;

				window.addEventListener( 'resize', onWindowResize );

				init( geometry );
				onWindowResize();

				renderer.setAnimationLoop( function ( time ) {

					update( time / 1000 );
					stats.begin();
					renderer.setRenderTarget( renderTarget );
					renderer.render( scene, camera );
					stats.end();

				} );

			} );

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