Skip to content

Commit aee5825

Browse files
substacksubstack
substack
authored and
substack
committed
blobs with a bg
1 parent 15bfb95 commit aee5825

File tree

1 file changed

+116
-0
lines changed

1 file changed

+116
-0
lines changed

webgl/main.js

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
var regl = require('regl')()
2+
var camera = require('regl-camera')(regl,
3+
{ distance: 5 })
4+
var icosphere = require('icosphere')
5+
var mesh = icosphere(3)
6+
var glsl = require('glslify')
7+
var anormals = require('angle-normals')
8+
9+
function createBlob () {
10+
return regl({
11+
frag: glsl`
12+
precision highp float;
13+
#pragma glslify: snoise = require('glsl-noise/simplex/4d')
14+
#pragma glslify: hsl2rgb = require('glsl-hsl2rgb')
15+
uniform float time;
16+
varying vec3 vpos;
17+
void main () {
18+
float h = (snoise(vec4(vpos,time))*0.5+0.5)*0.4+0.5;
19+
float s = 0.5;
20+
float l = 0.5;
21+
gl_FragColor = vec4(hsl2rgb(h,s,l),1);
22+
}
23+
`,
24+
vert: glsl`
25+
precision highp float;
26+
#pragma glslify: snoise = require('glsl-noise/simplex/4d')
27+
attribute vec3 position, normal;
28+
uniform mat4 projection, view;
29+
uniform float time, iblob;
30+
uniform vec3 offset;
31+
varying vec3 vpos;
32+
void main () {
33+
vec3 p = position + offset
34+
+ vec3(
35+
sin(iblob*0.9+time*0.1)*20.0,
36+
cos(iblob*0.7+time*0.1)*3.0,
37+
sin(iblob*0.8+time*0.1)*23.0
38+
);
39+
float n = snoise(vec4(p,time*0.2));
40+
vpos = p + normal * n * 0.8;
41+
gl_Position = projection * view * vec4(vpos,1);
42+
}
43+
`,
44+
uniforms: {
45+
time: regl.context('time'),
46+
offset: regl.prop('offset'),
47+
iblob: regl.prop('iblob')
48+
},
49+
attributes: {
50+
position: mesh.positions,
51+
normal: anormals(mesh.cells, mesh.positions)
52+
},
53+
elements: mesh.cells
54+
})
55+
}
56+
57+
function createBG () {
58+
return regl({
59+
frag: glsl`
60+
precision highp float;
61+
#pragma glslify: snoise = require('glsl-noise/simplex/3d')
62+
#pragma glslify: hsl2rgb = require('glsl-hsl2rgb')
63+
varying vec2 vpos;
64+
uniform float time;
65+
void main () {
66+
float h = (snoise(vec3(vpos,time))*0.5+0.5)*0.4+0.4
67+
+ (snoise(vec3(vpos*4.0,time*2.0))*0.5+0.5)*0.2+0.2;
68+
float s = (snoise(vec3(vpos,time))*0.5+0.5)*0.2+0.8;
69+
float l = pow((snoise(vec3(vpos*8.0,time))*0.5+0.5),3.0);
70+
gl_FragColor = vec4(hsl2rgb(h,s,l),1);
71+
}
72+
`,
73+
vert: glsl`
74+
precision highp float;
75+
attribute vec2 position;
76+
varying vec2 vpos;
77+
void main () {
78+
vpos = position;
79+
gl_Position = vec4(position,0,1);
80+
}
81+
`,
82+
uniforms: {
83+
time: regl.context('time')
84+
},
85+
attributes: {
86+
position: [-4,4,-4,-4,4,0]
87+
},
88+
elements: [[0,1,2]],
89+
count: 3,
90+
depth: {
91+
enable: false,
92+
mask: false
93+
}
94+
})
95+
}
96+
97+
var blobs = []
98+
for (var i = 0; i < 100; i++) {
99+
var x = (Math.random()*2-1) * 20
100+
var y = (Math.random()*2-1) * 5
101+
var z = (Math.random()*2-1) * 20
102+
blobs.push({ offset: [x,y,z], iblob: i })
103+
}
104+
105+
var draw = {
106+
blob: createBlob(),
107+
bg: createBG()
108+
}
109+
110+
regl.frame(function () {
111+
regl.clear({ color: [0,0,0,1], depth: true })
112+
draw.bg()
113+
camera(function () {
114+
draw.blob(blobs)
115+
})
116+
})

0 commit comments

Comments
 (0)