Added proper doubleSided handling for Phong. Added doubleSided performance test.

As per discussion in #1324

Added proper doubleSided handling for Phong. Added doubleSided performance test.
As per discussion in #1324
8ac9e70e · alteredq · 73283a60 · 8ac9e70e · 8ac9e70e · 8ac9e70e
8 changed file
--- a/build/Three.js
+++ b/build/Three.js
--- a/build/custom/ThreeCanvas.js
+++ b/build/custom/ThreeCanvas.js
--- a/build/custom/ThreeDOM.js
+++ b/build/custom/ThreeDOM.js
--- a/build/custom/ThreeSVG.js
+++ b/build/custom/ThreeSVG.js
--- a/build/custom/ThreeWebGL.js
+++ b/build/custom/ThreeWebGL.js
--- a/examples/webgl_performance_doublesided.html
+++ b/examples/webgl_performance_doublesided.html
+<!doctype html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - performance</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 {
+				background:#fff;
+				padding:0;
+				margin:0;
+				font-weight: bold;
+				overflow:hidden;
+			}
+		</style>
+	</head>
+	<body>
+
+		<script src="../build/Three.js"></script>
+
+		<script src="js/Stats.js"></script>
+
+		<script>
+
+			var container, stats;
+
+			var camera, scene, renderer;
+
+			var mesh, zmesh, lightMesh, geometry;
+
+			var mouseX = 0, mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+			init();
+			animate();
+
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 20000 );
+				camera.position.z = 3200;
+
+				scene = new THREE.Scene();
+				scene.add( camera );
+
+				var light = new THREE.PointLight( 0x0011ff, 1, 5000 );
+				light.position.set( 4000, 0, 0 );
+				scene.add( light );
+
+				var light = new THREE.PointLight( 0xff1100, 1, 5000 );
+				light.position.set( -4000, 0, 0 );
+				scene.add( light );
+
+				var material = new THREE.MeshPhongMaterial( { specular: 0xffffff, shading: THREE.SmoothShading, perPixel: true } );
+
+				var geometry = new THREE.SphereGeometry( 1, 32, 16, 0, Math.PI );
+
+				for ( var i = 0; i < 5000; i ++ ) {
+
+					var mesh = new THREE.Mesh( geometry, material );
+
+					mesh.position.x = Math.random() * 10000 - 5000;
+					mesh.position.y = Math.random() * 10000 - 5000;
+					mesh.position.z = Math.random() * 10000 - 5000;
+
+					mesh.rotation.x = Math.random() * 360 * ( Math.PI / 180 );
+					mesh.rotation.y = Math.random() * 360 * ( Math.PI / 180 );
+					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 50 + 100;
+
+					mesh.matrixAutoUpdate = false;
+					mesh.updateMatrix();
+
+					mesh.doubleSided = true;
+
+					scene.add( mesh );
+
+				}
+
+				renderer = new THREE.WebGLRenderer( { clearColor: 0x050505, clearAlpha: 1, antialias: false } );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.sortObjects = false;
+
+				renderer.gammaInput = true;
+				renderer.gammaOutput = true;
+
+				container.appendChild( renderer.domElement );
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				stats.domElement.style.zIndex = 100;
+
+				stats.domElement.children[ 0 ].children[ 0 ].style.color = "#eee";
+				stats.domElement.children[ 0 ].style.background = "transparent";
+				stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";
+
+				container.appendChild( stats.domElement );
+
+			}
+
+			function onDocumentMouseMove(event) {
+
+				mouseX = ( event.clientX - windowHalfX ) * 10;
+				mouseY = ( event.clientY - windowHalfY ) * 10;
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+
+				camera.lookAt( scene.position );
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>
--- a/src/renderers/WebGLRenderer.js
+++ b/src/renderers/WebGLRenderer.js
@@ -4211,7 +4211,8 @@ THREE.WebGLRenderer = function ( parameters ) {
 			alphaTest: material.alphaTest,
 			metal: material.metal,
 			perPixel: material.perPixel,
-			wrapAround: material.wrapAround
+			wrapAround: material.wrapAround,
+			doubleSided: object.doubleSided

 		};

@@ -5287,6 +5288,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 			parameters.morphNormals ? "#define USE_MORPHNORMALS" : "",
 			parameters.perPixel ? "#define PHONG_PER_PIXEL" : "",
 			parameters.wrapAround ? "#define WRAP_AROUND" : "",
+			parameters.doubleSided ? "#define DOUBLE_SIDED" : "",

 			parameters.shadowMapEnabled ? "#define USE_SHADOWMAP" : "",
 			parameters.shadowMapSoft ? "#define SHADOWMAP_SOFT" : "",
@@ -5377,6 +5379,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 			parameters.metal ? "#define METAL" : "",
 			parameters.perPixel ? "#define PHONG_PER_PIXEL" : "",
 			parameters.wrapAround ? "#define WRAP_AROUND" : "",
+			parameters.doubleSided ? "#define DOUBLE_SIDED" : "",

 			parameters.shadowMapEnabled ? "#define USE_SHADOWMAP" : "",
 			parameters.shadowMapSoft ? "#define SHADOWMAP_SOFT" : "",

--- a/src/renderers/WebGLShaders.js
+++ b/src/renderers/WebGLShaders.js
@@ -436,6 +436,12 @@ THREE.ShaderChunk = {
 		"vec3 normal = normalize( vNormal );",
 		"vec3 viewPosition = normalize( vViewPosition );",

+		"#ifdef DOUBLE_SIDED",
+
+			"normal = normal * ( -1.0 + 2.0 * float( gl_FrontFacing ) );",
+
+		"#endif",
+
 		"#if MAX_POINT_LIGHTS > 0",

 			"vec3 pointDiffuse  = vec3( 0.0 );",