Merge pull request #5774 from ShenpaiSharma/Multiple_Mat

Feature Implemeted -- Multiple Material support for geometry

Author: calebfoss

src/webgl/material.js

@@ -719,7 +719,7 @@ p5.prototype.normalMaterial = function(...args) {
 };
 
 /**
- * Sets the current material as an ambient material of the given color.
+ * Sets the ambient color of the material.
  *
  * The ambientMaterial() color is the color the object will reflect
  * under **any** lighting.
@@ -823,9 +823,7 @@ p5.prototype.ambientMaterial = function(v1, v2, v3) {
   p5._validateParameters('ambientMaterial', arguments);
 
   const color = p5.prototype.color.apply(this, arguments);
-  this._renderer.curFillColor = color._array;
-  this._renderer._useSpecularMaterial = false;
-  this._renderer._useEmissiveMaterial = false;
+  this._renderer.curAmbientColor = color._array;
   this._renderer._useNormalMaterial = false;
   this._renderer._enableLighting = true;
   this._renderer._tex = null;
@@ -834,8 +832,7 @@ p5.prototype.ambientMaterial = function(v1, v2, v3) {
 };
 
 /**
- * Sets the current material as an emissive material of
- * the given color.
+ * Sets the emissive color of the material.
  *
  * An emissive material will display the emissive color at
  * full strength regardless of lighting. This can give the
@@ -897,8 +894,7 @@ p5.prototype.emissiveMaterial = function(v1, v2, v3, a) {
   p5._validateParameters('emissiveMaterial', arguments);
 
   const color = p5.prototype.color.apply(this, arguments);
-  this._renderer.curFillColor = color._array;
-  this._renderer._useSpecularMaterial = false;
+  this._renderer.curEmissiveColor = color._array;
   this._renderer._useEmissiveMaterial = true;
   this._renderer._useNormalMaterial = false;
   this._renderer._enableLighting = true;
@@ -908,7 +904,7 @@ p5.prototype.emissiveMaterial = function(v1, v2, v3, a) {
 };
 
 /**
- * Sets the current material as a specular material of the given color.
+ * Sets the specular color of the material.
  *
  * A specular material is reflective (shiny). The shininess can be
  * controlled by the <a href="#/p5/shininess">shininess()</a> function.
@@ -985,9 +981,8 @@ p5.prototype.specularMaterial = function(v1, v2, v3, alpha) {
   p5._validateParameters('specularMaterial', arguments);
 
   const color = p5.prototype.color.apply(this, arguments);
-  this._renderer.curFillColor = color._array;
+  this._renderer.curSpecularColor = color._array;
   this._renderer._useSpecularMaterial = true;
-  this._renderer._useEmissiveMaterial = false;
   this._renderer._useNormalMaterial = false;
   this._renderer._enableLighting = true;
   this._renderer._tex = null;

src/webgl/p5.RendererGL.js

@@ -95,6 +95,9 @@ p5.RendererGL = function(elt, pInst, isMainCanvas, attr) {
   this.drawMode = constants.FILL;
 
   this.curFillColor = this._cachedFillStyle = [1, 1, 1, 1];
+  this.curAmbientColor = this._cachedFillStyle = [0, 0, 0, 0];
+  this.curSpecularColor = this._cachedFillStyle = [0, 0, 0, 0];
+  this.curEmissiveColor = this._cachedFillStyle = [0, 0, 0, 0];
   this.curStrokeColor = this._cachedStrokeStyle = [0, 0, 0, 1];
 
   this.curBlendMode = constants.BLEND;
@@ -1017,6 +1020,9 @@ p5.RendererGL.prototype.push = function() {
   properties.curStrokeWeight = this.curStrokeWeight;
   properties.curStrokeColor = this.curStrokeColor;
   properties.curFillColor = this.curFillColor;
+  properties.curAmbientColor = this.curAmbientColor;
+  properties.curSpecularColor = this.curSpecularColor;
+  properties.curEmissiveColor = this.curEmissiveColor;
 
   properties._useSpecularMaterial = this._useSpecularMaterial;
   properties._useEmissiveMaterial = this._useEmissiveMaterial;
@@ -1257,6 +1263,9 @@ p5.RendererGL.prototype._setFillUniforms = function(fillShader) {
   }
   fillShader.setUniform('uTint', this._tint);
 
+  fillShader.setUniform('uAmbientMatColor', this.curAmbientColor);
+  fillShader.setUniform('uSpecularMatColor', this.curSpecularColor);
+  fillShader.setUniform('uEmissiveMatColor', this.curEmissiveColor);
   fillShader.setUniform('uSpecular', this._useSpecularMaterial);
   fillShader.setUniform('uEmissive', this._useEmissiveMaterial);
   fillShader.setUniform('uShininess', this._useShininess);

src/webgl/shaders/phong.frag

@@ -2,11 +2,14 @@
 precision highp float;
 precision highp int;
 
+uniform vec4 uSpecularMatColor;
+uniform vec4 uAmbientMatColor;
+uniform vec4 uEmissiveMatColor;
+
 uniform vec4 uMaterialColor;
 uniform vec4 uTint;
 uniform sampler2D uSampler;
 uniform bool isTexture;
-uniform bool uEmissive;
 
 varying vec3 vNormal;
 varying vec2 vTexCoord;
@@ -19,11 +22,11 @@ void main(void) {
   vec3 specular;
   totalLight(vViewPosition, normalize(vNormal), diffuse, specular);
 
-  if(uEmissive && !isTexture) {
-    gl_FragColor = uMaterialColor;
-  }
-  else {
-    gl_FragColor = isTexture ? texture2D(uSampler, vTexCoord) * (uTint / vec4(255, 255, 255, 255)) : uMaterialColor;
-    gl_FragColor.rgb = gl_FragColor.rgb * (diffuse + vAmbientColor) + specular;
-  }
+  // Calculating final color as result of all lights (plus emissive term).
+
+  gl_FragColor = isTexture ? texture2D(uSampler, vTexCoord) * (uTint / vec4(255, 255, 255, 255)) : uMaterialColor;
+  gl_FragColor.rgb = diffuse * gl_FragColor.rgb + 
+                    vAmbientColor * uAmbientMatColor.rgb + 
+                    specular * uSpecularMatColor.rgb + 
+                    uEmissiveMatColor.rgb;
 }

test/unit/webgl/p5.Shader.js

@@ -92,7 +92,6 @@ suite('p5.Shader', function() {
         'uMaterialColor',
         'uSampler',
         'isTexture',
-        'uEmissive',
         'uConstantAttenuation',
         'uLinearAttenuation',
         'uQuadraticAttenuation'