2a:null 2b:["$","title",null,{"children":"GLSL Chunk Tag | Zihou Ng | Observable"}] 30:T4fc,model = webgl.createObject({ attribs: { position: { data: Float32Array.of(-1, 1, -1, -1, 1, -1, -1, 1, 1, -1, 1, 1), size: 2 }, uv: { data: Float32Array.of(0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1), size: 2 }, }, vs: ` precision highp int; precision highp float; attribute vec2 position; attribute vec2 uv; varying vec2 v_uv; void main() { v_uv = uv; gl_Position = vec4(position, 0.0, 1.0); }`, fs: ` precision highp int; precision highp float; const float SQRT05 = 0.707106; const float PI = 3.14159265359; uniform float scale; uniform float shift; uniform float amp; uniform int octaves; uniform float freq; uniform int iter; uniform float offset; uniform sampler2D permutation; uniform sampler2D grads; varying vec2 v_uv; ${fade} ${perm} ${grad} ${pnoise} ${norm} ${fbm} ${disp} ${wrap} ${gradient} void main() { vec2 uv = v_uv + offset; float step = freq / float(iter); for (int i = 0; i < 5; i++) { if (i >= iter) break; float v = fbm(vec3(uv * scale, 0.0), octaves, 0.5, shift); uv = disp(uv, v, 0.15, step); } uv = wrap(uv); float t = pow((uv.x + uv.y) / 2.0, 2.0) + 0.2; vec3 c = gradient(t, vec3(0.0,0.5,0.5),vec3(0.0,0.5,0.5),vec3(0.0,0.538,0.328),vec3(0.0,0.5,0.678) ); gl_FragColor = vec4(c, 1.); }` })31:T73c,glsl = { const interpolate = (strings, ...args) => { let s = ''; for (let i = 0; i < strings.length; i++) { s += strings[i]; if (i < args.length && args[i]) s += String(args[i]); } return s; }; const ID = 'glsl-styles'; const style = html`