add uResolution uniform2f

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,13 @@ function drawScene(gl, programInfo, buffers, time) {
   gl.uniform1f(
     programInfo.uniformLocations.time,
     time,
-  );  
+  );
+  // Viewport resolution in pixels
+  gl.uniform2f(
+    programInfo.uniformLocations.resolution,
+    gl.drawingBufferWidth,
+    gl.drawingBufferHeight,
+  );
 
   {
     const offset = 0;

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);
   }

www/shaders/segfault.glsl

@@ -4,7 +4,12 @@
  * View this shader on shadertoy: https://www.shadertoy.com/view/t3tSRj#
  */
 
+#ifdef GL_ES
 precision highp float;
+#endif
+
+uniform float uTime;
+uniform vec2 uResolution;
 
 /* ==== Text Colouring  ==== */
 #define PHOSPHOR_COL vec4(1, 1., 1., 1.)
@@ -146,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);    
@@ -296,7 +301,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
     
@@ -352,22 +357,22 @@ 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);
-   	vec2 uvT = ROWCOLS * FONT_SIZE * uv / iResolution.xy;
-   	vec2 uvG = floor(ROWCOLS * uv / iResolution.xy);
-    vec2 uvC = fragCoord/iResolution.xy;
+void mainImage(out vec4 fragColor) {       
+   	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 = fragCoord.xy / iResolution.xy;
+    vec2 uvNoise = gl_FragCoord.xy / uResolution.xy;
     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;