Perlin Noise lines

Questions
1

Is it possible to achieve something like those patterns with Threejs

9f772fab8fdd91d59bd018a0d9520205

Like using Perlin Noise or alike to use for drawing lines kinda that way?

2

Have a look at these shadertoy examples
https://www.shadertoy.com/results?query=isolines

3

There is no built-in fragment shader which can produces the posted visual result. As mentioned by @prisoner849, you can find on shadertoy various examples for this rendering technique. If you want to draw real 3D lines, you have to apply the noise to your vertices in JavaScript. You can use the following noise implementation from the repository: ImprovedNoise. It is used in the following example for terrain generation:

https://threejs.org/examples/webgl_geometry_terrain.html

1 Like
4

@Mugen87
Oh, lord :smile:
Sometimes I feel so dumb and blind and that I know nothing about the framework. I’ve seen that example for so many times, but haven’t noticed that it uses built-in noise implementation.
Thanks again, Michael :beers:

1 Like
5

Thank you for hinting… awesome!
Are there any good examples for generating MeshLines/Ribbons too?

6

Yes. Please have a look at: https://threejs.org/examples/webgl_lines_fat.html

7

Dear @Mugen87 , hope you are fine, i see that you are so active in all foroums so i decided to ask you a question, hope you will help me :slight_smile:
i have started working with three.js before a month and i had good result by the way, but for a scenario of my last website i need to do some work like this : Chartogne-Taillet

i checked its js files and i can see that the developer is using perlin noise but i can not understand how (with texture, noise, webgl, shaders or …) he made this example as hand painting, it is so important for me, please guide me to achive this result…THNAK YOU BRO