Shader Extractor
Shader Extractor — fragment.glsl
BUNDLE · script_main.CdrVs4P6.mjs184 KB · minified
!function(t,e){"use strict";var n=t.WebGL2RenderingContext;function a(t,e){var n=t.createShader(e.type);return t.shaderSource(n,e.src),t.compileShader(n),n}var i=a.bind(null);const e=`precision highp float; uniform float u_time; uniform vec2 u_resolution; varying vec2 v_uv; vec3 palette(float t){ return vec3(0.55,0.42,0.5) + vec3(0.45,0.5,0.45) * cos(6.2831*(vec3(1.0)*t+vec3(0.0,0.33,0.67))); } float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7)))*43758.5); } float noise(vec2 p){ vec2 i=floor(p), f=fract(p), u=f*f*(3.0-2.0*f); return mix(mix(hash(i),hash(i+vec2(1,0)),u.x), mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),u.x), u.y); } float fbm(vec2 p){ float v=0.0, a=0.5; for(int i=0;i<5;i++){ v+=a*noise(p); p*=2.02; a*=0.5; } return v; } void main(){ vec2 uv = v_uv*2.0-1.0; float t = u_time*0.18; vec2 q = vec2(fbm(uv+t), fbm(uv-t+vec2(5.2,1.3))); vec2 r = vec2(fbm(uv+1.6*q+vec2(1.7,9.2)+0.15*t), fbm(uv+1.6*q+vec2(8.3,2.8)+0.13*t)); vec3 col = palette(fbm(uv+2.4*r) + 0.25*t); col = mix(col, palette(length(r)+t*0.5), 0.45); col += 0.18 * dot(r,r); col *= mix(0.6, 1.0, smoothstep(1.35, 0.25, length(uv))); gl_FragColor = vec4(col, 1.0); }`;const r=t.getContext("webgl2"),s=r.createProgram();r.attachShader(s,i({type:r.VERTEX_SHADER,src:v}));r.attachShader(s,i({type:r.FRAGMENT_SHADER,src:e}));r.linkProgram(s);var u=r.getUniformLocation(s,"u_time"),f=r.getUniformLocation(s,"u_resolution");function l(t){r.uniform1f(u,t*.001),r.uniform2f(f,c.width,c.height),r.drawArrays(r.TRIANGLE_STRIP,0,4),requestAnimationFrame(l)}requestAnimationFrame(l)}(window);
pair-001/fragment.glslcompiles · 32 lines · 2 uniforms
1precision highp float;
2uniform float u_time;
3uniform vec2 u_resolution;
4varying vec2 v_uv;
5
6vec3 palette(float t){
7 return vec3(0.55,0.42,0.5)
8 + vec3(0.45,0.5,0.45) * cos(6.2831*(vec3(1.0)*t+vec3(0.0,0.33,0.67)));
9}
10float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7)))*43758.5); }
11float noise(vec2 p){
12 vec2 i=floor(p), f=fract(p), u=f*f*(3.0-2.0*f);
13 return mix(mix(hash(i),hash(i+vec2(1,0)),u.x),
14 mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),u.x), u.y);
15}
16float fbm(vec2 p){
17 float v=0.0, a=0.5;
18 for(int i=0;i<5;i++){ v+=a*noise(p); p*=2.02; a*=0.5; }
19 return v;
20}
21void main(){
22 vec2 uv = v_uv*2.0-1.0;
23 float t = u_time*0.18;
24 vec2 q = vec2(fbm(uv+t), fbm(uv-t+vec2(5.2,1.3)));
25 vec2 r = vec2(fbm(uv+1.6*q+vec2(1.7,9.2)+0.15*t),
26 fbm(uv+1.6*q+vec2(8.3,2.8)+0.13*t));
27 vec3 col = palette(fbm(uv+2.4*r) + 0.25*t);
28 col = mix(col, palette(length(r)+t*0.5), 0.45);
29 col += 0.18 * dot(r,r);
30 col *= mix(0.6, 1.0, smoothstep(1.35, 0.25, length(uv)));
31 gl_FragColor = vec4(col, 1.0);
32}
COMPILE OUTPUT · glslc0 errors
$ glslc fragment.glsl
✓ vertex shader compiled (0.03s)
✓ fragment shader compiled (0.08s)
✓ program linked (0.01s)
Ready. 2 uniforms · 0 warnings
Live previewrunning
60 fps · 2 uniforms · WebGL2GLSL ES 1.00
UNIFORMS · live2 active
uniform float u_time0.0000
uniform vec2 u_resolution[0, 0]

Shader Extractor

WebGL shaders are usually embedded as opaque template strings inside minified bundles. yank pulls them out into proper .glsl files, compiles them with WebGL2 to verify, and runs them as a live preview. Edit the shader in your editor; the page reloads.