Ability to specify vertex normals when drawing 3d shapes with beginShape and vertex

[sflanker]

Currently 3d shapes drawn using beginShape/vertex/endShape have all vertexes assigned a normal of (0, 0, 1). When drawing custom geometry with these functions it should be possible to specify the normal vector for each vertex.

How would this new feature help [increase access]

Individuals learning the fundamentals of 3d computer graphics for the first time would benefit from being able to use vertex normals when drawing custom geometry using beginShape/vertex/endShape. I think this is more accessible to users who are new to 3d graphics then jumping straight to loading 3d model files, or creating custom p5.Geometry objects. It also presents an opportunity to introduce vector math concepts such as cross product, addition, and normalization.

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Friendly error system
• Image
• IO (Input/Output)
• Localization
• Math
• Unit Testing
• Typography
• Utilities
• WebGL
• Other (specify if possible)

New feature details:

I propose adding a function vertexNormal that sets the normal vector to be used in subsequent calls to vertex. This vector would default to (0, 0, 1) thereby preserving the current behavior by default. This value would be stored/restored as part of push/pop operations. As far as I know this would only be relevant for drawing using the WebGL renderer, and would have no effect when using other renderers.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[sflanker]

I've made a POC implementation here: sflanker/p5.js@main...sflanker:vertex-normals

If there's a willingness to accept a PR for this feature I am happy to put more effort into this.

[stalgiag]

Hi and welcome @sflanker ! I agree that this could be useful, especially in educational contexts when trying to introduce students to the basic behavior of normals. Your draft implementation looks good too. It would need to account for push() + pop(), add documentation, and some simple testing but is a great start.

Since this is adding a new method to the library, I'd prefer to get more opinions. @aferriss @kjhollen @AdilRabbani @Anyone-else what do you think?

[sflanker]

Great, I had thought that this line would be all it took to implement push/pop support. Right there with you on documentation and tests though.

[stalgiag]

Ah yes! Sorry somehow missed that line when glancing.

[mkmori]

Hi, @stalgiag @sflanker: Ouch! Spent all morning trying to fix my geometry! All these years, I guess I'd never turned lights() on a beginShape() in p5js before...but it's great to find you already started on a fix....

For reference, in a Java P5 beginShape() block, normal(x,y,z) sets the current normal vector for subsequent vertices:
https://processing.org/reference/normal_.html

Like it says, by default, Java P5 attempts to set face normals based on vertex order (CCW?) (That allows for expected flat-shading when face normals aren't set explicitly, and normal(x,y,z) is only needed for special effects, like smoothed normals. )

Before realizing there was no "normal(x,y,z)" in p5js, I wrote a function to calculate surface normals for my triangles, (middling confidence), and produce average normals for anything other than a triangle (not sure that's "right" or useful, really)....

function calcNormal(pvArr) {
  let pv;
  let xx = 0;
  let yy = 0;
  let zz = 0;
    
  if (pvArr.length == 3) {
    pv = p5.Vector.sub(pvArr[1],pvArr[0]).cross(p5.Vector.sub(pvArr[2], pvArr[1])).normalize();
  } else if (pvArr.length > 0) {
      for (let i = 0; i < pvArr.length; i++) {
        xx += pvArr[i].x;
        yy += pvArr[i].y;
        zz += pvArr[i].z;
      }
    pv = createVector(xx/pvArr.length, yy/pvArr.length, zz/pvArr.length);
  } else pv = createVector(0,0,0);
  
  return pv;
}