# 3D Lighting problems with Custom Shapes

**URL:** <https://discourse.processing.org/t/3d-lighting-problems-with-custom-shapes/31466>\
**Category:** Beginners\
**Created:** [July 27, 2021, 7:15pm UTC](https://discourse.processing.org/t/3d-lighting-problems-with-custom-shapes/31466 "2021-07-27T19:15:14Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sayochi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sayochi/32/15126_2.png) [@Sayochi](https://discourse.processing.org/u/Sayochi)\
**Post date:** [July 27, 2021, 7:15pm UTC](https://discourse.processing.org/t/3d-lighting-problems-with-custom-shapes/31466/1 "2021-07-27T19:15:14Z")

</div>

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://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/dde9860ab5f6bd8766d759fb4da0a629f14ccc99.png)

this is my current project: [p5.js Web Editor](https://editor.p5js.org/rt.sayochi/sketches/6IFflhMyi)

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

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [July 27, 2021, 7:38pm UTC](https://discourse.processing.org/t/3d-lighting-problems-with-custom-shapes/31466/2 "2021-07-27T19:38:56Z")

</div>

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](https://p5js.org/reference/#/p5/normal). Alternately you can [create custom p5.Geometry and use `calculateNormals()`](https://discourse.processing.org/t/drawing-and-orbiting-a-shape-with-many-vertices/30375/2).

---

<div class="post-metadata">

**Author:** ![Sayochi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sayochi/32/15126_2.png) [@Sayochi](https://discourse.processing.org/u/Sayochi)\
**Post date:** [July 27, 2021, 8:11pm UTC](https://discourse.processing.org/t/3d-lighting-problems-with-custom-shapes/31466/3 "2021-07-27T20:11:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [July 27, 2021, 8:19pm UTC](https://discourse.processing.org/t/3d-lighting-problems-with-custom-shapes/31466/4 "2021-07-27T20:19:56Z")

</div>

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:

```auto
  <!-- 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>

```

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [July 27, 2021, 9:08pm UTC](https://discourse.processing.org/t/3d-lighting-problems-with-custom-shapes/31466/5 "2021-07-27T21:08:29Z")

</div>

Also here’s an example: [p5.js Web Editor](https://editor.p5js.org/Kumu-Paul/sketches/-RRczHwYA)

---

<div class="post-metadata">

**Author:** ![Sayochi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sayochi/32/15126_2.png) [@Sayochi](https://discourse.processing.org/u/Sayochi)\
**Post date:** [July 28, 2021, 9:01am UTC](https://discourse.processing.org/t/3d-lighting-problems-with-custom-shapes/31466/6 "2021-07-28T09:01:52Z")

</div>

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://canada1.discourse-cdn.com/flex036/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

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [July 28, 2021, 9:20am UTC](https://discourse.processing.org/t/3d-lighting-problems-with-custom-shapes/31466/7 "2021-07-28T09:20:27Z")

</div>

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 😅.

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a99c577be38a497456e8d6a395cf6017f913abcd.png)

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.

---

<div class="post-metadata">

**Author:** ![Sayochi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sayochi/32/15126_2.png) [@Sayochi](https://discourse.processing.org/u/Sayochi)\
**Post date:** [July 28, 2021, 10:06am UTC](https://discourse.processing.org/t/3d-lighting-problems-with-custom-shapes/31466/8 "2021-07-28T10:06:04Z")

</div>

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://canada1.discourse-cdn.com/flex036/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!