onejs-sl 0.9.1 → 0.9.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.9.2
+
+A fractional `tex2Dlod` level now weighs each level's colour by its alpha, so a transparent level no longer darkens the other. Every program keeps its hash; a host's generated shaders take the new text on their next build.
+
+- A fractional `tex2Dlod` level blends the two levels premultiplied, so a transparent level fades the other out instead of pulling it toward black
+- Opaque textures draw as they did, and so does colour under zero alpha
+- Every program keeps its hash; one with a fractional `tex2Dlod` compiles to new shader text, which a host's generated shaders pick up on their next build
+- The goldens anchor `lod-alpha.sl` to arithmetic, through a texture with alpha bound to a slot declared `edge`
+
 ## 0.9.1
 
 `?:` now takes one side instead of blending the two, so a huge, infinite or NaN value on the side not taken no longer spoils the result. Every program keeps its hash; a host's generated shaders take the new text on their next build.

package/README.md

@@ -73,7 +73,10 @@ filtering and wrapping left to the host, which OneJS's hosts take from the
 bound texture's own settings. Between mip levels the body decides instead: a
 fractional `tex2Dlod` level blends the two levels either side by the fraction,
 whatever the texture's filter mode, since the body asks for both whole levels
-and blends them itself. A level it can prove whole (a whole constant, a
+and blends them itself. The blend weighs each level's colour by its alpha, as
+trilinear filtering of premultiplied texels does, so a level that reads
+transparent fades the other out instead of darkening it; where both levels are
+opaque, or both transparent, it is the plain blend. A level it can prove whole (a whole constant, a
 `floor`, an int) costs one sample, and a level past the smallest reads the
 smallest. A texture whose program sets its own sampler (`[Wrap(Repeat)]`,
 `[Filter(Point)]`) goes to `sampleWith` instead, with both halves filled in,
@@ -162,7 +165,10 @@ over every pixel, and the anchors must match arithmetic, not each other:
 stores as written), `texture.sl` (a texture's orientation and sRGB decode),
 `lod.sl` (each mip level `tex2Dlod` reads, the texture's smaller levels being
 solid colours), `lod-frac.sl` (a fractional level blends the two levels
-either side, on a texture sampled nearest between levels), `wrap-repeat.sl`
+either side, on a texture sampled nearest between levels), `lod-alpha.sl` (the
+same blend weighs each level's colour by its alpha, through a second texture,
+bound to a slot declared `edge`, whose levels are transparent, opaque and half
+transparent), `wrap-repeat.sl`
 and `wrap-mirror.sl` (a program's own wrap over a texture the host binds
 clamped, the filter's footprint wrapping with it), `filter-point.sl` (its own
 point filter, to the byte, through `tex2D` and `tex2Dlod`) and `fetch.sl`

package/goldens/goldens.json

@@ -1,6 +1,6 @@
 {
  "generatedBy": "onejs-sl goldens/run.mjs",
- "package": "0.9.1",
+ "package": "0.9.2",
  "ir": 6,
  "target": "rgba8unorm-srgb: straight alpha, 8 bit, sRGB encoded, the stored bytes of a Linear OneJS game's element",
  "size": [
@@ -19,7 +19,7 @@
  ],
  "historyExact": "a stepped fixture marked historyExact has to hold its history samples to the bit",
  "samples": "a 16 x 16 grid at x = 2 + 4i, y = 2 + 4j, rows from the top, i fastest, RGBA each",
- "texture": "every sampled slot: 8 x 8, rgba8 sRGB, linear filter, clamp to edge; texel (x, y) with y from the top = (32x + 16, 32y + 16, (x + y) even ? 200 : 40, 255); uv (0, 0) is the image's bottom left. Mip levels 1 to 3 (4 x 4, 2 x 2, 1 x 1) are each one colour, (224, 64, 32, 255), (32, 224, 64, 255), (64, 32, 224, 255), sampled nearest between levels",
+ "texture": "every sampled slot: 8 x 8, rgba8 sRGB, linear filter, clamp to edge; texel (x, y) with y from the top = (32x + 16, 32y + 16, (x + y) even ? 200 : 40, 255); uv (0, 0) is the image's bottom left. Mip levels 1 to 3 (4 x 4, 2 x 2, 1 x 1) are each one colour, (224, 64, 32, 255), (32, 224, 64, 255), (64, 32, 224, 255), sampled nearest between levels. A slot declared edge gets instead an 8 x 8 sampled the same way whose levels 0 to 3 are each one colour with straight alpha, (0, 0, 0, 0), (224, 64, 32, 255), (32, 224, 64, 128), (255, 255, 255, 0)",
  "uniforms": "each program's declared defaults; a colour uniform's default is sRGB as written",
  "drawnOn": {
   "webgpu": "apple metal-3",
@@ -215,6 +215,14 @@
     "1.25": [0,255,0,255,0,255,0,255,255,0,0,255,255,0,0,255,0,0,0,255,0,0,0,255,255,255,0,255,255,255,0,255,0,0,0,255,0,0,0,255,255,255,0,255,255,255,0,255,0,0,0,255,0,0,0,255,255,0,0,255,255,0,0,255,0,255,0,255,0,255,0,255,255,0,0,255,255,0,0,255,0,0,0,255,0,0,0,255,255,255,0,255,255,255,0,255,0,0,0,255,0,0,0,255,255,255,0,255,255,255,0,255,0,0,0,255,0,0,0,255,255,0,0,255,255,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,255,255,0,255,255,255,0,255,255,0,0,255,255,0,0,255,0,255,0,255,0,255,0,255,255,255,0,255,255,255,0,255,255,0,0,255,255,0,0,255,255,0,0,255,255,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,255,255,0,255,255,255,0,255,255,0,0,255,255,0,0,255,0,255,0,255,0,255,0,255,255,255,0,255,255,255,0,255,255,0,0,255,255,0,0,255,255,0,0,255,255,0,0,255,255,255,255,255,255,255,255,255,255,255,0,255,255,255,0,255,0,255,0,255,0,255,0,255,255,255,0,255,255,255,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,255,0,255,0,255,0,255,255,255,0,255,255,255,0,255,255,255,255,255,255,255,255,255,255,255,0,255,255,255,0,255,0,255,0,255,0,255,0,255,255,255,0,255,255,255,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,255,0,255,0,255,0,255,255,255,0,255,255,255,0,255,255,0,0,255,255,0,0,255,255,0,0,255,255,0,0,255,255,255,255,255,255,255,255,255,255,0,255,255,255,0,255,255,255,0,0,255,255,0,0,255,255,0,255,255,255,0,255,255,255,255,0,255,255,255,0,255,255,0,0,255,255,0,0,255,255,0,0,255,255,0,0,255,255,0,0,255,255,0,0,255,255,255,255,255,255,255,255,255,255,0,255,255,255,0,255,255,255,0,0,255,255,0,0,255,255,0,255,255,255,0,255,255,255,255,0,255,255,255,0,255,255,0,0,255,255,0,0,255,255,0,255,255,255,0,255,255,255,0,255,255,255,0,255,255,255,0,255,255,255,0,255,255,255,255,255,255,255,255,255,255,255,0,255,255,255,0,255,255,255,0,255,255,255,0,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,0,255,255,255,0,255,255,255,0,255,255,255,0,255,255,255,0,255,255,255,0,255,255,255,255,255,255,255,255,255,255,255,0,255,255,255,0,255,255,255,0,255,255,255,0,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,0,0,255,255,0,0,255,255,255,0,255,255,255,0,255,255,0,255,255,255,0,255,255,255,0,255,255,255,0,255,255,255,0,255,255,255,0,255,255,255,255,255,255,255,255,255,255,255,0,0,255,255,0,0,255,255,255,255,255,255,255,255,255,255,0,0,255,255,0,0,255,255,255,0,255,255,255,0,255,255,0,255,255,255,0,255,255,255,0,255,255,255,0,255,255,255,0,255,255,255,0,255,255,255,255,255,255,255,255,255,255,255,0,0,255,255,0,0,255,255,255,255,255,255,255,255,255,255,0,255,255,255,0,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,0,255,255,255,0,255,255,0,255,255,255,0,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,0,255,255,255,0,255,255,255,0,255,255,255,0,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,0,255,255,255,0,255,255,0,255,255,255,0,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,0,255,255,255,0,255,255,255,0,255,0,255,0,255,0,255,255,255,255,255,255,255,255,255,0,255,0,255,0,255,0,255,255,0,0,255,255,0,0,255,0,0,255,255,0,0,255,255,255,255,0,255,255,255,0,255,0,255,255,255,0,255,255,255,255,255,255,255,255,255,255,255,0,255,0,255,0,255,0,255,255,255,255,255,255,255,255,255,0,255,0,255,0,255,0,255,255,0,0,255,255,0,0,255,0,0,255,255,0,0,255,255,255,255,0,255,255,255,0,255,0,255,255,255,0,255,255,255,255,255,255,255,255,255,255,255]
    }
   },
+  "lod-alpha.sl": {
+   "hash": "aaf5be77",
+   "source": "// An anchor for a fractional tex2Dlod level on a texture with alpha: the level\n// runs from 0 at the left edge to 3.5 at the right, through the goldens' edge\n// texture, whose levels are transparent black, opaque, half transparent and\n// transparent white. A fraction weighs each level's colour by its alpha, so a\n// transparent level fades the other out instead of pulling it toward the\n// colour it stores.\ntexture2D edge;\nfloat4 main() { return tex2Dlod(edge, uv, uv.x * 3.5); }\n",
+   "samples": {
+    "0": [224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0],
+    "1.25": [224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0,224,64,32,35,224,64,32,91,224,64,32,146,224,64,32,202,223,67,32,254,211,105,38,226,193,138,44,198,165,170,51,170,112,204,59,142,32,224,64,115,32,224,64,87,32,224,64,59,32,224,64,31,32,224,64,3,255,255,255,0,255,255,255,0]
+   }
+  },
   "lod-frac.sl": {
    "hash": "fd3f2852",
    "source": "// An anchor for a fractional tex2Dlod level: the level runs from 0 at the left\n// edge to 4.5 at the right. A fraction blends the level below and the level\n// above by that fraction, whatever the texture's own filter between levels,\n// and past level 3, the smallest, both are level 3.\ntexture2D t;\nfloat4 main() { return tex2Dlod(t, uv, uv.x * 4.5); }\n",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onejs-sl",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "The OneJS shader language: a small typed language for per pixel programs, compiled to a portable IR and emitted as HLSL, WGSL or GLSL ES",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/body.ts

@@ -48,7 +48,8 @@ export interface BodyTarget {
      * do with the GPU's sampler:
      *
      * - **Straight alpha**, not premultiplied, in and out: the body never
-     *   multiplies or divides by alpha, and its result is straight too.
+     *   multiplies or divides by alpha, except to blend two mip levels
+     *   (`sampleLevel`), and its result is straight too.
      * - **In the space `colour` names.** With `linear`, rgb is linear light, so
      *   an sRGB texture is decoded before it is filtered, as an sRGB sampler
      *   does; with `gamma`, rgb is as stored.
@@ -68,7 +69,11 @@ export interface BodyTarget {
      * asks for whole levels, or for a level it cannot prove whole, floored and
      * floored plus one, which it blends by the fraction itself; so a fraction
      * draws the same whatever the texture's filter between levels, and a host
-     * has no blending to do. A level past the smallest reads the smallest.
+     * has no blending to do. The blend weighs each level's colour by its alpha,
+     * as trilinear filtering of premultiplied texels does, and divides alpha
+     * back out, so a level that reads transparent adds no colour; where both
+     * read transparent it is the plain blend. A level past the smallest reads
+     * the smallest.
      * Otherwise the same contract as `sample`. `tex2Dlod` in a program; HLSL's
      * `tex2Dlod(s, float4(uv, 0, lod))` and Metal's `sample(s, uv, level(lod))`.
      */
@@ -198,6 +203,8 @@ export function emitBody(p: Program, target: BodyTarget): Body {
     const textures = new Set<number>()
     const helpers = new Set<string>()
     const helper = (fn: string) => { helpers.add(fn); return fn }
+    /** The statements a node prints ahead of its own line (`printBody`'s `before`). */
+    const ahead = new Map<NodeRef, string[]>()
     /** A node at width `w`: a scalar repeated into a constructor, since HLSL refuses float3(x) and Metal x.xxx. */
     /** A constant node's value, or null for anything computed. */
     const constantOf = (ref: number): number[] | null => {
@@ -404,10 +411,22 @@ export function emitBody(p: Program, target: BodyTarget): Body {
                 // A fraction blends the level below and the level above,
                 // whatever the texture's filter between levels, as the web
                 // emitters do (`isWhole`). Past the smallest level both read the
-                // smallest, as a whole level past it does.
+                // smallest, as a whole level past it does. The blend weighs
+                // each level's colour by its alpha, as trilinear filtering of
+                // premultiplied texels does: a level that reads transparent
+                // adds no colour, rather than pulling the other toward black.
+                // Where both are opaque it is the plain lerp, and where both
+                // are transparent too, so colour under zero alpha survives.
                 if (isWhole(p.nodes, n.args[1]!)) return level(slot, a[0]!, a[1]!)
                 const below = `floor(${a[1]})`
-                return `lerp(${level(slot, a[0]!, below)}, ${level(slot, a[0]!, `${below} + 1.0`)}, frac(${a[1]}))`
+                const [lo, hi, mixed] = ["lo", "hi", "pm"].map((s) => `${name(ref)}_${s}`)
+                const pm = (v: string) => `float4(${v}.rgb * ${v}.a, ${v}.a)`
+                ahead.set(ref, [
+                    `float4 ${lo} = ${level(slot, a[0]!, below)};`,
+                    `float4 ${hi} = ${level(slot, a[0]!, `${below} + 1.0`)};`,
+                    `float4 ${mixed} = lerp(${pm(lo)}, ${pm(hi)}, frac(${a[1]}));`,
+                ])
+                return `float4(${mixed}.a > 0.0 ? ${mixed}.rgb / ${mixed}.a : lerp(${lo}.rgb, ${hi}.rgb, frac(${a[1]})), ${mixed}.a)`
             }
             case SLOP.TEXTURE_SIZE: {
                 const slot = Math.round(imm[0] ?? 0)
@@ -449,7 +468,7 @@ export function emitBody(p: Program, target: BodyTarget): Body {
         loopOpen: `${target.loopAttribute === undefined ? "" : target.loopAttribute + " "}for (;;) {`,
         breakUnless: (c, turns, max) => `if (!(${c}) || ${turns} >= ${max}) break;`,
     }
-    const lines = printBody(p, shape, syntax, expr, indent)
+    const lines = printBody(p, shape, syntax, expr, indent, (ref) => ahead.get(ref) ?? [])
     lines.push(target.result === undefined
         ? `${indent}return ${name(p.result)};`
         : `${indent}${target.result} = ${name(p.result)};`)

package/src/structure.ts

@@ -224,8 +224,15 @@ export const local = (ref: NodeRef): string => `n${ref}`
  * Prints the body: every placed node in its region, each `if` and `loop` with
  * its regions inside it. `expr` prints a value node's expression; the result is
  * `local(p.result)` for the caller to return.
+ *
+ * `before` gives the statements a value node needs ahead of its own line,
+ * asked after `expr` has printed that node: locals of its own, named after
+ * `local(ref)`, for an expression that would otherwise repeat a texture read.
  */
-export function printBody(p: Program, s: Structure, syntax: Syntax, expr: (ref: NodeRef) => string, indent: string): string[] {
+export function printBody(
+    p: Program, s: Structure, syntax: Syntax, expr: (ref: NodeRef) => string, indent: string,
+    before: (ref: NodeRef) => readonly string[] = () => [],
+): string[] {
     const lines: string[] = []
     const loopRef = new Map<number, NodeRef>()
     for (const [ref, n] of p.nodes.entries()) if (n.k === "loop") loopRef.set(n.id, ref)
@@ -270,8 +277,11 @@ export function printBody(p: Program, s: Structure, syntax: Syntax, expr: (ref:
                     lines.push(ind + syntax.value(ref, src.k === "loop" ? carried(n.src, n.index) : result(n.src, n.index)))
                     break
                 }
-                default:
-                    lines.push(ind + syntax.value(ref, expr(ref)))
+                default: {
+                    const e = expr(ref)
+                    for (const line of before(ref)) lines.push(ind + line)
+                    lines.push(ind + syntax.value(ref, e))
+                }
             }
         }
     }

package/src/web.ts

@@ -114,6 +114,8 @@ function emitWeb(p: Program, lang: WebLanguage): string {
     const splat = (ref: number, t: SLType) => (typeOf(ref) === 1 && t > 1 ? `${T(t)}(n${ref})` : `n${ref}`)
     /** A literal at width `t`. */
     const k = (v: number, t: SLType) => (t > 1 ? `${T(t)}(${lit(v)})` : lit(v))
+    /** The statements a node prints ahead of its own line (`printBody`'s `before`). */
+    const ahead = new Map<NodeRef, string[]>()
 
     const expr = (ref: NodeRef): string => {
         const n = valueAt(p.nodes, ref)
@@ -297,11 +299,25 @@ function emitWeb(p: Program, lang: WebLanguage): string {
                     : `textureLod(sl_Tex${slot}, ${a[0]}, ${level})`
                 // A fraction blends the level below and the level above,
                 // whatever the texture's filter between levels, as the HLSL
-                // emitter does (`isWhole`). Past the smallest level both read
-                // the smallest, as a whole level past it does.
+                // emitter does (`isWhole`), each level's colour weighed by its
+                // alpha, the plain blend where both are transparent. Past the
+                // smallest level both read the smallest, as a whole level past
+                // it does.
                 if (isWhole(p.nodes, n.args[1]!)) return at(a[1]!)
                 const below = `floor(${a[1]})`
-                return `mix(${at(below)}, ${at(`${below} + 1.0`)}, fract(${a[1]}))`
+                const [lo, hi, mixed] = ["lo", "hi", "pm"].map((s) => `${local(ref)}_${s}`)
+                const pm = (v: string) => `${T(4)}(${v}.rgb * ${v}.a, ${v}.a)`
+                const decl = (v: string, e: string) => (W ? `let ${v}: ${T(4)} = ${e};` : `${T(4)} ${v} = ${e};`)
+                ahead.set(ref, [
+                    decl(lo, at(below)),
+                    decl(hi, at(`${below} + 1.0`)),
+                    decl(mixed, `mix(${pm(lo)}, ${pm(hi)}, fract(${a[1]}))`),
+                ])
+                const plain = `mix(${lo}.rgb, ${hi}.rgb, fract(${a[1]}))`
+                const rgb = W
+                    ? `select(${plain}, ${mixed}.rgb / ${mixed}.a, ${mixed}.a > 0.0)`
+                    : `(${mixed}.a > 0.0 ? ${mixed}.rgb / ${mixed}.a : ${plain})`
+                return `${T(4)}(${rgb}, ${mixed}.a)`
             }
             case SLOP.TEXTURE_SIZE: {
                 const slot = Math.round(imm[0] ?? 0)
@@ -405,7 +421,7 @@ function emitWeb(p: Program, lang: WebLanguage): string {
             loopOpen: "for (;;) {",
             breakUnless: (c, turns, max) => `if (!(${c}) || ${turns} >= ${max}) break;`,
         }
-    const body = printBody(p, shape, syntax, expr, "    ").join("\n")
+    const body = printBody(p, shape, syntax, expr, "    ", (ref) => ahead.get(ref) ?? []).join("\n")
     const library = [...[...smoothsteps].sort().map((w) => smoothstep(w, lang)), ...librarySource(need, lang)].join("\n")
     const header = `// GENERATED from a shader language program (${p.hash}). Do not edit.`
     // Only the textures the program reads, and in WGSL only the samplers it