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](https://global.discourse-cdn.com/standard10/uploads/processingfoundation1/original/2X/d/dde9860ab5f6bd8766d759fb4da0a629f14ccc99.png)
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
.
so i made this (same project link)
![Screenshot from 2021-07-28 11-55-40](https://global.discourse-cdn.com/standard10/uploads/processingfoundation1/original/2X/9/9ea0faf79573ce01a70ecaf6e0178c0a5bf0be4c.png)
)
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
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.
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](https://global.discourse-cdn.com/standard10/uploads/processingfoundation1/original/2X/9/9eaa186496fef2befb98cd80c5bb9652d40809f8.png)
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!