Enabling lights() in WEBGL breaks vertex colors.

[johncbowers]

Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• Data
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Details about the bug:

• p5.js version: both in 0.10.2 on my local machine and the latest in p5js editor on the website
• Web browser and version: Both Safari 12.0 and Firefox 72.0.2
• Operating System: macOS 10.14
• Steps to reproduce this:

To see the bug, simply load the p5js editor from the p5js website and compare the following two scripts:

Script 1 (with the problem code commented out):

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(220);
  //lights();
  beginShape(TRIANGLES);
  fill(255, 0, 0);
  vertex(-100, -100, 0);
  fill(0, 255, 0);
  vertex( 100, -100, 0);
  fill(0, 0, 255);
  vertex( 0,  100, 0);
  endShape(CLOSE);
}

Script 2 (with the problem code uncommented):

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(220);
  lights();
  beginShape(TRIANGLES);
  fill(255, 0, 0);
  vertex(-100, -100, 0);
  fill(0, 255, 0);
  vertex( 100, -100, 0);
  fill(0, 0, 255);
  vertex( 0,  100, 0);
  endShape(CLOSE);
}

The expected behavior is that I would see the same triangle in Script 2 as in Script 1 colored red, green, and blue at its vertices with interpolated colors on the interior. The actual behavior is that enabling lights() causes the renderer to ignore all but the last fill color.

Everything works as expected in normal Processing.app (after appropriate modifications to convert to JavaScript and translate so the triangle is on the screen since the origin is different between p5js and Processing).

[stalgiag]

Ah I think this is known but not desired behavior. The lighting shader uses a uniform for the fill color which won't handle any vertex level color variation.

Might be a relatively simple fix. I am not sure.

[ahujadivyam]

@stalgiag I made the following changes like adding varrying vColor and attribute aVertexColor to them and commenting out uMaterialColor uniform

so now it takes pixel color data and computes light on it
is this the right approach?

https://editor.p5js.org/DivyamAhuja/sketches/cMS8QIfR

phong.vert file

phong.frag file

[stalgiag]

Hi @divyamahuja -- this is close but this breaks the behavior of geometry that doesn't have vertex color (retained geometry).

Specular material sketch with 1.0.0
Same sketch with your build

A default value for vertex color which is multiplied by material color should work for both cases, but this suggestion is only based on glancing quickly. Good luck!

[ahujadivyam]

@stalgiag This one sure takes a lot of thinking for me. Maybe this issue can be addressed while adding functionality for applying multiple materials on geometry or maybe having different shader programs for both modes.
I want to apply for GSoC for improving WebGL functionality but I don't know where I can contact possible mentors or get proposal reviewed as am not able to contact anyone about WebGL on discourse

[stalgiag]

Hi @divyamahuja no sweat! This stuff can be hard to parse. And yes, it could potentially be part of the larger material system overhaul.

If you want help thinking through your application for GSoC feel free to email me (in profile) or start a thread in the discourse and tagging me.

[ahujadivyam]

Thanks @stalgiag I have mailed you Project proposal
and Thanks in advance again

[rsodre]

Should this work using stroke too, drawing lines?
Replacing fill() for stroke() on the example and it does not interpolate colors.

[davepagurek]

Hi everyone, I think this should be fixed as of #5938! I'm going to close this for now for organizational purposes but feel free to continue the discussion if there are any remaining issues.