Added Fog to WebGLRenderer2.

examples/webglrenderer2_sandbox.html

@@ -83,6 +83,7 @@
 		<script type="text/javascript" src="../src/materials/mappings/SphericalRefractionMapping.js"></script>
 		<script type="text/javascript" src="../src/materials/mappings/UVMapping.js"></script>
 		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
+		<script type="text/javascript" src="../src/scenes/Fog.js"></script>
 		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
 		<script type="text/javascript" src="../src/renderers/DOMRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
@@ -130,6 +131,7 @@
 				camera.position.z = 3200;
 
 				scene = new THREE.Scene();
+				scene.fog = new THREE.Fog( 0xffffff, 0.00025 );
 
 				var geometry = new Sphere( 100, 32, 16 );
 

src/renderers/WebGLRenderer2.js

@@ -1,5 +1,9 @@
 /**
  * @author mrdoob / http://mrdoob.com/
+ *
+ * Based on code by:
+ * @author alteredq / http://alteredqualia.com/
+ * @author supereggbert / http://www.paulbrunt.co.uk/
  */
 
 THREE.WebGLRenderer2 = function () {
@@ -134,11 +138,28 @@ THREE.WebGLRenderer2 = function () {
 
 					if( program != _currentProgram ) {
 
-						_gl.useProgram( program );
 						_currentProgram = program;
 
+						_gl.useProgram( program );
+
+						// scene
+
+						if ( scene.fog ) {
+
+							_gl.uniform1i( program.uniforms.fog, 1 );
+							_gl.uniform1f( program.uniforms.fogDensity, scene.fog.density );
+							_gl.uniform3f( program.uniforms.fogColor, scene.fog.color.r, scene.fog.color.g, scene.fog.color.b );
+
+						} else {
+
+							_gl.uniform1i( program.uniforms.fog, 0 );
+
+						}
+
 					}
 
+					// materials
+
 					if ( material instanceof THREE.MeshBasicMaterial ||
 					material instanceof THREE.MeshLambertMaterial ||
 					material instanceof THREE.MeshPhongMaterial ) {
@@ -462,6 +483,10 @@ THREE.WebGLRenderer2 = function () {
 
 				fs += 'gl_FragColor = vec4( mColor.xyz, mOpacity );\n';
 
+				identifiers.push( 'mColor', 'mOpacity' );
+
+				// uvmap
+
 				if ( material.map ) {
 
 					pvs += 'varying vec2 vUv;\n',
@@ -481,7 +506,21 @@ THREE.WebGLRenderer2 = function () {
 
 				}
 
-				identifiers.push( 'mColor', 'mOpacity' );
+				// fog
+
+				pfs += 'uniform bool fog;\n';
+				pfs += 'uniform vec3 fogColor;\n';
+				pfs += 'uniform float fogDensity;\n';
+
+				fs += 'if ( fog ) {\n';
+				fs += 'const float LOG2 = 1.442695;\n';
+				fs += 'float z = gl_FragCoord.z / gl_FragCoord.w;\n';
+				fs += 'float fogFactor = exp2( - fogDensity * fogDensity * z * z * LOG2 );\n';
+				fs += 'fogFactor = clamp( fogFactor, 0.0, 1.0 );\n';
+				fs += 'gl_FragColor = mix( vec4( fogColor, 1.0 ), gl_FragColor, fogFactor );\n',
+				fs += '}\n';
+
+				identifiers.push( 'fog', 'fogColor', 'fogDensity' );
 
 				vs += '}';
 				fs += '}';

src/scenes/Fog.js

@@ -1,5 +1,6 @@
 /**
  * @author mr.doob / http://mrdoob.com/
+ * @author alteredq / http://alteredqualia.com/
  */
 
 THREE.Fog = function ( hex, density ) {