Change blending method on shadow polygons. Updated example to use Lambert material and only one shadow casting directional light.

build/Three.js

@@ -213,7 +213,7 @@ default_vertex:"#ifndef USE_MORPHTARGETS\n#ifndef USE_SKINNING\ngl_Position = pr
 THREE.UniformsLib={common:{diffuse:{type:"c",value:new THREE.Color(15658734)},opacity:{type:"f",value:1},map:{type:"t",value:0,texture:null},lightMap:{type:"t",value:2,texture:null},envMap:{type:"t",value:1,texture:null},useRefract:{type:"i",value:0},reflectivity:{type:"f",value:1},refractionRatio:{type:"f",value:0.98},combine:{type:"i",value:0},fogDensity:{type:"f",value:2.5E-4},fogNear:{type:"f",value:1},fogFar:{type:"f",value:2E3},fogColor:{type:"c",value:new THREE.Color(16777215)},morphTargetInfluences:{type:"f",
 value:0}},lights:{enableLighting:{type:"i",value:1},ambientLightColor:{type:"fv",value:[]},directionalLightDirection:{type:"fv",value:[]},directionalLightColor:{type:"fv",value:[]},pointLightPosition:{type:"fv",value:[]},pointLightColor:{type:"fv",value:[]}},particle:{psColor:{type:"c",value:new THREE.Color(15658734)},opacity:{type:"f",value:1},size:{type:"f",value:1},scale:{type:"f",value:1},map:{type:"t",value:0,texture:null},fogDensity:{type:"f",value:2.5E-4},fogNear:{type:"f",value:1},fogFar:{type:"f",
 value:2E3},fogColor:{type:"c",value:new THREE.Color(16777215)}}};
-THREE.ShaderLib={shadowPost:{vertexShader:"uniform \tmat4 \tprojectionMatrix;\nattribute \tvec3 \tposition;\nvoid main(void)\n{\ngl_Position = projectionMatrix * vec4( position, 1.0 );\n}",fragmentShader:"#ifdef GL_ES\nprecision highp float;\n#endif\nvoid main( void )\n{\ngl_FragColor = vec4( 1, 1, 1, 0.5 );\n}"},shadowVolumeDynamic:{uniforms:{directionalLightDirection:{type:"fv",value:[]}},vertexShader:"uniform \tvec3 \tdirectionalLightDirection;\nvoid main() {\nvec3 pos    = ( objectMatrix * vec4( position, 1.0 )).xyz;\nvec3 norm   = mat3( objectMatrix[0].xyz, objectMatrix[1].xyz, objectMatrix[2].xyz) * normal;// normalMatrix * normal;\nvec4 final  = vec4( pos + directionalLightDirection * 5000.0 * step( 0.0, dot( directionalLightDirection, norm )), 1.0 );\ngl_Position = projectionMatrix * viewMatrix * final;\n}",fragmentShader:"void main() {\ngl_FragColor = vec4( 1, 1, 1, 1 );\n}"},
+THREE.ShaderLib={shadowPost:{vertexShader:"uniform \tmat4 \tprojectionMatrix;\nattribute \tvec3 \tposition;\nvoid main(void)\n{\ngl_Position = projectionMatrix * vec4( position, 1.0 );\n}",fragmentShader:"#ifdef GL_ES\nprecision highp float;\n#endif\nvoid main( void )\n{\ngl_FragColor = vec4( 0, 0, 0, 0.5 );\n}"},shadowVolumeDynamic:{uniforms:{directionalLightDirection:{type:"fv",value:[]}},vertexShader:"uniform \tvec3 \tdirectionalLightDirection;\nvoid main() {\nvec3 pos    = ( objectMatrix * vec4( position, 1.0 )).xyz;\nvec3 norm   = mat3( objectMatrix[0].xyz, objectMatrix[1].xyz, objectMatrix[2].xyz) * normal;// normalMatrix * normal;\nvec4 final  = vec4( pos + directionalLightDirection * 5000.0 * step( 0.0, dot( directionalLightDirection, norm )), 1.0 );\ngl_Position = projectionMatrix * viewMatrix * final;\n}",fragmentShader:"void main() {\ngl_FragColor = vec4( 1, 1, 1, 1 );\n}"},
 depth:{uniforms:{mNear:{type:"f",value:1},mFar:{type:"f",value:2E3},opacity:{type:"f",value:1}},fragmentShader:"uniform float mNear;\nuniform float mFar;\nuniform float opacity;\nvoid main() {\nfloat depth = gl_FragCoord.z / gl_FragCoord.w;\nfloat color = 1.0 - smoothstep( mNear, mFar, depth );\ngl_FragColor = vec4( vec3( color ), opacity );\n}",vertexShader:"void main() {\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}"},normal:{uniforms:{opacity:{type:"f",value:1}},
 fragmentShader:"uniform float opacity;\nvarying vec3 vNormal;\nvoid main() {\ngl_FragColor = vec4( 0.5 * normalize( vNormal ) + 0.5, opacity );\n}",vertexShader:"varying vec3 vNormal;\nvoid main() {\nvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\nvNormal = normalize( normalMatrix * normal );\ngl_Position = projectionMatrix * mvPosition;\n}"},basic:{uniforms:THREE.UniformsLib.common,fragmentShader:["uniform vec3 diffuse;\nuniform float opacity;",THREE.ShaderChunk.color_pars_fragment,THREE.ShaderChunk.map_pars_fragment,
 THREE.ShaderChunk.lightmap_pars_fragment,THREE.ShaderChunk.envmap_pars_fragment,THREE.ShaderChunk.fog_pars_fragment,"void main() {\ngl_FragColor = vec4( diffuse, opacity );",THREE.ShaderChunk.map_fragment,THREE.ShaderChunk.lightmap_fragment,THREE.ShaderChunk.color_fragment,THREE.ShaderChunk.envmap_fragment,THREE.ShaderChunk.fog_fragment,"}"].join("\n"),vertexShader:[THREE.ShaderChunk.map_pars_vertex,THREE.ShaderChunk.lightmap_pars_vertex,THREE.ShaderChunk.envmap_pars_vertex,THREE.ShaderChunk.color_pars_vertex,
@@ -295,7 +295,7 @@ U(t);(this.autoClear||o)&&this.clear();D=j.__webglObjects.length;for(o=0;o<D;o++
 H.matrixWorld.flattenToArray(H._objectMatrixArray);A(H,w);x(y)}}J(THREE.NormalBlending);for(o=0;o<D;o++){y=j.__webglObjects[o];if(y.render){H=y.object;T=y.buffer;K=y.opaque;h(H);for(y=0;y<K.count;y++){F=K.list[y];k(F.depthTest);f(w,ga,pa,F,T,H)}}}for(o=0;o<Q;o++){y=j.__webglObjectsImmediate[o];H=y.object;if(H.visible){K=y.opaque;h(H);for(y=0;y<K.count;y++){F=K.list[y];k(F.depthTest);E=d(w,ga,pa,F,H);H.render(function(ua){g(ua,E)})}}}for(o=0;o<D;o++){y=j.__webglObjects[o];if(y.render){H=y.object;T=
 y.buffer;K=y.transparent;h(H);for(y=0;y<K.count;y++){F=K.list[y];J(F.blending);k(F.depthTest);f(w,ga,pa,F,T,H)}}}for(o=0;o<Q;o++){y=j.__webglObjectsImmediate[o];H=y.object;if(H.visible){K=y.transparent;h(H);for(y=0;y<K.count;y++){F=K.list[y];J(F.blending);k(F.depthTest);E=d(w,ga,pa,F,H);H.render(function(ua){g(ua,E)})}}}if(j.__webglShadowVolumes.length&&j.lights.length){e.enable(e.POLYGON_OFFSET_FILL);e.polygonOffset(0.1,1);e.enable(e.STENCIL_TEST);e.depthMask(!1);e.colorMask(!1,!1,!1,!1);e.stencilFunc(e.ALWAYS,
 1,255);e.stencilOpSeparate(e.BACK,e.KEEP,e.INCR,e.KEEP);e.stencilOpSeparate(e.FRONT,e.KEEP,e.DECR,e.KEEP);Q=j.lights.length;var sa,ya;D=j.__webglShadowVolumes.length;for(ga=0;ga<Q;ga++){ya=j.lights[ga];if(ya instanceof THREE.DirectionalLight)for(o=0;o<D;o++){y=j.__webglShadowVolumes[o];H=y.object;T=y.buffer;K=y.opaque;H.matrixWorld.flattenToArray(H._objectMatrixArray);A(H,w);z(y);e.cullFace(e.FRONT);for(sa=0;sa<2;sa++){for(y=0;y<K.count;y++){F=K.list[y];f(w,ya,pa,F,T,H)}e.cullFace(e.BACK)}}}e.disable(e.POLYGON_OFFSET_FILL);
-e.colorMask(!0,!0,!0,!0);e.stencilFunc(e.NOTEQUAL,0,255);e.stencilOp(e.KEEP,e.KEEP,e.KEEP);e.disable(e.DEPTH_TEST);e.enable(e.BLEND);e.blendFunc(e.SRC_ALPHA,e.ONE);e.blendEquation(e.FUNC_REVERSE_SUBTRACT);Aa="";ja=Ha.program;e.useProgram(Ha.program);e.uniformMatrix4fv(Ha.projectionLocation,!1,ra);e.bindBuffer(e.ARRAY_BUFFER,Ha.vertexBuffer);e.vertexAttribPointer(Ha.vertexLocation,3,e.FLOAT,!1,0,0);e.enableVertexAttribArray(Ha.vertexLocation);e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,Ha.elementBuffer);e.drawElements(e.TRIANGLES,
+e.colorMask(!0,!0,!0,!0);e.stencilFunc(e.NOTEQUAL,0,255);e.stencilOp(e.KEEP,e.KEEP,e.KEEP);e.disable(e.DEPTH_TEST);e.enable(e.BLEND);e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA);e.blendEquation(e.FUNC_ADD);Aa="";ja=Ha.program;e.useProgram(Ha.program);e.uniformMatrix4fv(Ha.projectionLocation,!1,ra);e.bindBuffer(e.ARRAY_BUFFER,Ha.vertexBuffer);e.vertexAttribPointer(Ha.vertexLocation,3,e.FLOAT,!1,0,0);e.enableVertexAttribArray(Ha.vertexLocation);e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,Ha.elementBuffer);e.drawElements(e.TRIANGLES,
 6,e.UNSIGNED_SHORT,0);e.disable(e.STENCIL_TEST);e.enable(e.DEPTH_TEST);e.disable(e.BLEND);e.depthMask(!0)}if(t&&t.minFilter!==THREE.NearestFilter&&t.minFilter!==THREE.LinearFilter){e.bindTexture(e.TEXTURE_2D,t.__webGLTexture);e.generateMipmap(e.TEXTURE_2D);e.bindTexture(e.TEXTURE_2D,null)}};this.initWebGLObjects=function(j){if(!j.__webglObjects){j.__webglObjects=[];j.__webglObjectsImmediate=[];j.__webglShadowVolumes=[]}for(;j.__objectsAdded.length;){var w=j.__objectsAdded[0],t=j,o=void 0,y=void 0,
 E=void 0;if(w._modelViewMatrix==undefined){w._modelViewMatrix=new THREE.Matrix4;w._normalMatrixArray=new Float32Array(9);w._modelViewMatrixArray=new Float32Array(16);w._objectMatrixArray=new Float32Array(16);w.matrixWorld.flattenToArray(w._objectMatrixArray)}if(w instanceof THREE.Mesh){y=w.geometry;y.geometryGroups==undefined&&I(y);for(o in y.geometryGroups){E=y.geometryGroups[o];if(!E.__webGLVertexBuffer){var K=E;K.__webGLVertexBuffer=e.createBuffer();K.__webGLNormalBuffer=e.createBuffer();K.__webGLTangentBuffer=
 e.createBuffer();K.__webGLColorBuffer=e.createBuffer();K.__webGLUVBuffer=e.createBuffer();K.__webGLUV2Buffer=e.createBuffer();K.__webGLSkinVertexABuffer=e.createBuffer();K.__webGLSkinVertexBBuffer=e.createBuffer();K.__webGLSkinIndicesBuffer=e.createBuffer();K.__webGLSkinWeightsBuffer=e.createBuffer();K.__webGLFaceBuffer=e.createBuffer();K.__webGLLineBuffer=e.createBuffer();if(K.numMorphTargets){var F=void 0,D=void 0;K.__webGLMorphTargetsBuffers=[];F=0;for(D=K.numMorphTargets;F<D;F++)K.__webGLMorphTargetsBuffers.push(e.createBuffer())}K=

examples/webgl_stencil.html

@@ -51,68 +51,60 @@
 				// world
 
 				var cube = new Cube( 300, 300, 10 );
-				var material = new THREE.MeshNormalMaterial();
+				var material0 = new THREE.MeshPhongMaterial( { color:0xff00ff } );
+				var material1 = new THREE.MeshLambertMaterial( { color:0x00ff00 } );
+				var material2 = new THREE.MeshLambertMaterial( { color:0x0000ff } );
 
-				var mesh1 = new THREE.Mesh( cube, material );
+				var mesh1 = new THREE.Mesh( cube, material0 );
 				mesh1.position.z = -150;
 				scene.addChild( mesh1 );
-				new THREE.ShadowVolume( mesh1 )
-
 
-				var mesh2 = new THREE.Mesh( cube, material );
+				var mesh2 = new THREE.Mesh( cube, material1 );
 				mesh2.position.x = -150;
 				mesh2.rotation.y = 90 * Math.PI / 180;
 				scene.addChild( mesh2 );
-				new THREE.ShadowVolume( mesh2 )
 
-
-				var mesh3 = new THREE.Mesh( cube, material );
+				var mesh3 = new THREE.Mesh( cube, material2 );
 				mesh3.position.y = -150;
 				mesh3.rotation.x = 90 * Math.PI / 180;
 				scene.addChild( mesh3 );
+
+				new THREE.ShadowVolume( mesh1 )
+				new THREE.ShadowVolume( mesh2 )
 				new THREE.ShadowVolume( mesh3 )
 	
 	
-				// shadow
+				// moving objects
 
 				var cube = new Cube( 40, 40, 40 );
 				var torus = new Torus( 40, 10 );
 				var sphere = new Sphere( 40 );
 				var cylinder = new Cylinder( 10, 10, 20, 40, 0, 0 );
-				mesh = new THREE.Mesh( torus, material );
+				mesh = new THREE.Mesh( torus, material1 );
 				scene.addChild( mesh );
 
-				new THREE.ShadowVolume( mesh );
-
-
-				boxMesh = new THREE.Mesh( cube, material );
+				boxMesh = new THREE.Mesh( cube, material2 );
 				scene.addChild( boxMesh );
 				
+				new THREE.ShadowVolume( mesh );
 				new THREE.ShadowVolume( boxMesh );
 
 
+				// lights
 
-				//shadowVolume.position.x = 40;
-
-				light = new THREE.DirectionalLight();
+				light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 1, 0 );
 				scene.addChild( light );
 
-				light2 = new THREE.DirectionalLight();
-				light2.position.set( 0, 1, 0 );
-				scene.addChild( light2 );
-				
-
-
-				var cube = new Cube( 10, 10, 10 );
-				lightCube = new THREE.Mesh( cube, material );
+				var cube = new Sphere( 5 );
+				lightCube = new THREE.Mesh( cube, material2 );
 				scene.addChild( lightCube );
 
-				lightCube2 = new THREE.Mesh( cube, material );
-				scene.addChild( lightCube2 );
-				
+
+				// renderer
 
 				renderer = new THREE.WebGLRenderer();
+				renderer.setClearColorHex( 0xaaaaaa, 1 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
@@ -155,17 +147,9 @@
 				light.position.y = 1;
 				light.position.z = Math.cos( t );
 
-				light2.position.x = Math.cos( t + 1 );
-				light2.position.y = 0.5;
-				light2.position.z = Math.sin( t + 1 );
-
-
 				lightCube.position.copy( light.position );
 				lightCube.position.multiplyScalar( 200 );
 
-				lightCube2.position.copy( light2.position );
-				lightCube2.position.multiplyScalar( 250 );
-
 
 				t += 0.02;
 

src/renderers/WebGLRenderer.js

@@ -2608,9 +2608,10 @@ THREE.WebGLRenderer = function ( parameters ) {
 			_gl.stencilFunc( _gl.NOTEQUAL, 0, 0xFF );
 			_gl.stencilOp( _gl.KEEP, _gl.KEEP, _gl.KEEP );
 		    _gl.disable( _gl.DEPTH_TEST );
+			
 			_gl.enable( _gl.BLEND );
-			_gl.blendFunc( _gl.SRC_ALPHA, _gl.ONE );
-			_gl.blendEquation( _gl.FUNC_REVERSE_SUBTRACT );
+			_gl.blendFunc( _gl.ONE, _gl.ONE_MINUS_SRC_ALPHA );
+			_gl.blendEquation( _gl.FUNC_ADD );
 	
 	
 			_oldBlending = "";

src/renderers/WebGLShaders.js

@@ -578,7 +578,7 @@ THREE.ShaderLib = {
 	
 			"void main( void )",
 			"{",
-				"gl_FragColor = vec4( 1, 1, 1, 0.5 );",
+				"gl_FragColor = vec4( 0, 0, 0, 0.5 );",
 			"}"
 
 		].join( "\n" )