# Tipps for styling my reflective sphere

**URL:** <https://discourse.threejs.org/t/tipps-for-styling-my-reflective-sphere/69223>\
**Category:** Questions\
**Tags:** materials, shaders\
**Created:** [August 12, 2024, 3:19pm UTC](https://discourse.threejs.org/t/tipps-for-styling-my-reflective-sphere/69223 "2024-08-12T15:19:11Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![joostwmd](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/joostwmd/32/37503_2.png) [@joostwmd](https://discourse.threejs.org/u/joostwmd)\
**Post date:** [August 12, 2024, 3:19pm UTC](https://discourse.threejs.org/t/tipps-for-styling-my-reflective-sphere/69223/1 "2024-08-12T15:19:11Z")

</div>

Hey community 🙂

i am building a reflective sphere that is animated by a vertex shader using perlin noise.

So far i have managed to create this:

 ![Screenshot 2024-08-12 at 17.17.16](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/1/311102c3ba02a7cc575052347fb1db5e1e03036c.jpeg)

as you can see the sphere is animated using perlin noise and it also reflects the enviroment. But the surface lacks texture and depth. As a reference this is the look i want to achive:

 ![Screenshot 2024-08-12 at 17.11.21](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/c/2c4c7442ebdd1cab8e28d0adcf752f31fea168a8.jpeg)

I create this reference on this website:

> **[Blobmixer](https://blobmixer.14islands.com/remix?ambient=0&angle1=0.36&angle2=0.29&angle3=0.36&ccRougness=0&clearColor=%23000000&clearcoat=1&color=%23ffffff&color1=rgba%28236%2C176%2C239%2C1%29&color2=rgba%28225%2C247%2C252%2C1%29&color3=rgba%280%2C255%2C220%2C1%29&dist1=6&dist3=6.93&distort=0&dynEnv=false&envMap=0.93&flatShading=false&frequency=1.69&int1=0.75&int2=1.2&int3=0.23&metalness=0.98&numWaves=4.47&penum3=1&poleAmount=0.61&pp=false&roughness=0&rshad=false&scale=1.07&segments=336.56&shadow1=false&shadowMap=false&speed=6&surfPoleAmount=1&surfaceDistort=2.17&surfaceFrequency=2.62&surfaceSpeed=1&transmission=0&useGradient=true&uv=true&x2=-3.6&x3=2.67&y2=4.27&y3=-2.73&z2=2.6&z3=2.2)**
>
> A toy for creating and sharing 3D blobs

There is a setting under Blob Geometry called fix normals. When it is toggled, the sphere looks way more 3d and in depth. Could someone explain this setting to me?

Also do you have any other tricks up your sleeves to achive the desired look? I think i could improve my fragment shader and also using multiple lights could improve the look of the current version.

My background is in coding entirety, so i would really appriciate some design tipps 🙂

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [August 13, 2024, 4:39am UTC](https://discourse.threejs.org/t/tipps-for-styling-my-reflective-sphere/69223/2 "2024-08-13T04:39:32Z")

</div>

Make sure using a proper HDR texture for reflections - the current texture looks a bit way overexposed, with too much brightness and too little dark.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [August 13, 2024, 7:25am UTC](https://discourse.threejs.org/t/tipps-for-styling-my-reflective-sphere/69223/3 "2024-08-13T07:25:26Z")

</div>

You need to compute normals: [IsoNoise (Icosahedron + Perlin noise + Isolines + SelectiveBloom)](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909)  
See lines 79-89 in JS section of the codepen.

---

<div class="post-metadata">

**Author:** ![joostwmd](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/joostwmd/32/37503_2.png) [@joostwmd](https://discourse.threejs.org/u/joostwmd)\
**Post date:** [August 15, 2024, 3:50pm UTC](https://discourse.threejs.org/t/tipps-for-styling-my-reflective-sphere/69223/4 "2024-08-15T15:50:37Z")

</div>

> [@mjurczyk](#):
>
> per HDR texture for reflections - the current texture looks a bit way overexposed, with too much brightness and too little dark.

Hey, thanks for the response 🙂

I added the calculate normal function like you suggested and it changed the apperance of my sphere but not in the way i intendet. The surface does not reflect the enviroment in a unified way.

Here are pictures:

 ![Screenshot 2024-08-15 at 17.48.45](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/8/e84d7b9400a3602ce02ce8a025146e80fa1f4a0c.jpeg)

 ![Screenshot 2024-08-15 at 17.49.27](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/b/3bdb6a390316d5dd879735f2ad6881ffee6aa327.jpeg)

it seems like the surface is not rendered as a whole, flat and smooth surface but made off little individual bumps.

Has someone an idea how to fix this?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [August 16, 2024, 7:00am UTC](https://discourse.threejs.org/t/tipps-for-styling-my-reflective-sphere/69223/5 "2024-08-16T07:00:00Z")

</div>

I work with an icosahedron of radius 1. What size of yours?