Adding metallic feature in p5.js for both IBL and non-IBL codes.

src/webgl/light.js

@@ -1169,6 +1169,7 @@ p5.prototype.noLights = function(...args) {
   this._renderer.linearAttenuation = 0;
   this._renderer.quadraticAttenuation = 0;
   this._renderer._useShininess = 1;
+  this._renderer._useMetalness = 0;
 
   return this;
 };

src/webgl/material.js

@@ -1175,6 +1175,76 @@ p5.prototype.shininess = function (shine) {
   return this;
 };
 
+/**
+ * Sets the metalness property of a material used in 3D rendering.
+ *
+ * The metalness property controls the degree to which the material
+ * appears metallic. A higher metalness value makes the material more
+ * metallic, while a lower value makes it appear less metallic.
+ *
+ * The default and minimum value is 0, indicating a non-metallic appearance,
+ * while a maximum value of 100 represents a fully metallic appearance.
+ *
+ * @method metalness
+ * @param {Number} metallic - The degree of metalness (ranging from 0 to 100).
+ * @example
+ * <div class="notest">
+ * <code>
+ * let img;
+ * let slider;
+ * function preload() {
+ *   img = loadImage('assets/outdoor_spheremap.jpg');
+ * }
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   slider = createSlider(0, 400, 100, 1);
+ *   slider.position(0, height);
+ * }
+ * function draw() {
+ *   background(220);
+ *   imageMode(CENTER);
+ *   push();
+ *   translate(0, 0, -200);
+ *   scale(2);
+ *   image(img, 0, 0, width, height);
+ *   pop();
+ *   imageLight(img);
+ *   specularMaterial('gray');
+ *   shininess(slider.value());
+ *   metalness(100);
+ *   noStroke();
+ *   scale(2);
+ *   sphere(15);
+ * }
+ * </code>
+ * </div>
+ * @example
+ * <div>
+ * <code>
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ * }
+ * function draw() {
+ *   noStroke();
+ *   background('black');
+ *   fill(255, 215, 0);
+ *   pointLight(255, 255, 255, 200, 150, 8000);
+ *   pointLight(255, 255, 255, 5000, 5000, 75);
+ *   specularMaterial('gray');
+ *   shininess(2);
+ *   metalness(100);
+ *   sphere(45);
+ * }
+ * </code>
+ * </div>
+ */
+
+p5.prototype.metalness = function (metallic) {
+  this._assert3d('metalness');
+  this._renderer._useMetalness = metallic;
+  return this;
+};
+
 /**
  * @private blends colors according to color components.
  * If alpha value is less than 1, or non-standard blendMode

src/webgl/p5.RendererGL.js

@@ -509,6 +509,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
     this._useEmissiveMaterial = false;
     this._useNormalMaterial = false;
     this._useShininess = 1;
+    this._useMetalness = 0;
 
     this._useLineColor = false;
     this._useVertexColor = false;
@@ -1613,6 +1614,7 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
     properties._useSpecularMaterial = this._useSpecularMaterial;
     properties._useEmissiveMaterial = this._useEmissiveMaterial;
     properties._useShininess = this._useShininess;
+    properties._useMetalness = this._useMetalness;
 
     properties.constantAttenuation = this.constantAttenuation;
     properties.linearAttenuation = this.linearAttenuation;
@@ -2039,6 +2041,17 @@ p5.RendererGL = class RendererGL extends p5.Renderer {
   _setFillUniforms(fillShader) {
     fillShader.bindShader();
 
+    if (this._useMetalness > 0 && !this.curFillColor.every((value, index) =>
+      value === 1)) {
+      const metalnessFactor = Math.min(this._useMetalness / 100, 0.6);
+      const nonMetalnessFactor = Math.max(1 - metalnessFactor, 0.4);
+
+      this.curSpecularColor = this.curSpecularColor.map(
+        (specularColor, index) =>
+          this.curFillColor[index] * metalnessFactor +
+          specularColor * nonMetalnessFactor
+      );
+    }
     // TODO: optimize
     fillShader.setUniform('uUseVertexColor', this._useVertexColor);
     fillShader.setUniform('uMaterialColor', this.curFillColor);
@@ -2055,6 +2068,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);
 
     this._setImageLightUniforms(fillShader);
 

src/webgl/shaders/lighting.glsl

@@ -30,6 +30,7 @@ uniform vec3 uSpotLightDirection[5];
 
 uniform bool uSpecular;
 uniform float uShininess;
+uniform float metallic;
 
 uniform float uConstantAttenuation;
 uniform float uLinearAttenuation;
@@ -73,9 +74,14 @@ LightResult _light(vec3 viewDirection, vec3 normal, vec3 lightVector) {
 
   //compute our diffuse & specular terms
   LightResult lr;
-  if (uSpecular)
-    lr.specular = _phongSpecular(lightDir, viewDirection, normal, uShininess);
-  lr.diffuse = _lambertDiffuse(lightDir, normal);
+
+float invertValue = 1.0 - (metallic / 100.0);
+float specularIntensity = mix(0.4, 1.0, invertValue);
+float diffuseIntensity = mix(0.1, 1.0, invertValue);
+
+if (uSpecular)
+    lr.specular = (_phongSpecular(lightDir, viewDirection, normal, uShininess)) * specularIntensity;
+    lr.diffuse = _lambertDiffuse(lightDir, normal) * diffuseIntensity;
   return lr;
 }
 
@@ -114,7 +120,8 @@ vec3 calculateImageDiffuse( vec3 vNormal, vec3 vViewPosition ){
   vec4 texture = TEXTURE( environmentMapDiffused, newTexCoor );
   // this is to make the darker sections more dark
   // png and jpg usually flatten the brightness so it is to reverse that
-  return smoothstep(vec3(0.0), vec3(0.8), texture.xyz);
+  float invertedMetallic = 1.0 - metallic / 100.0;
+   return mix(vec3(0.0), smoothstep(vec3(0.0), vec3(1.0), texture.xyz), invertedMetallic);
 }
 
 vec3 calculateImageSpecular( vec3 vNormal, vec3 vViewPosition ){
@@ -130,7 +137,9 @@ vec3 calculateImageSpecular( vec3 vNormal, vec3 vViewPosition ){
 #endif
   // this is to make the darker sections more dark
   // png and jpg usually flatten the brightness so it is to reverse that
-  return pow(outColor.xyz, vec3(10.0));
+ float invertedMetallic = 1.0 - (metallic / 100.0);
+ float mappedValue = mix(1.2, 10.0, invertedMetallic);
+ return pow(outColor.xyz, vec3(mappedValue));
 }
 
 void totalLight(
@@ -141,7 +150,6 @@ void totalLight(
 ) {
 
   totalSpecular = vec3(0.0);
-
   if (!uUseLighting) {
     totalDiffuse = vec3(1.0);
     return;
@@ -164,7 +172,7 @@ void totalLight(
     if (j < uPointLightCount) {
       vec3 lightPosition = (uViewMatrix * vec4(uPointLightLocation[j], 1.0)).xyz;
       vec3 lightVector = modelPosition - lightPosition;
-
+      
       //calculate attenuation
       float lightDistance = length(lightVector);
       float lightFalloff = 1.0 / (uConstantAttenuation + lightDistance * uLinearAttenuation + (lightDistance * lightDistance) * uQuadraticAttenuation);

test/unit/core/rendering.js

@@ -135,7 +135,7 @@ suite('Rendering', function() {
     'model',
     'shader',
     'normalMaterial', 'texture', 'ambientMaterial', 'emissiveMaterial', 'specularMaterial',
-    'shininess', 'lightFalloff',
+    'shininess', 'lightFalloff', 'metalness',
     'plane', 'box', 'sphere', 'cylinder', 'cone', 'ellipsoid', 'torus'
   ];