# IsoNoise (Icosahedron + Perlin noise + Isolines + SelectiveBloom)

**URL:** <https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909>\
**Category:** Showcase\
**Tags:** selective-bloom, noise, shaders\
**Created:** [February 15, 2022, 7:28pm UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909 "2022-02-15T19:28:44Z")\
**Posts on this page:** 19\
**Page:** 1

<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:** [February 15, 2022, 7:28pm UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909/1 "2022-02-15T19:28:44Z")

</div>

Hi community!

Picture:

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/1/b1d92ff1c3a66face71ccc30d8691f427024c615.jpeg)

**Demo** + source code: [https://codepen.io/prisoner849/full/PoOKrPO](https://codepen.io/prisoner849/full/PoOKrPO)

Here is a thing, inspired with a question of how to put gradient on a sphere, distorted with noise, in dependance of height (radius, actually).

The Thing consists of `IcosahedronGeometry` and modified `MeshStandardMaterial`.  
Isolines made with the code of the anti-aliased grid: [Anti-Aliased Grid Shader - Made by Evan](https://madebyevan.com/shaders/grid/)  
Normals computed with the code from this SO thread: [opengl - GLSL calculating normal on a sphere mesh in vertex shader using noise function by sampling is producing strange graphical errors - Stack Overflow](https://stackoverflow.com/a/39296939/4045502)  
Distortion/deformation made with Perlin noise.  
“Selective Unreal Bloom” is used to emphasise the isolines.  
Final touch: background is `WebGLRenderTarget`, whose `texture` assigned to `scene.background`.

---

<div class="post-metadata">

**Author:** ![oldsegotia](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oldsegotia/32/22601_2.png) [@oldsegotia](https://discourse.threejs.org/u/oldsegotia)\
**Post date:** [February 15, 2022, 8:44pm UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909/2 "2022-02-15T20:44:23Z")

</div>

Wonderful, as always! 🙂

---

<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:** [February 16, 2022, 6:36am UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909/3 "2022-02-16T06:36:40Z")

</div>

@oldsegotia Thanks 🍻

---

<div class="post-metadata">

**Author:** ![arseniivanov](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arseniivanov/32/24903_2.png) [@arseniivanov](https://discourse.threejs.org/u/arseniivanov)\
**Post date:** [March 11, 2022, 5:55pm UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909/4 "2022-03-11T17:55:49Z")

</div>

Impressive!

---

<div class="post-metadata">

**Author:** ![badde-media](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/badde-media/32/20061_2.png) [@badde-media](https://discourse.threejs.org/u/badde-media)\
**Post date:** [March 11, 2022, 8:43pm UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909/5 "2022-03-11T20:43:10Z")

</div>

Just what I’ve been looking for, thanks!

---

<div class="post-metadata">

**Author:** ![boxofimagination](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/boxofimagination/32/22537_2.png) [@boxofimagination](https://discourse.threejs.org/u/boxofimagination)\
**Post date:** [November 4, 2022, 2:38am UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909/6 "2022-11-04T02:38:23Z")

</div>

love it, cheers 🍻

---

<div class="post-metadata">

**Author:** ![jrlazz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrlazz/32/64383_2.png) [@jrlazz](https://discourse.threejs.org/u/jrlazz)\
**Post date:** [November 6, 2022, 2:03am UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909/7 "2022-11-06T02:03:04Z")

</div>

Beautiful scene! 🙂

---

<div class="post-metadata">

**Author:** ![Arkadiy\_Vinkovskiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arkadiy_vinkovskiy/32/58384_2.png) [@Arkadiy\_Vinkovskiy](https://discourse.threejs.org/u/Arkadiy_Vinkovskiy)\
**Post date:** [November 15, 2022, 8:38am UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909/8 "2022-11-15T08:38:21Z")

</div>

@prisoner849 This is incredible! I have a similar project where I am trying to create a sphere with a wavy surface. It should look like this

 ![blob](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/7/87e8cad6ad5dedcc2827e7b57a4e5754996a2ad0.jpeg).

I found a [video](https://www.youtube.com/watch?v=19AqJHBS5C4) that describes the creation process in blender. But I have no idea if this is possible via threejs

Maybe you can help me or give me a starting point please? Thanks so much!

---

<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:** [November 15, 2022, 12:02pm UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909/9 "2022-11-15T12:02:15Z")

</div>

This requires an icosahedron with hell of a LOD (I used 200) to achieve something remotely similar.

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/e/8e540259840a89df63ef6e6c91df6444e4b20939.jpeg)

---

<div class="post-metadata">

**Author:** ![Arkadiy\_Vinkovskiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arkadiy_vinkovskiy/32/58384_2.png) [@Arkadiy\_Vinkovskiy](https://discourse.threejs.org/u/Arkadiy_Vinkovskiy)\
**Post date:** [November 15, 2022, 12:07pm UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909/10 "2022-11-15T12:07:23Z")

</div>

@prisoner849 Wow! Can you share source code please?

---

<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:** [November 16, 2022, 5:37pm UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909/11 "2022-11-16T17:37:15Z")

</div>

@Arkadiy_Vinkovskiy  
Here you are: [https://brjyq5.csb.app/](https://brjyq5.csb.app/)

---

<div class="post-metadata">

**Author:** ![Arkadiy\_Vinkovskiy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arkadiy_vinkovskiy/32/58384_2.png) [@Arkadiy\_Vinkovskiy](https://discourse.threejs.org/u/Arkadiy_Vinkovskiy)\
**Post date:** [November 17, 2022, 7:45am UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909/12 "2022-11-17T07:45:34Z")

</div>

@prisoner849

Thanks so much! Really awesome!

---

<div class="post-metadata">

**Author:** ![MKebsi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mkebsi/32/44441_2.png) [@MKebsi](https://discourse.threejs.org/u/MKebsi)\
**Post date:** [February 17, 2024, 9:21pm UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909/13 "2024-02-17T21:21:52Z")

</div>

@prisoner849 Can’t you think of way to modify the sphere with vertex shaders and still have lower LOD?

Just like Smooth/Flat shading. What we do now is just like the flat shading and we just maximize the LOD. I am trying to discover a way to get it work with lower LOD (although I don’t know how complex it is 😅)

But isn’t there a way, up till now? Have you thought about it and tried to achive a similar result with much less LOD?

P.S. I just want to make those amazing-looking shaders of yours work on mobiles with 60fps. Your hard work is great bro!

---

<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:** [February 17, 2024, 11:08pm UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909/14 "2024-02-17T23:08:33Z")

</div>

> [@MKebsi](#):
>
> Can’t you think of way to modify the sphere with vertex shaders and still have lower LOD?

Something like this? [A half of Icosahedron](https://discourse.threejs.org/t/a-half-of-icosahedron/44006) 🤔

---

<div class="post-metadata">

**Author:** ![MKebsi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mkebsi/32/44441_2.png) [@MKebsi](https://discourse.threejs.org/u/MKebsi)\
**Post date:** [February 18, 2024, 8:32am UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909/15 "2024-02-18T08:32:05Z")

</div>

Kind of, but still that flat-shading vibe (blocky, not smooth) is still there.

I believe you have seen Blender. Once you put a cylinder, it will be like a blocky pipe. Once the smooth shading (which is the default option with three.js) is activated, you will see all edges turn smooth without adding the details. Same applies to three.js. Below are some images to show you what I mean.

_- Smooth Shading Activated_

 ![20240218_112719](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/7/f7cbeb3e47b9a9bb3f29c0b0d3e6915a2c5a9313.jpeg)

_- Flat Shading Activated (Default Option in Blender)_

 ![20240218_112658](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/e/eefd404a73e9c2e60fba132d4ab6a4223b4e06e0.jpeg)

---

<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:** [February 18, 2024, 5:14pm UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909/16 "2024-02-18T17:14:31Z")

</div>

> [@MKebsi](#):
>
> I believe you have seen Blender.

I know it exists 🙂 Haven’t worked much with Blender (I’d rather say I didn’t at all)

Still didn’t get what you want to achieve. Switching between smooth and flat shading in the same modified material?

---

<div class="post-metadata">

**Author:** ![MKebsi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mkebsi/32/44441_2.png) [@MKebsi](https://discourse.threejs.org/u/MKebsi)\
**Post date:** [February 18, 2024, 9:43pm UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909/17 "2024-02-18T21:43:03Z")

</div>

> [@prisoner849](#):
>
> ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/e/8e540259840a89df63ef6e6c91df6444e4b20939.jpeg)

This one, with less details! Smooth shading allows the models to have smooth looking materials (probably with fragment shaders) while keeping the geometry details low. In the cylinder example I have provided earlier, the LOD was 32 (in both images). One with smooth-shading activated while the other having a flat-shading.

BTW, the images I have provided are screenshots right from Three.js Editor.

P.S. Sorry for not being able to clarify the idea 😅

---

<div class="post-metadata">

**Author:** ![MKebsi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mkebsi/32/44441_2.png) [@MKebsi](https://discourse.threejs.org/u/MKebsi)\
**Post date:** [February 18, 2024, 9:52pm UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909/18 "2024-02-18T21:52:39Z")

</div>

Running the code you have provided on [https://brjyq5.csb.app/](https://brjyq5.csb.app/) alone on a mobile phone is OK.

Once adding other elements to the scene, framerates drop so hard. On older phones, Samsung S7 for example, it can’t be better than 40fps!

All what I am after is better optimization for that kind of vertex shaders.

---

<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:** [February 18, 2024, 9:56pm UTC](https://discourse.threejs.org/t/isonoise-icosahedron-perlin-noise-isolines-selectivebloom/34909/19 "2024-02-18T21:56:17Z")

</div>

@MKebsi  
If you’ve got a question, then better to create a new one in the respect category 🤔