diff --git a/src/webgl/material.js b/src/webgl/material.js index 075d081674..462a184321 100644 --- a/src/webgl/material.js +++ b/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 shininess() 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; diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js index 17a61130cd..8e849a830c 100755 --- a/src/webgl/p5.RendererGL.js +++ b/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); diff --git a/src/webgl/shaders/phong.frag b/src/webgl/shaders/phong.frag index bd5ed518f3..5e5ba763e1 100644 --- a/src/webgl/shaders/phong.frag +++ b/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; } \ No newline at end of file diff --git a/test/unit/webgl/p5.Shader.js b/test/unit/webgl/p5.Shader.js index b98f1eb440..7c729e2a51 100644 --- a/test/unit/webgl/p5.Shader.js +++ b/test/unit/webgl/p5.Shader.js @@ -92,7 +92,6 @@ suite('p5.Shader', function() { 'uMaterialColor', 'uSampler', 'isTexture', - 'uEmissive', 'uConstantAttenuation', 'uLinearAttenuation', 'uQuadraticAttenuation'