Make metalness be editable too

Author: davepagurek

src/webgl/material.js

@@ -904,7 +904,8 @@ p5.prototype.shader = function (s) {
  *   - `vec3 ambientMaterial`, the color of the pixel when affected by ambient light
  *   - `vec3 specularMaterial`, the color of the pixel when reflecting specular highlights
  *   - `vec3 emissiveMaterial`, the light color emitted by the pixel
- *   - `float shininess`, a number representing how sharp specular reflections should be
+ *   - `float shininess`, a number representing how sharp specular reflections should be, from 1 to infinity
+ *   - `float metalness`, a number representing how mirrorlike the material should be, between 0 and 1
     The struct can be modified and returned.
  * - `vec4 combineColors`: Take in a `ColorComponents` struct containing all the different components of light, and combining them into
  *   a single final color. The struct contains:
@@ -995,6 +996,46 @@ p5.prototype.shader = function (s) {
  * <div modernizr='webgl'>
  * <code>
  * let myShader;
+ * let environment;
+ *
+ * function preload() {
+ *   environment = loadImage('assets/outdoor_spheremap.jpg');
+ * }
+ *
+ * function setup() {
+ *   createCanvas(200, 200, WEBGL);
+ *   myShader = materialShader().modify({
+ *     'Inputs getPixelInputs': `(Inputs inputs) {
+ *       float factor =
+ *         sin(
+ *           inputs.texCoord.x * ${TWO_PI} +
+ *           inputs.texCoord.y * ${TWO_PI}
+ *         ) * 0.4 + 0.5;
+ *       inputs.shininess = mix(1., 100., factor);
+ *       inputs.metalness = factor;
+ *       return inputs;
+ *     }`
+ *   });
+ * }
+ *
+ * function draw() {
+ *   panorama(environment);
+ *   ambientLight(100);
+ *   imageLight(environment);
+ *   rotateY(millis() * 0.001);
+ *   shader(myShader);
+ *   noStroke();
+ *   fill(255);
+ *   specularMaterial(150);
+ *   sphere(50);
+ * }
+ * </code>
+ * </div>
+ *
+ * @example
+ * <div modernizr='webgl'>
+ * <code>
+ * let myShader;
  *
  * function setup() {
  *   createCanvas(200, 200, WEBGL);

src/webgl/p5.RendererGL.js

@@ -1727,7 +1727,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
         sphereMapping
       );
     }
-    this.uNMatrix.inverseTranspose(this.uMVMatrix);
+    this.uNMatrix.inverseTranspose(this.uViewMatrix);
     this.uNMatrix.invert3x3(this.uNMatrix);
     this.sphereMapping.setUniform('uFovY', this._curCamera.cameraFOV);
     this.sphereMapping.setUniform('uAspect', this._curCamera.aspectRatio);
@@ -2246,7 +2246,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
     fillShader.setUniform('uSpecular', this._useSpecularMaterial);
     fillShader.setUniform('uEmissive', this._useEmissiveMaterial);
     fillShader.setUniform('uShininess', this._useShininess);
-    fillShader.setUniform('metallic', this._useMetalness);
+    fillShader.setUniform('uMetallic', this._useMetalness);
 
     this._setImageLightUniforms(fillShader);
 
@@ -2319,14 +2319,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
       let diffusedLight = this.getDiffusedTexture(this.activeImageLight);
       shader.setUniform('environmentMapDiffused', diffusedLight);
       let specularLight = this.getSpecularTexture(this.activeImageLight);
-      // In p5js the range of shininess is >= 1,
-      // Therefore roughness range will be ([0,1]*8)*20 or [0, 160]
-      // The factor of 8 is because currently the getSpecularTexture
-      // only calculated 8 different levels of roughness
-      // The factor of 20 is just to spread up this range so that,
-      // [1, max] of shininess is converted to [0,160] of roughness
-      let roughness = 20 / this._useShininess;
-      shader.setUniform('levelOfDetail', roughness * 8);
+
       shader.setUniform('environmentMapSpecular', specularLight);
     }
   }

src/webgl/shaders/lighting.glsl

@@ -30,7 +30,7 @@ uniform vec3 uSpotLightDirection[5];
 
 uniform bool uSpecular;
 uniform float uShininess;
-uniform float metallic;
+uniform float uMetallic;
 
 uniform float uConstantAttenuation;
 uniform float uLinearAttenuation;
@@ -43,8 +43,6 @@ uniform bool uUseImageLight;
 uniform sampler2D environmentMapDiffused;
 // texture for use in calculateImageSpecular
 uniform sampler2D environmentMapSpecular;
-// roughness for use in calculateImageSpecular
-uniform float levelOfDetail;
 
 const float specularFactor = 2.0;
 const float diffuseFactor = 0.73;
@@ -68,7 +66,7 @@ float _lambertDiffuse(vec3 lightDirection, vec3 surfaceNormal) {
   return max(0.0, dot(-lightDirection, surfaceNormal));
 }
 
-LightResult _light(vec3 viewDirection, vec3 normal, vec3 lightVector, float shininess) {
+LightResult _light(vec3 viewDirection, vec3 normal, vec3 lightVector, float shininess, float metallic) {
 
   vec3 lightDir = normalize(lightVector);
 
@@ -109,7 +107,7 @@ vec2 mapTextureToNormal( vec3 v ){
 }
 
 
-vec3 calculateImageDiffuse( vec3 vNormal, vec3 vViewPosition ){
+vec3 calculateImageDiffuse(vec3 vNormal, vec3 vViewPosition, float metallic){
   // make 2 seperate builds 
   vec3 worldCameraPosition =  vec3(0.0, 0.0, 0.0);  // hardcoded world camera position
   vec3 worldNormal = normalize(vNormal * uCameraRotation);
@@ -120,14 +118,21 @@ vec3 calculateImageDiffuse( vec3 vNormal, vec3 vViewPosition ){
   return mix(smoothstep(vec3(0.0), vec3(1.0), texture.xyz), vec3(0.0), metallic);
 }
 
-vec3 calculateImageSpecular( vec3 vNormal, vec3 vViewPosition ){
+vec3 calculateImageSpecular(vec3 vNormal, vec3 vViewPosition, float shininess, float metallic){
   vec3 worldCameraPosition =  vec3(0.0, 0.0, 0.0);
   vec3 worldNormal = normalize(vNormal);
   vec3 lightDirection = normalize( vViewPosition - worldCameraPosition );
   vec3 R = reflect(lightDirection, worldNormal) * uCameraRotation;
   vec2 newTexCoor = mapTextureToNormal( R );
 #ifdef WEBGL2
-  vec4 outColor = textureLod(environmentMapSpecular, newTexCoor, levelOfDetail);
+  // In p5js the range of shininess is >= 1,
+  // Therefore roughness range will be ([0,1]*8)*20 or [0, 160]
+  // The factor of 8 is because currently the getSpecularTexture
+  // only calculated 8 different levels of roughness
+  // The factor of 20 is just to spread up this range so that,
+  // [1, max] of shininess is converted to [0,160] of roughness
+  float roughness = 20. / shininess;
+  vec4 outColor = textureLod(environmentMapSpecular, newTexCoor, roughness * 8.);
 #else
   vec4 outColor = TEXTURE(environmentMapSpecular, newTexCoor);
 #endif
@@ -144,6 +149,7 @@ void totalLight(
   vec3 modelPosition,
   vec3 normal,
   float shininess,
+  float metallic,
   out vec3 totalDiffuse,
   out vec3 totalSpecular
 ) {
@@ -164,7 +170,7 @@ void totalLight(
       vec3 lightVector = (uViewMatrix * vec4(uLightingDirection[j], 0.0)).xyz;
       vec3 lightColor = uDirectionalDiffuseColors[j];
       vec3 specularColor = uDirectionalSpecularColors[j];
-      LightResult result = _light(viewDirection, normal, lightVector, shininess);
+      LightResult result = _light(viewDirection, normal, lightVector, shininess, metallic);
       totalDiffuse += result.diffuse * lightColor;
       totalSpecular += result.specular * lightColor * specularColor;
     }
@@ -178,7 +184,7 @@ void totalLight(
       vec3 lightColor = lightFalloff * uPointLightDiffuseColors[j];
       vec3 specularColor = lightFalloff * uPointLightSpecularColors[j];
 
-      LightResult result = _light(viewDirection, normal, lightVector, shininess);
+      LightResult result = _light(viewDirection, normal, lightVector, shininess, metallic);
       totalDiffuse += result.diffuse * lightColor;
       totalSpecular += result.specular * lightColor * specularColor;
     }
@@ -204,16 +210,16 @@ void totalLight(
       vec3 lightColor = uSpotLightDiffuseColors[j];
       vec3 specularColor = uSpotLightSpecularColors[j];
 
-      LightResult result = _light(viewDirection, normal, lightVector, shininess);
+      LightResult result = _light(viewDirection, normal, lightVector, shininess, metallic);
 
       totalDiffuse += result.diffuse * lightColor * lightFalloff;
       totalSpecular += result.specular * lightColor * specularColor * lightFalloff;
     }
   }
 
   if( uUseImageLight ){
-    totalDiffuse += calculateImageDiffuse(normal, modelPosition);
-    totalSpecular += calculateImageSpecular(normal, modelPosition);
+    totalDiffuse += calculateImageDiffuse(normal, modelPosition, metallic);
+    totalSpecular += calculateImageSpecular(normal, modelPosition, shininess, metallic);
   }
 
   totalDiffuse *= diffuseFactor;

src/webgl/shaders/phong.frag

@@ -36,6 +36,7 @@ struct Inputs {
   vec3 emissiveMaterial;
   vec4 color;
   float shininess;
+  float metalness;
 };
 
 void main(void) {
@@ -54,14 +55,15 @@ void main(void) {
       // channels by alpha to convert it to premultiplied alpha.
       : vec4(vColor.rgb * vColor.a, vColor.a);
   inputs.shininess = uShininess;
+  inputs.metalness = uMetallic;
   inputs.ambientMaterial = uHasSetAmbient ? uAmbientMatColor.rgb : inputs.color.rgb;
   inputs.specularMaterial = uSpecularMatColor.rgb;
   inputs.emissiveMaterial = uEmissiveMatColor.rgb;
   inputs = HOOK_getPixelInputs(inputs);
 
   vec3 diffuse;
   vec3 specular;
-  totalLight(vViewPosition, inputs.normal, inputs.shininess, diffuse, specular);
+  totalLight(vViewPosition, inputs.normal, inputs.shininess, inputs.metalness, diffuse, specular);
 
   // Calculating final color as result of all lights (plus emissive term).