IsoNoise (Icosahedron + Perlin noise + Isolines + SelectiveBloom)

Hi community!

Picture:

Demo + source code: 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
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
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.

26 Likes

Wonderful, as always! :slightly_smiling_face:

1 Like

@oldsegotia Thanks :beers:

Impressive!

Just what I’ve been looking for, thanks!

love it, cheers :beers:

Beautiful scene! :slightly_smiling_face:

@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

.

I found a video 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!

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

4 Likes

@prisoner849 Wow! Can you share source code please?

@Arkadiy_Vinkovskiy
Here you are: https://brjyq5.csb.app/

2 Likes

@prisoner849

Thanks so much! Really awesome!