Recreating Processing noise() in GLSL shader

Contributed Library Questions

amnon.owed

Recreating Processing noise() in GLSL shader

in Contributed Library Questions • 1 year ago

Hey guys,

I'm trying to port one of my sketches to a GLSL (fragment) shader. It works, but looks different.

I have pinpointed the culprit: noise

See the following screenshots with Processing on the left and GLSL on the right.

The Processing noise (topleft) looks like I would expect noise to look. The GLSL noise looks blurred. My guess is that the GLSL noise is in fact of a higher precision (thus smoother). I can imagine many cases where this would be a good thing. However when trying to recreate an effect that is based on the Processing noise function, it is not a good thing.

The noise function(s) I am using in my GLSL shader can be found here. I have tried several, both classic and simplex perlin noise. I am already correcting for the difference in range, which is -1 to 1 for the GLSL noise functions. All GLSL noise gives that super-smooth look, which ugly-fies my final result.

I have also looked at the source code of the Processing noise function (written by toxi / Karsten Schmidt). But this code seems to have some dependencies, so it's not straight-forward to copy-paste to a fragment shader.

Does anybody have a GLSL noise function lying around that mimics the Processing noise function?

or

How could I adapt for example this noise function to look more like Processing's output?

Replies(4)

jeff_g

Re: Recreating Processing / Toxiclibs noise() function in GLSL shader

1 year ago

As a reference, the Processing source code for the noise() function is in PApplet class. Not sure if Andres intends to GLSL this or not in 2.0 - might want to ask him if he's got something in the works. If you're able to recreate it, you may want to pass it on to him for inclusion.

otherthin..

Re: Recreating Processing / Toxiclibs noise() function in GLSL shader

1 year ago

I haven't looked at your code, but the pictures themselves speak volumes.

In your first example:

1) the image at left appears to be not Perlin noise at all, but a different kind of noise generated by bicubic interpolation of random values distributed on a grid. (You can tell by the square artifacts around the brightest and darkest areas.) The image at right looks like real Perlin noise, which is a function created by interpolating between planes with random slopes distributed on a grid.

2) The image at right is just a single layer of noise at one scale, whereas the image at left consists of several (at least 2, maybe 3 or 4) layers of noise at different scales and amplitudes. So maybe GLSL's noise function is missing some functionality. You could recreate it by adding together several instances of noise() with different scales and amplitudes.

As a side note: I'm a little disturbed by the fact that Processing's noise() function isn't true Perlin noise! Perlin noise has much better properties, both technically and aesthetically, at practically the exact same computational cost.

amnon.owed

Re: Recreating Processing noise() in GLSL shader

1 year ago

Thanks for your responses. Some new findings...

Toxiclibs' Perlin noise class is equal to / taken from the PApplet version. As it turns out this code is a java port of the noise implementation by the german demo group farbrausch as used in their 64k demo Art (2001), which nowadays you can find here. You can download the source, the C++ Perlin implementation is in the file called Perlin.cpp. If noise purists are bothered by this, feel free to file a bug report.

Personally I don't mind this. At the moment I am not looking for real, smooth or the best Perlin noise. Rather I am looking to recreate whatever kind of noise comes out of Processing's noise function, because that function has given me great visual results in my sketch, whereas the real Perlin noise in this case makes it look crappy.

So it seems I have two options:

Use either of the 3 sources (original C++, PApplet source or Toxiclibs PerlinNoise class) for Processing's noise function and rewrite it into working GLSL syntax.
Rebuild my intended visual output within the GLSL shader using real Perlin/Simplex noise.

For future reference. I also looked at Toxiclibs' SimplexNoise class and tested its output. It seems Toxiclibs' SimplexNoise looks more like the real GLSL noise. Therefore using Toxiclibs' SimplexNoise class within Processing would give a visual indication of what noise-based visuals would look like when recreated in a GLSL shader using real Perlin or Simplex noise.

amnon.owed

Re: Recreating Processing noise() in GLSL shader

1 year ago

All right, I've gotten some promising results using Fractional Brownian Motion in combination with Toxiclibs' SimplexNoise. So I'm agreeing with otherthings that in fact Processing's noise function seems to be not really Perlin noise, but something summative related to or based on noise (fractal noise, fBm?).

I will require some more experimentation, not to mention the step of porting to GLSL, to determine if this technique really solves the problem. But so far, so good.

Top Reply