Three.js + noisejs

Resources
1

Hi, community!
Here is a picture of a scene:

POWERWOLF_flag
POWERWOLF_flag1899Ă—903 216 KB

And there is a working demo:
https://jsfiddle.net/prisoner849/omahwxLe/show

Cool story of creation :slight_smile:

There are 3 factors, why this scene was created:

  1. A symphonic metal song (this is the main factor, yes);
  2. I’ve found an interesting library for generating noise in javascript;
  3. That forum thread

Watching the video with the song, I’ve had a wish to create a flag, similar to one that shown in the video.

Okay, so far so good. The flag has to look worn out. How to do it? I remembered about that forum thread and decided to use .alphaMap with .alphaTest just to make sure that it really works (I didn’t get why the topic starter of that thread didn’t want to use .alphaTest, so I thought it simply doesn’t work in the latest revision. Yeah, I know it sounds silly, but I thought exactly like that :smile:)

Great. Now the flag needs more or less natural behaviour under the influence of wind blowing. Shaders? Meh! Who needs them?! Let’s make the scene really heavy metal computational! :metal: In the first results of the Google search, there was a link to that library, which allows to generate perlin or simplex noise from two or three values.

Excellent. The flag looks worn out and flaps on the wind. But the scene needs something else. Background. Let’s make it, using the same noise library. All goes to CPU, no GPU acceleration! :no_entry: So, the noise library has good examples of visualization of noise, drawing it on a canvas. Thus, it was not so difficult to adapt an example for using it with THREE.CanvasTexture().

And the final touch is to embed the video from Youtube :tv:
As usual, in Firefox, the video starts automatically, in Chrome, you have to hit “play” to start it :play_or_pause_button:

It’s very doubtful to use the approach with dynamic geometries of noise, computed on CPU, in real application. The only use case I see is to generate, for example, a geometry of random landscape once and then use it.

And… that’s all :wink:

UPD An example with BufferGeometry: https://stackoverflow.com/a/67958345/4045502

14 Likes