Головна сторінка Огляд Довідка
Увійти
javascript
/
three.js
дзеркало https://github.com/tazdij/three.js.git
2
0
Відгалуження 0
Файли Проблеми 0 Wiki
Переглянути джерело

initial version of the shader preloader

gero3 8 роки тому
батько
fb9ba6dcb8
коміт
2073aae50b
2 змінених файлів з 1699 додано та 0 видалено
Об'єднаний вигляд Показати статистику Diff
  1. 1658 0
      examples/webgl_materials_nodes_multiple.html
  2. 41 0
      src/renderers/WebGLRenderer.js

+ 1658 - 0
examples/webgl_materials_nodes_multiple.html
Переглянути файл 

@@ -0,0 +1,1658 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl - node material</title>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
+			body {
 
+				color: #fff;
 
+				font-family:Monospace;
 
+				font-size:13px;
 
+				margin: 0px;
 
+				text-align:center;
 
+				overflow: hidden;
 
+			}
 
+
 
+			#info {
 
+				color: #fff;
 
+				position: absolute;
 
+				top: 10px;
 
+				width: 100%;
 
+				text-align: center;
 
+				display:block;
 
+			}
 
+			
+			#waitScreen {
 
+				color: #000;
 
+			    position: absolute;
 
+			    top: 50%;
 
+			    left: 50%;
 
+			    margin-top: -50px;
 
+			    margin-left: -50px;
 
+			    width: 100px;
 
+			    height: 100px;
 
+			}
 
+			
+			.hide {
 
+				display:none;
 
+			}
 
+
 
+			a { color: white }
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
+		<div id="container"></div>
 
+		<div id="info">
 
+			<a href="http://threejs.org" target="_blank">three.js</a> - Node-Based Material
 
+			<br /><span class="button" id="preload">change preload</span>
 
+		</div>
 
+
 
+		<div id="waitScreen">
 
+			Loading ...
 
+		</div>
 
+
 
+		<script src="../build/three.js"></script>
 
+
 
+		<script src='js/geometries/TeapotBufferGeometry.js'></script>
 
+		<script src="js/controls/OrbitControls.js"></script>
 
+		<script src="js/libs/dat.gui.min.js"></script>
 
+
 
+		<!-- NodeLibrary -->
 
+		<script src="js/nodes/GLNode.js"></script>
 
+		<script src="js/nodes/RawNode.js"></script>
 
+		<script src="js/nodes/TempNode.js"></script>
 
+		<script src="js/nodes/InputNode.js"></script>
 
+		<script src="js/nodes/ConstNode.js"></script>
 
+		<script src="js/nodes/VarNode.js"></script>
 
+		<script src="js/nodes/FunctionNode.js"></script>
 
+		<script src="js/nodes/FunctionCallNode.js"></script>
 
+		<script src="js/nodes/AttributeNode.js"></script>
 
+		<script src="js/nodes/NodeBuilder.js"></script>
 
+		<script src="js/nodes/NodeLib.js"></script>
 
+		<script src="js/nodes/NodeMaterial.js"></script>
 
+
 
+		<!-- Accessors -->
 
+		<script src="js/nodes/accessors/PositionNode.js"></script>
 
+		<script src="js/nodes/accessors/NormalNode.js"></script>
 
+		<script src="js/nodes/accessors/UVNode.js"></script>
 
+		<script src="js/nodes/accessors/ScreenUVNode.js"></script>
 
+		<script src="js/nodes/accessors/ColorsNode.js"></script>
 
+		<script src="js/nodes/accessors/CameraNode.js"></script>
 
+		<script src="js/nodes/accessors/ReflectNode.js"></script>
 
+		<script src="js/nodes/accessors/LightNode.js"></script>
 
+
 
+		<!-- Inputs -->
 
+		<script src="js/nodes/inputs/IntNode.js"></script>
 
+		<script src="js/nodes/inputs/FloatNode.js"></script>
 
+		<script src="js/nodes/inputs/ColorNode.js"></script>
 
+		<script src="js/nodes/inputs/Vector2Node.js"></script>
 
+		<script src="js/nodes/inputs/Vector3Node.js"></script>
 
+		<script src="js/nodes/inputs/Vector4Node.js"></script>
 
+		<script src="js/nodes/inputs/TextureNode.js"></script>
 
+		<script src="js/nodes/inputs/CubeTextureNode.js"></script>
 
+
 
+		<!-- Math -->
 
+		<script src="js/nodes/math/Math1Node.js"></script>
 
+		<script src="js/nodes/math/Math2Node.js"></script>
 
+		<script src="js/nodes/math/Math3Node.js"></script>
 
+		<script src="js/nodes/math/OperatorNode.js"></script>
 
+
 
+		<!-- Utils -->
 
+		<script src="js/nodes/utils/SwitchNode.js"></script>
 
+		<script src="js/nodes/utils/JoinNode.js"></script>
 
+		<script src="js/nodes/utils/TimerNode.js"></script>
 
+		<script src="js/nodes/utils/RoughnessToBlinnExponentNode.js"></script>
 
+		<script src="js/nodes/utils/VelocityNode.js"></script>
 
+		<script src="js/nodes/utils/LuminanceNode.js"></script>
 
+		<script src="js/nodes/utils/ColorAdjustmentNode.js"></script>
 
+		<script src="js/nodes/utils/NoiseNode.js"></script>
 
+		<script src="js/nodes/utils/ResolutionNode.js"></script>
 
+		<script src="js/nodes/utils/BumpNode.js"></script>
 
+		<script src="js/nodes/utils/BlurNode.js"></script>
 
+
 
+		<!-- Phong Material -->
 
+		<script src="js/nodes/materials/PhongNode.js"></script>
 
+		<script src="js/nodes/materials/PhongNodeMaterial.js"></script>
 
+
 
+		<!-- Standard Material -->
 
+		<script src="js/nodes/materials/StandardNode.js"></script>
 
+		<script src="js/nodes/materials/StandardNodeMaterial.js"></script>
 
+
 
+		<script>
 
+
 
+		/* global THREE */
 
+
 
+		var container = document.getElementById( 'container' );
 
+
 
+		var renderer, scene, camera, clock = new THREE.Clock(), fov = 50;
 
+		var teapot;
 
+		var controls;
 
+		var move = false;
 
+		var rtTexture, rtMaterial;
 
+		var meshes = [];
 
+		/*var gui, guiElements = [];*/
 
+		var textures = {
 
+			brick : { url : 'textures/brick_diffuse.jpg' },
 
+			grass : { url : 'textures/terrain/grasslight-big.jpg' },
 
+			grassNormal : { url : 'textures/terrain/grasslight-big-nm.jpg' },
 
+			decalDiffuse : { url : 'textures/decal/decal-diffuse.png' },
 
+			cloud : { url : 'textures/lava/cloud.png' },
 
+			spherical : { url : 'textures/envmap.png' }
 
+		};
 
+
 
+		var param = { example: 'standard' };
 
+
 
+		function getTexture( name ) {
 
+
 
+			var texture = textures[ name ].texture;
 
+
 
+			if ( ! texture ) {
 
+
 
+				texture = textures[ name ].texture = new THREE.TextureLoader().load( textures[ name ].url );
 
+				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 
+
 
+			}
 
+
 
+			return texture;
 
+
 
+		}
 
+
 
+		var cubemap = function() {
 
+
 
+			var path = "textures/cube/Park2/";
 
+			var format = '.jpg';
 
+			var urls = [
 
+					path + 'posx' + format, path + 'negx' + format,
 
+					path + 'posy' + format, path + 'negy' + format,
 
+					path + 'posz' + format, path + 'negz' + format
 
+				];
 
+
 
+			var textureCube = new THREE.CubeTextureLoader().load( urls );
 
+			textureCube.format = THREE.RGBFormat;
 
+
 
+			return textureCube;
 
+
 
+		}();
 
+		
+		document.getElementById( "preload" ).addEventListener( 'click', function() {
 
+
 
+			var hash = document.location.hash.substr( 1 );
 
+
 
+			if ( hash.length === 0 ) {
 
+				window.location.hash = "#NoPreLoad"
 
+			} else {
 
+				window.location.hash = ""
 
+			}
 
+			
+			location.reload(true);
 
+
 
+		}, false );
 
+
 
+		window.addEventListener( 'load', init );
 
+		
+		var materials = ['standard',
 
+			'physical',
 
+			'phong',
 
+			'layers',
 
+			'rim',
 
+			'color-adjustment',
 
+			'bump',
 
+			'blur',
 
+			'spherical-reflection',
 
+			'fresnel',
 
+			'saturation',
 
+			'top-bottom',
 
+			'skin',
 
+			'skin-phong',
 
+			'caustic',
 
+			'displace',
 
+			'plush',
 
+			'toon',
 
+			'camera-depth',
 
+			'soft-body',
 
+			'wave',
 
+			'triangle-blur',
 
+			'expression',
 
+			'sss',
 
+			'translucent',
 
+			'smoke',
 
+			'firefly',
 
+			'reserved-keywords',
 
+			'varying',
 
+			'custom-attribute']
 
+
 
+		function init() {
 
+
 
+			renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+			renderer.setPixelRatio( window.devicePixelRatio );
 
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
+			container.appendChild( renderer.domElement );
 
+
 
+			scene = new THREE.Scene();
 
+
 
+			camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
 
+			camera.position.x = 0;
 
+			camera.position.z = - 300;
 
+			camera.position.y = 200;
 
+			camera.target = new THREE.Vector3();
 
+
 
+			controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+			controls.minDistance = 50;
 
+			controls.maxDistance = 400;
 
+
 
+			scene.add( new THREE.AmbientLight( 0x464646 ) );
 
+
 
+			var light = new THREE.DirectionalLight( 0xffddcc, 1 );
 
+			light.position.set( 1, 0.75, 0.5 );
 
+			scene.add( light );
 
+
 
+			var light = new THREE.DirectionalLight( 0xccccff, 1 );
 
+			light.position.set( - 1, 0.75, - 0.5 );
 
+			scene.add( light );
 
+
 
+			teapot = new THREE.TeapotBufferGeometry( 15, 18 );
 
+
 
+			var itemsonrow = 10;
 
+
 
+			for (var i = 0 ; i<  itemsonrow * itemsonrow; i ++ ){
 
+				
+				var mesh = new THREE.Mesh( teapot );
 
+				
+				mesh.position.x = 50 *(i%itemsonrow) -50*itemsonrow/2;
 
+				mesh.position.z = 50*Math.floor(i/itemsonrow)-150; 
+				updateMaterial(mesh, materials[Math.floor(Math.random()*30)]);
 
+				scene.add( mesh );
 
+				meshes.push(mesh); 
+			}
 
+
 
+			window.addEventListener( 'resize', onWindowResize, false );
 
+
 
+			var hash = document.location.hash.substr( 1 );
 
+
 
+			if ( hash.length === 0 ) {
 
+
 
+				renderer.compileMaterials(scene,camera);
 
+				
+			}
 
+			
+			document.getElementById("waitScreen").className = "hide";
 
+			
+			setTimeout(function() {
 
+				
+				onWindowResize();
 
+				animate();
 
+				
+			}, 1);
 
+
 
+		}
 
+
 
+		function updateMaterial(mesh, name) {
 
+
 
+			move = false;
 
+
 
+			if ( mesh.material ) mesh.material.dispose();
 
+
 
+			if ( rtTexture ) {
 
+
 
+				rtTexture.dispose();
 
+				rtTexture = null;
 
+
 
+			}
 
+
 
+			if ( rtMaterial ) {
 
+
 
+				rtMaterial.dispose();
 
+				rtMaterial = null;
 
+
 
+			}
 
+
 
+			var mtl;
 
+
 
+
 
+			switch ( name ) {
 
+
 
+				case 'phong':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					//mtl.color = // albedo (vec3)
 
+					//mtl.alpha = // opacity (float)
 
+					//mtl.specular = // specular color (vec3)
 
+					//mtl.shininess = // shininess (float)
 
+					//mtl.normal = // normalmap (vec3)
 
+					//mtl.normalScale = // normalmap scale (vec2)
 
+					//mtl.emissive = // emissive color (vec3)
 
+					//mtl.ambient = // ambient color (vec3)
 
+					//mtl.shadow = // shadowmap (vec3)
 
+					//mtl.light = // custom-light (vec3)
 
+					//mtl.ao = // ambient occlusion (float)
 
+					//mtl.light = // input/output light (vec3)
 
+					//mtl.environment = // reflection/refraction (vec3)
 
+					//mtl.environmentAlpha = // environment alpha (float)
 
+					//mtl.transform = // vertex transformation (vec3)
 
+
 
+					var mask = new THREE.SwitchNode( new THREE.TextureNode( getTexture( "decalDiffuse" ) ), 'w' );
 
+
 
+					mtl.color = new THREE.TextureNode( getTexture( "grass" ) );
 
+					mtl.specular = new THREE.FloatNode( .5 );
 
+					mtl.shininess = new THREE.FloatNode( 15 );
 
+					mtl.environment = new THREE.CubeTextureNode( cubemap );
 
+					mtl.environmentAlpha = mask;
 
+					mtl.normal = new THREE.TextureNode( getTexture( "grassNormal" ) );
 
+					mtl.normalScale = new THREE.Math1Node( mask, THREE.Math1Node.INVERT );
 
+
 
+					break;
 
+
 
+				case 'standard':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.StandardNodeMaterial();
 
+
 
+					//mtl.color = // albedo (vec3)
 
+					//mtl.alpha = // opacity (float)
 
+					//mtl.roughness = // roughness (float)
 
+					//mtl.metalness = // metalness (float)
 
+					//mtl.normal = // normalmap (vec3)
 
+					//mtl.normalScale = // normalmap scale (vec2)
 
+					//mtl.emissive = // emissive color (vec3)
 
+					//mtl.ambient = // ambient color (vec3)
 
+					//mtl.shadow = // shadowmap (vec3)
 
+					//mtl.light = // custom-light (vec3)
 
+					//mtl.ao = // ambient occlusion (float)
 
+					//mtl.environment = // reflection/refraction (vec3)
 
+					//mtl.transform = // vertex transformation (vec3)
 
+
 
+					var mask = new THREE.SwitchNode( new THREE.TextureNode( getTexture( "decalDiffuse" ) ), 'w' );
 
+
 
+					var normalScale = new THREE.FloatNode( .3 );
 
+
 
+					var roughnessA = new THREE.FloatNode( .5 );
 
+					var metalnessA = new THREE.FloatNode( Math.random() );
 
+
 
+					var roughnessB = new THREE.FloatNode( 0 );
 
+					var metalnessB = new THREE.FloatNode( 1 );
 
+
 
+					var roughness = new THREE.Math3Node(
 
+						roughnessA,
 
+						roughnessB,
 
+						mask,
 
+						THREE.Math3Node.MIX
 
+					);
 
+
 
+					var metalness = new THREE.Math3Node(
 
+						metalnessA,
 
+						metalnessB,
 
+						mask,
 
+						THREE.Math3Node.MIX
 
+					);
 
+
 
+					var normalMask = new THREE.OperatorNode(
 
+						new THREE.Math1Node( mask, THREE.Math1Node.INVERT ),
 
+						normalScale,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					mtl.color = new THREE.ColorNode( 0xEEEEEE );
 
+					mtl.roughness = roughness;
 
+					mtl.metalness = metalness;
 
+					mtl.environment = new THREE.CubeTextureNode( cubemap );
 
+					mtl.normal = new THREE.TextureNode( getTexture( "grassNormal" ) );
 
+					mtl.normalScale = normalMask;
 
+
 
+
 
+					break;
 
+
 
+					case 'physical':
 
+
 
+						// MATERIAL
 
+
 
+						mtl = new THREE.StandardNodeMaterial();
 
+
 
+						//mtl.color = // albedo (vec3)
 
+						//mtl.alpha = // opacity (float)
 
+						//mtl.roughness = // roughness (float)
 
+						//mtl.metalness = // metalness (float)
 
+						//mtl.reflectivity = // reflectivity (float)
 
+						//mtl.clearCoat = // clearCoat (float)
 
+						//mtl.clearCoatRoughness = // clearCoatRoughness (float)
 
+						//mtl.normal = // normalmap (vec3)
 
+						//mtl.normalScale = // normalmap scale (vec2)
 
+						//mtl.emissive = // emissive color (vec3)
 
+						//mtl.ambient = // ambient color (vec3)
 
+						//mtl.shadow = // shadowmap (vec3)
 
+						//mtl.light = // custom-light (vec3)
 
+						//mtl.ao = // ambient occlusion (float)
 
+						//mtl.environment = // reflection/refraction (vec3)
 
+						//mtl.transform = // vertex transformation (vec3)
 
+
 
+						var mask = new THREE.SwitchNode( new THREE.TextureNode( getTexture( "decalDiffuse" ) ), 'w' );
 
+
 
+						var normalScale = new THREE.FloatNode( .3 );
 
+
 
+						var roughnessA = new THREE.FloatNode( Math.random() );
 
+						var metalnessA = new THREE.FloatNode( .5 );
 
+
 
+						var roughnessB = new THREE.FloatNode( 0 );
 
+						var metalnessB = new THREE.FloatNode( 1 );
 
+
 
+						var reflectivity = new THREE.FloatNode( 0 );
 
+						var clearCoat = new THREE.FloatNode( 1 );
 
+						var clearCoatRoughness = new THREE.FloatNode( 1 );
 
+
 
+						var roughness = new THREE.Math3Node(
 
+							roughnessA,
 
+							roughnessB,
 
+							mask,
 
+							THREE.Math3Node.MIX
 
+						);
 
+
 
+						var metalness = new THREE.Math3Node(
 
+							metalnessA,
 
+							metalnessB,
 
+							mask,
 
+							THREE.Math3Node.MIX
 
+						);
 
+
 
+						var normalMask = new THREE.OperatorNode(
 
+							new THREE.Math1Node( mask, THREE.Math1Node.INVERT ),
 
+							normalScale,
 
+							THREE.OperatorNode.MUL
 
+						);
 
+
 
+						mtl.color = new THREE.ColorNode( 0xEEEEEE );
 
+						mtl.roughness = roughness;
 
+						mtl.metalness = metalness;
 
+						mtl.reflectivity = reflectivity;
 
+						mtl.clearCoat = clearCoat;
 
+						mtl.clearCoatRoughness = clearCoatRoughness;
 
+						mtl.environment = new THREE.CubeTextureNode( cubemap );
 
+						mtl.normal = new THREE.TextureNode( getTexture( "grassNormal" ) );
 
+						mtl.normalScale = normalMask;
 
+
 
+					break;
 
+
 
+				case 'wave':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					var time = new THREE.TimerNode();
 
+					var speed = new THREE.FloatNode( Math.random() * 10 );
 
+					var scale = new THREE.FloatNode( 1 );
 
+					var worldScale = new THREE.FloatNode( .4 );
 
+					var colorA = new THREE.ColorNode( 0xFFFFFF );
 
+					var colorB = new THREE.ColorNode( 0x0054df );
 
+
 
+					var uv = new THREE.UVNode();
 
+
 
+					var timeScale = new THREE.OperatorNode(
 
+						time,
 
+						speed,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var worldScl = new THREE.OperatorNode(
 
+						new THREE.PositionNode(),
 
+						worldScale,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var posContinuous = new THREE.OperatorNode(
 
+						worldScl,
 
+						timeScale,
 
+						THREE.OperatorNode.ADD
 
+					);
 
+
 
+					var wave = new THREE.Math1Node( posContinuous, THREE.Math1Node.SIN );
 
+					wave = new THREE.SwitchNode( wave, 'x' );
 
+
 
+					var waveScale = new THREE.OperatorNode(
 
+						wave,
 
+						scale,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var displaceY = new THREE.JoinNode(
 
+						new THREE.FloatNode(),
 
+						waveScale,
 
+						new THREE.FloatNode()
 
+					);
 
+
 
+					var displace = new THREE.OperatorNode(
 
+						new THREE.NormalNode(),
 
+						displaceY,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var blend = new THREE.OperatorNode(
 
+						new THREE.PositionNode(),
 
+						displaceY,
 
+						THREE.OperatorNode.ADD
 
+					);
 
+
 
+					var color = new THREE.Math3Node(
 
+						colorB,
 
+						colorA,
 
+						wave,
 
+						THREE.Math3Node.MIX
 
+					);
 
+
 
+					mtl.color = color;
 
+					mtl.transform = blend;
 
+
 
+					break;
 
+
 
+				case 'rim':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					var intensity = 1.3;
 
+					var power = new THREE.FloatNode( 3 );
 
+					var color = new THREE.ColorNode( Math.floor(0xFFFFFF * Math.random() ));
 
+
 
+					var viewZ = new THREE.Math2Node(
 
+						new THREE.NormalNode( THREE.NormalNode.VIEW ),
 
+						new THREE.Vector3Node( 0, 0, - intensity ),
 
+						THREE.Math2Node.DOT
 
+					);
 
+
 
+					var rim = new THREE.OperatorNode(
 
+						viewZ,
 
+						new THREE.FloatNode( intensity ),
 
+						THREE.OperatorNode.ADD
 
+					);
 
+
 
+					var rimPower = new THREE.Math2Node(
 
+						rim,
 
+						power,
 
+						THREE.Math2Node.POW
 
+					);
 
+
 
+					var rimColor = new THREE.OperatorNode(
 
+						rimPower,
 
+						color,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					mtl.color = new THREE.ColorNode( 0x111111 );
 
+					mtl.emissive = rimColor;
 
+
 
+					break;
 
+
 
+				case 'color-adjustment':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					var texture = new THREE.TextureNode( getTexture( "brick" ) );
 
+
 
+					var hue = new THREE.FloatNode();
 
+					var sataturation = new THREE.FloatNode( Math.random() * 2 );
 
+					var vibrance = new THREE.FloatNode();
 
+					var brightness = new THREE.FloatNode( 0 );
 
+					var contrast = new THREE.FloatNode( 1 );
 
+
 
+					var hueNode = new THREE.ColorAdjustmentNode( texture, hue, THREE.ColorAdjustmentNode.HUE );
 
+					var satNode = new THREE.ColorAdjustmentNode( hueNode, sataturation, THREE.ColorAdjustmentNode.SATURATION );
 
+					var vibranceNode = new THREE.ColorAdjustmentNode( satNode, vibrance, THREE.ColorAdjustmentNode.VIBRANCE );
 
+					var brightnessNode = new THREE.ColorAdjustmentNode( vibranceNode, brightness, THREE.ColorAdjustmentNode.BRIGHTNESS );
 
+					var contrastNode = new THREE.ColorAdjustmentNode( brightnessNode, contrast, THREE.ColorAdjustmentNode.CONTRAST );
 
+
 
+					mtl.color = contrastNode;
 
+
 
+					break;
 
+
 
+				case 'bump':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					var diffuse = new THREE.TextureNode( getTexture( "brick" ) );
 
+
 
+					var bump = new THREE.BumpNode( new THREE.TextureNode( getTexture( "brick" ) ) );
 
+					bump.scale = new THREE.Vector2Node( - 1.5 + Math.random() * 3, - 1.5  + Math.random() * 3);
 
+
 
+					mtl.color = diffuse;
 
+					mtl.normal = bump;
 
+
 
+					break;
 
+
 
+				case 'blur':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					var diffuse = new THREE.TextureNode( getTexture( "brick" ) );
 
+
 
+					var blur = new THREE.BlurNode( new THREE.TextureNode( getTexture( "brick" ) ) );
 
+
 
+					mtl.color = blur;
 
+
 
+					break;
 
+
 
+				case 'spherical-reflection':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					mtl.environment = new THREE.TextureNode( getTexture( "spherical" ), new THREE.ReflectNode( THREE.ReflectNode.SPHERE ) );
 
+
 
+					break;
 
+
 
+				case 'fresnel':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					var reflectance = new THREE.FloatNode( 1.3 );
 
+					var power = new THREE.FloatNode( 1 );
 
+					var color = new THREE.CubeTextureNode( cubemap );
 
+
 
+					var viewZ = new THREE.Math2Node(
 
+						new THREE.NormalNode( THREE.NormalNode.VIEW ),
 
+						new THREE.Vector3Node( 0, 0, - 1 ),
 
+						THREE.Math2Node.DOT
 
+					);
 
+
 
+					var theta = new THREE.OperatorNode(
 
+						viewZ,
 
+						new THREE.FloatNode( 1 ),
 
+						THREE.OperatorNode.ADD
 
+					);
 
+
 
+					var thetaPower = new THREE.Math2Node(
 
+						theta,
 
+						power,
 
+						THREE.Math2Node.POW
 
+					);
 
+
 
+					var fresnel = new THREE.OperatorNode(
 
+						reflectance,
 
+						thetaPower,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					mtl.color = new THREE.ColorNode( Math.floor( 0xFFFFFF * Math.random() ) );
 
+					mtl.environment = color;
 
+					mtl.environmentAlpha = new THREE.Math1Node( fresnel, THREE.Math1Node.SAT );
 
+
 
+					break;
 
+
 
+				case 'layers':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					var tex1 = new THREE.TextureNode( getTexture( "grass" ) );
 
+					var tex2 = new THREE.TextureNode( getTexture( "brick" ) );
 
+
 
+					var offset = new THREE.FloatNode( 0 );
 
+					var scale = new THREE.FloatNode( Math.random() );
 
+					var uv = new THREE.UVNode();
 
+
 
+					var uvOffset = new THREE.OperatorNode(
 
+						offset,
 
+						uv,
 
+						THREE.OperatorNode.ADD
 
+					);
 
+
 
+					var uvScale = new THREE.OperatorNode(
 
+						uvOffset,
 
+						scale,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var mask = new THREE.TextureNode( getTexture( "decalDiffuse" ), uvScale );
 
+					var maskAlphaChannel = new THREE.SwitchNode( mask, 'w' );
 
+
 
+					var blend = new THREE.Math3Node(
 
+						tex1,
 
+						tex2,
 
+						maskAlphaChannel,
 
+						THREE.Math3Node.MIX
 
+					);
 
+
 
+					mtl.color = blend;
 
+
 
+					break;
 
+
 
+				case 'saturation':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.StandardNodeMaterial();
 
+
 
+					var tex = new THREE.TextureNode( getTexture( "brick" ) );
 
+					var sat = new THREE.FloatNode( Math.random() );
 
+
 
+					var satrgb = new THREE.FunctionNode( [
 
+					"vec3 satrgb(vec3 rgb, float adjustment) {",
 
+					//"	const vec3 W = vec3(0.2125, 0.7154, 0.0721);", // LUMA
 
+					"	vec3 intensity = vec3(dot(rgb, LUMA));",
 
+					"	return mix(intensity, rgb, adjustment);",
 
+					"}"
 
+					].join( "\n" ) );
 
+
 
+					var saturation = new THREE.FunctionCallNode( satrgb );
 
+					saturation.inputs.rgb = tex;
 
+					saturation.inputs.adjustment = sat;
 
+
 
+					// or try
 
+
 
+					//saturation.inputs[0] = tex;
 
+					//saturation.inputs[1] = sat;
 
+
 
+					mtl.color = saturation;
 
+
 
+					break;
 
+
 
+				case 'top-bottom':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					var top = new THREE.TextureNode( getTexture( "grass" ) );
 
+					var bottom = new THREE.TextureNode( getTexture( "brick" ) );
 
+
 
+					var normal = new THREE.NormalNode( THREE.NormalNode.WORLD );
 
+					var normalY = new THREE.SwitchNode( normal, 'y' );
 
+
 
+					var hard = new THREE.FloatNode( Math.random() * 9 );
 
+					var offset = new THREE.FloatNode( - 2.5 );
 
+
 
+					var hardClamp = new THREE.OperatorNode(
 
+						normalY,
 
+						hard,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var offsetClamp = new THREE.OperatorNode(
 
+						hardClamp,
 
+						offset,
 
+						THREE.OperatorNode.ADD
 
+					);
 
+
 
+					var clamp0at1 = new THREE.Math1Node( offsetClamp, THREE.Math1Node.SAT );
 
+
 
+					var blend = new THREE.Math3Node( top, bottom, clamp0at1, THREE.Math3Node.MIX );
 
+
 
+					mtl.color = blend;
 
+
 
+					break;
 
+
 
+				case 'displace':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					var time = new THREE.TimerNode();
 
+					var scale = new THREE.FloatNode( Math.random() * 2 );
 
+					var speed = new THREE.FloatNode( .2 );
 
+					var colorA = new THREE.ColorNode( 0xFFFFFF );
 
+					var colorB = new THREE.ColorNode( 0x0054df );
 
+
 
+					var uv = new THREE.UVNode();
 
+
 
+					var timeScl = new THREE.OperatorNode(
 
+						time,
 
+						speed,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var displaceOffset = new THREE.OperatorNode(
 
+						timeScl,
 
+						uv,
 
+						THREE.OperatorNode.ADD
 
+					);
 
+
 
+					var tex = new THREE.TextureNode( getTexture( "cloud" ), displaceOffset );
 
+					var texArea = new THREE.SwitchNode( tex, 'w' );
 
+
 
+					var displace = new THREE.OperatorNode(
 
+						new THREE.NormalNode(),
 
+						texArea,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var displaceScale = new THREE.OperatorNode(
 
+						displace,
 
+						scale,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var blend = new THREE.OperatorNode(
 
+						new THREE.PositionNode(),
 
+						displaceScale,
 
+						THREE.OperatorNode.ADD
 
+					);
 
+
 
+					var color = new THREE.Math3Node(
 
+						colorB,
 
+						colorA,
 
+						texArea,
 
+						THREE.Math3Node.MIX
 
+					);
 
+
 
+					mtl.color = mtl.specular = new THREE.ColorNode( 0 );
 
+					mtl.emissive = color;
 
+					mtl.transform = blend;
 
+
 
+					break;
 
+
 
+				case 'smoke':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					var time = new THREE.TimerNode();
 
+					var uv = new THREE.UVNode();
 
+
 
+					var timeSpeedA = new THREE.OperatorNode(
 
+						time,
 
+						new THREE.Vector2Node( Math.random() * 0.3, Math.random() * 0.1 ),
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var timeSpeedB = new THREE.OperatorNode(
 
+						time,
 
+						new THREE.Vector2Node( Math.random() * 0.15, Math.random() * 0.4 ),
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var uvOffsetA = new THREE.OperatorNode(
 
+						timeSpeedA,
 
+						uv,
 
+						THREE.OperatorNode.ADD
 
+					);
 
+
 
+					var uvOffsetB = new THREE.OperatorNode(
 
+						timeSpeedB,
 
+						uv,
 
+						THREE.OperatorNode.ADD
 
+					);
 
+
 
+					var cloudA = new THREE.TextureNode( getTexture( "cloud" ), uvOffsetA );
 
+					var cloudB = new THREE.TextureNode( getTexture( "cloud" ), uvOffsetB );
 
+
 
+					var clouds = new THREE.OperatorNode(
 
+						cloudA,
 
+						cloudB,
 
+						THREE.OperatorNode.ADD
 
+					);
 
+
 
+					mtl.environment = new THREE.ColorNode( 0xFFFFFF );
 
+					mtl.alpha = clouds;
 
+
 
+					break;
 
+
 
+				case 'camera-depth':
 
+
 
+					// MATERIAL
 
+
 
+					var colorA = new THREE.ColorNode( Math.random() * 0xFFFFFF );
 
+					var colorB = new THREE.ColorNode( 0x0054df );
 
+
 
+					var depth = new THREE.CameraNode( THREE.CameraNode.DEPTH );
 
+					depth.near.number = 1;
 
+					depth.far.number = 200;
 
+
 
+					var colors = new THREE.Math3Node(
 
+						colorB,
 
+						colorA,
 
+						depth,
 
+						THREE.Math3Node.MIX
 
+					);
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+					mtl.color = colors;
 
+
 
+					break;
 
+
 
+				case 'caustic':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.StandardNodeMaterial();
 
+
 
+					var hash2 = new THREE.FunctionNode( [
 
+					"vec2 hash2(vec2 p) {",
 
+					"	return fract(sin(vec2(dot(p, vec2(123.4, 748.6)), dot(p, vec2(547.3, 659.3))))*5232.85324);",
 
+					"}"
 
+					].join( "\n" ) );
 
+
 
+					var voronoi = new THREE.FunctionNode( [
 
+					// Based off of iq's described here: http://www.iquilezles.org/www/articles/voronoili
 
+					"float voronoi(vec2 p, in float time) {",
 
+					"	vec2 n = floor(p);",
 
+					"	vec2 f = fract(p);",
 
+					"	float md = 5.0;",
 
+					"	vec2 m = vec2(0.0);",
 
+					"	for (int i = -1; i <= 1; i++) {",
 
+					"		for (int j = -1; j <= 1; j++) {",
 
+					"			vec2 g = vec2(i, j);",
 
+					"			vec2 o = hash2(n + g);",
 
+					"			o = 0.5 + 0.5 * sin(time + 5.038 * o);",
 
+					"			vec2 r = g + o - f;",
 
+					"			float d = dot(r, r);",
 
+					"			if (d < md) {",
 
+					"				md = d;",
 
+					"				m = n+g+o;",
 
+					"			}",
 
+					"		}",
 
+					"	}",
 
+					"	return md;",
 
+					"}"
 
+					].join( "\n" ), [ hash2 ] ); // define hash2 as dependencies
 
+
 
+					var voronoiLayers = new THREE.FunctionNode( [
 
+					// based on https://www.shadertoy.com/view/4tXSDf
 
+					"float voronoiLayers(vec2 p, in float time) {",
 
+					"	float v = 0.0;",
 
+					"	float a = 0.4;",
 
+					"	for (int i = 0; i < 3; i++) {",
 
+					"		v += voronoi(p, time) * a;",
 
+					"		p *= 2.0;",
 
+					"		a *= 0.5;",
 
+					"	}",
 
+					"	return v;",
 
+					"}"
 
+					].join( "\n" ), [ voronoi ] ); // define voronoi as dependencies
 
+
 
+					var time = new THREE.TimerNode();
 
+					var timeScale = new THREE.FloatNode( 2 );
 
+
 
+					var alpha = new THREE.FloatNode( Math.random() * 1 );
 
+					var scale = new THREE.FloatNode( .1 );
 
+					var intensity = new THREE.FloatNode( 1.5 );
 
+
 
+					var color = new THREE.ColorNode( 0xFFFFFF );
 
+					var colorA = new THREE.ColorNode( 0xFFFFFF );
 
+					var colorB = new THREE.ColorNode( 0x0054df );
 
+
 
+					var worldPos = new THREE.PositionNode( THREE.PositionNode.WORLD );
 
+					var worldPosTop = new THREE.SwitchNode( worldPos, 'xz' );
 
+
 
+					var worldNormal = new THREE.NormalNode( THREE.NormalNode.WORLD );
 
+
 
+					var mask = new THREE.SwitchNode( worldNormal, 'y' );
 
+
 
+					// clamp0at1
 
+					mask = new THREE.Math1Node( mask, THREE.Math1Node.SAT );
 
+
 
+					var timeOffset = new THREE.OperatorNode(
 
+						time,
 
+						timeScale,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var uvPos = new THREE.OperatorNode(
 
+						worldPosTop,
 
+						scale,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var voronoi = new THREE.FunctionCallNode( voronoiLayers );
 
+					voronoi.inputs.p = uvPos;
 
+					voronoi.inputs.time = timeOffset;
 
+
 
+					var maskCaustic = new THREE.OperatorNode(
 
+						alpha,
 
+						mask,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var voronoiIntensity = new THREE.OperatorNode(
 
+						voronoi,
 
+						intensity,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var voronoiColors = new THREE.Math3Node(
 
+						colorB,
 
+						colorA,
 
+						new THREE.Math1Node( voronoiIntensity, THREE.Math1Node.SAT ), // mix needs clamp
 
+						THREE.Math3Node.MIX
 
+					);
 
+
 
+					var caustic = new THREE.Math3Node(
 
+						color,
 
+						voronoiColors,
 
+						maskCaustic,
 
+						THREE.Math3Node.MIX
 
+					);
 
+
 
+					var causticLights = new THREE.OperatorNode(
 
+						voronoiIntensity,
 
+						maskCaustic,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					mtl.color = caustic;
 
+					mtl.ambient = causticLights;
 
+
 
+
 
+					break;
 
+
 
+				case 'soft-body':
 
+
 
+					// MATERIAL
 
+
 
+					move = true;
 
+
 
+					mtl = new THREE.StandardNodeMaterial();
 
+
 
+					var scale = new THREE.FloatNode( Math.random() * 2 );
 
+					var colorA = new THREE.ColorNode( Math.random() * 0xFFFFFF );
 
+					var colorB = new THREE.ColorNode( Math.random() * 0xFFFFFF );
 
+
 
+					var pos = new THREE.PositionNode();
 
+					var posNorm = new THREE.Math1Node( pos, THREE.Math1Node.NORMALIZE );
 
+
 
+					var mask = new THREE.SwitchNode( posNorm, 'y' );
 
+
 
+					var velocity = new THREE.VelocityNode( mesh, {
 
+						type: 'elastic',
 
+						spring: Math.random(),
 
+						friction: Math.random()
 
+					} );
 
+
 
+					var velocityArea = new THREE.OperatorNode(
 
+						mask,
 
+						scale,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var softVelocity = new THREE.OperatorNode(
 
+						velocity,
 
+						velocityArea,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var softPosition = new THREE.OperatorNode(
 
+						new THREE.PositionNode(),
 
+						softVelocity,
 
+						THREE.OperatorNode.ADD
 
+					);
 
+
 
+					var colors = new THREE.Math3Node(
 
+						colorB,
 
+						colorA,
 
+						mask,
 
+						THREE.Math3Node.MIX
 
+					);
 
+
 
+					mtl.color = colors;
 
+					mtl.transform = softPosition;
 
+
 
+					break;
 
+
 
+				case 'plush':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					var color = new THREE.ColorNode( Math.random() * 0xFFFFFF );
 
+					var mildness = new THREE.FloatNode( 1.6 );
 
+					var fur = new THREE.FloatNode( .5 );
 
+
 
+					var posDirection = new THREE.Math1Node( new THREE.PositionNode( THREE.PositionNode.VIEW ), THREE.Math1Node.NORMALIZE );
 
+					var norDirection = new THREE.Math1Node( new THREE.NormalNode( THREE.NormalNode.VIEW ), THREE.Math1Node.NORMALIZE );
 
+
 
+					var viewZ = new THREE.Math2Node(
 
+						posDirection,
 
+						norDirection,
 
+						THREE.Math2Node.DOT
 
+					);
 
+
 
+					// without luma correction for now
 
+					var mildnessColor = new THREE.OperatorNode(
 
+						color,
 
+						mildness,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var furScale = new THREE.OperatorNode(
 
+						viewZ,
 
+						fur,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					mtl.color = color;
 
+					mtl.normal = new THREE.TextureNode( getTexture( "grassNormal" ) );
 
+					mtl.normalScale = furScale;
 
+					mtl.environment = mildnessColor;
 
+					mtl.environmentAlpha = new THREE.Math1Node( viewZ, THREE.Math1Node.INVERT );
 
+					mtl.shininess = new THREE.FloatNode( 0 );
 
+
 
+					break;
 
+
 
+				case 'skin':
 
+				case 'skin-phong':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = name == 'skin' ? new THREE.StandardNodeMaterial() : new THREE.PhongNodeMaterial();
 
+
 
+					var skinColor = new THREE.ColorNode( Math.random() * 0xFFFFFF );
 
+					var bloodColor = new THREE.ColorNode( Math.random() * 0xFFFFFF );
 
+					var wrapLight = new THREE.FloatNode( 1.5 );
 
+					var wrapShadow = new THREE.FloatNode( 0 );
 
+
 
+					var directLight = new THREE.LightNode();
 
+
 
+					var lightLuminance = new THREE.LuminanceNode( directLight );
 
+
 
+					var lightWrap = new THREE.Math3Node(
 
+						wrapShadow,
 
+						wrapLight,
 
+						lightLuminance,
 
+						THREE.Math3Node.SMOOTHSTEP
 
+					);
 
+
 
+					var lightTransition = new THREE.OperatorNode(
 
+						lightWrap,
 
+						new THREE.ConstNode( THREE.ConstNode.PI2 ),
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var wrappedLight = new THREE.Math1Node( lightTransition, THREE.Math1Node.SIN );
 
+
 
+					var wrappedLightColor = new THREE.OperatorNode(
 
+						wrappedLight,
 
+						bloodColor,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var bloodArea = new THREE.Math1Node( wrappedLightColor, THREE.Math1Node.SAT );
 
+
 
+					var totalLight = new THREE.OperatorNode(
 
+						directLight,
 
+						bloodArea,
 
+						THREE.OperatorNode.ADD
 
+					);
 
+
 
+					mtl.color = skinColor;
 
+					mtl.light = totalLight;
 
+
 
+					if ( name == 'skin' ) {
 
+
 
+						// StandardNodeMaterial
 
+
 
+						mtl.metalness = new THREE.FloatNode( 0 );
 
+						mtl.roughness = new THREE.FloatNode( 1 );
 
+						mtl.reflectivity = new THREE.FloatNode( 0 );
 
+						mtl.clearCoat = new THREE.FloatNode( .2 );
 
+						mtl.clearCoatRoughness = new THREE.FloatNode( .3 );
 
+						mtl.environment = new THREE.CubeTextureNode( cubemap );
 
+
 
+					} else {
 
+
 
+						// PhongNodeMaterial
 
+
 
+						mtl.specular = new THREE.ColorNode( 0x2f2e2d );
 
+						mtl.shininess = new THREE.FloatNode( 15 );
 
+
 
+					}
 
+
 
+					break;
 
+
 
+				case 'toon':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					var count = new THREE.FloatNode( 3.43 );
 
+					var sceneDirectLight = new THREE.LightNode();
 
+					var color = new THREE.ColorNode( Math.random() * 0xFFFFFF );
 
+
 
+					var lineColor = new THREE.ColorNode( 0xFF0000 );
 
+					var lineSize = new THREE.FloatNode( 0.23 );
 
+					var lineInner = new THREE.FloatNode( 0 );
 
+
 
+					// CEL
 
+
 
+					var lightLuminance = new THREE.LuminanceNode( sceneDirectLight );
 
+
 
+					var preCelLight = new THREE.OperatorNode(
 
+						lightLuminance,
 
+						count,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var celLight = new THREE.Math1Node(
 
+						preCelLight,
 
+						THREE.Math1Node.CEIL
 
+					);
 
+
 
+					var posCelLight = new THREE.OperatorNode(
 
+						celLight,
 
+						count,
 
+						THREE.OperatorNode.DIV
 
+					);
 
+
 
+					// LINE
 
+
 
+					var posDirection = new THREE.Math1Node( new THREE.PositionNode( THREE.PositionNode.VIEW ), THREE.Math1Node.NORMALIZE );
 
+					var norDirection = new THREE.Math1Node( new THREE.NormalNode( THREE.NormalNode.VIEW ), THREE.Math1Node.NORMALIZE );
 
+
 
+					var viewZ = new THREE.Math2Node(
 
+						posDirection,
 
+						norDirection,
 
+						THREE.Math2Node.DOT
 
+					);
 
+
 
+					var lineOutside = new THREE.Math1Node(
 
+						viewZ,
 
+						THREE.Math1Node.ABS
 
+					);
 
+
 
+					var line = new THREE.OperatorNode(
 
+						lineOutside,
 
+						new THREE.FloatNode( 1 ),
 
+						THREE.OperatorNode.DIV
 
+					);
 
+
 
+					var lineScaled = new THREE.Math3Node(
 
+						line,
 
+						lineSize,
 
+						lineInner,
 
+						THREE.Math3Node.SMOOTHSTEP
 
+					);
 
+
 
+					var innerContour = new THREE.Math1Node( new THREE.Math1Node( lineScaled, THREE.Math1Node.SAT ), THREE.Math1Node.INVERT );
 
+
 
+					// APPLY
 
+
 
+					mtl.color = color;
 
+					mtl.light = posCelLight;
 
+					mtl.shininess = new THREE.FloatNode( 0 );
 
+
 
+					mtl.environment = lineColor;
 
+					mtl.environmentAlpha = innerContour;
 
+
 
+					break;
 
+
 
+				case 'custom-attribute':
 
+
 
+					// GEOMETRY
 
+
 
+					// add "position" buffer to "custom" attribute
 
+					teapot.attributes[ 'custom' ] = teapot.attributes[ 'position' ];
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					mtl.color = new THREE.AttributeNode( "custom", 3 );
 
+
 
+					// or
 
+
 
+					//mtl.color = new THREE.AttributeNode( "custom", "vec3" );
 
+
 
+					break;
 
+
 
+				case 'expression':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					var speed = new THREE.FloatNode( Math.random() * .5 );
 
+
 
+					mtl.color = new THREE.FunctionNode( "myCustomUv + (sin(time*speed)*.5) + (position * .05)", "vec3" );
 
+					mtl.color.keywords[ "speed" ] = speed;
 
+
 
+					mtl.transform = new THREE.FunctionNode( "mod(time*speed,1.0) < 0.5 ? position + (worldNormal*(1.0+sin(time*speed*1.0))*3.0) : position + sin( position.x * sin(time*speed*2.0))", "vec3" );
 
+					mtl.transform.keywords[ "speed" ] = speed;
 
+
 
+					// add global keyword ( variable or const )
 
+					THREE.NodeLib.addKeyword( 'myCustomUv', function( builder ) {
 
+
 
+						return new THREE.ReflectNode();
 
+
 
+					} );
 
+
 
+					break;
 
+
 
+				case 'reserved-keywords':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					var keywordsexample = new THREE.FunctionNode( [
 
+					// use "uv" reserved keyword
 
+					"vec4 keywordsexample( sampler2D texture ) {",
 
+					"	return texture2D( texture, myUV ) + vec4( position * myAlpha, 0.0 );",
 
+					"}"
 
+					].join( "\n" ) );
 
+
 
+					// add local keyword ( const only )
 
+					keywordsexample.keywords[ "myAlpha" ] = new THREE.ConstNode( "float myAlpha .05" );
 
+
 
+					// add global keyword ( const only )
 
+					THREE.NodeLib.addKeyword( 'myUV', function( builder ) {
 
+
 
+						return new THREE.UVNode();
 
+
 
+					} );
 
+
 
+					mtl.color = new THREE.FunctionCallNode( keywordsexample, [ new THREE.TextureNode( getTexture( "brick" ) ) ] );
 
+
 
+					break;
 
+
 
+				case 'varying':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					var varying = new THREE.VarNode( "vec3" );
 
+
 
+					var setMyVar = new THREE.FunctionNode( [
 
+					"float setMyVar( vec3 pos ) {",
 
+					// set "myVar" in vertex shader in this example, 
+					// can be used in fragment shader too or in rest of the current shader
 
+					"	myVar = pos;",
 
+					// it is not accept "void" functions for now!
 
+					"	return 0.;",
 
+					"}"
 
+					].join( "\n" ) );
 
+
 
+					// add keyword
 
+					setMyVar.keywords[ "myVar" ] = varying;
 
+
 
+					var transform = new THREE.FunctionNode( "setMyVar( position * .1 ) + position", "vec3", [ setMyVar ] );
 
+					transform.keywords[ "tex" ] = new THREE.TextureNode( getTexture( "brick" ) );
 
+
 
+					mtl.transform = transform;
 
+					mtl.color = varying;
 
+
 
+					break;
 
+
 
+				case 'triangle-blur':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					var delta = new THREE.Vector2Node( Math.random(), Math.random() * .5 );
 
+					var alpha = new THREE.FloatNode( 1 );
 
+
 
+					var blurtexture = new THREE.FunctionNode( [
 
+					// Reference: TriangleBlurShader.js
 
+					"vec4 blurtexture(sampler2D texture, vec2 uv, vec2 delta) {",
 
+					"	vec4 color = vec4( 0.0 );",
 
+					"	float total = 0.0;",
 
+					// randomize the lookup values to hide the fixed number of samples
 
+					"	float offset = rand( uv );",
 
+					"	for ( float t = -BLUR_ITERATIONS; t <= BLUR_ITERATIONS; t ++ ) {",
 
+					"		float percent = ( t + offset - 0.5 ) / BLUR_ITERATIONS;",
 
+					"		float weight = 1.0 - abs( percent );",
 
+					"		color += texture2D( texture, uv + delta * percent ) * weight;",
 
+					"		total += weight;",
 
+					"	}",
 
+					"	return color / total;",
 
+					"}"
 
+					].join( "\n" ), [ new THREE.ConstNode( "float BLUR_ITERATIONS 10.0" ) ] );
 
+
 
+					var blurredTexture = new THREE.FunctionCallNode( blurtexture, {
 
+						texture : new THREE.TextureNode( getTexture( "brick" ) ),
 
+						delta : delta,
 
+						uv : new THREE.UVNode()
 
+					} );
 
+
 
+					var color = new THREE.Math3Node(
 
+						new THREE.TextureNode( getTexture( "brick" ) ),
 
+						blurredTexture,
 
+						alpha,
 
+						THREE.Math3Node.MIX
 
+					);
 
+
 
+					mtl.color = color;
 
+
 
+					break;
 
+
 
+				case 'firefly':
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.PhongNodeMaterial();
 
+
 
+					var time = new THREE.TimerNode();
 
+					var speed = new THREE.FloatNode( Math.random() );
 
+
 
+					var color = new THREE.ColorNode( Math.random() * 0xFFFFFF );
 
+
 
+					var timeSpeed = new THREE.OperatorNode(
 
+						time,
 
+						speed,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var sinCycleInSecs = new THREE.OperatorNode(
 
+						timeSpeed,
 
+						new THREE.ConstNode( THREE.ConstNode.PI2 ),
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var cycle = new THREE.Math1Node( sinCycleInSecs, THREE.Math1Node.SIN );
 
+
 
+					var cycleColor = new THREE.OperatorNode(
 
+						cycle,
 
+						color,
 
+						THREE.OperatorNode.MUL
 
+					);
 
+
 
+					var cos = new THREE.Math1Node( cycleColor, THREE.Math1Node.SIN );
 
+
 
+					mtl.color = new THREE.ColorNode( 0 );
 
+					mtl.emissive = cos;
 
+					
+					break;
 
+
 
+				case 'sss':
 
+				case 'translucent':
 
+
 
+					// DISTANCE FORMULA
 
+
 
+					var modelPos = new THREE.Vector3Node();
 
+
 
+					var viewPos = new THREE.PositionNode( THREE.PositionNode.VIEW );
 
+					var cameraPosition = new THREE.CameraNode( THREE.CameraNode.POSITION );
 
+
 
+					var cameraDistance = new THREE.Math2Node(
 
+						modelPos,
 
+						cameraPosition,
 
+						THREE.Math2Node.DISTANCE
 
+					);
 
+
 
+					var viewPosZ = new THREE.SwitchNode( viewPos, 'z' );
 
+
 
+					var distance = new THREE.OperatorNode(
 
+						cameraDistance,
 
+						viewPosZ,
 
+						THREE.OperatorNode.SUB
 
+					);
 
+
 
+					var distanceRadius = new THREE.OperatorNode(
 
+						distance,
 
+						new THREE.FloatNode( Math.random() * 70 ),
 
+						THREE.OperatorNode.ADD
 
+					);
 
+
 
+					var objectDepth = new THREE.Math3Node(
 
+						distanceRadius,
 
+						new THREE.FloatNode( 0 ),
 
+						new THREE.FloatNode( Math.random() * 100 ),
 
+						THREE.Math3Node.SMOOTHSTEP
 
+					);
 
+
 
+					// RTT ( get back distance )
 
+
 
+					rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );
 
+
 
+					var distanceMtl = new THREE.PhongNodeMaterial();
 
+					distanceMtl.environment = objectDepth;
 
+					distanceMtl.side = THREE.BackSide;
 
+					distanceMtl.build();
 
+
 
+					rtMaterial = distanceMtl;
 
+
 
+					// MATERIAL
 
+
 
+					mtl = new THREE.StandardNodeMaterial();
 
+
 
+					var backSideDepth = new THREE.TextureNode( rtTexture, new THREE.ScreenUVNode( new THREE.ResolutionNode( renderer ) ) );
 
+
 
+					var difference = new THREE.OperatorNode(
 
+						objectDepth,
 
+						backSideDepth,
 
+						THREE.OperatorNode.SUB
 
+					);
 
+
 
+					var sss = new THREE.Math3Node(
 
+						new THREE.FloatNode( - .1 ),
 
+						new THREE.FloatNode( .5 ),
 
+						difference,
 
+						THREE.Math3Node.SMOOTHSTEP
 
+					);
 
+
 
+					var sssAlpha = new THREE.Math1Node( sss, THREE.Math1Node.SAT );
 
+
 
+					var frontColor, backColor;
 
+
 
+					if ( name == 'sss' ) {
 
+
 
+						var sssOut = new THREE.Math2Node(
 
+							objectDepth,
 
+							sssAlpha,
 
+							THREE.Math2Node.MIN
 
+						);
 
+
 
+						frontColor = new THREE.ColorNode( Math.random() * 0xFFFFFF );
 
+						backColor = new THREE.ColorNode( Math.random() * 0xFFFFFF );
 
+
 
+						var color = new THREE.Math3Node(
 
+							backColor,
 
+							frontColor,
 
+							sssOut,
 
+							THREE.Math3Node.MIX
 
+						);
 
+
 
+						var light = new THREE.OperatorNode(
 
+							new THREE.LightNode(),
 
+							color,
 
+							THREE.OperatorNode.ADD
 
+						);
 
+
 
+						mtl.color = frontColor;
 
+						mtl.roughness = new THREE.FloatNode( .1 );
 
+						mtl.metalness = new THREE.FloatNode( .5 );
 
+
 
+						mtl.light = light;
 
+						mtl.environment = color;
 
+
 
+					} else {
 
+
 
+						frontColor = new THREE.ColorNode( Math.random() * 0xFFFFFF );
 
+						backColor = new THREE.ColorNode( Math.random() * 0xFFFFFF );
 
+
 
+						var color = new THREE.Math3Node(
 
+							frontColor,
 
+							backColor,
 
+							sssAlpha,
 
+							THREE.Math3Node.MIX
 
+						);
 
+
 
+						var light = new THREE.OperatorNode(
 
+							new THREE.LightNode(),
 
+							color,
 
+							THREE.OperatorNode.ADD
 
+						);
 
+
 
+						mtl.color = new THREE.ColorNode( 0xffffff );
 
+						mtl.roughness = new THREE.FloatNode( .1 );
 
+						mtl.metalness = new THREE.FloatNode( .5 );
 
+
 
+						mtl.light = light;
 
+						mtl.environment = color;
 
+
 
+					}
 
+
 
+					break;
 
+			}
 
+			
+			var transformer = new THREE.FunctionNode( "position + 0.0 * " + Math.random(), "vec3", [ ]);
 
+			mtl.transform = transformer;
 
+			// build shader
 
+			mtl.build();
 
+
 
+			// set material
 
+			mesh.material = mtl;
 
+
 
+		}
 
+
 
+		function onWindowResize() {
 
+
 
+			var width = window.innerWidth, height = window.innerHeight;
 
+
 
+			camera.aspect = width / height;
 
+			camera.updateProjectionMatrix();
 
+
 
+			renderer.setSize( width, height );
 
+
 
+			if ( rtTexture ) rtTexture.setSize( width, height );
 
+
 
+		}
 
+
 
+		function animate() {
 
+
 
+			var delta = clock.getDelta();
 
+			for (var i = 0; i < meshes.length; i++ ){
 
+				
+				var mesh = meshes[i]; 
+				mesh.material.updateFrame( delta );
 
+			
+			}
 
+
 
+			// render to texture for sss/translucent material only
 
+			if ( rtTexture ) {
 
+
 
+				scene.overrideMaterial = rtMaterial;
 
+
 
+				renderer.render( scene, camera, rtTexture, true );
 
+
 
+				scene.overrideMaterial = null;
 
+
 
+			}
 
+
 
+			renderer.render( scene, camera );
 
+
 
+			requestAnimationFrame( animate );
 
+
 
+		}
 
+
 
+		</script>
 
+
 
+	</body>
 
+</html>

+ 41 - 0
src/renderers/WebGLRenderer.js
Переглянути файл 

@@ -1036,6 +1036,47 @@ function WebGLRenderer( parameters ) {
 
 		return Math.abs( b[ 0 ] ) - Math.abs( a[ 0 ] );
 
 		return Math.abs( b[ 0 ] ) - Math.abs( a[ 0 ] );
 
 
 
 	}
 
 	}
 
+	
+	this.compileMaterials = function(scene, camera){
 
+
 
+		lights = [];
 
+		
+		scene.traverse(function( object ) {
 
+			
+			if ( object.isLight ) {
 
+				
+				lights.push(object);
 
+				
+			}
 
+			
+		});
 
+		
+		setupLights(lights,camera);
 
+
 
+		scene.traverse(function( object ) {
 
+			
+			
+			if (object.material) {
 
+				
+				if ( Array.isArray( object.material ) ) {
 
+					
+					for ( var i = 0; i < object.material.length; i ++ ) {
 
+						
+						initMaterial(object.material[i], scene.fog, object); 
+						
+					}
 
+					
+				} else {
 
+					
+					initMaterial(object.material, scene.fog, object); 
+					
+				}
 
+				
+			}
 
+			
+		});
 
+
 
+	};
 
 
 
 	// Rendering
 
 	// Rendering