onejs-sl 0.3.0 → 0.5.0

package/src/structure.ts

@@ -0,0 +1,285 @@
+/**
+ * Where each node of a program is computed: the region tree an emitter prints.
+ *
+ * The IR is a graph, and an `if` or a `loop` (IR 4) is a node whose regions are
+ * the parts of the graph it runs (`ir.ts`, `ControlNode`). A node belongs to no
+ * region by itself; this places it in the innermost one that every use of it is
+ * inside. So a value only a branch needs is computed only when that branch
+ * runs, one a loop's body needs is computed each turn, and one that is also
+ * needed outside is computed once, before either. Nothing is hoisted out of the
+ * region it is used in, which is what an author who wrote it there expects.
+ *
+ * It also says which regions run in control flow that differs from one pixel
+ * to the next. A texture sample there has no neighbours to take its mip level
+ * from (WGSL refuses one outright), so every emitter samples at level 0 in such
+ * a region, and every backend draws the same picture.
+ */
+
+import { INPUTS, operands, reachable, type NodeRef, type Program, type SLNode } from "./ir"
+import { SLOP } from "./ops"
+
+export interface Region {
+    id: number
+    /** The region this one is inside; null for the root, the whole function. */
+    parent: number | null
+    /** The `if` or `loop` whose region this is; null for the root. */
+    owner: NodeRef | null
+    role: "root" | "then" | "else" | "cond" | "body"
+    depth: number
+    /** Runs in control flow that differs between pixels. */
+    varying: boolean
+    /**
+     * The nodes placed here, each after what it reads: depth first from the
+     * result, operands in order, which is the order a program with no control
+     * flow has always been printed in.
+     */
+    nodes: NodeRef[]
+}
+
+export interface Structure {
+    regions: Region[]
+    /** The region each reachable node is placed in. */
+    placed: Map<NodeRef, number>
+    /** An `if`'s then and else regions; a `loop`'s cond and body regions (the body inside the cond). */
+    children: Map<NodeRef, [number, number]>
+    /** The values that can differ from one pixel to the next. */
+    varying: Set<NodeRef>
+}
+
+/** Inputs that differ per pixel. The others are one value for the whole draw. */
+const PER_PIXEL = new Set<string>(["uv", "fragCoord"] satisfies Array<keyof typeof INPUTS>)
+
+export function structure(p: Program): Structure {
+    const nodes = p.nodes
+    const reach = reachable(nodes, p.result)
+    const regions: Region[] = []
+    const placed = new Map<NodeRef, number>()
+    const children = new Map<NodeRef, [number, number]>()
+    const uses = new Map<NodeRef, number[]>()
+
+    const region = (parent: number | null, owner: NodeRef | null, role: Region["role"]): number => {
+        const id = regions.length
+        regions.push({ id, parent, owner, role, depth: parent === null ? 0 : regions[parent]!.depth + 1, varying: false, nodes: [] })
+        return id
+    }
+    const use = (ref: NodeRef, at: number) => {
+        const list = uses.get(ref)
+        if (list === undefined) uses.set(ref, [at])
+        else list.push(at)
+    }
+    const lca = (a: number, b: number): number => {
+        let x = a, y = b
+        while (regions[x]!.depth > regions[y]!.depth) x = regions[x]!.parent!
+        while (regions[y]!.depth > regions[x]!.depth) y = regions[y]!.parent!
+        while (x !== y) { x = regions[x]!.parent!; y = regions[y]!.parent! }
+        return x
+    }
+    const inside = (inner: number, outer: number): boolean => {
+        let r: number | null = inner
+        while (r !== null) { if (r === outer) return true; r = regions[r]!.parent }
+        return false
+    }
+
+    const root = region(null, null, "root")
+    use(p.result, root)
+    const loopRegion = new Map<number, number>()
+
+    // Latest first: every use of a node is a later node, so it is placed by then.
+    for (let i = reach.length - 1; i >= 0; i--) {
+        const ref = reach[i]!
+        const n = nodes[ref]!
+        let at: number
+        if (n.k === "param") {
+            const cond = loopRegion.get(n.loop)
+            if (cond === undefined) throw new Error(`node ${ref} is a param of loop ${n.loop}, which nothing reaches`)
+            at = cond
+            for (const u of uses.get(ref) ?? []) {
+                if (!inside(u, cond)) throw new Error(`node ${ref}, a param of loop ${n.loop}, is read outside that loop`)
+            }
+        } else {
+            const list = uses.get(ref)
+            if (list === undefined) throw new Error(`node ${ref} is reachable and has no use`)
+            at = list.reduce(lca)
+        }
+        placed.set(ref, at)
+        regions[at]!.nodes.push(ref)
+        if (n.k === "if") {
+            const then = region(at, ref, "then")
+            const otherwise = region(at, ref, "else")
+            children.set(ref, [then, otherwise])
+            use(n.cond, at)
+            for (const r of n.then) use(r, then)
+            for (const r of n.else) use(r, otherwise)
+        } else if (n.k === "loop") {
+            const cond = region(at, ref, "cond")
+            const body = region(cond, ref, "body")
+            children.set(ref, [cond, body])
+            loopRegion.set(n.id, cond)
+            for (const r of n.init) use(r, at)
+            use(n.cond, cond)
+            for (const r of n.next) use(r, body)
+        } else {
+            for (const a of operands(n)) use(a, at)
+        }
+    }
+    const order = postOrder(nodes, p.result)
+    for (const r of regions) r.nodes.sort((x, y) => order.get(x)! - order.get(y)!)
+
+    const varying = varyingValues(nodes, reach)
+    // A region varies if the one it is in does, or if its own condition does.
+    for (const r of regions) {
+        if (r.parent === null) continue
+        const owner = nodes[r.owner!]!
+        const cond = owner.k === "if" || owner.k === "loop" ? owner.cond : -1
+        r.varying = regions[r.parent]!.varying || varying.has(cond)
+    }
+    return { regions, placed, children, varying }
+}
+
+/** Each reachable node's place in a depth first walk from the result, operands in order, each after its operands. */
+function postOrder(nodes: readonly SLNode[], result: NodeRef): Map<NodeRef, number> {
+    const order = new Map<NodeRef, number>()
+    let next = 0
+    const walk = (ref: NodeRef): void => {
+        if (order.has(ref)) return
+        order.set(ref, -1)
+        for (const a of operands(nodes[ref]!)) walk(a)
+        order.set(ref, next++)
+    }
+    walk(result)
+    return order
+}
+
+/**
+ * The values that can differ between pixels: the per pixel inputs, texture
+ * samples, and anything computed from one. A loop's params differ when their
+ * start, their next value or the loop's condition does, which depends on the
+ * params, so it is found by going round until nothing changes.
+ */
+function varyingValues(nodes: readonly SLNode[], reach: NodeRef[]): Set<NodeRef> {
+    const out = new Set<NodeRef>()
+    const params = new Map<number, NodeRef[]>()
+    for (const ref of reach) {
+        const n = nodes[ref]!
+        if (n.k === "param") params.set(n.loop, [...(params.get(n.loop) ?? []), ref])
+    }
+    for (let changed = true; changed;) {
+        changed = false
+        const mark = (ref: NodeRef) => { if (!out.has(ref)) { out.add(ref); changed = true } }
+        for (const ref of reach) {
+            const n = nodes[ref]!
+            switch (n.k) {
+                case "input": if (PER_PIXEL.has(n.name)) mark(ref); break
+                case "call":
+                    if (n.op === SLOP.SAMPLE || n.op === SLOP.SAMPLE_LOD || n.args.some((a) => out.has(a))) mark(ref)
+                    break
+                case "swizzle": if (out.has(n.src)) mark(ref); break
+                case "proj": {
+                    const src = nodes[n.src]!
+                    if (src.k === "if" && (out.has(src.cond) || out.has(src.then[n.index]!) || out.has(src.else[n.index]!))) mark(ref)
+                    if (src.k === "loop") {
+                        const param = (params.get(src.id) ?? []).find((q) => (nodes[q] as { index: number }).index === n.index)
+                        if (out.has(src.cond) || out.has(src.init[n.index]!) || out.has(src.next[n.index]!) || (param !== undefined && out.has(param))) mark(ref)
+                    }
+                    break
+                }
+                case "loop":
+                    for (const q of params.get(n.id) ?? []) {
+                        const i = (nodes[q] as { index: number }).index
+                        if (out.has(n.cond) || out.has(n.init[i]!) || out.has(n.next[i]!)) mark(q)
+                    }
+                    break
+                default: break
+            }
+        }
+    }
+    return out
+}
+
+/**
+ * How a language spells the statements a structured body is printed with. The
+ * expressions are the emitter's own; this is only the frame around them.
+ */
+export interface Syntax {
+    /** A value node's local, initialised: `float n3 = expr;` */
+    value(ref: NodeRef, expr: string): string
+    /** A local that is assigned later, typed as `like` is: an if's or a loop's result. */
+    mutable(name: string, like: NodeRef, init?: string): string
+    /** A loop's turn counter, from 0. */
+    counter(name: string): string
+    assign(name: string, value: string): string
+    increment(name: string): string
+    ifOpen(cond: string): string
+    elseOpen: string
+    close: string
+    loopOpen: string
+    /** Leaves the loop unless `cond` holds and `turns` is under `max`. */
+    breakUnless(cond: string, turns: string, max: number): string
+}
+
+/** A node's local. */
+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.
+ */
+export function printBody(p: Program, s: Structure, syntax: Syntax, expr: (ref: NodeRef) => string, indent: 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)
+    const result = (ref: NodeRef, i: number) => `r${ref}_${i}`
+    const carried = (ref: NodeRef, i: number) => `l${ref}_${i}`
+
+    const region = (id: number, ind: string): void => {
+        for (const ref of s.regions[id]!.nodes) {
+            const n = p.nodes[ref]!
+            switch (n.k) {
+                case "if": {
+                    const [then, otherwise] = s.children.get(ref)!
+                    n.then.forEach((r, i) => lines.push(ind + syntax.mutable(result(ref, i), r)))
+                    lines.push(ind + syntax.ifOpen(local(n.cond)))
+                    region(then, ind + "    ")
+                    n.then.forEach((r, i) => lines.push(ind + "    " + syntax.assign(result(ref, i), local(r))))
+                    lines.push(ind + syntax.elseOpen)
+                    region(otherwise, ind + "    ")
+                    n.else.forEach((r, i) => lines.push(ind + "    " + syntax.assign(result(ref, i), local(r))))
+                    lines.push(ind + syntax.close)
+                    break
+                }
+                case "loop": {
+                    const [cond, body] = s.children.get(ref)!
+                    const turns = `l${ref}_turns`
+                    n.init.forEach((r, i) => lines.push(ind + syntax.mutable(carried(ref, i), r, local(r))))
+                    lines.push(ind + syntax.counter(turns))
+                    lines.push(ind + syntax.loopOpen)
+                    region(cond, ind + "    ")
+                    lines.push(ind + "    " + syntax.breakUnless(local(n.cond), turns, n.max))
+                    lines.push(ind + "    " + syntax.increment(turns))
+                    region(body, ind + "    ")
+                    n.next.forEach((r, i) => lines.push(ind + "    " + syntax.assign(carried(ref, i), local(r))))
+                    lines.push(ind + syntax.close)
+                    break
+                }
+                case "param":
+                    lines.push(ind + syntax.value(ref, carried(loopRef.get(n.loop)!, n.index)))
+                    break
+                case "proj": {
+                    const src = p.nodes[n.src]!
+                    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)))
+            }
+        }
+    }
+    region(0, indent)
+    return lines
+}
+
+/** Whether a node is computed where a sample has no neighbours to take a mip level from. */
+export function inVaryingFlow(s: Structure, ref: NodeRef): boolean {
+    return s.regions[s.placed.get(ref)!]!.varying
+}

package/src/web.ts

@@ -24,7 +24,9 @@
  * vertex index) so one module is one pipeline; the GLSL host supplies its own.
  */
 
-import { SLError, TYPE, type Program, type SLNode, type SLType } from "./ir"
+import { INT_LIMITS } from "./body"
+import { SLError, TYPE, valueAt, type NodeRef, type Program, type SLKind, type SLType, type ValueNode } from "./ir"
+import { inVaryingFlow, local, printBody, structure, type Syntax } from "./structure"
 import { libClosure, libIndex, LIB_FUNCTIONS, SDF_CALLS } from "./lib"
 import { LIB_GLSL } from "./lib/glsl"
 import { LIB_WGSL } from "./lib/wgsl"
@@ -48,29 +50,39 @@ function emitWeb(p: Program, lang: WebLanguage): string {
     const need = new Set<number>()
     const smoothsteps = new Set<SLType>()
     const sampled = new Set<number>()
-    const lines: string[] = []
-    const emitted = new Set<number>()
+    const shape = structure(p)
     const T = (t: SLType) => (W ? (t === 1 ? "f32" : `vec${t}f`) : t === 1 ? "float" : `vec${t}`)
-    const typeOf = (ref: number) => p.nodes[ref].type
+    /** A value's type in this language, its kind included. */
+    const typeName = (n: { type: SLType; kind?: SLKind }): string => {
+        if (n.kind === undefined) return T(n.type)
+        const scalar = W ? { int: "i32", uint: "u32", bool: "bool" }[n.kind] : n.kind
+        if (n.type === 1) return scalar
+        return W ? `vec${n.type}<${scalar}>` : `${{ int: "i", uint: "u", bool: "b" }[n.kind]}vec${n.type}`
+    }
+    const kindLit = (kind: SLKind, v: number): string => {
+        if (kind === "bool") return v !== 0 ? "true" : "false"
+        if (kind === "uint") return `${v >>> 0}u`
+        const i = W ? `${v}i` : String(v)
+        return v < 0 ? `(${i})` : i
+    }
+    const typeOf = (ref: number) => valueAt(p.nodes, ref).type
+    /** A constant node's value, or null for anything computed. */
+    const constantOf = (ref: number): number[] | null => {
+        const c = p.nodes[ref]!
+        return c.k === "const" ? c.v : null
+    }
 
     /** A node's value widened to `t` when it is a scalar and `t` is not. */
     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))
 
-    const walk = (ref: number): void => {
-        if (emitted.has(ref)) return
-        const n = p.nodes[ref]
-        const deps = n.k === "swizzle" ? [n.src] : n.k === "call" ? n.args : []
-        for (const d of deps) walk(d)
-        emitted.add(ref)
-        const e = expr(n)
-        lines.push(W ? `    let n${ref}: ${T(n.type)} = ${e};` : `    ${T(n.type)} n${ref} = ${e};`)
-    }
-
-    const expr = (n: SLNode): string => {
+    const expr = (ref: NodeRef): string => {
+        const n = valueAt(p.nodes, ref)
         switch (n.k) {
-            case "const": return n.type === 1 ? lit(n.v[0]) : `${T(n.type)}(${n.v.map(lit).join(", ")})`
+            case "const":
+                if (n.kind !== undefined) return n.type === 1 ? kindLit(n.kind, n.v[0]!) : `${typeName(n)}(${n.v.map((v) => kindLit(n.kind!, v)).join(", ")})`
+                return n.type === 1 ? lit(n.v[0]) : `${T(n.type)}(${n.v.map(lit).join(", ")})`
             case "input": {
                 const res = W ? "sl.res" : "sl_Res"
                 switch (INPUT_ID[n.name]) {
@@ -87,14 +99,15 @@ function emitWeb(p: Program, lang: WebLanguage): string {
             }
             case "swizzle": {
                 // A scalar has one component and no swizzle in either language.
-                if (typeOf(n.src) === 1) return n.type === 1 ? `n${n.src}` : `${T(n.type)}(n${n.src})`
+                if (typeOf(n.src) === 1) return n.type === 1 ? `n${n.src}` : `${typeName(n)}(n${n.src})`
                 return `n${n.src}.${n.chans.map((c) => "xyzw"[c]).join("")}`
             }
-            case "call": return call(n)
+            case "call": return call(n, ref)
+            default: throw new SLError(`the ${lang.toUpperCase()} emitter reached a ${n.k} as an expression`)
         }
     }
 
-    const call = (n: Extract<SLNode, { k: "call" }>): string => {
+    const call = (n: Extract<ValueNode, { k: "call" }>, ref: NodeRef): string => {
         const t = n.type
         const a = n.args.map((r) => `n${r}`)
         // Every argument at the result's width, for the element wise ops. WGSL
@@ -109,8 +122,55 @@ function emitWeb(p: Program, lang: WebLanguage): string {
             return W ? LIB_FUNCTIONS[i]!.wgsl : name
         }
         const hlslType = (w: SLType) => (w === 1 ? "float" : `float${w}`)
+        const argKind = n.args.length > 0 ? valueAt(p.nodes, n.args[0]!).kind : undefined
+        // IR 4: the ops that take ints, uints and bools, by the kinds involved.
+        if (n.kind !== undefined || argKind !== undefined) {
+            const zero = kindLit(n.kind ?? "int", 0)
+            /** `c ? x : y`, which WGSL spells select(y, x, c). */
+            const pick = (c: string, x: string, y: string) => (W ? `select(${y}, ${x}, ${c})` : `(${c} ? ${x} : ${y})`)
+            switch (n.op) {
+                case SLOP.ADD: return `(${a[0]} + ${a[1]})`
+                case SLOP.SUB: return `(${a[0]} - ${a[1]})`
+                case SLOP.MUL: return `(${a[0]} * ${a[1]})`
+                // Truncating, and 0 for a zero divisor. GLSL ES leaves % of a
+                // negative undefined, so it is written out from the division.
+                case SLOP.DIV: return pick(`${a[1]} == ${zero}`, zero, `${a[0]} / ${a[1]}`)
+                case SLOP.MOD: return pick(`${a[1]} == ${zero}`, zero, W ? `${a[0]} % ${a[1]}` : `${a[0]} - ${a[1]} * (${a[0]} / ${a[1]})`)
+                case SLOP.NEG: return `(-${a[0]})`
+                case SLOP.MIN: return `min(${a[0]}, ${a[1]})`
+                case SLOP.MAX: return `max(${a[0]}, ${a[1]})`
+                case SLOP.ABS: return `abs(${a[0]})`
+                case SLOP.CLAMP: return `clamp(${a[0]}, ${a[1]}, ${a[2]})`
+            }
+        }
         switch (n.op) {
-            case SLOP.COMPOSE: return t === 1 ? a[0] : `${T(t)}(${a.join(", ")})`
+            case SLOP.COMPOSE: return t === 1 ? a[0] : `${typeName(n)}(${a.join(", ")})`
+            case SLOP.CAST: {
+                const from = valueAt(p.nodes, n.args[0]!).kind
+                if (n.kind === "bool") return `(${a[0]} != ${from === undefined ? "0.0" : kindLit(from, 0)})`
+                if (n.kind !== undefined && from === undefined) {
+                    const [lo, hi] = INT_LIMITS[n.kind]
+                    return `${typeName(n)}(clamp(${a[0]}, ${lo}, ${hi}))`
+                }
+                return `${typeName(n)}(${a[0]})`
+            }
+            case SLOP.LT: return `(${a[0]} < ${a[1]})`
+            case SLOP.LE: return `(${a[0]} <= ${a[1]})`
+            case SLOP.GT: return `(${a[0]} > ${a[1]})`
+            case SLOP.GE: return `(${a[0]} >= ${a[1]})`
+            case SLOP.EQ: return `(${a[0]} == ${a[1]})`
+            case SLOP.NE: return `(${a[0]} != ${a[1]})`
+            case SLOP.AND: return `(${a[0]} && ${a[1]})`
+            case SLOP.OR: return `(${a[0]} || ${a[1]})`
+            case SLOP.NOT: return `(!${a[0]})`
+            case SLOP.BIT_AND: return `(${a[0]} & ${a[1]})`
+            case SLOP.BIT_OR: return `(${a[0]} | ${a[1]})`
+            case SLOP.BIT_XOR: return `(${a[0]} ^ ${a[1]})`
+            case SLOP.BIT_NOT: return `(~${a[0]})`
+            // The count modulo 32, which GLSL leaves undefined past 31; WGSL shifts by a u32.
+            case SLOP.SHL: return W ? `(${a[0]} << (u32(${a[1]}) & 31u))` : `(${a[0]} << (${a[1]} & ${kindLit(valueAt(p.nodes, n.args[1]!).kind ?? "int", 31)}))`
+            case SLOP.SHR: return W ? `(${a[0]} >> (u32(${a[1]}) & 31u))` : `(${a[0]} >> (${a[1]} & ${kindLit(valueAt(p.nodes, n.args[1]!).kind ?? "int", 31)}))`
+            case SLOP.CHOOSE: return W ? `select(${a[2]}, ${a[1]}, ${a[0]})` : `(${a[0]} ? ${a[1]} : ${a[2]})`
 
             case SLOP.ADD: return `(${s[0]} + ${s[1]})`
             case SLOP.SUB: return `(${s[0]} - ${s[1]})`
@@ -168,16 +228,29 @@ function emitWeb(p: Program, lang: WebLanguage): string {
             case SLOP.HSV2RGB: return `${lib("sl_hsv2rgb")}(${a[0]})`
             case SLOP.NOISE: return `${lib("sl_valueNoise")}(${a[0]})`
             case SLOP.SIMPLEX: return `${lib("sl_simplex")}(${a[0]})`
-            case SLOP.FBM: return octaveCall(Math.round(imm[1] ?? 0), a[0], imm[0])
-            case SLOP.TURBULENCE: return octaveCall(2, a[0], imm[0])
-            case SLOP.RIDGED: return octaveCall(3, a[0], imm[0])
+            case SLOP.FBM: return octaveCall(Math.round((n.args.length > 1 ? imm[0] : imm[1]) ?? 0), a[0])
+            case SLOP.TURBULENCE: return octaveCall(2, a[0])
+            case SLOP.RIDGED: return octaveCall(3, a[0])
             case SLOP.VORONOI: return `${lib("sl_voronoi")}(${a[0]})`
-            case SLOP.SDF: return sdfCall(Math.round(imm[0] ?? 0), a[0], imm)
+            case SLOP.SDF: return sdfCall(Math.round(imm[0] ?? 0), a[0], sdfParams())
             case SLOP.SAMPLE: {
                 const slot = Math.round(imm[0] ?? 0)
                 sampled.add(slot)
+                // Where pixels part ways there are no neighbours to take a mip
+                // level from, and WGSL refuses the implicit sample outright, so
+                // every backend samples level 0 there (`structure.ts`).
+                if (inVaryingFlow(shape, ref)) {
+                    return W ? `textureSampleLevel(sl_tex${slot}, sl_samp${slot}, ${a[0]}, 0.0)` : `textureLod(sl_Tex${slot}, ${a[0]}, 0.0)`
+                }
                 return W ? `textureSample(sl_tex${slot}, sl_samp${slot}, ${a[0]})` : `texture(sl_Tex${slot}, ${a[0]})`
             }
+            case SLOP.SAMPLE_LOD: {
+                const slot = Math.round(imm[0] ?? 0)
+                sampled.add(slot)
+                return W
+                    ? `textureSampleLevel(sl_tex${slot}, sl_samp${slot}, ${a[0]}, ${a[1]})`
+                    : `textureLod(sl_Tex${slot}, ${a[0]}, ${a[1]})`
+            }
             default:
                 throw new SLError(
                     `the ${lang.toUpperCase()} emitter has no case for opcode ${n.op}. A program using it would ` +
@@ -188,32 +261,78 @@ function emitWeb(p: Program, lang: WebLanguage): string {
         /**
          * The library's onejsFbmKind, resolved here since the kind is a
          * constant: calling the dispatcher would print a WGSL `select` that
-         * runs two of the four fields to keep one.
+         * runs two of the four fields to keep one. The count is a literal when
+         * it is a constant, and otherwise rounded and held to 1 to 4 as
+         * `sl_fbm` holds it.
          */
-        function octaveCall(kind: number, pt: string, octaves: number | undefined): string {
-            const o = Math.min(4, Math.max(1, Math.round(octaves ?? 3)))
+        function octaveCall(kind: number, pt: string): string {
+            const c = constantOf(n.args[1]!)
+            const o = c !== null
+                ? String(Math.min(4, Math.max(1, Math.round(c[0]!))))
+                : `clamp(${W ? "i32" : "int"}(floor(${a[1]} + 0.5)), 1, 4)`
             const fn = kind === 2 ? "onejsTurbulence" : kind === 3 ? "onejsRidged" : kind === 1 ? "onejsFbmSimplex" : "onejsFbm"
             return `${lib(fn, ["float2", "float", "int", "float", "float"])}(${pt}, 0.0, ${o}, 2.0, 0.5)`
         }
 
+        /**
+         * The six shape parameters, each as a float expression and, when it
+         * is a constant, its number: literals from a constant float4 or
+         * float2, and their components otherwise.
+         */
+        function sdfParams(): Array<{ text: string; value?: number }> {
+            const part = (ref: number, chans: string[]) => {
+                const c = constantOf(ref)
+                return chans.map((ch, i) => c !== null ? { text: lit(c[i]!), value: c[i]! } : { text: `${a[n.args.indexOf(ref)]}.${ch}` })
+            }
+            return [...part(n.args[1]!, ["x", "y", "z", "w"]), ...part(n.args[2]!, ["x", "y"])]
+        }
+
         /** The shape is a constant, so this calls it directly instead of sl_sdfDistance's switch. */
-        function sdfCall(id: number, pt: string, im: number[]): string {
+        function sdfCall(id: number, pt: string, v: Array<{ text: string; value?: number }>): string {
             const shape = SDF_CALLS[id]
             // sl_sdfDistance returns 1e6 for an id it does not know.
             if (shape === undefined) return lit(1e6)
             const fn = lib(shape.fn)
-            const v = [im[1] ?? 0, im[2] ?? 0, im[3] ?? 0, im[4] ?? 0, im[5] ?? 0, im[6] ?? 0]
             const args = shape.args.map((arg) => {
-                if ("int" in arg) return String(Math.trunc(v[arg.int]))
-                const parts = arg.map((i) => lit(v[i]))
+                // Truncated toward zero, as HLSL's int() of the float4 does.
+                if ("int" in arg) {
+                    const p = v[arg.int]!
+                    return p.value !== undefined ? String(Math.trunc(p.value)) : W ? `i32(${p.text})` : `int(${p.text})`
+                }
+                const parts = arg.map((i) => v[i]!.text)
                 return parts.length === 1 ? parts[0] : `${T(parts.length as SLType)}(${parts.join(", ")})`
             })
             return `${fn}(${[pt, ...args].join(", ")})`
         }
     }
 
-    walk(p.result)
-    const body = lines.join("\n")
+    const vtype = (ref: NodeRef) => typeName(valueAt(p.nodes, ref))
+    const syntax: Syntax = W
+        ? {
+            value: (ref, e) => `let ${local(ref)}: ${vtype(ref)} = ${e};`,
+            mutable: (n, like, init) => `var ${n}: ${vtype(like)}${init === undefined ? "" : ` = ${init}`};`,
+            counter: (n) => `var ${n}: i32 = 0;`,
+            assign: (n, v) => `${n} = ${v};`,
+            increment: (n) => `${n} = ${n} + 1;`,
+            ifOpen: (c) => `if (${c}) {`,
+            elseOpen: "} else {",
+            close: "}",
+            loopOpen: "loop {",
+            breakUnless: (c, turns, max) => `if (!(${c}) || ${turns} >= ${max}) { break; }`,
+        }
+        : {
+            value: (ref, e) => `${vtype(ref)} ${local(ref)} = ${e};`,
+            mutable: (n, like, init) => `${vtype(like)} ${n}${init === undefined ? "" : ` = ${init}`};`,
+            counter: (n) => `int ${n} = 0;`,
+            assign: (n, v) => `${n} = ${v};`,
+            increment: (n) => `${n}++;`,
+            ifOpen: (c) => `if (${c}) {`,
+            elseOpen: "} else {",
+            close: "}",
+            loopOpen: "for (;;) {",
+            breakUnless: (c, turns, max) => `if (!(${c}) || ${turns} >= ${max}) break;`,
+        }
+    const body = printBody(p, shape, syntax, expr, "    ").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 samples. WebGPU's automatic layout leaves