Merge pull request #208 from ChemistAion/pr#webgl2

WebGL2 explicit mode with vertex shader support

Author: Malacath-92

demos/vertex/pass1.glsl

@@ -0,0 +1,18 @@
+// WebGL2 / GLSL ES 3.00
+// Pass 1: fragment pass with a custom vertex shader (#iVertex).
+
+#iVertex "file://pass1_iVertex.glsl"
+
+in vec2 vUV;
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord)
+{
+    vec2 uv = vUV;
+
+    // Simple gradient + rings.
+    float rings = 0.5 + 0.5 * cos(40.0 * length(uv - 0.5) - iTime * 2.0);
+    vec3 col = vec3(uv.x, uv.y, 0.0);
+    col = mix(col, vec3(1.0, 0.2, 0.1), rings * 0.35);
+
+    fragColor = vec4(col, 1.0);
+}

demos/vertex/pass1_iVertex.glsl

@@ -0,0 +1,24 @@
+// WebGL2 / GLSL ES 3.00
+// Pass 1 vertex shader for the iVertex demo.
+// Use from a fragment pass via: #iVertex "file://pass1_iVertex.glsl"
+
+out vec2 vUV;
+
+void main() {
+    const float d = 0.6;
+
+    vec2 ndc;
+    int id = gl_VertexID % 3;
+    if (id == 0) {
+        ndc = vec2(-1.0, -1.0);
+    }
+    else if (id == 1) {
+        ndc = vec2(1.0, -1.0 + d);
+    }
+    else {
+        ndc = vec2(-1.0 + d, 1.0);
+    }
+
+    vUV = ndc * 0.5 + 0.5;
+    gl_Position = vec4(ndc, 0.0, 1.0);
+}

demos/vertex/pass2.glsl

@@ -0,0 +1,22 @@
+// WebGL2 / GLSL ES 3.00
+// Pass 2: fragment pass with a custom vertex shader (#iVertex).
+
+#iVertex "file://pass2_iVertex.glsl"
+
+in vec2 vUV;
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord)
+{
+    vec2 uv = vUV;
+
+    // Stripes + checker modulation.
+    float stripes = 0.5 + 0.5 * sin((uv.x + uv.y * 0.5) * 20.0 + iTime * 1.5);
+    float checker = mod(floor(uv.x * 10.0) + floor(uv.y * 10.0), 2.0);
+
+    vec3 a = vec3(0.1, 0.25, 0.95);
+    vec3 b = vec3(1.0, 0.9, 0.2);
+    vec3 col = mix(a, b, stripes);
+    col *= mix(0.75, 1.0, checker);
+
+    fragColor = vec4(col, 1.0);
+}

demos/vertex/pass2_iVertex.glsl

@@ -0,0 +1,25 @@
+// WebGL2 / GLSL ES 3.00
+// Pass 2 vertex shader for the iVertex demo.
+// Use from a fragment pass via: #iVertex "file://pass2_iVertex.glsl"
+
+out vec2 vUV;
+
+void main()
+{
+    const float d = 0.6;
+
+    vec2 ndc;
+    int id = gl_VertexID % 3;
+    if (id == 0) {
+        ndc = vec2(-1.0, 1.0 - d);
+    }
+    else if (id == 1) {
+        ndc = vec2(1.0 - d, -1.0);
+    }
+    else {
+        ndc = vec2(1.0, 1.0);
+    }
+
+    vUV = clamp(ndc * 0.5 + 0.5, 0.0, 1.0);
+    gl_Position = vec4(ndc, 0.0, 1.0);
+}

demos/webgl2_features.glsl

@@ -0,0 +1,69 @@
+// WebGL2 feature demo (GLSL ES 3.00)
+//
+// WebGL2 corresponds to OpenGL ES 3.00.
+// WebGL2 does NOT support OpenGL ES 3.10 / 3.20 features.
+//
+// Demo flow:
+// 1) Build UV + aspect-corrected coords; compute polar r/a.
+// 2) Generate uint hash from fragCoord + time for stable jitter.
+// 3) Warp UVs with a swirl + tiny jitter.
+// 4) WebGL2-only pack/unpack roundtrip on warped UVs:
+//    packHalf2x16 -> unpackHalf2x16 -> packUnorm2x16 -> unpackUnorm2x16
+//    Result feeds hue, so it directly affects final color.
+// 5) HSV->RGB gradient + vignette => final color.
+
+uint hashU32(uint x) {
+    x ^= x >> 16;
+    x *= 0x7FEB352Du;
+    x ^= x >> 15;
+    x *= 0x846CA68Bu;
+    x ^= x >> 16;
+    return x;
+}
+
+uint hash2(uvec2 p) {
+    return hashU32(p.x ^ (p.y * 0x9E3779B9u));
+}
+
+vec3 hsv2rgb(vec3 c) {
+    vec3 p = abs(fract(c.xxx + vec3(0.0, 2.0/3.0, 1.0/3.0)) * 6.0 - 3.0);
+    vec3 rgb = clamp(p - 1.0, 0.0, 1.0);
+    return c.z * mix(vec3(1.0), rgb, c.y);
+}
+
+void main() {
+    vec2 fragCoord = gl_FragCoord.xy;
+    vec2 uv = fragCoord / iResolution.xy;
+    vec2 p = uv * 2.0 - 1.0;
+    p.x *= iResolution.x / iResolution.y;
+
+    float t = iTime * 0.25;
+    float r = length(p);
+    float a = atan(p.y, p.x);
+
+    // WebGL2 uint ops for subtle jitter.
+    uint seed = hash2(uvec2(fragCoord) + uvec2(uint(iTime * 60.0), 123u));
+    float jitter = float(seed & 1023u) / 1023.0;
+
+    // Warp the UVs a bit for a smooth, swirling gradient.
+    vec2 warp = vec2(cos(a * 3.0 + t), sin(a * 2.0 - t)) * (0.05 - 0.04 * r);
+    vec2 warped = uv + warp + (jitter - 0.5) * 0.003;
+
+    // WebGL2 pack/unpack: half-float roundtrip.
+    uint packedHalf = packHalf2x16(warped);
+    vec2 unpackedHalf = unpackHalf2x16(packedHalf);
+
+    // WebGL2 pack/unpack: normalized roundtrip.
+    uint packedNorm = packUnorm2x16(unpackedHalf);
+    vec2 unpackedNorm = unpackUnorm2x16(packedNorm);
+
+    float hue = fract(a / 6.2831853 + t + unpackedNorm.x * 0.15);
+    float sat = 0.7;
+    float val = 0.9 - 0.45 * smoothstep(0.15, 1.0, r);
+    vec3 col = hsv2rgb(vec3(hue, sat, val));
+
+    // A soft vignette for contrast.
+    col *= 0.25 + 0.75 * smoothstep(1.2, 0.2, r);
+
+    gl_FragColor = vec4(col, 1.0);
+}

demos/webgl2_iVertexDemo.glsl

@@ -0,0 +1,19 @@
+// WebGL2 / GLSL ES 3.00 demo
+//
+// Uses #iVertex in two offscreen passes (iChannel1/iChannel2).
+// iChannel0 is a simple WebGL2-only background shader.
+//
+// Note: Set `shader-toy.glslVersion` to "WebGL2".
+
+#iChannel0 "file://webgl2_features.glsl"
+#iChannel1 "file://vertex/pass1.glsl"
+#iChannel2 "file://vertex/pass2.glsl"
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+	vec2 uv = fragCoord.xy / iResolution.xy;
+	vec3 bg = texture2D(iChannel0, uv).rgb;
+	vec3 p1 = texture2D(iChannel1, uv).rgb;
+	vec3 p2 = texture2D(iChannel2, uv).rgb;
+	vec3 col = bg + p1 + p2;
+	fragColor = vec4(col, 1.0);
+}

package.json

@@ -37,6 +37,15 @@
                     ],
                     "description": "Force the rendering into a specific aspect ratio. Set either to zero or negative to ignore."
                 },
+                "shader-toy.webglVersion": {
+                    "type": "string",
+                    "default": "Default",
+                    "enum": [
+                        "Default",
+                        "WebGL2"
+                    ],
+                    "description": "Select the WebGL mode. Default prefers WebGL2 but falls back to WebGL1. WebGL2 uses GLSL 300 ES and enables #iVertex."
+                },
                 "shader-toy.showCompileErrorsAsDiagnostics": {
                     "type": "boolean",
                     "default": true,

resources/webview/gl_context.js

@@ -4,6 +4,36 @@
     const root = global.ShaderToy = global.ShaderToy || {};
     root.gl = root.gl || {};
 
-    // Intentionally empty for now.
-    // Future home for WebGL1/WebGL2 context selection + capability probing.
+    root.gl.getContext = function (canvas, glslUseVersion3) {
+        let gl = null;
+        if (glslUseVersion3) {
+            gl = canvas.getContext('webgl2');
+        }
+        else {
+            gl = canvas.getContext('webgl2');
+            if (gl == null) {
+                gl = canvas.getContext('webgl', { antialias: true, preserveDrawingBuffer: true });
+            }
+        }
+
+        const isWebGL2 = gl != null && (typeof global.WebGL2RenderingContext !== 'undefined') && (gl instanceof global.WebGL2RenderingContext);
+        if (gl == null) {
+            const msg = glslUseVersion3
+                ? 'WebGL2 is required for shader-toy.webglVersion = "WebGL2", but it is not available in this WebView.'
+                : 'WebGL is not available in this WebView (cannot create webgl2/webgl context).';
+            try {
+                const messageElement = global.document && global.document.getElementById
+                    ? global.document.getElementById('message')
+                    : undefined;
+                if (messageElement) {
+                    messageElement.innerText = msg;
+                }
+            } catch {
+                // ignore
+            }
+            throw new Error(msg);
+        }
+
+        return { gl, isWebGL2 };
+    };
 })(typeof window !== 'undefined' ? window : globalThis);

resources/webview/shader_compile.js

@@ -19,6 +19,46 @@
         return (source || '').replace(new RegExp(`#line\\s+(\\d+)\\s+${SELF_SOURCE_ID}`, 'g'), '#line $1 0');
     };
 
+    root.shaderCompile.prepareFragmentShader = function (source, glslUseVersion3) {
+        if (glslUseVersion3) {
+            return (
+                '#ifdef gl_FragColor\n' +
+                '#define GLSL_FRAGCOLOR gl_FragColor\n' +
+                '#else\n' +
+                'layout(location = 0) out highp vec4 layoutFragColor;\n' +
+                '#define gl_FragColor layoutFragColor\n' +
+                '#define GLSL_FRAGCOLOR layoutFragColor\n' +
+                '#endif\n' +
+                '#define texture2D texture\n' +
+                '#define textureCube texture\n' +
+                '\n' + (source || '')
+            );
+        }
+        return (
+            '#define GLSL_FRAGCOLOR gl_FragColor\n' +
+            '\n' + (source || '')
+        );
+    };
+
+    root.shaderCompile.prepareVertexShader = function (source, glslUseVersion3) {
+        if (!glslUseVersion3) {
+            throw new Error('Custom vertex shaders (#iVertex) require shader-toy.webglVersion = "WebGL2".');
+        }
+
+        return (
+            '#define texture2D texture\n' +
+            '#define textureCube texture\n' +
+            '\n' + (source || '')
+        );
+    };
+
+    const getCompileHeader = (glslUseVersion3) => {
+        // Keep header line count stable (2 lines) for easier line-offset mapping.
+        return glslUseVersion3
+            ? '#version 300 es\nprecision highp float;\n'
+            : '// shader-toy\nprecision highp float;\n';
+    };
+
     root.shaderCompile.compileFragShader = function (gl, fsSource) {
         const fs = gl.createShader(gl.FRAGMENT_SHADER);
         const normalized = root.shaderCompile.normalizeLineDirectives(fsSource);
@@ -31,4 +71,34 @@
         }
         return true;
     };
+
+    root.shaderCompile.compileIncludeFragment = function (gl, fsSource, glslUseVersion3) {
+        const fs = gl.createShader(gl.FRAGMENT_SHADER);
+        const normalized = root.shaderCompile.normalizeLineDirectives(fsSource);
+        const header = getCompileHeader(glslUseVersion3);
+        const wrapped = `${header}${normalized || ''}\nvoid main() {}\n`;
+        gl.shaderSource(fs, wrapped);
+        gl.compileShader(fs);
+        if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
+            const fragmentLog = gl.getShaderInfoLog(fs);
+            console.error('THREE.WebGLProgram: shader error: ', gl.getError(), 'gl.COMPILE_STATUS', null, null, null, null, fragmentLog);
+            return false;
+        }
+        return true;
+    };
+
+    root.shaderCompile.compileVertexShader = function (gl, vsSource, glslUseVersion3) {
+        const vs = gl.createShader(gl.VERTEX_SHADER);
+        const normalized = root.shaderCompile.normalizeLineDirectives(vsSource);
+        const header = getCompileHeader(glslUseVersion3);
+        const wrapped = `${header}${normalized || ''}`;
+        gl.shaderSource(vs, wrapped);
+        gl.compileShader(vs);
+        if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
+            const vertexLog = gl.getShaderInfoLog(vs);
+            console.error('THREE.WebGLProgram: shader error: ', gl.getError(), 'gl.COMPILE_STATUS', null, null, null, null, vertexLog);
+            return false;
+        }
+        return true;
+    };
 })(typeof window !== 'undefined' ? window : globalThis);