From c0d19f102ab0e09532ca2aec294c335491dad206 Mon Sep 17 00:00:00 2001 From: Emile Clark-Boman Date: Sat, 31 Jan 2026 11:32:09 +1000 Subject: [PATCH 1/3] fix uTime uniform --- www/js/draw-scene.js | 4 ++-- www/shaders/segfault.glsl | 13 ++++++++----- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/www/js/draw-scene.js b/www/js/draw-scene.js index f407c6d..d325b87 100644 --- a/www/js/draw-scene.js +++ b/www/js/draw-scene.js @@ -5,7 +5,7 @@ function drawScene(gl, programInfo, buffers, time) { // NOTE: this is how width/height is taken // const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight; - + // Tell WebGL how to pull out the positions from the position // buffer into the vertexPosition attribute. setPositionAttribute(gl, buffers, programInfo); @@ -17,7 +17,7 @@ function drawScene(gl, programInfo, buffers, time) { gl.uniform1f( programInfo.uniformLocations.time, time, - ); + ); { const offset = 0; diff --git a/www/shaders/segfault.glsl b/www/shaders/segfault.glsl index 9448d14..cd0474d 100644 --- a/www/shaders/segfault.glsl +++ b/www/shaders/segfault.glsl @@ -4,8 +4,11 @@ * View this shader on shadertoy: https://www.shadertoy.com/view/t3tSRj# */ +#ifdef GL_ES precision highp float; +#endif +uniform float uTime; /* ==== Text Colouring ==== */ #define PHOSPHOR_COL vec4(1, 1., 1., 1.) #define BG_COL vec4(0.2, 0.0, 0.2, 0.) @@ -296,7 +299,7 @@ float vt220Font(vec2 p, float c) { // https://www.shadertoy.com/view/MsdGWn // float textLines(vec2 uvG) { - float wt = 5. * (iTime + 0.5*sin(iTime*1.4) + 0.2*sin(iTime*2.9)); // wobbly time + float wt = 5. * (uTime + 0.5*sin(uTime*1.4) + 0.2*sin(uTime*2.9)); // wobbly time vec2 uvGt = uvG + vec2(0., floor(wt)); float ll = rand(vec2(uvGt.y, - 1.)) * ROWCOLS.x; // line length @@ -362,12 +365,12 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) { uvNoise = ceil(uvNoise * ROWCOLS) / ROWCOLS; float val; - if (iTime < 2.0) + if (uTime < 2.0) val = textLines(uvG); - else if (iTime < 2.3) - val = rand(uvG * iTime) * 17.; + else if (uTime < 2.3) + val = rand(uvG * uTime) * 17.; else { - float noise = smokeNoise(vec3(uvNoise * noiseScale, iTime * noiseTimeScale)); + float noise = smokeNoise(vec3(uvNoise * noiseScale, uTime * noiseTimeScale)); // Noise is fed through a sigmoid function, then quantised to integer range 0-17 val = (exp(noise) / 2.71828); // increase contrast (normalised 0.0 - 1.0) val = 1.0 / val; From 9681cc76fa623c6c6c2a9db2a15d5140c1ee3690 Mon Sep 17 00:00:00 2001 From: Emile Clark-Boman Date: Sat, 31 Jan 2026 11:33:00 +1000 Subject: [PATCH 2/3] fix use gl_FragCoord --- www/shaders/segfault.glsl | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/www/shaders/segfault.glsl b/www/shaders/segfault.glsl index cd0474d..e252f18 100644 --- a/www/shaders/segfault.glsl +++ b/www/shaders/segfault.glsl @@ -9,6 +9,7 @@ precision highp float; #endif uniform float uTime; + /* ==== Text Colouring ==== */ #define PHOSPHOR_COL vec4(1, 1., 1., 1.) #define BG_COL vec4(0.2, 0.0, 0.2, 0.) @@ -355,13 +356,13 @@ float bloom(vec2 uv2) { * smoothstep(0., -SMOOTH*20., stdRS(uvC, -0.02)) * 0.5; } -void mainImage(out vec4 fragColor, in vec2 fragCoord) { - vec2 uv = vec2(fragCoord.x, iResolution.y - fragCoord.y); +void mainImage(out vec4 fragColor) { + vec2 uv = vec2(gl_FragCoord.x, iResolution.y - gl_FragCoord.y); vec2 uvT = ROWCOLS * FONT_SIZE * uv / iResolution.xy; vec2 uvG = floor(ROWCOLS * uv / iResolution.xy); - vec2 uvC = fragCoord/iResolution.xy; + vec2 uvC = gl_FragCoord/iResolution.xy; - vec2 uvNoise = fragCoord.xy / iResolution.xy; + vec2 uvNoise = gl_FragCoord.xy / iResolution.xy; uvNoise = ceil(uvNoise * ROWCOLS) / ROWCOLS; float val; From 6ffcfa692ec1ca75fd356a799be61a14ed0ccd96 Mon Sep 17 00:00:00 2001 From: Emile Clark-Boman Date: Sat, 31 Jan 2026 11:40:22 +1000 Subject: [PATCH 3/3] add uResolution uniform2f --- www/js/draw-scene.js | 6 ++++++ www/js/webgl-demo.js | 3 +-- www/shaders/segfault.glsl | 15 ++++++++------- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/www/js/draw-scene.js b/www/js/draw-scene.js index d325b87..6405916 100644 --- a/www/js/draw-scene.js +++ b/www/js/draw-scene.js @@ -18,6 +18,12 @@ function drawScene(gl, programInfo, buffers, time) { programInfo.uniformLocations.time, time, ); + // Viewport resolution in pixels + gl.uniform2f( + programInfo.uniformLocations.resolution, + gl.drawingBufferWidth, + gl.drawingBufferHeight, + ); { const offset = 0; diff --git a/www/js/webgl-demo.js b/www/js/webgl-demo.js index 9acbf13..d300cc5 100644 --- a/www/js/webgl-demo.js +++ b/www/js/webgl-demo.js @@ -121,7 +121,7 @@ function main() { vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"), }, uniformLocations: { - // resolution: context.getUniformLocation(program, "uResolution"), + resolution: context.getUniformLocation(program, "uResolution"), time: gl.getUniformLocation(shaderProgram, "uTime"), }, }; @@ -141,7 +141,6 @@ function main() { // deltaTime = time - prevTime; // prevTime = time; - console.log(time) drawScene(gl, programInfo, buffers, time); requestAnimationFrame(render); } diff --git a/www/shaders/segfault.glsl b/www/shaders/segfault.glsl index e252f18..358708b 100644 --- a/www/shaders/segfault.glsl +++ b/www/shaders/segfault.glsl @@ -9,6 +9,7 @@ precision highp float; #endif uniform float uTime; +uniform vec2 uResolution; /* ==== Text Colouring ==== */ #define PHOSPHOR_COL vec4(1, 1., 1., 1.) @@ -150,9 +151,9 @@ float roundLine(vec2 p, vec2 a, vec2 b) { b -= a + vec2(1.0,0.); p -= a; float f = length(p-clamp(dot(p,b)/dot(b,b),0.0,1.0)*b); - if (iResolution.y < 320.) // attempt to get rid of aliasing on small resolution + if (uResolution.y < 320.) // attempt to get rid of aliasing on small resolution return smoothstep(1.0, 0.9, f); - else if (iResolution.y < 720.) + else if (uResolution.y < 720.) return smoothstep(0.75, 0.5, f); else return smoothstep(1., 0., f); @@ -357,12 +358,12 @@ float bloom(vec2 uv2) { } void mainImage(out vec4 fragColor) { - vec2 uv = vec2(gl_FragCoord.x, iResolution.y - gl_FragCoord.y); - vec2 uvT = ROWCOLS * FONT_SIZE * uv / iResolution.xy; - vec2 uvG = floor(ROWCOLS * uv / iResolution.xy); - vec2 uvC = gl_FragCoord/iResolution.xy; + vec2 uv = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y); + vec2 uvT = ROWCOLS * FONT_SIZE * uv / uResolution.xy; + vec2 uvG = floor(ROWCOLS * uv / uResolution.xy); + vec2 uvC = gl_FragCoord/uResolution.xy; - vec2 uvNoise = gl_FragCoord.xy / iResolution.xy; + vec2 uvNoise = gl_FragCoord.xy / uResolution.xy; uvNoise = ceil(uvNoise * ROWCOLS) / ROWCOLS; float val;