# How to create a 3D geometry with faceted reflection of light (sphere)

**URL:** <https://discourse.processing.org/t/how-to-create-a-3d-geometry-with-faceted-reflection-of-light-sphere/40932>\
**Category:** Coding Questions\
**Created:** [February 15, 2023, 5:15am UTC](https://discourse.processing.org/t/how-to-create-a-3d-geometry-with-faceted-reflection-of-light-sphere/40932 "2023-02-15T05:15:18Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![peskythisdot](https://avatars.discourse-cdn.com/v4/letter/p/a587f6/32.png) [@peskythisdot](https://discourse.processing.org/u/peskythisdot)\
**Post date:** [February 15, 2023, 5:15am UTC](https://discourse.processing.org/t/how-to-create-a-3d-geometry-with-faceted-reflection-of-light-sphere/40932/1 "2023-02-15T05:15:18Z")

</div>

My goal is to create a 3d geometry with many facets, where each facet reflects light differently–a disco ball may be a good visual for what I want to say. I created a primitive 3d sphere with low numbers of detailX and detailY. This sphere looks very faceted but it reflects light just like a very smooth sphere (high numbers of detailX and detailY). I cannot see the difference.

> **[p5.js Web Editor](https://editor.p5js.org/codedwallpaperart/sketches/Dq_HFXppu)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

It seems 3d geometry automatically calculates smoothed reflection of nearby facets. I also tried same faceted sphere using 3d.Geometry(), but its result was same as the primitive one. Do I have to code each individual triangle as 3d plane and calculate its normal?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 15, 2023, 9:16am UTC](https://discourse.processing.org/t/how-to-create-a-3d-geometry-with-faceted-reflection-of-light-sphere/40932/2 "2023-02-15T09:16:15Z")

</div>

Interesting

Did you try to just use lights ();

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 15, 2023, 1:07pm UTC](https://discourse.processing.org/t/how-to-create-a-3d-geometry-with-faceted-reflection-of-light-sphere/40932/3 "2023-02-15T13:07:49Z")

</div>

> [@peskythisdot](#):
>
> Do I have to code each individual triangle as 3d plane and calculate its normal?

Sounds like a good idea

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [February 15, 2023, 2:20pm UTC](https://discourse.processing.org/t/how-to-create-a-3d-geometry-with-faceted-reflection-of-light-sphere/40932/4 "2023-02-15T14:20:10Z")

</div>

Hello @peskythisdot,

Related:

> [@Sketch runs slow in P5.js WEBGL, (SOLVED by using P5.Geometry)](https://discourse.processing.org/t/sketch-runs-slow-in-p5-js-webgl-solved-by-using-p5-geometry/31990):
>
> Hi. I am translating a sketch from P5.java to P5.js. In java, it runs nice and smooth at a frameRate near 60. In p5.js the frameRate drops to around 4 f/s and a lot of details are missing. How can I improve this, or is WEBGL really that bad? Thanks. Edit: Please skip to the actual sketch I am translating [here below](https://discourse.processing.org/t/sketch-runs-slow-in-p5-js/31990/5). P5.java: int num; float pt[]; int style[]; float sin\_ar[]; float cos\_ar[]; float PRECISION = 1.0; int AR\_LENGTH = 360; void setup() { size(600, 600, P3D); background(255)…

`:)`

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [February 15, 2023, 2:57pm UTC](https://discourse.processing.org/t/how-to-create-a-3d-geometry-with-faceted-reflection-of-light-sphere/40932/5 "2023-02-15T14:57:42Z")

</div>

> [@peskythisdot](#):
>
> Do I have to code each individual triangle as 3d plane and calculate its normal?

I don’t know if you can override the default behaviour for Sphere, Box, Cylinder etc. but if not you may have to create your own geometry.

I was looking for a way to render a large 3D terrain and a week ago I discovered [p5.Geometry](https://p5js.org/reference/#/p5.Geometry) and have successfully created a terrain with ~400000 triangles that renders in under 2ms.

Unfortunately the reference material is rather brief and not very helpful but I did find this [article](https://www.paulwheeler.us/articles/custom-3d-geometry-in-p5js/) which helped enormously.

---

<div class="post-metadata">

**Author:** ![peskythisdot](https://avatars.discourse-cdn.com/v4/letter/p/a587f6/32.png) [@peskythisdot](https://discourse.processing.org/u/peskythisdot)\
**Post date:** [February 16, 2023, 1:56am UTC](https://discourse.processing.org/t/how-to-create-a-3d-geometry-with-faceted-reflection-of-light-sphere/40932/6 "2023-02-16T01:56:14Z")

</div>

Thank you all,

After reading all of your responses, I now believe that I have to code each triangle as a p5.Geometry to get the result I want. When I tried a faceted sphere using p5.Geometry following [paulwheeler.us](http://paulwheeler.us)’s example, I got the same result as primitive sphere.

---

<div class="post-metadata">

**Author:** ![peskythisdot](https://avatars.discourse-cdn.com/v4/letter/p/a587f6/32.png) [@peskythisdot](https://discourse.processing.org/u/peskythisdot)\
**Post date:** [February 16, 2023, 8:34am UTC](https://discourse.processing.org/t/how-to-create-a-3d-geometry-with-faceted-reflection-of-light-sphere/40932/7 "2023-02-16T08:34:33Z")

</div>

Just a followup: I created a strip of triangles in 3D.Geometry (top) and compared it with the one (bottom) created by following the above-mentioned example.

> **[p5.js Web Editor](https://editor.p5js.org/codedwallpaperart/sketches/swU2NSfMA)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

The top one specifies each triangle and calculates its face and normal, while the bottom one does not specify each triangle. It seems the second approach uses some kind of smoothing behind the scene. In any case, to achieve the effects I want, I have to code each triangle. That’s my conclusion.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 16, 2023, 1:10pm UTC](https://discourse.processing.org/t/how-to-create-a-3d-geometry-with-faceted-reflection-of-light-sphere/40932/8 "2023-02-16T13:10:04Z")

</div>

start here

```auto

float radius = 200.0;
float rho = radius;
float factor = TWO_PI/20;
float x, y, z;

float zAngle;
float yAngle;

void setup() {
  size(500, 500, P3D);
  smooth();
}

void draw() {
  background(50);
  stroke(255);
  lights();

  translate(width/2, height/2);

  rotateX(radians(mouseY));
  rotateY(radians(mouseX));

  for (float phi = 0.0; phi < PI; phi += factor) {

    for (float theta = 0.0; theta < TWO_PI + factor; theta += factor) {

      x = rho * sin(phi) * cos(theta);
      z = rho * sin(phi) * sin(theta);
      y = -rho * cos(phi);

      pushMatrix();

      translate(x, y, z);

      //I think this should give me relevant angles that can then be used (with modification) for rotation of the rectangles
      zAngle = acos(z/radius);
      yAngle = atan2(y, x);

      rotateY(radians(zAngle-90)); //this is my pain point - I can't find any combination of rotations that does what I want
      rotateX(radians(yAngle-90));

      rect(0, 0, 15, 15);

      popMatrix();
    }
  }
}
//

```