Merge pull request #6844 from dubejf/multi-colors

WebGLMultipleRenderers: Use Geometry

Merge pull request #6844 from dubejf/multi-colors
WebGLMultipleRenderers: Use Geometry
68726be0 · Ricardo Cabello · fe245700 · 0db587f0 · 68726be0 · 68726be0
9 changed file
--- a/examples/index.html
+++ b/examples/index.html
@@ -316,6 +316,7 @@
 				"webgl_multiple_canvases_complex",
 				"webgl_multiple_canvases_grid",
 				"webgl_multiple_elements",
+				"webgl_multiple_renderers",
 				"webgl_multiple_views",
 				"webgl_nearestneighbour",
 				"webgl_objects_update",

--- a/examples/webgl_multiple_renderers.html
+++ b/examples/webgl_multiple_renderers.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgl - multiple Renderers - complex</title>
+		<title>three.js webgl - multiple renderers</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
@@ -62,7 +62,7 @@
 			<div id="container2"></div>
 			<div id="container3"></div>
 		</div>
-		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> webgl - multiple canvases - complex</div>
+		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> webgl - multiple renderers</div>

 		<script src="../build/three.min.js"></script>

@@ -115,8 +115,8 @@

 				var container3 = document.getElementById( 'container3' );

-				container3.style.left = e.pageX - container3.clientWidth / 2 + "px"
-				container3.style.top = e.pageY - container3.clientHeight / 2 + "px"
+				container3.style.left = e.pageX - container3.clientWidth / 2 + "px";
+				container3.style.top = e.pageY - container3.clientHeight / 2 + "px";

 			}

@@ -225,9 +225,7 @@
 				group2.rotation.x = 0;
 				scene.add( group2 );

-				group3 = new THREE.Group();
-				group3.add( new THREE.Mesh( new THREE.BufferGeometry().fromGeometry( geometry3 ), materials[0] ) );
-				group3.add( new THREE.Mesh( geometry3, materials[1] ) );
+				group3 = THREE.SceneUtils.createMultiMaterialObject( geometry3, materials );
 				group3.name = 'rotating ball';
 				group3.position.x = 0;
 				group3.rotation.x = 0;
@@ -238,25 +236,31 @@

 			function updateScene () {

-				var group = scene.getObjectByName( 'rotating ball' )
+				var group = scene.getObjectByName( 'rotating ball' );
 				group.rotation.x += Math.PI / 600;

 				var geometry = group.children[0].geometry;
-				var array = geometry.attributes.color.array;

-				for (var i = 0; i < array.length; i ++) {
+				for (var i = 0; i < geometry.faces.length; i ++) {

-					array[i] = ( array[i] + 0.99 ) % 1.0;
+						var f = geometry.faces[ i ];

-				}
+						for( var j = 0; j < 3; j ++ ) {
+
+							var color = f.vertexColors[ j ];
+							color.setHex( ( color.getHex() + 0xfdfdfd ) % 0xffffff );
+
+						}
+
+					}

-				geometry.attributes.color.needsUpdate = true;
+				geometry.colorsNeedUpdate = true;

 			}

 			function App( container, fullWidth, fullHeight ) {

-				var container, stats;
+				var stats;

 				var camera, renderer;


--- a/src/core/BufferGeometry.js
+++ b/src/core/BufferGeometry.js
@@ -153,7 +153,6 @@ THREE.BufferGeometry.prototype = {
 		console.log( 'THREE.BufferGeometry.setFromObject(). Converting', object, this );

 		var geometry = object.geometry;
-		var material = object.material;

 		if ( object instanceof THREE.PointCloud || object instanceof THREE.Line ) {


--- a/src/extras/geometries/ShapeGeometry.js
+++ b/src/extras/geometries/ShapeGeometry.js
@@ -95,8 +95,6 @@ THREE.ShapeGeometry.prototype.addShape = function ( shape, options ) {

 	// Vertices

-	var contour = vertices;
-
 	for ( i = 0, l = holes.length; i < l; i ++ ) {

 		hole = holes[ i ];

--- a/src/loaders/JSONLoader.js
+++ b/src/loaders/JSONLoader.js
@@ -68,8 +68,7 @@ THREE.JSONLoader.prototype = {

 	parse: function ( json, texturePath ) {

-		var scope = this,
-		geometry = new THREE.Geometry(),
+		var geometry = new THREE.Geometry(),
 		scale = ( json.scale !== undefined ) ? 1.0 / json.scale : 1.0;

 		parseModel( scale );

--- a/src/math/Color.js
+++ b/src/math/Color.js
@@ -10,7 +10,7 @@ THREE.Color = function ( color ) {

 	}

-	return this.set( color )
+	return this.set( color );

 };

@@ -73,7 +73,7 @@ THREE.Color.prototype = {
 			if ( t < 2 / 3 ) return p + ( q - p ) * 6 * ( 2 / 3 - t );
 			return p;

-		};
+		}

 		return function ( h, s, l ) {


--- a/src/renderers/WebGLRenderer.js
+++ b/src/renderers/WebGLRenderer.js
@@ -1944,7 +1944,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 				uniforms: THREE.UniformsUtils.clone( shader.uniforms ),
 				vertexShader: shader.vertexShader,
 				fragmentShader: shader.fragmentShader
-			}
+			};

 		} else {

@@ -1953,7 +1953,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 				uniforms: material.uniforms,
 				vertexShader: material.vertexShader,
 				fragmentShader: material.fragmentShader
-			}
+			};

 		}


--- a/src/renderers/webgl/WebGLProgram.js
+++ b/src/renderers/webgl/WebGLProgram.js
@@ -81,8 +81,6 @@ THREE.WebGLProgram = ( function () {
 		var gl = renderer.context;

 		var defines = material.defines;
-		var uniforms = material.__webglShader.uniforms;
-		var attributes = material.attributes;

 		var vertexShader = material.__webglShader.vertexShader;
 		var fragmentShader = material.__webglShader.fragmentShader;

--- a/src/renderers/webgl/WebGLShadowMap.js
+++ b/src/renderers/webgl/WebGLShadowMap.js
@@ -13,8 +13,6 @@ THREE.WebGLShadowMap = function ( _renderer, _lights, _objects ) {
 	_min = new THREE.Vector3(),
 	_max = new THREE.Vector3(),

-	_webglObjects = _objects.objects,
-
 	_matrixPosition = new THREE.Vector3(),

 	_renderList = [];