3D Lighting problems with Custom Shapes

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.
Screenshot from 2021-07-27 22-07-31

this is my current project: p5.js Web Editor

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

1 Like

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().

1 Like

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.

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>
1 Like

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

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

so i made this (same project link)
Screenshot from 2021-07-28 11-55-40

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

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

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 :sweat_smile:.

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.

1 Like

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
Screenshot from 2021-07-28 13-01-25

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!