├── 1d.glsl ├── 2d.glsl ├── 3d.glsl ├── README.md └── package.json /1d.glsl: -------------------------------------------------------------------------------- 1 | 2 | #define NUM_OCTAVES 5 3 | 4 | float rand(float n){return fract(sin(n) * 43758.5453123);} 5 | 6 | float noise(float p){ 7 | float fl = floor(p); 8 | float fc = fract(p); 9 | return mix(rand(fl), rand(fl + 1.0), fc); 10 | } 11 | 12 | float fbm(float x) { 13 | float v = 0.0; 14 | float a = 0.5; 15 | float shift = float(100); 16 | for (int i = 0; i < NUM_OCTAVES; ++i) { 17 | v += a * noise(x); 18 | x = x * 2.0 + shift; 19 | a *= 0.5; 20 | } 21 | return v; 22 | } 23 | 24 | #pragma glslify: export(fbm) -------------------------------------------------------------------------------- /2d.glsl: -------------------------------------------------------------------------------- 1 | #define NUM_OCTAVES 5 2 | 3 | float rand(vec2 n) { 4 | return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453); 5 | } 6 | 7 | float noise(vec2 p){ 8 | vec2 ip = floor(p); 9 | vec2 u = fract(p); 10 | u = u*u*(3.0-2.0*u); 11 | 12 | float res = mix( 13 | mix(rand(ip),rand(ip+vec2(1.0,0.0)),u.x), 14 | mix(rand(ip+vec2(0.0,1.0)),rand(ip+vec2(1.0,1.0)),u.x),u.y); 15 | return res*res; 16 | } 17 | 18 | float fbm(vec2 x) { 19 | float v = 0.0; 20 | float a = 0.5; 21 | vec2 shift = vec2(100); 22 | // Rotate to reduce axial bias 23 | mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.50)); 24 | for (int i = 0; i < NUM_OCTAVES; ++i) { 25 | v += a * noise(x); 26 | x = rot * x * 2.0 + shift; 27 | a *= 0.5; 28 | } 29 | return v; 30 | } 31 | 32 | #pragma glslify: export(fbm) -------------------------------------------------------------------------------- /3d.glsl: -------------------------------------------------------------------------------- 1 | #define NUM_OCTAVES 5 2 | 3 | float mod289(float x){return x - floor(x * (1.0 / 289.0)) * 289.0;} 4 | vec4 mod289(vec4 x){return x - floor(x * (1.0 / 289.0)) * 289.0;} 5 | vec4 perm(vec4 x){return mod289(((x * 34.0) + 1.0) * x);} 6 | 7 | float noise(vec3 p){ 8 | vec3 a = floor(p); 9 | vec3 d = p - a; 10 | d = d * d * (3.0 - 2.0 * d); 11 | 12 | vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0); 13 | vec4 k1 = perm(b.xyxy); 14 | vec4 k2 = perm(k1.xyxy + b.zzww); 15 | 16 | vec4 c = k2 + a.zzzz; 17 | vec4 k3 = perm(c); 18 | vec4 k4 = perm(c + 1.0); 19 | 20 | vec4 o1 = fract(k3 * (1.0 / 41.0)); 21 | vec4 o2 = fract(k4 * (1.0 / 41.0)); 22 | 23 | vec4 o3 = o2 * d.z + o1 * (1.0 - d.z); 24 | vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x); 25 | 26 | return o4.y * d.y + o4.x * (1.0 - d.y); 27 | } 28 | 29 | 30 | float fbm(vec3 x) { 31 | float v = 0.0; 32 | float a = 0.5; 33 | vec3 shift = vec3(100); 34 | for (int i = 0; i < NUM_OCTAVES; ++i) { 35 | v += a * noise(x); 36 | x = x * 2.0 + shift; 37 | a *= 0.5; 38 | } 39 | return v; 40 | } 41 | 42 | #pragma glslify: export(fbm) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # glsl-fbm 2 | [Fractional Brownian Motion(fBM)](https://www.iquilezles.org/www/articles/fbm/fbm.htm) ported to an NPM package for [glslify](http://github.com/chrisdickinson/glslify). Also check out [GLSL Noise Algorithms](https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83) 3 | 4 | ## Installation 5 | `npm install glsl-fbm` 6 | 7 | ## Usage ## 8 | ``` glsl 9 | 10 | attribute vec3 position; 11 | attribute vec2 uv; 12 | uniform float time; 13 | 14 | #pragma glslify: fbm = require(glsl-fbm) 15 | 16 | void main() { 17 | vec3 pos = position; 18 | float height = fbm(vec3(uv, time)); 19 | pos.y += height; 20 | 21 | gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(pos, 1.0); 22 | } 23 | ``` -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "glsl-fbm", 3 | "version": "1.0.0", 4 | "description": "Fractional Brownian Motion in GLSL", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/yiwenl/glsl-fbm.git" 12 | }, 13 | "keywords": [ 14 | "glsl", 15 | "fbm", 16 | "Fractional Brownian Motion" 17 | ], 18 | "author": "Yi-Wen LIN", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/yiwenl/glsl-fbm/issues" 22 | }, 23 | "homepage": "https://github.com/yiwenl/glsl-fbm#readme" 24 | } 25 | --------------------------------------------------------------------------------