├── .gitignore ├── README.md ├── demo ├── index.js ├── normal.glsl ├── vert.glsl └── volume.glsl ├── package.json └── triNoise3D.glsl /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.swp 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #TriNoise3D 2 | 3 | Gives you a super pretty nosie function. 4 | Taken from 5 | which gives you a great idea of how cool this function can be 6 | Made by NIMITZ (twitter: @stormoid) 7 | 8 | Takes in: 9 | - Position ( vec3 ) , 10 | - Speed ( float ) 11 | - Time ( float ) 12 | 13 | super radical right ?!?!? 14 | -------------------------------------------------------------------------------- /demo/index.js: -------------------------------------------------------------------------------- 1 | 2 | // Modules to require 3 | var glContext = require( "gl-context" ); 4 | var bigTri = require( "a-big-triangle" ); 5 | var glslify = require( "glslify" ); 6 | var glShader = require( "gl-shader" ); 7 | 8 | 9 | document.body.style.margin = "0px"; 10 | 11 | // Creating a canvas to draw on 12 | var canvas = document.createElement( "canvas" ); 13 | document.body.appendChild( canvas ); 14 | 15 | 16 | // Sets up an animation using the animate function 17 | var gl = glContext( canvas , {} , animate ); 18 | 19 | 20 | 21 | // Setting canvas to be the proper size 22 | canvas.width = window.innerWidth/4; 23 | canvas.height = window.innerHeight/4; 24 | canvas.style.width = "100%"; 25 | canvas.style.height = "100%"; 26 | gl.viewport( 0 , 0 , canvas.width , canvas.height ); 27 | 28 | 29 | // Getting glsl to create our vertex 30 | // and fragment shaders 31 | var vs = glslify( "./vert.glsl" ); 32 | var fs = glslify( "./volume.glsl" ); 33 | 34 | var shader = glShader( gl , vs , fs ); 35 | 36 | var uniforms = { 37 | 38 | time : 0, 39 | resolution : [ canvas.width , canvas.height ] 40 | 41 | } 42 | 43 | var start = Date.now(); 44 | function animate( dT ){ 45 | 46 | uniforms.time =( Date.now() - start ) / 1000.; 47 | shader.bind(); 48 | shader.uniforms = uniforms; 49 | bigTri( gl ); 50 | 51 | } 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /demo/normal.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform float time; 4 | uniform vec2 resolution; 5 | 6 | const float INTERSECTION_PRECISION = .01; 7 | const float MAX_TRACE_DISTANCE = 10.; 8 | const int NUM_TRACE_STEPS = 100; 9 | 10 | #pragma glslify: noise = require('../triNoise3D.glsl') 11 | 12 | void doCamera( out vec3 camPos , out vec3 camTar , in float time ){ 13 | 14 | float an = .3 + 10. * sin( time * .1 ); 15 | camPos = vec3( 3.5 * sin( an ) , 0. , 3.5 * cos( an )); 16 | camTar = vec3( 0. ); 17 | 18 | } 19 | 20 | void setCol( out vec3 col ){ 21 | 22 | col = vec3( 1. , 1. , 0. ); 23 | 24 | } 25 | 26 | mat3 calcLookAtMatrix( vec3 camPos , vec3 camTar , float roll ){ 27 | 28 | vec3 up = vec3( sin( roll ) ,cos( roll ) , 0. ); 29 | vec3 ww = normalize( camTar - camPos ); 30 | vec3 uu = normalize( cross( ww , up ) ); 31 | vec3 vv = normalize( cross( uu , ww ) ); 32 | 33 | return mat3( uu , vv , ww ); 34 | 35 | } 36 | 37 | 38 | vec2 map( vec3 pos ){ 39 | 40 | float d = noise( pos * .1 , 1.1 , time ); 41 | 42 | return vec2( length( pos ) - (d * .5 + .5) , 1. ); 43 | 44 | 45 | } 46 | 47 | 48 | // res = result; 49 | vec2 calcIntersection( in vec3 ro , in vec3 rd ){ 50 | 51 | float h = INTERSECTION_PRECISION * 2.; 52 | float t = 0.; 53 | float res = -1.; 54 | float id = -1.; 55 | 56 | for( int i = 0; i < NUM_TRACE_STEPS; i++ ){ 57 | 58 | if( h < INTERSECTION_PRECISION || t > MAX_TRACE_DISTANCE ) break; 59 | 60 | vec2 m = map( ro + rd * t ); 61 | 62 | h = m.x; 63 | t += h; 64 | id = m.y; 65 | 66 | } 67 | 68 | if( t < MAX_TRACE_DISTANCE ) res = t; 69 | if( t > MAX_TRACE_DISTANCE ) id = -1.; 70 | 71 | return vec2( res , id ); 72 | 73 | } 74 | 75 | vec3 calcNormal( vec3 pos ){ 76 | 77 | vec3 eps = vec3( 0.01 , 0. , 0. ); 78 | 79 | vec3 nor = vec3( 80 | map( pos + eps.xyy ).x - map( pos - eps.xyy ).x, 81 | map( pos + eps.yxy ).x - map( pos - eps.yxy ).x, 82 | map( pos + eps.yyx ).x - map( pos - eps.yyx ).x 83 | ); 84 | 85 | return normalize( nor ); 86 | 87 | 88 | } 89 | 90 | 91 | void main(){ 92 | 93 | vec2 p = ( -resolution + 2.0 * gl_FragCoord.xy ) / resolution.y; 94 | 95 | vec3 ro , ta; 96 | 97 | doCamera( ro , ta , time ); 98 | 99 | mat3 camMat = calcLookAtMatrix( ro , ta , 0. ); 100 | 101 | // z = lens length 102 | vec3 rd = normalize( camMat * vec3( p.xy , 2. ) ); 103 | 104 | vec2 res = calcIntersection( ro , rd ); 105 | vec3 col = vec3( 0. ); 106 | 107 | if( res.x > 0. ){ 108 | 109 | vec3 pos = ro + rd * res.x; 110 | vec3 nor = calcNormal( pos ); 111 | col = nor * .5 + .5; 112 | 113 | } 114 | 115 | gl_FragColor = vec4( col , 1. ); 116 | 117 | } 118 | -------------------------------------------------------------------------------- /demo/vert.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | attribute vec2 position; 4 | 5 | void main(){ 6 | 7 | gl_Position = vec4( position , 1. , 1. ); 8 | 9 | } 10 | -------------------------------------------------------------------------------- /demo/volume.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | uniform float time; 4 | uniform vec2 resolution; 5 | 6 | const float INTERSECTION_PRECISION = .01; 7 | const float MAX_TRACE_DISTANCE = 10.; 8 | const int NUM_TRACE_STEPS = 100; 9 | 10 | #pragma glslify: noise = require('../triNoise3D.glsl') 11 | #pragma glslify: hsv = require('glsl-hsv2rgb') 12 | 13 | void doCamera( out vec3 camPos , out vec3 camTar , in float time ){ 14 | 15 | float an = .3 + 10. * sin( time * .1 ); 16 | camPos = vec3( 3.5 * sin( an ) , 0. , 3.5 * cos( an )); 17 | camTar = vec3( 0. ); 18 | 19 | } 20 | 21 | void setCol( out vec3 col ){ 22 | 23 | col = vec3( 1. , 1. , 0. ); 24 | 25 | } 26 | 27 | mat3 calcLookAtMatrix( vec3 camPos , vec3 camTar , float roll ){ 28 | 29 | vec3 up = vec3( sin( roll ) ,cos( roll ) , 0. ); 30 | vec3 ww = normalize( camTar - camPos ); 31 | vec3 uu = normalize( cross( ww , up ) ); 32 | vec3 vv = normalize( cross( uu , ww ) ); 33 | 34 | return mat3( uu , vv , ww ); 35 | 36 | } 37 | 38 | 39 | vec2 map( vec3 pos ){ 40 | 41 | float d = noise( pos * .1 , 1.1 , time ); 42 | 43 | return vec2( length( pos ) - (d * .5 + .5) , 1. ); 44 | 45 | 46 | } 47 | 48 | 49 | // res = result; 50 | vec2 calcIntersection( in vec3 ro , in vec3 rd ){ 51 | 52 | float h = INTERSECTION_PRECISION * 2.; 53 | float t = 0.; 54 | float res = -1.; 55 | float id = -1.; 56 | 57 | for( int i = 0; i < NUM_TRACE_STEPS; i++ ){ 58 | 59 | if( h < INTERSECTION_PRECISION || t > MAX_TRACE_DISTANCE ) break; 60 | 61 | vec2 m = map( ro + rd * t ); 62 | 63 | h = m.x; 64 | t += h; 65 | id = m.y; 66 | 67 | } 68 | 69 | if( t < MAX_TRACE_DISTANCE ) res = t; 70 | if( t > MAX_TRACE_DISTANCE ) id = -1.; 71 | 72 | return vec2( res , id ); 73 | 74 | } 75 | 76 | 77 | 78 | vec3 calcNormal( vec3 pos ){ 79 | 80 | vec3 eps = vec3( 0.01 , 0. , 0. ); 81 | 82 | vec3 nor = vec3( 83 | map( pos + eps.xyy ).x - map( pos - eps.xyy ).x, 84 | map( pos + eps.yxy ).x - map( pos - eps.yxy ).x, 85 | map( pos + eps.yyx ).x - map( pos - eps.yyx ).x 86 | ); 87 | 88 | return normalize( nor ); 89 | 90 | 91 | } 92 | 93 | vec3 calcFog( in vec3 ro , in vec3 rd ){ 94 | 95 | vec3 col = vec3( 0.); 96 | 97 | float h = INTERSECTION_PRECISION * 2.; 98 | float t = 0.; 99 | 100 | for( int i = 0; i < NUM_TRACE_STEPS; i++ ){ 101 | //col += vec3( noise( pos ) ); 102 | vec3 pos = ro + rd * t ; 103 | float n = noise( pos * .1 , 1.1 , time ); 104 | col += hsv( vec3(abs(sin(n * 7.)) , 1. , 1.) ) * n; 105 | t += .1; 106 | 107 | } 108 | 109 | col /= float( NUM_TRACE_STEPS ); 110 | 111 | return col; 112 | 113 | } 114 | 115 | 116 | void main(){ 117 | 118 | vec2 p = ( -resolution + 2.0 * gl_FragCoord.xy ) / resolution.y; 119 | 120 | vec3 ro , ta; 121 | 122 | doCamera( ro , ta , time ); 123 | 124 | mat3 camMat = calcLookAtMatrix( ro , ta , 0. ); 125 | 126 | // z = lens length 127 | vec3 rd = normalize( camMat * vec3( p.xy , 2. ) ); 128 | vec3 col = calcFog( ro , rd ); 129 | 130 | gl_FragColor = vec4( col , 1. ); 131 | 132 | } 133 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "glsl-tri-noise-3d", 3 | "version": "1.0.0", 4 | "description": "trinoise for glsl", 5 | "main": "triNoise3D.glsl", 6 | "scripts": { 7 | "start": "wzrd demo/index.js" 8 | }, 9 | "keywords": [ 10 | "glsl", 11 | "ecosystem:stackgl", 12 | "noise" 13 | ], 14 | "author": "stormoid", 15 | "devDependencies": { 16 | "a-big-triangle": "^1.0.0", 17 | "browserify": "^9.0.3", 18 | "gl-context": "^0.1.1", 19 | "gl-shader": "^4.0.0", 20 | "glsl-hsv2rgb": "^1.0.0", 21 | "glslify": "^2.0.0", 22 | "wzrd": "^1.2.1" 23 | }, 24 | "browserify": { 25 | "transform": [ 26 | "glslify" 27 | ] 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /triNoise3D.glsl: -------------------------------------------------------------------------------- 1 | // Taken from https://www.shadertoy.com/view/4ts3z2 2 | // By NIMITZ (twitter: @stormoid) 3 | // good god that dudes a genius... 4 | 5 | float tri( float x ){ 6 | return abs( fract(x) - .5 ); 7 | } 8 | 9 | vec3 tri3( vec3 p ){ 10 | 11 | return vec3( 12 | tri( p.z + tri( p.y * 1. ) ), 13 | tri( p.z + tri( p.x * 1. ) ), 14 | tri( p.y + tri( p.x * 1. ) ) 15 | ); 16 | 17 | } 18 | 19 | 20 | float triNoise3D( vec3 p, float spd , float time){ 21 | 22 | float z = 1.4; 23 | float rz = 0.; 24 | vec3 bp = p; 25 | 26 | for( float i = 0.; i <= 3.; i++ ){ 27 | 28 | vec3 dg = tri3( bp * 2. ); 29 | p += ( dg + time * .1 * spd ); 30 | 31 | bp *= 1.8; 32 | z *= 1.5; 33 | p *= 1.2; 34 | 35 | float t = tri( p.z + tri( p.x + tri( p.y ))); 36 | rz += t / z; 37 | bp += 0.14; 38 | 39 | } 40 | 41 | return rz; 42 | 43 | } 44 | 45 | #pragma glslify: export(triNoise3D) 46 | --------------------------------------------------------------------------------