Refactored multimaterials to also work with non-textured models composed from multiple material groups.

Old version was doing massive overdraw (whole mesh was drawn for each material).

Even current solution is still quite messy: there is a different behavior for stroke and fill materials (when used as secondary materials).

Stroke materials are applied to the complete mesh (as most common use case seems to be wireframe) while fill materials now apply only to faces within single material group (when "decalIndex" property of secondary fill material is set).

examples/materials_test.html

@@ -224,7 +224,9 @@
                     //geometry.materials.push ( new THREE.MeshColorStrokeMaterial(0xff0000, 1, 1.5) );
                     
                     // full-mesh color overlay
-                    //geometry.materials.push ( new THREE.MeshColorFillMaterial(0xff00ff, 0.5) );
+                    var colorOverlay = new THREE.MeshColorFillMaterial(0xff0000, 0.5)
+                    colorOverlay.decalIndex = 4;
+                    geometry.materials.push ( colorOverlay );
                     
                     // PROCEDURAL TEXTURES (decals)
                     

src/renderers/CanvasRenderer.js

@@ -60,6 +60,22 @@ THREE.CanvasRenderer = function () {
 		}
 	};
 
+    this.isFullOverlay = function ( material, materialIndex, element ) {
+        
+        // these materials can be either the only material for whole mesh
+        // or if they are overlays in multimaterials, they apply only to
+        // group of faces with single material (specified by decalIndex)
+        
+        return ( ( material instanceof THREE.MeshBitmapUVMappingMaterial || 
+                   material instanceof THREE.MeshFaceColorFillMaterial ||
+                   material instanceof THREE.MeshColorFillMaterial
+                 ) 
+                 &&
+                 ! ( materialIndex == element.materialIndex || 
+                     element.materialIndex == material.decalIndex ) );
+        
+    };
+        
 	this.render = function ( scene, camera ) {
 
 		var e, el, element, m, ml, material, pi2 = Math.PI * 2,
@@ -280,7 +296,12 @@ THREE.CanvasRenderer = function () {
 				for ( m = 0, ml = element.material.length; m < ml; m++ ) {
 
 					material = element.material[ m ];
-
+                    
+                    if ( this.isFullOverlay( material, m, element ) ) {
+                        
+                        continue;
+                    }
+                    
 					if ( material instanceof THREE.MeshColorFillMaterial ) {
 
 						if ( _enableLighting ) {
@@ -402,8 +423,7 @@ THREE.CanvasRenderer = function () {
 						_bboxRect.inflate( _context.lineWidth );
 
 
-					} else if ( material instanceof THREE.MeshBitmapUVMappingMaterial && 
-                                ( m == element.materialIndex || element.materialIndex == material.decalIndex ) ) {
+					} else if ( material instanceof THREE.MeshBitmapUVMappingMaterial ) {
 
 						bitmap = material.bitmap;
 						bitmapWidth = bitmap.width - 1;
@@ -488,6 +508,11 @@ THREE.CanvasRenderer = function () {
 
 					material = element.material[ m ];
 
+                    if ( this.isFullOverlay( material, m, element ) ) {
+                        
+                        continue;
+                    }
+                    
 					if ( material instanceof THREE.MeshColorFillMaterial ) {
 
 						if ( _enableLighting ) {
@@ -613,8 +638,7 @@ THREE.CanvasRenderer = function () {
 
 						_bboxRect.inflate( _context.lineWidth );
 
-					} else if ( material instanceof THREE.MeshBitmapUVMappingMaterial &&                                 
-                                ( m == element.materialIndex || element.materialIndex == material.decalIndex ) ) {
+					} else if ( material instanceof THREE.MeshBitmapUVMappingMaterial ) {
 
 						bitmap = material.bitmap;
 						bitmapWidth = bitmap.width - 1;

src/renderers/WebGLRenderer.js

@@ -265,8 +265,16 @@ THREE.WebGLRenderer = function () {
                 
                 material = object.material[ m ];
                 
-                if ( material instanceof THREE.MeshBitmapUVMappingMaterial &&
-                     !( m == mf || mf == material.decalIndex ) ) {
+                // these materials can be either the only material for whole mesh
+                // or if they are overlays in multimaterials, they apply only to
+                // group of faces with single material (specified by decalIndex)
+                
+                if ( ( material instanceof THREE.MeshBitmapUVMappingMaterial || 
+                       material instanceof THREE.MeshFaceColorFillMaterial ||
+                       material instanceof THREE.MeshColorFillMaterial
+                     ) 
+                    &&
+                     ! ( m == mf || mf == material.decalIndex ) ) {
                     
                     continue;
                     

utils/REVISION

@@ -1 +1 @@
-22
+23