3D Lighting problems with Custom Shapes

[Sayochi]

Im trying to convert my 2d terrain generator to 3d. i learnt about beginShape also works in 3d. watched few tutorials. but i have this lighting problem with my overall shape. i even tried to construct every individual triangle as a new object. its like light calculating is unaware of vertex positions. noFill() doesnt work too (it fills it anyway).
this is normalMaterial’ed custom shape and a torus.

this is my current project: p5.js Web Editor

am i doing something wrong or lighting with custom shapes are still under development?

[KumuPaul]

Geometry drawn with the vertex() function default to all vertices having a constant normal (which is (0, 1, 0) I think). Fortunately in the latest version (1.4.0) a feature I implemented was added: a function to set the normal vector for the next vertex. Alternately you can create custom p5.Geometry and use calculateNormals().

[Sayochi]

its weird i get a “normal is not defined” error in my sketch but don’t get any error in copy paste from examples. am i blind or what is it? could you check my code please pain

also what about noFill()? it doesn’t affect the custom shape. I can “fill(255,255,255,0)” to make it transparent but it seems that i still cant see strokes of lines.

[KumuPaul]

That’s because you are referencing p5.js version 1.0.0 and this function was just in version 1.4.0. You need to update your index.html:

  <!-- replace this: -->
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script> -->
  <!-- with this: -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

[KumuPaul]

Also here’s an example: p5.js Web Editor

[Sayochi]

that one is awesome!.. and very complicated for me .

so i made this (same project link)

)

and I get those weird line shadings there. I think its about auto smooth shading?. since all those lines are actually a different custom shape came together to look like a full complete shape… sketch isnt aware of other shapes and only smooths the one strip shape at a time. thats all on me. but is there a way to turn smooth shading off? without constructing each triangle as a new shape?
i calculated normals with basic flat shading style.

perhaps its caused by “TRIANGLE_STRIP”? I have no idea

edit:
ah yes i think i made a mistake. so there is probably no such a thing as auto smooth shading. its just me being me. i should clean my code asap

[KumuPaul]

The issue is the way you’re calculating normals. You code is correctly calculating the normal for a single triangle in your triangle strip. However each vertex in your triangle strip actually needs to have a normal that is the average if the normals for all of the adjacent triangles. This fact is probably what makes my code so complicated .

Notice how most vertices have 6 adjacent triangles (edges and corners are special cases). If you don’t average those 6 triangle normals when computing each vertex normal then you end up with jagged artifacts because there will be a sudden transition from one lighting angle to another instead of nice smooth transitions everywhere.

[Sayochi]

well i guess imma mess around with simpler flat shading for now lol.
since I cant have individual triangles with different vertex normals with TRIANGLE_STRIP (because it shares vertexes like a normal being). i used TRIANGLES mode and managed to achieve the basic flat shading

now I have 3x more vertexes laying around but i guess its easier for me understand now.
I will check smooth shading with better handled vertexes soon. thank you so much for the help!