Feature Implemeted -- Multiple Material support for geometry

src/webgl/material.js

@@ -701,7 +701,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.
@@ -802,9 +802,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;
@@ -813,8 +811,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
@@ -875,8 +872,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;
@@ -886,7 +882,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.
@@ -962,9 +958,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;
@@ -1256,6 +1262,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'