Commit cf2cf2ffcdd1c1043fccc11c88b6c7845a2467cc
starbgdither
substack committed on 5/16/2017, 11:53:27 AMParent: 367b3cab0e2d3493dd1a93d8ccaa06843d98f0a8
Files changed
| main.js | changed |
| package.json | changed |
| main.js | ||
|---|---|---|
| @@ -10,42 +10,86 @@ | ||
| 10 | 10 … | var fbtex = regl.texture() |
| 11 | 11 … | var draw = { |
| 12 | 12 … | grid: createGrid(regl,30), |
| 13 | 13 … | gridbg: createGridBg(regl,30), |
| 14 … | + bg: createBg(regl), | |
| 14 | 15 … | fb: feedback(regl, ` |
| 15 | 16 … | vec3 sample (vec2 uv, sampler2D tex) { |
| 16 | - return 0.995*texture2D(tex, (0.99*(2.0*uv-1.0)+1.0)*0.5).rgb; | |
| 17 … | + float px = 256.0; | |
| 18 … | + vec2 puv = floor(uv*px)/px+0.5/px; | |
| 19 … | + vec3 c = 0.99*texture2D(tex, (0.993*(2.0*puv-1.0)+1.0)*0.5).rgb; | |
| 20 … | + float d = 32.0; | |
| 21 … | + return floor(c*d)/d; | |
| 17 | 22 … | } |
| 18 | 23 … | `) |
| 19 | 24 … | } |
| 20 | -var rmat = [] | |
| 25 … | +var rmat = [], last = 0 | |
| 21 | 26 … | regl.frame(function (context) { |
| 22 | 27 … | regl.clear({ color: [0,0,0,1], depth: true }) |
| 23 | 28 … | draw.fb({ texture: fbtex }) |
| 29 … | + draw.bg() | |
| 24 | 30 … | mat4.identity(rmat) |
| 25 | - mat4.rotateY(rmat,rmat,context.time*0.1) | |
| 31 … | + mat4.rotateY(rmat,rmat,context.time*0.05) | |
| 26 | 32 … | camera(function () { |
| 27 | 33 … | draw.grid({ rmat: rmat }) |
| 28 | 34 … | draw.gridbg({ rmat: rmat }) |
| 29 | 35 … | fbtex({ copy: true, mag: 'linear', min: 'linear' }) |
| 30 | 36 … | }) |
| 31 | 37 … | }) |
| 32 | 38 … | |
| 39 … | +function createBg (regl) { | |
| 40 … | + return regl({ | |
| 41 … | + frag: glsl` | |
| 42 … | + precision highp float; | |
| 43 … | + #pragma glslify: snoise = require('glsl-noise/simplex/3d') | |
| 44 … | + uniform float time; | |
| 45 … | + varying vec2 vpos; | |
| 46 … | + void main () { | |
| 47 … | + float d = 256.0; | |
| 48 … | + vec2 p = floor(vpos*d)/d+0.5/d; | |
| 49 … | + float x = pow(snoise(vec3(p*64.0,time*0.5))*0.5+0.5,16.0); | |
| 50 … | + gl_FragColor = vec4(x,x,x,x); | |
| 51 … | + } | |
| 52 … | + `, | |
| 53 … | + vert: glsl` | |
| 54 … | + precision highp float; | |
| 55 … | + attribute vec2 position; | |
| 56 … | + varying vec2 vpos; | |
| 57 … | + void main () { | |
| 58 … | + vpos = position; | |
| 59 … | + gl_Position = vec4(position,0,1); | |
| 60 … | + } | |
| 61 … | + `, | |
| 62 … | + attributes: { | |
| 63 … | + position: [-4,0,4,4,4,-4] | |
| 64 … | + }, | |
| 65 … | + uniforms: { | |
| 66 … | + time: regl.context('time') | |
| 67 … | + }, | |
| 68 … | + primitive: 'triangles', | |
| 69 … | + elements: [0,1,2], | |
| 70 … | + depth: { enable: false, mask: false }, | |
| 71 … | + blend: { enable: true, func: { | |
| 72 … | + src: 'src alpha', dst: 'one minus src alpha' } } | |
| 73 … | + }) | |
| 74 … | +} | |
| 75 … | + | |
| 33 | 76 … | function createGridBg (regl,size) { |
| 34 | 77 … | var mesh = grid(size,size) |
| 35 | 78 … | return regl({ |
| 36 | 79 … | frag: glsl` |
| 37 | 80 … | precision highp float; |
| 38 | 81 … | #pragma glslify: snoise = require('glsl-noise/simplex/4d') |
| 39 | 82 … | #pragma glslify: hsl2rgb = require('glsl-hsl2rgb') |
| 83 … | + #pragma glslify: dither = require('glsl-dither/8x8') | |
| 40 | 84 … | uniform float time; |
| 41 | 85 … | varying vec3 vpos; |
| 42 | 86 … | void main () { |
| 43 | 87 … | float h = snoise(vec4(vpos*0.2,time*0.1))*0.5+0.5; |
| 44 | 88 … | float s = 1.0; |
| 45 | - float l = pow(snoise(vec4(vpos*0.1,time*0.2))*0.5+0.5,4.0); | |
| 46 | - gl_FragColor = vec4(hsl2rgb(h*0.3+0.6,s,l),1); | |
| 47 | - //gl_FragColor = vec4(0.5,0,1,1); | |
| 89 … | + float l = pow(snoise(vec4(vpos*0.1,time*0.2))*0.5+0.5,4.0) | |
| 90 … | + + pow(snoise(vec4(vpos,time*0.5))*0.5+0.5,4.0); | |
| 91 … | + gl_FragColor = vec4(dither(gl_FragCoord.xy,hsl2rgb(h*0.3+0.6,s,l)),1); | |
| 48 | 92 … | } |
| 49 | 93 … | `, |
| 50 | 94 … | vert: glsl` |
| 51 | 95 … | precision highp float; |
| @@ -65,9 +109,9 @@ | ||
| 65 | 109 … | ) / ${size.toFixed(1)}; |
| 66 | 110 … | return (p*2.0-1.0)*8.0; |
| 67 | 111 … | } |
| 68 | 112 … | void main () { |
| 69 | - vpos = displace(position) - vec3(0,0.01,0); | |
| 113 … | + vpos = displace(position) - vec3(0,0.05,0); | |
| 70 | 114 … | gl_Position = projection * view * rmat * vec4(vpos,1); |
| 71 | 115 … | } |
| 72 | 116 … | `, |
| 73 | 117 … | attributes: { |
| @@ -92,12 +136,11 @@ | ||
| 92 | 136 … | varying vec3 vpos; |
| 93 | 137 … | void main () { |
| 94 | 138 … | float h = snoise(vec4(vpos,time))*0.5+0.5; |
| 95 | 139 … | float s = snoise(vec4(vpos,time*0.5))*0.5+0.5; |
| 96 | - float l = pow(snoise(vec4(vpos*0.1,time*2.0))*0.5+0.5,8.0) | |
| 97 | - + pow(snoise(vec4(vpos,time*0.5))*0.5+0.5,8.0); | |
| 98 | - gl_FragColor = vec4(hsl2rgb(h*0.3+0.6,s,l),1); | |
| 99 | - //gl_FragColor = vec4(0.5,0,1,1); | |
| 140 … | + float l = pow(snoise(vec4(vpos*0.1,time*0.5))*0.5+0.5,8.0) | |
| 141 … | + + pow(snoise(vec4(vpos,time*0.5))*0.5+0.5,2.0); | |
| 142 … | + gl_FragColor = vec4(hsl2rgb(h*0.3+0.6,s,1.0-l),1); | |
| 100 | 143 … | } |
| 101 | 144 … | `, |
| 102 | 145 … | vert: glsl` |
| 103 | 146 … | precision highp float; |
Built with git-ssb-web