WebGLRenderer2: Added env_map (SphericalReflectionMapping).

Eventually I'll have to continue in the experimental branch. Want to give it a go to the ColorPass/TexturePass material API. The color + map + env_map setup feels too limiting...

Now that I have more knowledge of WebGL and shaders, this is how the ColorPass/TexturePass API looks like:

	var material = [

		new THREE.MeshLambertMaterial( [

			new THREE.ColorPass( 0xff0000, 1, THREE.NormalBlending ),
			new THREE.TexturePass( new Texture( <image>, new THREE.UVMapping() ), 0.5, THREE.NormalBlending ),
			new THREE.TexturePass( new Texture( [ <image>, <image>, <image>, <image>, <image>, <image> ], new THREE.CubeRefractionMapping() ), 1, THREE.SubtractiveBlending ),
			new THREE.ColorPass( 0x0000ff, 1, THREE.AdditiveBlending )

		], { blending: THREE.NormalBlending } ),

		new THREE.MeshBasicMaterial( [

			new THREE.ColorPass( 0xff0000, 1 ),

		], { blending: THREE.AdditiveBlending, wireframe: true } ),

		new THREE.MeshPhongMaterial( [

			new THREE.ColorPass( 0xff0000, 1 ),

		], { ambient: 0x000000, specular: 0xbbaa99, shininess: 50, blending: THREE.NormalBlending } );

	];

Makes things a bit longer but I think it's more intuitive this way (and pretty powerful). However, the simplest material would be like this:

	var material = new THREE.MeshBasicMaterial( new THREE.ColorPass( 0xff0000 ) );

Mhh... Now I don't know whether they should called `*Pass`, or `*Layer`...

examples/webglrenderer2_sandbox.html

@@ -96,6 +96,7 @@
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
 
 		<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
+		<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
 		<script type="text/javascript" src="../src/extras/ShaderUtils.js"></script>
 
 		<script type="text/javascript" src="js/Stats.js"></script>
@@ -139,7 +140,8 @@
 				var vertex_shader = ShaderUtils.lib[ 'basic' ].vertex_shader;
 				var fragment_shader = ShaderUtils.lib[ 'basic' ].fragment_shader;
 
-				var generatedTexture = new THREE.Texture( generateTexture(), new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping );
+				var texture = new THREE.Texture( generateTexture( 0, 0.5, 1 ), new THREE.UVMapping() );
+				var texture2 = new THREE.Texture( generateTexture( 0, 1, 0 ), new THREE.SphericalReflectionMapping() );
 
 				var materials = [
 
@@ -152,8 +154,10 @@
 					new THREE.MeshNormalMaterial( { shading: THREE.SmoothShading } ),
 					new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true } ),
 					new THREE.MeshDepthMaterial( { near: 1, far: 10000 } ),
-					new THREE.MeshBasicMaterial( { map: generatedTexture, fog: false } ),
-					new THREE.MeshLambertMaterial( { map: generatedTexture } ),
+					new THREE.MeshBasicMaterial( { map: texture, fog: false } ),
+					new THREE.MeshBasicMaterial( { env_map: texture2, fog: false } ),
+					new THREE.MeshLambertMaterial( { map: ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' ) } ),
+					new THREE.MeshLambertMaterial( { map: texture2, env_map: ImageUtils.loadTexture( 'textures/envmap.png', new THREE.SphericalReflectionMapping() ) } ),
 					new THREE.MeshShaderMaterial( { uniforms: uniforms, vertex_shader: vertex_shader, fragment_shader: fragment_shader } )
 
 				];
@@ -167,6 +171,8 @@
 
 				materials.push( new THREE.MeshFaceMaterial() );
 
+				// materials = [ new THREE.MeshBasicMaterial( { map: texture, env_map: texture2 } ) ];
+
 				for ( var i = 0; i < 5000; i ++ ) {
 
 					var mesh = new THREE.Mesh( geometry, materials[ Math.floor( Math.random() * materials.length ) ] );
@@ -199,7 +205,7 @@
 
 			}
 
-			function generateTexture() {
+			function generateTexture( r, g, b ) {
 
 				var canvas = document.createElement( 'canvas' );
 				canvas.loaded = true;
@@ -209,14 +215,17 @@
 				var context = canvas.getContext( '2d' );
 				var image = context.getImageData( 0, 0, 256, 256 );
 
-				var x = 0, y = 0;
+				var x = 0, y = 0, p;
 
 				for ( var i = 0, j = 0, l = image.data.length; i < l; i += 4, j ++ ) {
 
 					x = j % 256;
 					y = x == 0 ? y + 1 : y;
+					p = Math.floor( x ^ y );
 
-					image.data[ i + 2 ] = Math.floor( x ^ y );
+					image.data[ i ] = ~~ p * r;
+					image.data[ i + 1 ] = ~~ p * g;
+					image.data[ i + 2 ] = ~~ p * b;
 					image.data[ i + 3 ] = 255;
 
 				}

src/extras/ShaderUtils.js

@@ -373,7 +373,7 @@ var ShaderUtils = {
 			].join("\n")
 
 		},
-		
+
 		'cube': {
 
 			uniforms: { "tCube": { type: "t", value: 1, texture: null } },
@@ -383,7 +383,7 @@ var ShaderUtils = {
 				"varying vec3 vViewPosition;",
 
 				"void main() {",
-			
+
 					"vec4 mPosition = objectMatrix * vec4( position, 1.0 );",
 					"vViewPosition = cameraPosition - mPosition.xyz;",
 
@@ -402,7 +402,7 @@ var ShaderUtils = {
 				"void main() {",
 
 					"vec3 wPos = cameraPosition - vViewPosition;",
-					"gl_FragColor = textureCube( tCube, vec3( -wPos.x, wPos.yz ) );",
+					"gl_FragColor = textureCube( tCube, vec3( - wPos.x, wPos.yz ) );",
 
 				"}"
 

src/renderers/WebGLRenderer2.js

@@ -176,6 +176,13 @@ THREE.WebGLRenderer2 = function ( antialias ) {
 
 							}
 
+							if ( material.env_map ) {
+
+								setTexture( material.env_map, 1 );
+								_gl.uniform1i( uniforms.tSpherical, 1 );
+
+							}
+
 						} else if ( material instanceof THREE.MeshNormalMaterial ) {
 
 							_gl.uniform1f( uniforms.mOpacity, material.opacity );
@@ -259,6 +266,14 @@ THREE.WebGLRenderer2 = function ( antialias ) {
 
 				}
 
+			} else if ( object instanceof THREE.Line ) {
+
+				
+
+			} else if ( object instanceof THREE.Particle ) {
+
+				
+
 			}
 
 		}
@@ -477,10 +492,20 @@ THREE.WebGLRenderer2 = function ( antialias ) {
 
 				vs = [
 					material.map ? 'varying vec2 vUv;' : null,
+					material.env_map ? 'varying vec2 vSpherical;' : null,
 
 					'void main() {',
-						material.map ? 'vUv = uv;' : null,
 						'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
+
+						material.map ? 'vUv = uv;' : null,
+
+						material.env_map ? 'vec3 u = normalize( modelViewMatrix * vec4( position, 1.0 ) ).xyz;' : null,
+						material.env_map ? 'vec3 n = normalize( normalMatrix * normal );' : null,
+						material.env_map ? 'vec3 r = reflect( u, n );' : null,
+						material.env_map ? 'float m = 2.0 * sqrt( r.x * r.x + r.y * r.y + ( r.z + 1.0 ) * ( r.z + 1.0 ) );' : null,
+						material.env_map ? 'vSpherical.x = r.x / m + 0.5;' : null,
+						material.env_map ? 'vSpherical.y = - r.y / m + 0.5;' : null,
+
 					'}'
 				].filter( removeNull ).join( '\n' );
 
@@ -491,6 +516,9 @@ THREE.WebGLRenderer2 = function ( antialias ) {
 					material.map ? 'uniform sampler2D tMap;' : null,
 					material.map ? 'varying vec2 vUv;' : null,
 
+					material.env_map ? 'uniform sampler2D tSpherical;' : null,
+					material.env_map ? 'varying vec2 vSpherical;' : null,
+
 					material.fog ? 'uniform float fog;' : null,
 					material.fog ? 'uniform float fogNear;' : null,
 					material.fog ? 'uniform float fogFar;' : null,
@@ -506,6 +534,8 @@ THREE.WebGLRenderer2 = function ( antialias ) {
 
 						material.map ? 'gl_FragColor *= texture2D( tMap, vUv );' : null,
 
+						material.env_map ? 'gl_FragColor += texture2D( tSpherical, vSpherical );' : null,
+
 						material.fog ? 'float depth = gl_FragCoord.z / gl_FragCoord.w;' : null,
 						material.fog ? 'float fogFactor = fog * smoothstep( fogNear, fogFar, depth );' : null,
 						material.fog ? 'gl_FragColor = mix( gl_FragColor, vec4( fogColor, 1.0 ), fogFactor );' : null,
@@ -513,7 +543,9 @@ THREE.WebGLRenderer2 = function ( antialias ) {
 				].filter( removeNull ).join( '\n' );
 
 				identifiers.push( 'mColor', 'mOpacity' );
+
 				material.map ? identifiers.push( 'tMap' ) : null;
+				material.env_map ? identifiers.push( 'tSpherical' ) : null;
 				material.fog ? identifiers.push( 'fog', 'fogColor', 'fogNear', 'fogFar' ) : null;