javascript
/
three.js
дзеркало https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
							<!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">
		<style>
			body {
				font-family: Monospace;
				background-color: #101010;
				color: #fff;
				margin: 0px;
				overflow: hidden;
			}
			a {
				color: #f00;
			}

			#info {
				position: absolute;
				left: 0;
				top: 0px; width: 100%;
				padding: 5px;
				display: inline-block;
				text-align:center;
			}
		</style>
	</head>
	<body>
		<div id="info">
			<a href="http://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>
		<script src="../build/three.js"></script>
		<script src="js/controls/OrbitControls.js"></script>
		<script src="js/postprocessing/EffectComposer.js"></script>
		<script src="js/postprocessing/RenderPass.js"></script>
		<script src="js/postprocessing/MaskPass.js"></script>
		<script src="js/postprocessing/ShaderPass.js"></script>
		<script src="js/shaders/CopyShader.js"></script>
		<script src="js/shaders/ConvolutionShader.js"></script>
		<script src="js/shaders/LuminosityHighPassShader.js"></script>
		<script src="js/postprocessing/UnrealBloomPass.js"></script>
		<script src="js/Detector.js"></script>
		<script src="js/libs/stats.min.js"></script>

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

		var RADIUS = 75;

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

		THREE.ShaderChunk["lights_template"] += [
			"",
			"#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;",
			"  		getPointDirectLightIrradiance( pointlight, geometry, directLight );",
			"		RE_Direct( directLight, geometry, material, reflectedLight );",
			"	}",
			"}",
			"#endif"
		].join("\n");

		var lights = [], objects = [];

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

		function resizeTiles() {
			var width = window.innerWidth;
			var 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;
			
			var d = State.tileTexture.value.image.data;
			var ld = State.lightTexture.value.image.data;
			
			var viewMatrix = camera.matrixWorldInverse;
			
			d.fill(0);
			
			var vector = new THREE.Vector3();

			lights.forEach(function (light, index) {

				vector.setFromMatrixPosition( light.matrixWorld );
				
				var 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;
				
				var i4 = Math.floor(index / 8), i8 = 7 - (index % 8);
				for (var i = Math.floor(bs[2] / 32); i <= Math.ceil(bs[3]/32); i++) {
					for(var 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
		var lightBounds = function (){
			v = new THREE.Vector3();
			return function (camera, pos, r) {
				var minX = State.width, maxX = 0, minY = State.height, maxY = 0, hw = State.width / 2, hh = State.height / 2;
				for(var 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;
					var vector = v.project(camera);
					var x = (vector.x * hw) + hw;
					var 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

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

		var renderer = new THREE.WebGLRenderer( { antialias: false } );
		renderer.toneMapping = THREE.LinearToneMapping;
		container.appendChild( renderer.domElement );
		
		var 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 ));
		
		var bloom = new THREE.UnrealBloomPass( new THREE.Vector2(), 0.8, 0.6, 0.8 );
		bloom.renderToScreen = true;				

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

		controls = new THREE.OrbitControls( camera, renderer.domElement );
		controls.minDistance = 120;
		controls.maxDistance = 320;
			
		var materials = [];

		var 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) {
			var sphereGeom = new THREE.SphereBufferGeometry( 0.5, 32, 32 );
			var tIndex = Math.round(Math.random() * 3);
			Object.keys(Heads).forEach(function(t, index) {
				var g = new THREE.Group();
				var conf = Heads[t];
				var ml = THREE.ShaderLib[conf.type];
				var 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.uniforms.opacity.value = tIndex === index ? 0.9 : 1;
				mtl.uniforms.tileData = State.tileData;
				mtl.uniforms.tileTexture = State.tileTexture;
				mtl.uniforms.lightTexture = State.lightTexture;
				for( var u in conf.uniforms ) {
					var 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);
				var obj = new THREE.Mesh(geom, mtl);
				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(var i=0; i < 8; i++) {
					var sat = Math.floor(33 + 33 * Math.random());
					var chroma = Math.random() * 100; 
					var l = new THREE.Group();

					l.add(new THREE.Mesh(
						sphereGeom, 
						new THREE.MeshBasicMaterial( { color: new THREE.Color("hsl(" + chroma + ", " + sat + "%, 50%)") } )
					));
					l.add(new THREE.Mesh(
						sphereGeom, 
						new THREE.MeshBasicMaterial( { 
							color: new THREE.Color("hsl(" + chroma + ", " + sat + "%, 50%)"), 
							transparent: true,
							opacity: 0.033
						} )
					));
					l.children[1].scale.set(6.66,6.66,6.66);

					l._light = {
						color: new THREE.Color("hsl(" + chroma + ", " + sat + "%, 50%)"),
						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) {
				var ld = l._light;
				var 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 resize() {
			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, camera, scene, renderTarget) {
			bloom.render(renderer, null, renderTarget);
		}

		scene.onBeforeRender = tileLights;

		scene.onAfterRender = postEffect;

		var loader = new THREE.JSONLoader();

		loader.load('./obj/walt/WaltHead_slim.js', function(geometry) {
			window.addEventListener("resize", resize);
			init(geometry);
			resize();
			
			renderer.animate( function(time) {
				update(time/1000);
				stats.begin();
				renderer.render(scene, camera, renderTarget); 
				stats.end();
			});
		});
		</script>
	</body>
</html>