Migrate all shaders to WebGL 2 / GLSL ES 3.00

src/components/themes/contour/fragment.glsl

@@ -1,4 +1,4 @@
-#extension GL_OES_standard_derivatives : enable
+#version 300 es
 #ifdef GL_ES
 precision highp float;
 #endif
@@ -92,6 +92,7 @@ float wave(float t) {
   return 0.5 * (1.0 - cos(uScaleContour * M_PI * t));
 }
 
+out vec4 fragColor;
 void main() {
   vec2 uv = uScale * gl_FragCoord.xy / uResolution.y;
 
@@ -112,5 +113,5 @@ void main() {
              - smoothstep(hi - fw, hi + fw, contour_fac);
 
   float brightness = line;
-  gl_FragColor = vec4(mix(uBackground, color, brightness), 1.0);
+  fragColor = vec4(mix(uBackground, color, brightness), 1.0);
 }

src/components/themes/contour/index.tsx

@@ -33,7 +33,6 @@ export default defineComponent({
         window.innerWidth,
         window.innerHeight,
         {
-          extensions: ['OES_standard_derivatives'],
           renderOptions: { externalTimeUse: true },
           renderHook() {
             const gl = this as unknown as GL

src/components/themes/contour/vertex.glsl

@@ -1,4 +1,5 @@
-attribute vec2 aVertexPosition;
+#version 300 es
+in vec2 aVertexPosition;
 
 void main() {
   gl_Position = vec4(aVertexPosition, 0.0, 1.0);

src/components/themes/destruction/fragment.glsl

@@ -1,3 +1,4 @@
+#version 300 es
 /*
  * Original shader from: https://www.shadertoy.com/view/ldyyWm
  */
@@ -10,10 +11,8 @@ uniform float position;
 uniform float perspective;
 uniform vec2 uResolution;
 
-#define round(x) (floor((x) + 0.5))
-
 float burn;
-float time = uTime + 200.0;
+float time;
 
 mat2 rot(float a) {
   float s=sin(a), c=cos(a);
@@ -40,7 +39,7 @@ float map(vec3 p) {
   return d;
 }
 
-void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
+void mainImage( out vec4 col, in vec2 fragCoord ) {
   vec3 rd = normalize(vec3(2. * fragCoord - uResolution.xy, uResolution.y * position)), ro = vec2(0, -2).xxy;
   
   mat2 r1 = rot(time/4.), r2 = rot(time/2.);
@@ -53,10 +52,12 @@ void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
     i -= 1.0;
   }
 
-  fragColor = vec4(1.1 - burn, exp(-t), exp(-t/2.), 1);
-  // fragColor = vec4(exp(-t) * 4.1, exp(-t/2.) * 0.9, 0.4 - burn * 2.9, 1);
+  col = vec4(1.1 - burn, exp(-t), exp(-t/2.), 1);
+  // col = vec4(exp(-t) * 4.1, exp(-t/2.) * 0.9, 0.4 - burn * 2.9, 1);
 }
 
+out vec4 fragColor;
 void main(void) {
-  mainImage(gl_FragColor, gl_FragCoord.xy);
+  time = uTime + 200.0;
+  mainImage(fragColor, gl_FragCoord.xy);
 }

src/components/themes/destruction/vertex.glsl

@@ -1,4 +1,5 @@
-attribute vec2 aVertexPosition;
+#version 300 es
+in vec2 aVertexPosition;
 
 void main() {
   gl_Position = vec4(aVertexPosition, 0.0, 1.0);

src/components/themes/flow/fragment.glsl

@@ -1,3 +1,4 @@
+#version 300 es
 precision highp float;
 
 uniform vec2 uResolution;
@@ -65,6 +66,7 @@ vec3 palette(in float t) {
   return a + b * cos(6.28318 * (c * t + d));
 }
 
+out vec4 fragColor;
 void main() {
   vec2 p = gl_FragCoord.xy / uResolution.xy;
   p.x *= uResolution.x / uResolution.y;
@@ -72,5 +74,5 @@ void main() {
   float value = pow(pattern(p), 2.);
   vec3 color  = palette(value);
 
-  gl_FragColor = vec4(color, 1.);
+  fragColor = vec4(color, 1.);
 }

src/components/themes/flow/vertex.glsl

@@ -1,4 +1,5 @@
-attribute vec2 aVertexPosition;
+#version 300 es
+in vec2 aVertexPosition;
 
 void main() {
   gl_Position = vec4(aVertexPosition, 0.0, 1.0);

src/components/themes/planet/fragment.glsl

@@ -1,3 +1,4 @@
+#version 300 es
 /*
  * Original shader from: https://www.shadertoy.com/view/ttKBDd
  */
@@ -179,6 +180,7 @@ void mainImage( out vec4 f, in vec2 u ) {
   f = vec4(col, 1.0);
 }
 
+out vec4 fragColor;
 void main(void) {
-  mainImage(gl_FragColor, gl_FragCoord.xy);
+  mainImage(fragColor, gl_FragCoord.xy);
 }

src/components/themes/planet/vertex.glsl

@@ -1,4 +1,5 @@
-attribute vec2 aVertexPosition;
+#version 300 es
+in vec2 aVertexPosition;
 
 void main() {
   gl_Position = vec4(aVertexPosition, 0.0, 1.0);

src/components/themes/plasma/fragment.glsl

@@ -1,3 +1,4 @@
+#version 300 es
 /**
  * Original shader: https://www.shadertoy.com/view/MsjSW3
  */
@@ -22,6 +23,7 @@ float map(vec3 p){
   return length(p + vec3(sin(t * .7))) * log(length(p) + size) + sin(q.x + sin(q.z + sin(q.y))) * 0.5 - zoom;
 }
 
+out vec4 fragColor;
 void main() {
   vec2 p = gl_FragCoord.xy / uResolution.y - vec2(0.9,.5);
   vec3 cl = vec3(0.);
@@ -44,5 +46,5 @@ void main() {
     saturation += min(rz, smoothness);
   }
 
-  gl_FragColor = vec4(cl, 1.);
+  fragColor = vec4(cl, 1.);
 }

src/components/themes/plasma/vertex.glsl

@@ -1,4 +1,5 @@
-attribute vec2 aVertexPosition;
+#version 300 es
+in vec2 aVertexPosition;
 
 void main() {
   gl_Position = vec4(aVertexPosition, 0.0, 1.0);

src/components/themes/random/fragment.glsl

@@ -1,3 +1,4 @@
+#version 300 es
 #ifdef GL_ES
 precision highp float;
 #endif
@@ -18,11 +19,12 @@ vec3 lambda_0(vec3 x) {
   return x + f(x) * (0.5 - (vec3(gl_FragCoord.xy, 1.0) / uResolution.x));
 }
 
+out vec4 fragColor;
 void main() {
   vec3 i_0 = vec3(0.0,0.0,0.0);
 
 	for (float i_1 = 0.0; i_1 < 32.; i_1++) i_0 = lambda_0(i_0);
 
   vec3 p = i_0;
-  gl_FragColor = vec4(((vec3(2.0,5.0,9.0) + sin(p)) / length(p)),1.0);
+  fragColor = vec4(((vec3(2.0,5.0,9.0) + sin(p)) / length(p)),1.0);
 }

src/components/themes/random/vertex.glsl

@@ -1,4 +1,5 @@
-attribute vec2 aVertexPosition;
+#version 300 es
+in vec2 aVertexPosition;
 
 void main() {
   gl_Position = vec4(aVertexPosition, 0.0, 1.0);

src/components/themes/rings/fragment.glsl

@@ -1,3 +1,4 @@
+#version 300 es
 precision highp float;
 
 uniform float uTime;
@@ -6,7 +7,8 @@ uniform float zoom; // 32.415
 uniform vec2 uResolution;
 float linearity = 2.; // 2.
 
-void main( void ) {
+out vec4 fragColor;
+void main() {
   float mx = max( uResolution.x, uResolution.y );
   vec2 uv = (gl_FragCoord.xy - uResolution.xy * 0.5) / mx;
   uv.x += sin(uTime + uv.y * linearity) * .2;
@@ -35,5 +37,5 @@ void main( void ) {
   float r = -uv.y + (.5 + hue);
   float b = uv.y + (.5 - hue);
 
-  gl_FragColor = vec4(mix(vec3(r, r*.3, b), vec3(c), .3), 1.0);
+  fragColor = vec4(mix(vec3(r, r*.3, b), vec3(c), .3), 1.0);
 }

src/components/themes/rings/vertex.glsl

@@ -1,4 +1,5 @@
-attribute vec2 aVertexPosition;
+#version 300 es
+in vec2 aVertexPosition;
 
 void main() {
   gl_Position = vec4(aVertexPosition, 0.0, 1.0);

src/components/themes/rings3d/fragment.glsl

@@ -1,3 +1,4 @@
+#version 300 es
 // Inspiration: https://www.shadertoy.com/view/WdB3Dw
 #ifdef GL_ES
 precision highp float;
@@ -98,6 +99,7 @@ mat3 calcLookAtMatrix(vec3 ro, vec3 ta, vec3 up) {
   return mat3(uu, vv, ww);
 }
 
+out vec4 fragColor;
 void main() {
   gTime = mod(uTime / 2.0, 1.0);
 
@@ -146,5 +148,5 @@ void main() {
   color = pow(color, vec3(2.0)) * 3.0;
   color = pow(color, vec3(1.0 / 2.2));
 
-  gl_FragColor = vec4(color, 1.0);
+  fragColor = vec4(color, 1.0);
 }

src/components/themes/rings3d/vertex.glsl

@@ -1,4 +1,5 @@
-attribute vec2 aVertexPosition;
+#version 300 es
+in vec2 aVertexPosition;
 
 void main() {
   gl_Position = vec4(aVertexPosition, 0.0, 1.0);

src/components/themes/sphere/fragment.glsl

@@ -1,3 +1,4 @@
+#version 300 es
 /*
  * Original shader from: https://www.shadertoy.com/view/lslcWj
  */
@@ -31,7 +32,7 @@ vec3 GetColor(vec3 p) {
   return col * amount;
 }
 
-void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+void mainImage(out vec4 col, in vec2 fragCoord) {
 	vec3 rd = normalize(vec3(2.0 * fragCoord.xy - uResolution.xy, -uResolution.y));
   vec3 ro = vec3(0.0, 0.0, size);
 
@@ -41,7 +42,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   R(ro.yz, 0.5 * uTime);
 
   float t = 0.0;
-  fragColor.rgb = vec3(0.0353, 0.0275, 0.1255);
+  col.rgb = vec3(0.0353, 0.0275, 0.1255);
   float scale = mix(3.5, 9.0, Sin01(0.068 * uTime));
 
   for (int i = 0; i < 64; i++) {
@@ -51,11 +52,12 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
       break;
     }
     t += .9 * d;
-    fragColor.rgb += 0.05 * GetColor(p);
+    col.rgb += 0.05 * GetColor(p);
   }
 }
 
+out vec4 fragColor;
 void main(void) {
-  mainImage(gl_FragColor, gl_FragCoord.xy);
-  gl_FragColor.a = 1.;
+  mainImage(fragColor, gl_FragCoord.xy);
+  fragColor.a = 1.0;
 }

src/components/themes/sphere/vertex.glsl

@@ -1,4 +1,5 @@
-attribute vec2 aVertexPosition;
+#version 300 es
+in vec2 aVertexPosition;
 
 void main() {
   gl_Position = vec4(aVertexPosition, 0.0, 1.0);

src/components/themes/tenderness/fragment.glsl

@@ -1,3 +1,4 @@
+#version 300 es
 // Modified so it doesn't really move. Very childish and easy fix.
 #ifdef GL_ES
 precision highp float;
@@ -11,6 +12,7 @@ const float fluidSpeed = 60.0;  // Drives speed, higher number will make it slow
 const float color_intensity = 0.5;
 const float position = 1.0;
 
+out vec4 fragColor;
 void main() {
   vec2 p= (position * gl_FragCoord.xy - uResolution) / max(uResolution.x, uResolution.y);
 
@@ -22,5 +24,5 @@ void main() {
   }
 
   vec3 col=vec3(color_intensity*sin(5.0*p.x)+color_intensity,color_intensity*sin(3.0*p.y)+color_intensity,color_intensity*sin(p.x+p.y)+color_intensity);
-  gl_FragColor=vec4(col, 1.0);
+  fragColor=vec4(col, 1.0);
 }

src/components/themes/tenderness/vertex.glsl

@@ -1,4 +1,5 @@
-attribute vec2 aVertexPosition;
+#version 300 es
+in vec2 aVertexPosition;
 
 void main() {
   gl_Position = vec4(aVertexPosition, 0.0, 1.0);

src/components/themes/tunnel/fragment.glsl

@@ -1,3 +1,4 @@
+#version 300 es
 // Original: http://www.pouet.net/prod.php?which=57245
 // Credits: Danilo Guanabara
 #ifdef GL_ES
@@ -26,6 +27,7 @@ uniform float uBrightness;
 #define t uTime
 #define r uResolution
 
+out vec4 fragColor;
 void main() {
   vec3 c;
   float l, z = t;
@@ -39,5 +41,5 @@ void main() {
     uv += p / l * (sin(z) + 1.) * uAmplitude * abs(sin(l * uFrequency - z - z));
     c[i] = uBrightness / length(mod(uv, 1.) - .5);
   }
-  gl_FragColor = vec4(c / l, 1.0);
+  fragColor = vec4(c / l, 1.0);
 }

src/components/themes/tunnel/vertex.glsl

@@ -1,4 +1,5 @@
-attribute vec2 aVertexPosition;
+#version 300 es
+in vec2 aVertexPosition;
 
 void main() {
   gl_Position = vec4(aVertexPosition, 0.0, 1.0);

src/components/themes/zappy/fragment.glsl

@@ -1,3 +1,4 @@
+#version 300 es
 // Inspiration: https://www.shadertoy.com/view/cfjGzV — Zippy Zaps
 // Credits: -13 thanks to Nguyen2007 ⚡
 #ifdef GL_ES
@@ -13,15 +14,8 @@ uniform float uZoom;
 // Shifts the base colour phase vector, cycling through hue combinations
 uniform float uColorShift;
 
-// tanh is GLSL ES 3.00+ only — not available in WebGL 1.0.
-// Implemented via the identity tanh(x) = (e^2x - 1)/(e^2x + 1).
-// Input clamped to ±15 to prevent exp() overflow on large inputs.
-vec2 tanh(vec2 x) {
-  x = clamp(x, -15.0, 15.0);
-  vec2 e = exp(2.0 * x);
-  return (e - 1.0) / (e + 1.0);
-}
 
+out vec4 fragColor;
 void main() {
   vec2 res = uResolution;
   vec2 u   = gl_FragCoord.xy;
@@ -73,5 +67,5 @@ void main() {
   // Equivalent to: 25.6 / (min(o,13.) + 164./o)
   o = 25.6 * o / (min(o, 13.0) * o + 164.0) - dot(u, u) / 250.0;
 
-  gl_FragColor = vec4(o);
+  fragColor = vec4(o);
 }

src/components/themes/zappy/vertex.glsl

@@ -1,4 +1,5 @@
-attribute vec2 aVertexPosition;
+#version 300 es
+in vec2 aVertexPosition;
 
 void main() {
   gl_Position = vec4(aVertexPosition, 0.0, 1.0);

src/utils/gl.ts

@@ -1,4 +1,4 @@
-type ctxType = WebGLRenderingContext
+type ctxType = WebGL2RenderingContext
 
 interface GLRenderOptions {
   observeMouse?: boolean;
@@ -19,7 +19,7 @@ interface GlOption {
 }
 
 export default class GL {
-  ctx!: WebGLRenderingContext
+  ctx!: WebGL2RenderingContext
   protected el!: HTMLCanvasElement
   program!: WebGLProgram | null
 
@@ -74,10 +74,10 @@ export default class GL {
 
     this.el = el
 
-    const ctx = this.el.getContext('webgl')
+    const ctx = this.el.getContext('webgl2')
 
     if (!ctx) {
-      console.log('Browser doesn\'t support WebGL ')
+      console.log('Browser doesn\'t support WebGL 2')
       return
     }
 

src/utils/postprocess.ts

@@ -6,9 +6,9 @@ interface RenderTarget {
 }
 
 // ─── Shared pass vertex shader ───────────────────────────────────────────────
-const PASS_VERT = `
-attribute vec2 aPosition;
-varying vec2 vUv;
+const PASS_VERT = `#version 300 es
+in vec2 aPosition;
+out vec2 vUv;
 void main() {
   vUv = aPosition * 0.5 + 0.5;
   gl_Position = vec4(aPosition, 0.0, 1.0);
@@ -17,7 +17,7 @@ void main() {
 // ─── Separable Gaussian blur ─────────────────────────────────────────────────
 // Call twice (horizontal then vertical) for a full 2D Gaussian blur.
 // uDirection = (1,0) for horizontal, (0,1) for vertical.
-const BLUR_FRAG = `
+const BLUR_FRAG = `#version 300 es
 precision highp float;
 uniform sampler2D uTexture;
 uniform vec2 uResolution;
@@ -26,51 +26,54 @@ uniform float uRadius;
 // Step multiplier: sample every N pixels instead of every 1.
 // Higher values cover a wider area with the same 17 taps — key for wide diffuse bloom.
 uniform float uStepMult;
-varying vec2 vUv;
+in vec2 vUv;
+out vec4 fragColor;
 void main() {
   vec2 step = uDirection / uResolution * uStepMult;
   vec4 color = vec4(0.0);
   float total = 0.0;
   for (float i = -8.0; i <= 8.0; i++) {
     float w = exp(-i * i / (2.0 * uRadius * uRadius));
-    color += texture2D(uTexture, vUv + step * i) * w;
+    color += texture(uTexture, vUv + step * i) * w;
     total += w;
   }
-  gl_FragColor = color / total;
+  fragColor = color / total;
 }`
 
 // ─── Brightness extraction ────────────────────────────────────────────────────
 // Keeps only pixels whose luminance exceeds uThreshold; everything else goes black.
 // Used before the wide bloom pass so scattering only originates from bright light sources.
-const EXTRACT_FRAG = `
+const EXTRACT_FRAG = `#version 300 es
 precision highp float;
 uniform sampler2D uTexture;
 uniform float uThreshold;
-varying vec2 vUv;
+in vec2 vUv;
+out vec4 fragColor;
 void main() {
-  vec4 c = texture2D(uTexture, vUv);
+  vec4 c = texture(uTexture, vUv);
   float lum = dot(c.rgb, vec3(0.2126, 0.7152, 0.0722));
   float bright = max(0.0, lum - uThreshold) / max(1.0 - uThreshold, 0.001);
-  gl_FragColor = vec4(c.rgb * bright, 1.0);
+  fragColor = vec4(c.rgb * bright, 1.0);
 }`
 
 // ─── Dual-bloom composite ─────────────────────────────────────────────────────
 // Combines the original render with two independent bloom layers:
 //   bloom1 — bright tight bloom (enhances perceived saturation / intensity)
 //   bloom2 — wide dim bloom  (simulates lens scattering / atmospheric glow)
-const COMPOSITE_FRAG = `
+const COMPOSITE_FRAG = `#version 300 es
 precision highp float;
 uniform sampler2D uBase;
 uniform sampler2D uBloom1;   // bright tight bloom
 uniform sampler2D uBloom2;   // wide dim bloom
 uniform float uIntensity1;
 uniform float uIntensity2;
-varying vec2 vUv;
+in vec2 vUv;
+out vec4 fragColor;
 void main() {
-  vec4 base   = texture2D(uBase,   vUv);
-  vec4 bloom1 = texture2D(uBloom1, vUv);
-  vec4 bloom2 = texture2D(uBloom2, vUv);
-  gl_FragColor = clamp(base + bloom1 * uIntensity1 + bloom2 * uIntensity2, 0.0, 1.0);
+  vec4 base   = texture(uBase,   vUv);
+  vec4 bloom1 = texture(uBloom1, vUv);
+  vec4 bloom2 = texture(uBloom2, vUv);
+  fragColor = clamp(base + bloom1 * uIntensity1 + bloom2 * uIntensity2, 0.0, 1.0);
 }`
 
 const QUAD = new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1])