fix: / truncating to an integer divide on most desktop GPUs

JavaScript has no integer division — `a / b` is always fractional — but
getType() reported `/` as the left operand's type unless
fixIntegerDivisionAccuracy was set, and astBinaryExpression then emitted
a GLSL integer divide. `this.thread.x / 64` returned 0 for every thread,
and `this.color(this.thread.x / 64, ...)` did not compile at all:
'color' : no matching overloaded function found.

The flag is derived from GPU features, so the same kernel produced
different images on different hardware. Found while probing visual
rendering on BrowserStack: Chrome on Windows rendered a Mandelbrot with
a mean pixel value of 127.5 against 142.93 everywhere else — not GPU
noise, a wrong image.

`/` now always casts both operands to float; only the divWithIntCheck
accuracy wrapper stays conditional. Math.floor(a / b) and (a / b) | 0
remain the ways to ask for truncation, exactly as in JS, and both are
covered by the new tests.

This also fixes two silent narrowings the pinned GLSL had encoded:
`intValue / 1.1` emitted `user_left/1`, truncating the literal, and
`intValue / input[x]` cast the texture read down to int. Those
expectations are updated to the float forms.

Verified on 9 BrowserStack targets; mac node suite unchanged at its 3
known Infinity failures.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: fuzzie360

dist/gpu-browser-core.js

@@ -5,7 +5,7 @@
  * GPU Accelerated JavaScript
  *
  * @version 2.19.8
- * @date Mon Jul 27 2026 00:26:46 GMT+0800 (Singapore Standard Time)
+ * @date Mon Jul 27 2026 01:10:46 GMT+0800 (Singapore Standard Time)
  *
  * @license MIT
  * The MIT License
@@ -2637,11 +2637,7 @@ class FunctionNode {
           case '%':
             return 'Number';
           case '/':
-            if (this.fixIntegerDivisionAccuracy) {
-              return 'Number';
-            } else {
-              break;
-            }
+            return 'Number';
           case '>':
           case '<':
             return 'Boolean';
@@ -7168,8 +7164,9 @@ class WebGLFunctionNode extends FunctionNode {
       return retArr;
     }
 
-    if (this.fixIntegerDivisionAccuracy && ast.operator === '/') {
-      retArr.push('divWithIntCheck(');
+    if (ast.operator === '/') {
+      const wrap = this.fixIntegerDivisionAccuracy;
+      retArr.push(wrap ? 'divWithIntCheck(' : '(');
       this.pushState('building-float');
       switch (this.getType(ast.left)) {
         case 'Integer':
@@ -7181,7 +7178,7 @@ class WebGLFunctionNode extends FunctionNode {
         default:
           this.astGeneric(ast.left, retArr);
       }
-      retArr.push(', ');
+      retArr.push(wrap ? ', ' : '/');
       switch (this.getType(ast.right)) {
         case 'Integer':
           this.castValueToFloat(ast.right, retArr);

dist/gpu-browser-core.min.js

@@ -5,7 +5,7 @@
  * GPU Accelerated JavaScript
  *
  * @version 2.19.8
- * @date Mon Jul 27 2026 00:26:46 GMT+0800 (Singapore Standard Time)
+ * @date Mon Jul 27 2026 01:10:46 GMT+0800 (Singapore Standard Time)
  *
  * @license MIT
  * The MIT License
@@ -8091,11 +8091,7 @@ class FunctionNode {
           case '%':
             return 'Number';
           case '/':
-            if (this.fixIntegerDivisionAccuracy) {
-              return 'Number';
-            } else {
-              break;
-            }
+            return 'Number';
           case '>':
           case '<':
             return 'Boolean';
@@ -12622,8 +12618,9 @@ class WebGLFunctionNode extends FunctionNode {
       return retArr;
     }
 
-    if (this.fixIntegerDivisionAccuracy && ast.operator === '/') {
-      retArr.push('divWithIntCheck(');
+    if (ast.operator === '/') {
+      const wrap = this.fixIntegerDivisionAccuracy;
+      retArr.push(wrap ? 'divWithIntCheck(' : '(');
       this.pushState('building-float');
       switch (this.getType(ast.left)) {
         case 'Integer':
@@ -12635,7 +12632,7 @@ class WebGLFunctionNode extends FunctionNode {
         default:
           this.astGeneric(ast.left, retArr);
       }
-      retArr.push(', ');
+      retArr.push(wrap ? ', ' : '/');
       switch (this.getType(ast.right)) {
         case 'Integer':
           this.castValueToFloat(ast.right, retArr);

dist/gpu-browser.js

@@ -491,11 +491,13 @@ class FunctionNode {
             // float/int comparison that GLSL refuses to compile.
             return 'Number';
           case '/':
-            if (this.fixIntegerDivisionAccuracy) {
-              return 'Number';
-            } else {
-              break;
-            }
+            // JavaScript has no integer division — `a / b` is always
+            // fractional — so reporting Integer here made GLSL emit an integer
+            // divide and silently truncate. `this.thread.x / 64` came out 0 on
+            // every GPU whose integer division is already accurate, which is
+            // most desktop hardware. Math.floor(a / b) remains the way to ask
+            // for truncation, exactly as in JS.
+            return 'Number';
           case '>':
           case '<':
             return 'Boolean';

dist/gpu-browser.min.js

@@ -256,8 +256,13 @@ class WebGLFunctionNode extends FunctionNode {
       return retArr;
     }
 
-    if (this.fixIntegerDivisionAccuracy && ast.operator === '/') {
-      retArr.push('divWithIntCheck(');
+    // `/` is always fractional in JavaScript, so both operands go to float
+    // whatever their own types are — otherwise GLSL emits an integer divide and
+    // truncates, and `this.thread.x / 64` comes out 0. Only the accuracy
+    // wrapper is conditional; the casting is not.
+    if (ast.operator === '/') {
+      const wrap = this.fixIntegerDivisionAccuracy;
+      retArr.push(wrap ? 'divWithIntCheck(' : '(');
       this.pushState('building-float');
       switch (this.getType(ast.left)) {
         case 'Integer':
@@ -269,7 +274,7 @@ class WebGLFunctionNode extends FunctionNode {
         default:
           this.astGeneric(ast.left, retArr);
       }
-      retArr.push(', ');
+      retArr.push(wrap ? ', ' : '/');
       switch (this.getType(ast.right)) {
         case 'Integer':
           this.castValueToFloat(ast.right, retArr);

src/backend/function-node.js

@@ -121,6 +121,7 @@
 <script type="module" src="features/infinity.js"></script>
 <script type="module" src="features/inject-native.js"></script>
 <script type="module" src="features/input.js"></script>
+<script type="module" src="features/integer-division.js"></script>
 <script type="module" src="features/internally-defined-matrices.js"></script>
 <script type="module" src="features/json.js"></script>
 <script type="module" src="features/legacy-encoder.js"></script>

src/backend/web-gl/function-node.js

@@ -189,6 +189,31 @@ <h1>GPU.JS smoke test</h1>
         assertClose(kernel()[0], 5, 'loop total');
       });
 
+      test(label('thread index divided by a literal'), function (track) {
+        const gpu = track(new GPU({ mode: mode }));
+        // `/` is fractional in JS; an integer divide here truncated to 0 and
+        // rendered a flat image wherever fixIntegerDivisionAccuracy is off
+        const kernel = gpu.createKernel(function () {
+          return this.thread.x / 4;
+        }, { output: [4] });
+        const out = kernel();
+        [0, 0.25, 0.5, 0.75].forEach(function (expected, i) {
+          assertClose(out[i], expected, 'index ' + i, 0.01);
+        });
+      });
+
+      test(label('graphical gradient'), function (track) {
+        const gpu = track(new GPU({ mode: mode }));
+        const kernel = gpu.createKernel(function () {
+          this.color(this.thread.x / 4, 0, 0, 1);
+        }, { output: [4, 4], graphical: true });
+        kernel();
+        const pixels = kernel.getPixels();
+        var reds = [pixels[0], pixels[4], pixels[8], pixels[12]];
+        assert(reds[3] > reds[0],
+          'expected red to climb across x, got ' + JSON.stringify(reds));
+      });
+
       test(label('signed right shift'), function (track) {
         const gpu = track(new GPU({ mode: mode }));
         // emulated in GLSL for both webgl and webgl2; used to use an

test/all.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>GPU.JS : visual rendering probe</title>
+  <style>
+    body { font: 13px -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; padding: 8px; }
+    canvas { border: 1px solid #ccc; image-rendering: pixelated; }
+    .scene { display: inline-block; margin: 4px; }
+  </style>
+  <script src="../../dist/gpu-browser.js"></script>
+</head>
+<body>
+<div id="scenes"></div>
+<script>
+(function () {
+  'use strict';
+
+  const results = window.__gpujsVisual = { done: false, error: null, env: {}, scenes: [] };
+
+  // FNV-1a over the raw pixel bytes. Exact-match across devices is the strict
+  // bar; the per-channel stats below are what a tolerant comparison would use.
+  function hash(bytes) {
+    let h = 0x811c9dc5;
+    for (let i = 0; i < bytes.length; i++) {
+      h ^= bytes[i];
+      h = (h * 0x01000193) >>> 0;
+    }
+    return h.toString(16).padStart(8, '0');
+  }
+
+  function summarise(pixels) {
+    let sum = 0;
+    let nonZero = 0;
+    for (let i = 0; i < pixels.length; i++) {
+      sum += pixels[i];
+      if (pixels[i] !== 0) nonZero++;
+    }
+    return { mean: +(sum / pixels.length).toFixed(4), nonZero };
+  }
+
+  const SIZE = 64;
+
+  const scenes = {
+    // flat fill: any device disagreeing here has a colour-management problem
+    flat: function () {
+      return function () {
+        this.color(0.2, 0.6, 0.9, 1);
+      };
+    },
+    // linear gradient: exercises thread indexing and float->byte quantisation
+    gradient: function () {
+      return function () {
+        this.color(this.thread.x / 64, this.thread.y / 64, 0.5, 1);
+      };
+    },
+    // iterative float math: the scene most likely to diverge between GPUs
+    mandelbrot: function () {
+      return function () {
+        const cx = (this.thread.x / 64) * 3.0 - 2.0;
+        const cy = (this.thread.y / 64) * 2.4 - 1.2;
+        let zx = 0.0;
+        let zy = 0.0;
+        let iter = 0.0;
+        for (let i = 0; i < 48; i++) {
+          if (zx * zx + zy * zy < 4.0) {
+            const t = zx * zx - zy * zy + cx;
+            zy = 2.0 * zx * zy + cy;
+            zx = t;
+            iter = iter + 1.0;
+          }
+        }
+        const shade = iter / 48.0;
+        this.color(shade, shade * shade, 1.0 - shade, 1);
+      };
+    }
+  };
+
+  try {
+    results.env = {
+      userAgent: navigator.userAgent,
+      devicePixelRatio: window.devicePixelRatio,
+      isWebGLSupported: GPU.isWebGLSupported,
+      isWebGL2Supported: GPU.isWebGL2Supported
+    };
+
+    const modes = [];
+    if (GPU.isWebGLSupported) modes.push('webgl');
+    if (GPU.isWebGL2Supported) modes.push('webgl2');
+    modes.push('cpu');
+
+    modes.forEach(function (mode) {
+      Object.keys(scenes).forEach(function (name) {
+        const entry = { mode: mode, scene: name };
+        let gpu = null;
+        try {
+          gpu = new GPU({ mode: mode });
+          const kernel = gpu.createKernel(scenes[name](), {
+            output: [SIZE, SIZE],
+            graphical: true
+          });
+          kernel();
+
+          const pixels = kernel.getPixels();
+          entry.pixelHash = hash(pixels);
+          entry.stats = summarise(pixels);
+          entry.corners = [
+            Array.from(pixels.slice(0, 4)),
+            Array.from(pixels.slice((SIZE - 1) * 4, SIZE * 4)),
+            Array.from(pixels.slice(pixels.length - 4))
+          ];
+
+          // does the canvas itself read back, independently of getPixels?
+          const canvas = kernel.canvas;
+          if (canvas) {
+            const wrap = document.createElement('div');
+            wrap.className = 'scene';
+            wrap.appendChild(canvas);
+            document.getElementById('scenes').appendChild(wrap);
+            try {
+              const url = canvas.toDataURL('image/png');
+              entry.dataUrlLength = url.length;
+              entry.dataUrlHash = hash(url.slice(22));
+            } catch (e) {
+              entry.dataUrlError = e.message;
+            }
+          }
+        } catch (e) {
+          entry.error = (e && e.message) || String(e);
+        } finally {
+          if (gpu) { try { gpu.destroy(); } catch (e) {} }
+        }
+        results.scenes.push(entry);
+      });
+    });
+  } catch (e) {
+    results.error = (e && e.stack) || String(e);
+  }
+
+  results.done = true;
+})();
+</script>
+</body>
+</html>