example is starting to work with the new code.

examples/js/pmrem/PMREMGenerator.js

@@ -28,7 +28,7 @@
 	this.sourceTexture = cubeTexture;
 
   // encoded formats do not interpolate well, thus turn off interpolation for them
-  var textureFilter = ( sourceTexture.encoding === THREE.Linear ) ? THREE.LinearFilter : THREE.NearestFilter;
+  var textureFilter = ( this.sourceTexture.encoding === THREE.Linear ) ? THREE.LinearFilter : THREE.NearestFilter;
   this.sourceTexture.minFilter = this.sourceTexture.magFilter = textureFilter;
 
 	this.cubeLods = [];
@@ -60,7 +60,7 @@
 
 THREE.PMREMGenerator.prototype = {
 
-	constructor : PMREMGenerator,
+	constructor : THREE.PMREMGenerator,
 
 	update: function( renderer ) {
 
@@ -172,8 +172,8 @@ THREE.PMREMGenerator.prototype = {
            else\n\
                color = vec4(1.0,0.0,1.0,1.0);\n\
            return color;\n\
-        }",
-  			THREE.ShaderChunk[ "encodings" ],
+        }" +
+  			THREE.ShaderChunk[ "encodings" ] +
         "void main() {\n\
            vec3 sampleDirection;\n\
            vec2 uv = vUv*2.0 - 1.0;\n\
@@ -215,7 +215,7 @@ THREE.PMREMGenerator.prototype = {
                rgbColor.rgb += color;\n\
            }\n\
            rgbColor /= float(NumSamples);\n\
-           gl_FragColor = texelEncode( rgbColor, encoding );\n\
+           gl_FragColor = texelEncode( vec4( rgbColor, 1.0 ), encoding );\n\
         }"
       }
     );

examples/js/pmrem/PMREM_CubeUVPacker.js

@@ -2,73 +2,8 @@
  * @author Prashant Sharma / spidersharma03
  */
 
-var vertexShaderPMREMCubeUV = "precision highp float;\
-                   varying vec2 vUv;\
-                   void main() {\
-                        vUv = uv;\
-                        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\
-                   }";
-
-var fragmentShaderPMREMCubeUV = "precision highp float;\
-    varying vec2 vUv;\
-    uniform samplerCube cubeTexture;\
-    uniform float mapSize;\
-    uniform vec3 testColor;\
-    uniform int faceIndex;\
-    \
-    const float PI = 3.14159265358979;\
-    vec4 sampleCubeMap(float phi, float theta) {\
-        float sinTheta = sin(theta);\
-        float cosTheta = cos(theta);\
-        vec3 sampleDir = vec3(cos(phi) * sinTheta, cosTheta, sin(phi) * sinTheta);\
-        vec4 color = textureCube(cubeTexture, sampleDir);\
-        return color * vec4(testColor, 1.0);\
-    }\
-    void main() {\
-        vec3 sampleDirection;\
-        vec2 uv = vUv;\
-        uv = uv * 2.0 - 1.0;\
-        uv.y *= -1.0;\
-        if(faceIndex == 0) {\
-            sampleDirection = normalize(vec3(1.0, uv.y, -uv.x));\
-        }\
-        else if(faceIndex == 1) {\
-            sampleDirection = normalize(vec3(uv.x, 1.0, uv.y));\
-        }\
-        else if(faceIndex == 2) {\
-            sampleDirection = normalize(vec3(uv.x, uv.y, 1.0));\
-        }\
-        else if(faceIndex == 3) {\
-            sampleDirection = normalize(vec3(-1.0, uv.y, uv.x));\
-        }\
-        else if(faceIndex == 4) {\
-            sampleDirection = normalize(vec3(uv.x, -1.0, -uv.y));\
-        }\
-        else {\
-            sampleDirection = normalize(vec3(-uv.x, uv.y, -1.0));\
-        }\
-        vec4 color = textureCube(cubeTexture, (sampleDirection));\
-        gl_FragColor = color * vec4(testColor, 1.0);\
-    }\
-";
-var uniformsPMREMCubeUV = {
-	"faceIndex": { type: 'i', value: 0 },
-	"mapSize": { type: 'f', value: 0 },
-	"cubeTexture": { type: 't', value: null },
-	"testColor": { type: 'v3', value: new THREE.Vector3( 1, 1, 1 ) }
-};
 
-var testColor = [];
-testColor.push( new THREE.Vector3( 1, 0, 0 ) );
-testColor.push( new THREE.Vector3( 0, 1, 0 ) );
-testColor.push( new THREE.Vector3( 0, 0, 1 ) );
-testColor.push( new THREE.Vector3( 1, 1, 0 ) );
-testColor.push( new THREE.Vector3( 0, 1, 1 ) );
-testColor.push( new THREE.Vector3( 1, 0, 1 ) );
-testColor.push( new THREE.Vector3( 1, 1, 1 ) );
-testColor.push( new THREE.Vector3( 0.5, 1, 0.5 ) );
-
-var PMREM_CubeUVPacker = function( cubeTextureLods, numLods ) {
+THREE.PMREM_CubeUVPacker = function( cubeTextureLods, numLods ) {
 
 	this.cubeLods = cubeTextureLods;
 	this.numLods = numLods;
@@ -109,16 +44,25 @@ var PMREM_CubeUVPacker = function( cubeTextureLods, numLods ) {
 		var mipOffsetX = 0;
 		var mipOffsetY = 0;
 		var mipSize = size;
+
+    /*
+    var testColor = [];
+    testColor.push( new THREE.Vector3( 1, 0, 0 ) );
+    testColor.push( new THREE.Vector3( 0, 1, 0 ) );
+    testColor.push( new THREE.Vector3( 0, 0, 1 ) );
+    testColor.push( new THREE.Vector3( 1, 1, 0 ) );
+    testColor.push( new THREE.Vector3( 0, 1, 1 ) );
+    testColor.push( new THREE.Vector3( 1, 0, 1 ) );
+    testColor.push( new THREE.Vector3( 1, 1, 1 ) );
+    testColor.push( new THREE.Vector3( 0.5, 1, 0.5 ) );*/
+
 		for ( var j = 0; j < nMips; j ++ ) {
 
 			// Mip Maps
 			for ( var k = 0; k < 6; k ++ ) {
 
 				// 6 Cube Faces
-				var material = new THREE.ShaderMaterial();
-				material.vertexShader = vertexShaderPMREMCubeUV;
-				material.fragmentShader = fragmentShaderPMREMCubeUV;
-				material.uniforms = THREE.UniformsUtils.clone( uniformsPMREMCubeUV );
+				var material = this.getShader();
 				material.uniforms[ "cubeTexture" ].value = this.cubeLods[ i ];
 				material.uniforms[ "faceIndex" ].value = k;
 				material.uniforms[ "mapSize" ].value = mipSize;
@@ -147,12 +91,79 @@ var PMREM_CubeUVPacker = function( cubeTextureLods, numLods ) {
 
 };
 
-PMREM_CubeUVPacker.prototype = {
-	constructor : PMREM_CubeUVPacker,
+THREE.PMREM_CubeUVPacker.prototype = {
+
+	constructor : THREE.PMREM_CubeUVPacker,
 
 	update: function( renderer ) {
 
 		renderer.render( this.scene, this.camera, this.CubeUVRenderTarget, true );
 
-	}
+	},
+
+  getShader: function() {
+
+    return new THREE.ShaderMaterial( {
+
+      uniforms: {
+       	"faceIndex": { type: 'i', value: 0 },
+       	"mapSize": { type: 'f', value: 0 },
+       	"cubeTexture": { type: 't', value: null },
+       	"testColor": { type: 'v3', value: new THREE.Vector3( 1, 1, 1 ) }
+      },
+
+      vertexShader:
+        "precision highp float;\
+         varying vec2 vUv;\
+         void main() {\
+            vUv = uv;\
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\
+         }",
+
+      fragmentShader:
+       "precision highp float;\
+        varying vec2 vUv;\
+        uniform samplerCube cubeTexture;\
+        uniform float mapSize;\
+        uniform vec3 testColor;\
+        uniform int faceIndex;\
+        \
+        const float PI = 3.14159265358979;\
+        vec4 sampleCubeMap(float phi, float theta) {\
+          float sinTheta = sin(theta);\
+          float cosTheta = cos(theta);\
+          vec3 sampleDir = vec3(cos(phi) * sinTheta, cosTheta, sin(phi) * sinTheta);\
+          vec4 color = textureCube(cubeTexture, sampleDir);\
+          return color * vec4(testColor, 1.0);\
+        }\
+        void main() {\
+          vec3 sampleDirection;\
+          vec2 uv = vUv;\
+          uv = uv * 2.0 - 1.0;\
+          uv.y *= -1.0;\
+          if(faceIndex == 0) {\
+              sampleDirection = normalize(vec3(1.0, uv.y, -uv.x));\
+          }\
+          else if(faceIndex == 1) {\
+              sampleDirection = normalize(vec3(uv.x, 1.0, uv.y));\
+          }\
+          else if(faceIndex == 2) {\
+              sampleDirection = normalize(vec3(uv.x, uv.y, 1.0));\
+          }\
+          else if(faceIndex == 3) {\
+              sampleDirection = normalize(vec3(-1.0, uv.y, uv.x));\
+          }\
+          else if(faceIndex == 4) {\
+              sampleDirection = normalize(vec3(uv.x, -1.0, -uv.y));\
+          }\
+          else {\
+              sampleDirection = normalize(vec3(-uv.x, uv.y, -1.0));\
+          }\
+          vec4 color = textureCube(cubeTexture, (sampleDirection));\
+          gl_FragColor = color * vec4(testColor, 1.0);\
+        }"
+    });
+
+  }
+
 };

examples/webgl_materials_ibl_hdr.html

@@ -0,0 +1,396 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>threejs webgl - materials</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;
+				text-align:center;
+
+				background-color: #000;
+                                                                background-image:url("../examples/textures/roughness_map.jpg");
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+			}
+		</style>
+	</head>
+	<body>
+
+		<div id="container"></div>
+		<div id="info"><a href="http://threejs.org" target="_blank">threejs</a> - PMREM Generator by Prashant Sharma and <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>
+
+		<script src="../build/three.min.js"></script>
+		<script src="../examples/js/controls/OrbitControls.js"></script>
+		<script src="../src/loaders/BinaryTextureLoader.js"></script>
+		<script src="../examples/js/loaders/RGBELoader.js"></script>
+		<script src="../examples/js/loaders/HDRCubeMapLoader.js"></script>
+
+		<script src="../examples/js/Detector.js"></script>
+		<script src="../examples/js/libs/stats.min.js"></script>
+
+    <script src="../examples/js/pmrem/PMREMGenerator.js"></script>
+    <script src="../examples/js/pmrem/PMREM_CubeUVPacker.js"></script>
+    <script src="../examples/js/libs/dat.gui.min.js"></script>
+
+                                <!-- NodeLibrary -->
+		<script src="../examples/js/nodes/GLNode.js"></script>
+		<script src="../examples/js/nodes/RawNode.js"></script>
+		<script src="../examples/js/nodes/TempNode.js"></script>
+		<script src="../examples/js/nodes/InputNode.js"></script>
+		<script src="../examples/js/nodes/ConstNode.js"></script>
+		<script src="../examples/js/nodes/FunctionNode.js"></script>
+		<script src="../examples/js/nodes/FunctionCallNode.js"></script>
+		<script src="../examples/js/nodes/BuilderNode.js"></script>
+		<script src="../examples/js/nodes/NodeLib.js"></script>
+		<script src="../examples/js/nodes/NodeMaterial.js"></script>
+
+                                <!-- Accessors -->
+		<script src="../examples/js/nodes/accessors/PositionNode.js"></script>
+		<script src="../examples/js/nodes/accessors/NormalNode.js"></script>
+		<script src="../examples/js/nodes/accessors/UVNode.js"></script>
+		<script src="../examples/js/nodes/accessors/ScreenUVNode.js"></script>
+		<script src="../examples/js/nodes/accessors/ColorsNode.js"></script>
+		<script src="../examples/js/nodes/accessors/CameraNode.js"></script>
+		<script src="../examples/js/nodes/accessors/ReflectNode.js"></script>
+		<script src="../examples/js/nodes/accessors/LightNode.js"></script>
+
+		<!-- Inputs -->
+		<script src="../examples/js/nodes/inputs/IntNode.js"></script>
+		<script src="../examples/js/nodes/inputs/FloatNode.js"></script>
+		<script src="../examples/js/nodes/inputs/ColorNode.js"></script>
+		<script src="../examples/js/nodes/inputs/Vector2Node.js"></script>
+		<script src="../examples/js/nodes/inputs/Vector3Node.js"></script>
+		<script src="../examples/js/nodes/inputs/Vector4Node.js"></script>
+		<script src="../examples/js/nodes/inputs/TextureNode.js"></script>
+		<script src="../examples/js/nodes/inputs/CubeTextureNode.js"></script>
+
+                                <!-- Math -->
+		<script src="../examples/js/nodes/math/Math1Node.js"></script>
+		<script src="../examples/js/nodes/math/Math2Node.js"></script>
+		<script src="../examples/js/nodes/math/Math3Node.js"></script>
+		<script src="../examples/js/nodes/math/OperatorNode.js"></script>
+
+                                <!-- Utils -->
+		<script src="../examples/js/nodes/utils/SwitchNode.js"></script>
+		<script src="../examples/js/nodes/utils/JoinNode.js"></script>
+		<script src="../examples/js/nodes/utils/TimerNode.js"></script>
+		<script src="../examples/js/nodes/utils/RoughnessToBlinnExponentNode.js"></script>
+		<script src="../examples/js/nodes/utils/VelocityNode.js"></script>
+		<script src="../examples/js/nodes/utils/LuminanceNode.js"></script>
+		<script src="../examples/js/nodes/utils/ColorAdjustmentNode.js"></script>
+		<script src="../examples/js/nodes/utils/NoiseNode.js"></script>
+		<script src="../examples/js/nodes/utils/ResolutionNode.js"></script>
+
+		<script src="../examples/js/nodes/materials/PhongNode.js"></script>
+		<script src="../examples/js/nodes/materials/PhongNodeMaterial.js"></script>
+		<!-- Standard Material -->
+		<script src="../examples/js/nodes/materials/StandardNode.js"></script>
+		<script src="../examples/js/nodes/materials/StandardNodeMaterial.js"></script>
+
+		<script src="../examples/js/postprocessing/EffectComposer.js"></script>
+		<script src="../examples/js/postprocessing/RenderPass.js"></script>
+		<script src="../examples/js/postprocessing/MaskPass.js"></script>
+		<script src="../examples/js/postprocessing/ShaderPass.js"></script>
+		<script src="../examples/js/shaders/CopyShader.js"></script>
+		<script src="../examples/js/shaders/FXAAShader.js"></script>
+		<script src="../examples/js/postprocessing/BloomPass.js"></script>
+		<script src="../examples/js/shaders/ConvolutionShader.js"></script>
+
+		<script>
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var container, stats;
+			var params = {
+				projection: 'normal',
+				roughnessFactor: 1,
+				background: true,
+			};
+			var camera, scene, renderer, controls, objects = [];
+			var hdrTexture, hdrCubeMap;
+			var composer;
+			var particleLight;
+			var reflectionCube;
+			var pmremGenerator, pmremCubeUVPacker;
+			var standardMaterial;
+			var torusGeometry = new THREE.TorusGeometry( 15, 6, 16, 100 );
+			//var torusGeometry = new THREE.SphereGeometry( 15, 32, 32 );
+
+			var loader = new THREE.FontLoader();
+			loader.load( '../examples/fonts/gentilis_regular.typeface.js', function ( font ) {
+
+				init( font );
+				animate();
+
+			} );
+
+			var onTextureLoad = function () {
+			  pmremGenerator = new THREE.PMREMGenerator(reflectionCube);
+			  pmremCubeUVPacker = new THREE.PMREM_CubeUVPacker(pmremGenerator.cubeLods);
+			  pmremGenerator.update(renderer);
+			  pmremCubeUVPacker.update(renderer);
+
+			  var roughnessTexture = THREE.ImageUtils.loadTexture( "../examples/textures/roughness_map.jpg" );
+			  roughnessTexture.wrapS = THREE.RepeatWrapping;
+			  roughnessTexture.wrapT = THREE.RepeatWrapping;
+			  roughnessTexture.repeat.set( 3, 3 );
+			  var metalness = 1;
+			  var roughness = 0.50;
+			  var diffuseColor = new THREE.Color( 1, 1.0, 1.0 ).multiplyScalar( 1 - 0.08 );
+			  //reflectionCube.mapping = THREE.CubeUVReflectionMapping;
+			  //pmremCubeUVPacker.CubeUVRenderTarget.mapping = THREE.CubeUVReflectionMapping;
+			  standardMaterial = new THREE.MeshStandardMaterial( { map: null, bumpMap: null, roughnessMap: null, bumpScale: 1.0, color: diffuseColor, metalness: metalness, roughness: roughness, shading: THREE.SmoothShading, envMap: pmremCubeUVPacker.CubeUVRenderTarget } )
+			  var torusMesh1 = new THREE.Mesh( torusGeometry, standardMaterial );
+			  torusMesh1.position.x = -30.0;
+			  scene.add( torusMesh1 );
+			};
+
+			function onHdrCubeMapLoad() {
+			  pmremGenerator = new THREE.PMREMGenerator(hdrCubeMap);
+			  pmremCubeUVPacker = new THREE.PMREM_CubeUVPacker(pmremGenerator.cubeLods);
+			  pmremGenerator.update(renderer);
+			  pmremCubeUVPacker.update(renderer);
+
+			  var roughnessTexture = THREE.ImageUtils.loadTexture( "../examples/textures/roughness_map.jpg" );
+			  roughnessTexture.wrapS = THREE.RepeatWrapping;
+			  roughnessTexture.wrapT = THREE.RepeatWrapping;
+			  roughnessTexture.repeat.set( 3, 3 );
+			  var metalness = 1;
+			  var roughness = 0.50;
+			  var diffuseColor = new THREE.Color( 1, 1.0, 1.0 ).multiplyScalar( 1 - 0.08 );
+			  //reflectionCube.mapping = THREE.CubeUVReflectionMapping;
+			  //pmremCubeUVPacker.CubeUVRenderTarget.mapping = THREE.CubeUVReflectionMapping;
+			  standardMaterial = new THREE.MeshStandardMaterial( { map: null, bumpMap: null, roughnessMap: null, bumpScale: 1.0, color: diffuseColor, metalness: metalness, roughness: roughness, shading: THREE.SmoothShading, envMap: pmremCubeUVPacker.CubeUVRenderTarget } )
+			  var torusMesh1 = new THREE.Mesh( torusGeometry, standardMaterial );
+			  torusMesh1.position.x = -30.0;
+			  scene.add( torusMesh1 );
+			}
+
+			function onHdrLoad() {
+			  var geometry = new THREE.PlaneGeometry( 15, 15 );
+			  var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide, map: hdrTexture} );
+			  var plane = new THREE.Mesh( geometry, material );
+			  hdrTexture.minFilter = THREE.LinearFilter;
+			  hdrTexture.magFilter = THREE.LinearFilter;
+			  scene.add( plane );
+			}
+
+			function init( font ) {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera.position.set( 0.0, 40, 40 * 3.5 );
+
+				scene = new THREE.Scene();
+
+				// Materials
+
+				var path = "../examples/textures/cube/pisa/";
+				var hdrpath = "../examples/textures/cube/hdrPisa/";
+				var format = '.png';
+				var hdrformat = '.hdr';
+				var urls = [
+						path + 'px' + format, path + 'nx' + format,
+						path + 'py' + format, path + 'ny' + format,
+						path + 'pz' + format, path + 'nz' + format
+					];
+
+                                                                var hdrurls = [
+						hdrpath + 'px' + hdrformat, hdrpath + 'nx' + hdrformat,
+						hdrpath + 'py' + hdrformat, hdrpath + 'ny' + hdrformat,
+						hdrpath + 'pz' + hdrformat, hdrpath + 'nz' + hdrformat
+					];
+					reflectionCube = THREE.ImageUtils.loadTextureCube( urls, undefined, onTextureLoad );
+					//reflectionCube.format = THREE.RGBFormat;
+
+					//                                                                hdrCubeMap = new HDRCubeMapLoader().load(hdrurls, onHdrCubeMapLoad);
+
+					//                                                                hdrTexture = new THREE.RGBELoader().load( '../examples/textures/cube/hdrPisa/px.hdr', onHdrLoad );
+					var grass = new THREE.TextureLoader().load( '../examples/textures/terrain/grasslight-big.jpg' );
+					var grassNormal = new THREE.TextureLoader().load( '../examples/textures/terrain/grasslight-big-nm.jpg' );
+					var decalDiffuse = new THREE.TextureLoader().load( '../examples/textures/decal/decal-diffuse.png' );
+					decalDiffuse.wrapS = decalDiffuse.wrapT = THREE.RepeatWrapping;
+					var cubemap = function() {
+					  var path = "../examples/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;
+					}();
+					var standardNodeMaterial = new THREE.StandardNodeMaterial();
+					var mask = new THREE.SwitchNode( new THREE.TextureNode( decalDiffuse ), 'w' );
+					var normalScale = new THREE.FloatNode( 0.3 );
+					var roughnessA = new THREE.FloatNode( 0.5 );
+					var metalnessA = new THREE.FloatNode( 0.5 );
+					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
+					);
+					standardNodeMaterial.color = new THREE.ColorNode( 0xFFFFFF );
+					standardNodeMaterial.roughness = roughness;
+					standardNodeMaterial.metalness = metalness;
+					standardNodeMaterial.environment = new THREE.CubeTextureNode( cubemap );
+					standardNodeMaterial.normal = new THREE.TextureNode( grassNormal );
+					standardNodeMaterial.normalScale = normalMask;
+					standardNodeMaterial.build();
+					var torusMesh2 = new THREE.Mesh( torusGeometry, standardNodeMaterial );
+					torusMesh2.position.x = 30.0;
+					scene.add( torusMesh2 );
+
+					particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
+				//scene.add( particleLight );
+
+				// Lights
+
+				scene.add( new THREE.AmbientLight( 0x222222 ) );
+
+				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				directionalLight.position.set( 1, 1, 1 ).normalize();
+				//scene.add( directionalLight );
+
+				var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
+				particleLight.add( pointLight );
+
+				var spotLight = new THREE.SpotLight( 0xffffff );
+                                                                spotLight.position.set( 10, 100, 10 );
+                                                                spotLight.angle = Math.PI/10;
+                                                                scene.add( spotLight );
+
+                                                                var spotLightHelper = new THREE.SpotLightHelper( spotLight );
+                                                                scene.add( spotLightHelper );
+
+				renderer = new THREE.WebGLRenderer( { alpha:true, antialias: false } );
+				renderer.setClearColor( 0x0a0a0a, 0 );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.sortObjects = true;
+
+				container.appendChild( renderer.domElement );
+
+				renderer.gammaInput = true;
+				renderer.gammaOutput = true;
+
+                                                                var renderScene = new THREE.RenderPass(scene, camera);
+
+                                                                composer = new THREE.EffectComposer(renderer);
+                                                                composer.setSize(window.innerWidth, window.innerHeight);
+                                                                composer.addPass(renderScene);
+
+                                                                bloomPass = new THREE.BloomPass(1.0, 9, 0.25, 1024);
+                                                                composer.addPass(bloomPass);
+
+				//
+                                                                effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
+                                                                effectFXAA.uniforms['resolution'].value.set(1 / (window.innerWidth), 1 / (window.innerHeight));
+                                                                effectFXAA.renderToScreen = true;
+                                                                composer.addPass(effectFXAA);
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+
+				container.appendChild( stats.domElement );
+
+				controls = new THREE.OrbitControls( camera );
+				controls.target.set( 0, 0, 0 );
+				controls.update();
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+                                                                var gui = new dat.GUI();
+
+                                                                //gui.add( params, 'projection', { 'From cam to mesh': 'camera', 'Normal to mesh': 'normal' } );
+                                                                gui.add( params, 'roughnessFactor', 0, 1 );
+                                                                gui.add( params, 'background' );
+                                                                gui.open();
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+                                                                if(standardMaterial !== undefined)
+                                                                    standardMaterial.roughness = params.roughnessFactor;
+                                                                var body = document.getElementsByTagName("BODY")[0];
+                                                                if(params.background)
+                                                                    body.style.backgroundImage = "url('../examples/textures/roughness_map.jpg')";
+                                                                else
+                                                                    body.style.backgroundImage = "none";
+
+				var timer = Date.now() * 0.00025;
+
+				//camera.position.x = Math.cos( timer ) * 800;
+				//camera.position.z = Math.sin( timer ) * 800;
+
+				camera.lookAt( scene.position );
+
+				for ( var i = 0, l = objects.length; i < l; i ++ ) {
+
+					var object = objects[ i ];
+
+					object.rotation.y += 0.005;
+
+				}
+
+				particleLight.position.x = Math.sin( timer * 7 ) * 100;
+				particleLight.position.y = Math.cos( timer * 5 ) * 100;
+				particleLight.position.z = Math.cos( timer * 3 ) * 100;
+
+				//renderer.render( scene, camera );
+                                                                composer.render();
+
+			}
+
+		</script>
+
+	</body>
+</html>