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.

30 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!

1 Like

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

5 Likes

@prisoner849 Wow! Can you share source code please?

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

4 Likes

@prisoner849

Thanks so much! Really awesome!

@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 :sweat_smile:)

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!

Something like this? A half of Icosahedron :thinking:

2 Likes

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

- Flat Shading Activated (Default Option in Blender)

I know it exists :slight_smile: 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?

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 :sweat_smile:

Running the code you have provided on 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.

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

1 Like