@driftengine/ui2d 4.8.1 → 4.8.3

package/README.md

@@ -2,7 +2,7 @@
 
 The 2D layer: quads with a texture on them, batched, in the order you drew them.
 
-**Cost: 8.8 KB gzipped on top of core.** Measured by `scripts/size-gate.test.mjs`, which fails if it
+**Cost: 10.1 KB gzipped on top of core.** Measured by `scripts/size-gate.test.mjs`, which fails if it
 drifts more than 3% — the number is derived from the same floors that gate asserts, so a README
 quoting a stale one is a red suite rather than a thing somebody notices.
 

package/dist/shaders/generated/sprite.wgsl.d.ts

@@ -1,4 +1,4 @@
-export declare const SPRITE_FRAG_WGSL = "struct Uniforms {\n    uOutputTransform: i32,\n    uOutputExposure: f32,\n}\n\n@group(0) @binding(1) \nvar<uniform> unnamed: Uniforms;\n@group(0) @binding(32) \nvar uSpriteTexture_t: texture_2d<f32>;\n@group(0) @binding(33) \nvar uSpriteTexture_s: sampler;\nvar<private> vUv_1: vec2<f32>;\nvar<private> vTint_1: vec4<f32>;\nvar<private> fragColor: vec4<f32>;\n\nfn linearToSrgb_u0028_vf3_u003b(c: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var low: vec3<f32>;\n    var high: vec3<f32>;\n\n    let _e55 = (*c);\n    low = (_e55 * 12.92f);\n    let _e57 = (*c);\n    high = ((pow(max(_e57, vec3<f32>(0f, 0f, 0f)), vec3<f32>(0.41666666f, 0.41666666f, 0.41666666f)) * 1.055f) - vec3(0.055f));\n    let _e63 = high;\n    let _e64 = low;\n    let _e65 = (*c);\n    return mix(_e63, _e64, step(_e65, vec3<f32>(0.0031308f, 0.0031308f, 0.0031308f)));\n}\n\nfn rrtAndOdtFit_u0028_vf3_u003b(v: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var a: vec3<f32>;\n    var b: vec3<f32>;\n\n    let _e55 = (*v);\n    let _e56 = (*v);\n    a = ((_e55 * (_e56 + vec3(0.0245786f))) - vec3(0.000090537f));\n    let _e62 = (*v);\n    let _e63 = (*v);\n    b = ((_e62 * ((_e63 * 0.983729f) + vec3(0.432951f))) + vec3(0.238081f));\n    let _e70 = a;\n    let _e71 = b;\n    return (_e70 / _e71);\n}\n\nfn acesFilmic_u0028_vf3_u003b(x: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var param: vec3<f32>;\n\n    let _e55 = unnamed.uOutputExposure;\n    let _e56 = (*x);\n    (*x) = (_e56 * _e55);\n    let _e58 = (*x);\n    param = (mat3x3<f32>(vec3<f32>(0.59719f, 0.076f, 0.0284f), vec3<f32>(0.35458f, 0.90834f, 0.13383f), vec3<f32>(0.04823f, 0.01566f, 0.83777f)) * _e58);\n    let _e60 = rrtAndOdtFit_u0028_vf3_u003b((&param));\n    return clamp((mat3x3<f32>(vec3<f32>(1.60475f, -0.10208f, -0.00327f), vec3<f32>(-0.53108f, 1.10813f, -0.07276f), vec3<f32>(-0.07367f, -0.00605f, 1.07602f)) * _e60), vec3(0f), vec3(1f));\n}\n\nfn applyOutputTransform_u0028_vf3_u003b(c_1: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var param_1: vec3<f32>;\n    var param_2: vec3<f32>;\n\n    let _e56 = unnamed.uOutputTransform;\n    if (_e56 == 0i) {\n        let _e58 = (*c_1);\n        return _e58;\n    }\n    let _e60 = unnamed.uOutputTransform;\n    if (_e60 == 2i) {\n        let _e62 = (*c_1);\n        param_1 = _e62;\n        let _e63 = acesFilmic_u0028_vf3_u003b((&param_1));\n        (*c_1) = _e63;\n    }\n    let _e64 = (*c_1);\n    param_2 = _e64;\n    let _e65 = linearToSrgb_u0028_vf3_u003b((&param_2));\n    return _e65;\n}\n\nfn main_1() {\n    var texel: vec4<f32>;\n    var colour: vec4<f32>;\n    var param_3: vec3<f32>;\n\n    let _e55 = vUv_1;\n    let _e56 = textureSample(uSpriteTexture_t, uSpriteTexture_s, _e55);\n    texel = _e56;\n    let _e57 = texel;\n    let _e58 = vTint_1;\n    colour = (_e57 * _e58);\n    let _e61 = colour[3u];\n    if (_e61 < 0.00392157f) {\n        discard;\n    }\n    let _e63 = colour;\n    param_3 = _e63.xyz;\n    let _e65 = applyOutputTransform_u0028_vf3_u003b((&param_3));\n    let _e66 = colour;\n    colour = vec4<f32>(_e65.x, _e65.y, _e65.z, _e66.w);\n    let _e72 = colour;\n    let _e75 = colour[3u];\n    let _e76 = (_e72.xyz * _e75);\n    let _e78 = colour[3u];\n    fragColor = vec4<f32>(_e76.x, _e76.y, _e76.z, _e78);\n    return;\n}\n\n@fragment \nfn main(@location(0) vUv: vec2<f32>, @location(1) vTint: vec4<f32>) -> @location(0) vec4<f32> {\n    vUv_1 = vUv;\n    vTint_1 = vTint;\n    main_1();\n    let _e5 = fragColor;\n    return _e5;\n}\n";
+export declare const SPRITE_FRAG_WGSL = "struct Uniforms {\n    uOutputTransform: i32,\n    uOutputExposure: f32,\n}\n\n@group(0) @binding(1) \nvar<uniform> unnamed: Uniforms;\n@group(0) @binding(32) \nvar uSpriteTexture_t: texture_2d<f32>;\n@group(0) @binding(33) \nvar uSpriteTexture_s: sampler;\nvar<private> vUv_1: vec2<f32>;\nvar<private> vTint_1: vec4<f32>;\nvar<private> fragColor: vec4<f32>;\n\nfn linearToSrgb_u0028_vf3_u003b(c: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var low: vec3<f32>;\n    var high: vec3<f32>;\n\n    let _e61 = (*c);\n    low = (_e61 * 12.92f);\n    let _e63 = (*c);\n    high = ((pow(max(_e63, vec3<f32>(0f, 0f, 0f)), vec3<f32>(0.41666666f, 0.41666666f, 0.41666666f)) * 1.055f) - vec3(0.055f));\n    let _e69 = high;\n    let _e70 = low;\n    let _e71 = (*c);\n    return mix(_e69, _e70, step(_e71, vec3<f32>(0.0031308f, 0.0031308f, 0.0031308f)));\n}\n\nfn highlightShoulder_u0028_vf3_u003b(c_1: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var m: f32;\n    var e: f32;\n\n    let _e62 = (*c_1)[0u];\n    let _e64 = (*c_1)[1u];\n    let _e66 = (*c_1)[2u];\n    m = max(_e62, max(_e64, _e66));\n    let _e69 = m;\n    if (_e69 <= 0.8f) {\n        let _e71 = (*c_1);\n        return _e71;\n    }\n    let _e72 = m;\n    e = (_e72 - 0.8f);\n    let _e74 = (*c_1);\n    let _e75 = e;\n    let _e77 = e;\n    let _e81 = m;\n    return (_e74 * ((0.8f + ((0.2f * _e75) / (_e77 + 0.2f))) / _e81));\n}\n\nfn rrtAndOdtFit_u0028_vf3_u003b(v: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var a: vec3<f32>;\n    var b: vec3<f32>;\n\n    let _e61 = (*v);\n    let _e62 = (*v);\n    a = ((_e61 * (_e62 + vec3(0.0245786f))) - vec3(0.000090537f));\n    let _e68 = (*v);\n    let _e69 = (*v);\n    b = ((_e68 * ((_e69 * 0.983729f) + vec3(0.432951f))) + vec3(0.238081f));\n    let _e76 = a;\n    let _e77 = b;\n    return (_e76 / _e77);\n}\n\nfn acesFilmic_u0028_vf3_u003b(x: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var param: vec3<f32>;\n\n    let _e61 = unnamed.uOutputExposure;\n    let _e62 = (*x);\n    (*x) = (_e62 * _e61);\n    let _e64 = (*x);\n    param = (mat3x3<f32>(vec3<f32>(0.59719f, 0.076f, 0.0284f), vec3<f32>(0.35458f, 0.90834f, 0.13383f), vec3<f32>(0.04823f, 0.01566f, 0.83777f)) * _e64);\n    let _e66 = rrtAndOdtFit_u0028_vf3_u003b((&param));\n    return clamp((mat3x3<f32>(vec3<f32>(1.60475f, -0.10208f, -0.00327f), vec3<f32>(-0.53108f, 1.10813f, -0.07276f), vec3<f32>(-0.07367f, -0.00605f, 1.07602f)) * _e66), vec3(0f), vec3(1f));\n}\n\nfn applyOutputTransform_u0028_vf3_u003b(c_2: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var param_1: vec3<f32>;\n    var param_2: vec3<f32>;\n    var param_3: vec3<f32>;\n\n    let _e63 = unnamed.uOutputTransform;\n    if (_e63 == 0i) {\n        let _e65 = (*c_2);\n        return _e65;\n    }\n    let _e67 = unnamed.uOutputTransform;\n    if (_e67 == 2i) {\n        let _e69 = (*c_2);\n        param_1 = _e69;\n        let _e70 = acesFilmic_u0028_vf3_u003b((&param_1));\n        (*c_2) = _e70;\n    }\n    let _e72 = unnamed.uOutputTransform;\n    if (_e72 == 3i) {\n        let _e74 = (*c_2);\n        let _e76 = unnamed.uOutputExposure;\n        param_2 = (_e74 * _e76);\n        let _e78 = highlightShoulder_u0028_vf3_u003b((&param_2));\n        (*c_2) = _e78;\n    }\n    let _e79 = (*c_2);\n    param_3 = _e79;\n    let _e80 = linearToSrgb_u0028_vf3_u003b((&param_3));\n    return _e80;\n}\n\nfn main_1() {\n    var texel: vec4<f32>;\n    var colour: vec4<f32>;\n    var param_4: vec3<f32>;\n\n    let _e61 = vUv_1;\n    let _e62 = textureSample(uSpriteTexture_t, uSpriteTexture_s, _e61);\n    texel = _e62;\n    let _e63 = texel;\n    let _e64 = vTint_1;\n    colour = (_e63 * _e64);\n    let _e67 = colour[3u];\n    if (_e67 < 0.00392157f) {\n        discard;\n    }\n    let _e69 = colour;\n    param_4 = _e69.xyz;\n    let _e71 = applyOutputTransform_u0028_vf3_u003b((&param_4));\n    let _e72 = colour;\n    colour = vec4<f32>(_e71.x, _e71.y, _e71.z, _e72.w);\n    let _e78 = colour;\n    let _e81 = colour[3u];\n    let _e82 = (_e78.xyz * _e81);\n    let _e84 = colour[3u];\n    fragColor = vec4<f32>(_e82.x, _e82.y, _e82.z, _e84);\n    return;\n}\n\n@fragment \nfn main(@location(0) vUv: vec2<f32>, @location(1) vTint: vec4<f32>) -> @location(0) vec4<f32> {\n    vUv_1 = vUv;\n    vTint_1 = vTint;\n    main_1();\n    let _e5 = fragColor;\n    return _e5;\n}\n";
 export declare const SPRITE_VERT_WGSL = "struct Uniforms {\n    uToNdc0_: vec4<f32>,\n    uToNdc1_: vec4<f32>,\n    uClipCorrection: mat4x4<f32>,\n}\n\nstruct gl_PerVertex {\n    @builtin(position) gl_Position: vec4<f32>,\n    gl_PointSize: f32,\n}\n\nstruct VertexOutput {\n    @location(0) member: vec2<f32>,\n    @location(1) member_1: vec4<f32>,\n    @builtin(position) gl_Position: vec4<f32>,\n}\n\nvar<private> gl_VertexIndex_1: i32;\nvar<private> aOrigin_1: vec2<f32>;\nvar<private> aEdges_1: vec4<f32>;\n@group(0) @binding(0) \nvar<uniform> unnamed: Uniforms;\nvar<private> vUv: vec2<f32>;\nvar<private> aUv_1: vec4<f32>;\nvar<private> vTint: vec4<f32>;\nvar<private> aTint_1: vec4<f32>;\nvar<private> unnamed_1: gl_PerVertex = gl_PerVertex(vec4<f32>(0f, 0f, 0f, 1f), 1f);\n\nfn main_1() {\n    var corner: vec2<f32>;\n    var indexable: array<vec2<f32>, 6>;\n    var p: vec2<f32>;\n    var ndc: vec2<f32>;\n    var orientation: f32;\n    var along: vec2<f32>;\n    var local: f32;\n\n    let _e31 = gl_VertexIndex_1;\n    indexable = array<vec2<f32>, 6>(vec2<f32>(0f, 0f), vec2<f32>(1f, 0f), vec2<f32>(0f, 1f), vec2<f32>(0f, 1f), vec2<f32>(1f, 0f), vec2<f32>(1f, 1f));\n    let _e33 = indexable[_e31];\n    corner = _e33;\n    let _e34 = aOrigin_1;\n    let _e35 = aEdges_1;\n    let _e38 = corner[0u];\n    let _e41 = aEdges_1;\n    let _e44 = corner[1u];\n    p = ((_e34 + (_e35.xy * _e38)) + (_e41.zw * _e44));\n    let _e49 = unnamed.uToNdc0_[0u];\n    let _e51 = p[0u];\n    let _e55 = unnamed.uToNdc0_[2u];\n    let _e57 = p[1u];\n    let _e62 = unnamed.uToNdc1_[0u];\n    let _e66 = unnamed.uToNdc0_[1u];\n    let _e68 = p[0u];\n    let _e72 = unnamed.uToNdc0_[3u];\n    let _e74 = p[1u];\n    let _e79 = unnamed.uToNdc1_[1u];\n    ndc = vec2<f32>((((_e49 * _e51) + (_e55 * _e57)) + _e62), (((_e66 * _e68) + (_e72 * _e74)) + _e79));\n    let _e84 = unnamed.uToNdc0_[0u];\n    let _e87 = unnamed.uToNdc0_[3u];\n    let _e91 = unnamed.uToNdc0_[1u];\n    let _e94 = unnamed.uToNdc0_[2u];\n    orientation = ((_e84 * _e87) - (_e91 * _e94));\n    let _e98 = corner[0u];\n    let _e99 = orientation;\n    if (_e99 > 0f) {\n        let _e102 = corner[1u];\n        local = (1f - _e102);\n    } else {\n        let _e105 = corner[1u];\n        local = _e105;\n    }\n    let _e106 = local;\n    along = vec2<f32>(_e98, _e106);\n    let _e108 = aUv_1;\n    let _e110 = aUv_1;\n    let _e112 = along;\n    vUv = mix(_e108.xy, _e110.zw, _e112);\n    let _e114 = aTint_1;\n    vTint = _e114;\n    let _e116 = unnamed.uClipCorrection;\n    let _e117 = ndc;\n    unnamed_1.gl_Position = (_e116 * vec4<f32>(_e117.x, _e117.y, 0f, 1f));\n    return;\n}\n\n@vertex \nfn main(@builtin(vertex_index) gl_VertexIndex: u32, @location(3) aOrigin: vec2<f32>, @location(0) aEdges: vec4<f32>, @location(1) aUv: vec4<f32>, @location(2) aTint: vec4<f32>) -> VertexOutput {\n    gl_VertexIndex_1 = i32(gl_VertexIndex);\n    aOrigin_1 = aOrigin;\n    aEdges_1 = aEdges;\n    aUv_1 = aUv;\n    aTint_1 = aTint;\n    main_1();\n    let _e16 = unnamed_1.gl_Position.y;\n    unnamed_1.gl_Position.y = -(_e16);\n    let _e18 = vUv;\n    let _e19 = vTint;\n    let _e20 = unnamed_1.gl_Position;\n    return VertexOutput(_e18, _e19, _e20);\n}\n";
 /**
  * What the transform assigned, so the renderer binds the same numbers.

package/dist/shaders/generated/sprite.wgsl.js

@@ -4,7 +4,7 @@
  * The GLSL beside this file is the source of truth. A hand edit here is discarded by
  * the next generation, and `npm run wgsl:check` fails the build when this is stale.
  */
-export const SPRITE_FRAG_WGSL = "struct Uniforms {\n    uOutputTransform: i32,\n    uOutputExposure: f32,\n}\n\n@group(0) @binding(1) \nvar<uniform> unnamed: Uniforms;\n@group(0) @binding(32) \nvar uSpriteTexture_t: texture_2d<f32>;\n@group(0) @binding(33) \nvar uSpriteTexture_s: sampler;\nvar<private> vUv_1: vec2<f32>;\nvar<private> vTint_1: vec4<f32>;\nvar<private> fragColor: vec4<f32>;\n\nfn linearToSrgb_u0028_vf3_u003b(c: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var low: vec3<f32>;\n    var high: vec3<f32>;\n\n    let _e55 = (*c);\n    low = (_e55 * 12.92f);\n    let _e57 = (*c);\n    high = ((pow(max(_e57, vec3<f32>(0f, 0f, 0f)), vec3<f32>(0.41666666f, 0.41666666f, 0.41666666f)) * 1.055f) - vec3(0.055f));\n    let _e63 = high;\n    let _e64 = low;\n    let _e65 = (*c);\n    return mix(_e63, _e64, step(_e65, vec3<f32>(0.0031308f, 0.0031308f, 0.0031308f)));\n}\n\nfn rrtAndOdtFit_u0028_vf3_u003b(v: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var a: vec3<f32>;\n    var b: vec3<f32>;\n\n    let _e55 = (*v);\n    let _e56 = (*v);\n    a = ((_e55 * (_e56 + vec3(0.0245786f))) - vec3(0.000090537f));\n    let _e62 = (*v);\n    let _e63 = (*v);\n    b = ((_e62 * ((_e63 * 0.983729f) + vec3(0.432951f))) + vec3(0.238081f));\n    let _e70 = a;\n    let _e71 = b;\n    return (_e70 / _e71);\n}\n\nfn acesFilmic_u0028_vf3_u003b(x: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var param: vec3<f32>;\n\n    let _e55 = unnamed.uOutputExposure;\n    let _e56 = (*x);\n    (*x) = (_e56 * _e55);\n    let _e58 = (*x);\n    param = (mat3x3<f32>(vec3<f32>(0.59719f, 0.076f, 0.0284f), vec3<f32>(0.35458f, 0.90834f, 0.13383f), vec3<f32>(0.04823f, 0.01566f, 0.83777f)) * _e58);\n    let _e60 = rrtAndOdtFit_u0028_vf3_u003b((&param));\n    return clamp((mat3x3<f32>(vec3<f32>(1.60475f, -0.10208f, -0.00327f), vec3<f32>(-0.53108f, 1.10813f, -0.07276f), vec3<f32>(-0.07367f, -0.00605f, 1.07602f)) * _e60), vec3(0f), vec3(1f));\n}\n\nfn applyOutputTransform_u0028_vf3_u003b(c_1: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var param_1: vec3<f32>;\n    var param_2: vec3<f32>;\n\n    let _e56 = unnamed.uOutputTransform;\n    if (_e56 == 0i) {\n        let _e58 = (*c_1);\n        return _e58;\n    }\n    let _e60 = unnamed.uOutputTransform;\n    if (_e60 == 2i) {\n        let _e62 = (*c_1);\n        param_1 = _e62;\n        let _e63 = acesFilmic_u0028_vf3_u003b((&param_1));\n        (*c_1) = _e63;\n    }\n    let _e64 = (*c_1);\n    param_2 = _e64;\n    let _e65 = linearToSrgb_u0028_vf3_u003b((&param_2));\n    return _e65;\n}\n\nfn main_1() {\n    var texel: vec4<f32>;\n    var colour: vec4<f32>;\n    var param_3: vec3<f32>;\n\n    let _e55 = vUv_1;\n    let _e56 = textureSample(uSpriteTexture_t, uSpriteTexture_s, _e55);\n    texel = _e56;\n    let _e57 = texel;\n    let _e58 = vTint_1;\n    colour = (_e57 * _e58);\n    let _e61 = colour[3u];\n    if (_e61 < 0.00392157f) {\n        discard;\n    }\n    let _e63 = colour;\n    param_3 = _e63.xyz;\n    let _e65 = applyOutputTransform_u0028_vf3_u003b((&param_3));\n    let _e66 = colour;\n    colour = vec4<f32>(_e65.x, _e65.y, _e65.z, _e66.w);\n    let _e72 = colour;\n    let _e75 = colour[3u];\n    let _e76 = (_e72.xyz * _e75);\n    let _e78 = colour[3u];\n    fragColor = vec4<f32>(_e76.x, _e76.y, _e76.z, _e78);\n    return;\n}\n\n@fragment \nfn main(@location(0) vUv: vec2<f32>, @location(1) vTint: vec4<f32>) -> @location(0) vec4<f32> {\n    vUv_1 = vUv;\n    vTint_1 = vTint;\n    main_1();\n    let _e5 = fragColor;\n    return _e5;\n}\n";
+export const SPRITE_FRAG_WGSL = "struct Uniforms {\n    uOutputTransform: i32,\n    uOutputExposure: f32,\n}\n\n@group(0) @binding(1) \nvar<uniform> unnamed: Uniforms;\n@group(0) @binding(32) \nvar uSpriteTexture_t: texture_2d<f32>;\n@group(0) @binding(33) \nvar uSpriteTexture_s: sampler;\nvar<private> vUv_1: vec2<f32>;\nvar<private> vTint_1: vec4<f32>;\nvar<private> fragColor: vec4<f32>;\n\nfn linearToSrgb_u0028_vf3_u003b(c: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var low: vec3<f32>;\n    var high: vec3<f32>;\n\n    let _e61 = (*c);\n    low = (_e61 * 12.92f);\n    let _e63 = (*c);\n    high = ((pow(max(_e63, vec3<f32>(0f, 0f, 0f)), vec3<f32>(0.41666666f, 0.41666666f, 0.41666666f)) * 1.055f) - vec3(0.055f));\n    let _e69 = high;\n    let _e70 = low;\n    let _e71 = (*c);\n    return mix(_e69, _e70, step(_e71, vec3<f32>(0.0031308f, 0.0031308f, 0.0031308f)));\n}\n\nfn highlightShoulder_u0028_vf3_u003b(c_1: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var m: f32;\n    var e: f32;\n\n    let _e62 = (*c_1)[0u];\n    let _e64 = (*c_1)[1u];\n    let _e66 = (*c_1)[2u];\n    m = max(_e62, max(_e64, _e66));\n    let _e69 = m;\n    if (_e69 <= 0.8f) {\n        let _e71 = (*c_1);\n        return _e71;\n    }\n    let _e72 = m;\n    e = (_e72 - 0.8f);\n    let _e74 = (*c_1);\n    let _e75 = e;\n    let _e77 = e;\n    let _e81 = m;\n    return (_e74 * ((0.8f + ((0.2f * _e75) / (_e77 + 0.2f))) / _e81));\n}\n\nfn rrtAndOdtFit_u0028_vf3_u003b(v: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var a: vec3<f32>;\n    var b: vec3<f32>;\n\n    let _e61 = (*v);\n    let _e62 = (*v);\n    a = ((_e61 * (_e62 + vec3(0.0245786f))) - vec3(0.000090537f));\n    let _e68 = (*v);\n    let _e69 = (*v);\n    b = ((_e68 * ((_e69 * 0.983729f) + vec3(0.432951f))) + vec3(0.238081f));\n    let _e76 = a;\n    let _e77 = b;\n    return (_e76 / _e77);\n}\n\nfn acesFilmic_u0028_vf3_u003b(x: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var param: vec3<f32>;\n\n    let _e61 = unnamed.uOutputExposure;\n    let _e62 = (*x);\n    (*x) = (_e62 * _e61);\n    let _e64 = (*x);\n    param = (mat3x3<f32>(vec3<f32>(0.59719f, 0.076f, 0.0284f), vec3<f32>(0.35458f, 0.90834f, 0.13383f), vec3<f32>(0.04823f, 0.01566f, 0.83777f)) * _e64);\n    let _e66 = rrtAndOdtFit_u0028_vf3_u003b((&param));\n    return clamp((mat3x3<f32>(vec3<f32>(1.60475f, -0.10208f, -0.00327f), vec3<f32>(-0.53108f, 1.10813f, -0.07276f), vec3<f32>(-0.07367f, -0.00605f, 1.07602f)) * _e66), vec3(0f), vec3(1f));\n}\n\nfn applyOutputTransform_u0028_vf3_u003b(c_2: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var param_1: vec3<f32>;\n    var param_2: vec3<f32>;\n    var param_3: vec3<f32>;\n\n    let _e63 = unnamed.uOutputTransform;\n    if (_e63 == 0i) {\n        let _e65 = (*c_2);\n        return _e65;\n    }\n    let _e67 = unnamed.uOutputTransform;\n    if (_e67 == 2i) {\n        let _e69 = (*c_2);\n        param_1 = _e69;\n        let _e70 = acesFilmic_u0028_vf3_u003b((&param_1));\n        (*c_2) = _e70;\n    }\n    let _e72 = unnamed.uOutputTransform;\n    if (_e72 == 3i) {\n        let _e74 = (*c_2);\n        let _e76 = unnamed.uOutputExposure;\n        param_2 = (_e74 * _e76);\n        let _e78 = highlightShoulder_u0028_vf3_u003b((&param_2));\n        (*c_2) = _e78;\n    }\n    let _e79 = (*c_2);\n    param_3 = _e79;\n    let _e80 = linearToSrgb_u0028_vf3_u003b((&param_3));\n    return _e80;\n}\n\nfn main_1() {\n    var texel: vec4<f32>;\n    var colour: vec4<f32>;\n    var param_4: vec3<f32>;\n\n    let _e61 = vUv_1;\n    let _e62 = textureSample(uSpriteTexture_t, uSpriteTexture_s, _e61);\n    texel = _e62;\n    let _e63 = texel;\n    let _e64 = vTint_1;\n    colour = (_e63 * _e64);\n    let _e67 = colour[3u];\n    if (_e67 < 0.00392157f) {\n        discard;\n    }\n    let _e69 = colour;\n    param_4 = _e69.xyz;\n    let _e71 = applyOutputTransform_u0028_vf3_u003b((&param_4));\n    let _e72 = colour;\n    colour = vec4<f32>(_e71.x, _e71.y, _e71.z, _e72.w);\n    let _e78 = colour;\n    let _e81 = colour[3u];\n    let _e82 = (_e78.xyz * _e81);\n    let _e84 = colour[3u];\n    fragColor = vec4<f32>(_e82.x, _e82.y, _e82.z, _e84);\n    return;\n}\n\n@fragment \nfn main(@location(0) vUv: vec2<f32>, @location(1) vTint: vec4<f32>) -> @location(0) vec4<f32> {\n    vUv_1 = vUv;\n    vTint_1 = vTint;\n    main_1();\n    let _e5 = fragColor;\n    return _e5;\n}\n";
 export const SPRITE_VERT_WGSL = "struct Uniforms {\n    uToNdc0_: vec4<f32>,\n    uToNdc1_: vec4<f32>,\n    uClipCorrection: mat4x4<f32>,\n}\n\nstruct gl_PerVertex {\n    @builtin(position) gl_Position: vec4<f32>,\n    gl_PointSize: f32,\n}\n\nstruct VertexOutput {\n    @location(0) member: vec2<f32>,\n    @location(1) member_1: vec4<f32>,\n    @builtin(position) gl_Position: vec4<f32>,\n}\n\nvar<private> gl_VertexIndex_1: i32;\nvar<private> aOrigin_1: vec2<f32>;\nvar<private> aEdges_1: vec4<f32>;\n@group(0) @binding(0) \nvar<uniform> unnamed: Uniforms;\nvar<private> vUv: vec2<f32>;\nvar<private> aUv_1: vec4<f32>;\nvar<private> vTint: vec4<f32>;\nvar<private> aTint_1: vec4<f32>;\nvar<private> unnamed_1: gl_PerVertex = gl_PerVertex(vec4<f32>(0f, 0f, 0f, 1f), 1f);\n\nfn main_1() {\n    var corner: vec2<f32>;\n    var indexable: array<vec2<f32>, 6>;\n    var p: vec2<f32>;\n    var ndc: vec2<f32>;\n    var orientation: f32;\n    var along: vec2<f32>;\n    var local: f32;\n\n    let _e31 = gl_VertexIndex_1;\n    indexable = array<vec2<f32>, 6>(vec2<f32>(0f, 0f), vec2<f32>(1f, 0f), vec2<f32>(0f, 1f), vec2<f32>(0f, 1f), vec2<f32>(1f, 0f), vec2<f32>(1f, 1f));\n    let _e33 = indexable[_e31];\n    corner = _e33;\n    let _e34 = aOrigin_1;\n    let _e35 = aEdges_1;\n    let _e38 = corner[0u];\n    let _e41 = aEdges_1;\n    let _e44 = corner[1u];\n    p = ((_e34 + (_e35.xy * _e38)) + (_e41.zw * _e44));\n    let _e49 = unnamed.uToNdc0_[0u];\n    let _e51 = p[0u];\n    let _e55 = unnamed.uToNdc0_[2u];\n    let _e57 = p[1u];\n    let _e62 = unnamed.uToNdc1_[0u];\n    let _e66 = unnamed.uToNdc0_[1u];\n    let _e68 = p[0u];\n    let _e72 = unnamed.uToNdc0_[3u];\n    let _e74 = p[1u];\n    let _e79 = unnamed.uToNdc1_[1u];\n    ndc = vec2<f32>((((_e49 * _e51) + (_e55 * _e57)) + _e62), (((_e66 * _e68) + (_e72 * _e74)) + _e79));\n    let _e84 = unnamed.uToNdc0_[0u];\n    let _e87 = unnamed.uToNdc0_[3u];\n    let _e91 = unnamed.uToNdc0_[1u];\n    let _e94 = unnamed.uToNdc0_[2u];\n    orientation = ((_e84 * _e87) - (_e91 * _e94));\n    let _e98 = corner[0u];\n    let _e99 = orientation;\n    if (_e99 > 0f) {\n        let _e102 = corner[1u];\n        local = (1f - _e102);\n    } else {\n        let _e105 = corner[1u];\n        local = _e105;\n    }\n    let _e106 = local;\n    along = vec2<f32>(_e98, _e106);\n    let _e108 = aUv_1;\n    let _e110 = aUv_1;\n    let _e112 = along;\n    vUv = mix(_e108.xy, _e110.zw, _e112);\n    let _e114 = aTint_1;\n    vTint = _e114;\n    let _e116 = unnamed.uClipCorrection;\n    let _e117 = ndc;\n    unnamed_1.gl_Position = (_e116 * vec4<f32>(_e117.x, _e117.y, 0f, 1f));\n    return;\n}\n\n@vertex \nfn main(@builtin(vertex_index) gl_VertexIndex: u32, @location(3) aOrigin: vec2<f32>, @location(0) aEdges: vec4<f32>, @location(1) aUv: vec4<f32>, @location(2) aTint: vec4<f32>) -> VertexOutput {\n    gl_VertexIndex_1 = i32(gl_VertexIndex);\n    aOrigin_1 = aOrigin;\n    aEdges_1 = aEdges;\n    aUv_1 = aUv;\n    aTint_1 = aTint;\n    main_1();\n    let _e16 = unnamed_1.gl_Position.y;\n    unnamed_1.gl_Position.y = -(_e16);\n    let _e18 = vUv;\n    let _e19 = vTint;\n    let _e20 = unnamed_1.gl_Position;\n    return VertexOutput(_e18, _e19, _e20);\n}\n";
 /**
  * What the transform assigned, so the renderer binds the same numbers.

package/dist/spriteGl.js

@@ -1,4 +1,5 @@
 /** The WebGL2 half of the sprite pass: one program, one instance buffer, one texture slot table. */
+import { blendCovering } from '@driftengine/core';
 import { SPRITE_FRAG, SPRITE_VERT } from './shaders/sprite.js';
 import { SPRITE_FLOATS } from './spriteBatch.js';
 /**
@@ -191,8 +192,9 @@ export function drawWebgl2Sprites(gl, sprites, batch, toNdc, clipCorrection, out
      */
     gl.disable(gl.CULL_FACE);
     gl.enable(gl.BLEND);
-    /* Premultiplied `over`: the fragment stage folds alpha in, so this composes onto opaque pixels. */
-    gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    /* Premultiplied `over`: the fragment stage folds alpha in, so this composes onto opaque pixels,
+       and covers the scene's surface by its alpha so occlusion behind it does not darken it. */
+    blendCovering(gl, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
     gl.disable(gl.DEPTH_TEST);
     gl.depthMask(false);
     gl.activeTexture(gl.TEXTURE0 + SPRITE_UNIT);

package/dist/spriteGpu.d.ts

@@ -6,8 +6,20 @@ export interface GpuSpriteSlot {
     readonly texture: GPUTexture;
     readonly bindGroup: GPUBindGroup;
 }
+/** Pipelines by colour format, then depth format, then sample count: a lookup that allocates nothing. */
+type PipelinesByTarget = Map<GPUTextureFormat, Map<GPUTextureFormat, Map<number, GPURenderPipeline>>>;
 export interface GpuSprites {
-    readonly pipeline: GPURenderPipeline;
+    /**
+     * One pipeline per pass the sprites have been drawn into, chosen at the draw by
+     * `spritePipelineFor`. A pipeline must match its pass's attachments exactly, and a 2D layer is
+     * drawn in the frame and over it, which are two different passes: the scene's target at the
+     * scene's samples, and the canvas at one.
+     */
+    readonly pipelines: PipelinesByTarget;
+    readonly pipelineLayout: GPUPipelineLayout;
+    readonly vertexModule: GPUShaderModule;
+    readonly fragmentModule: GPUShaderModule;
+    readonly label: string;
     readonly layout: GPUBindGroupLayout;
     readonly vertexUniforms: GPUBuffer;
     readonly fragmentUniforms: GPUBuffer;
@@ -28,9 +40,20 @@ export interface GpuSprites {
     readonly fragmentInts: Int32Array;
 }
 export declare function createGpuSprites(device: GPUDevice, format: GPUTextureFormat, depthFormat: GPUTextureFormat, samples: number, capacity: number, slots: number, label: string): GpuSprites;
+/**
+ * The pipeline for a pass with these attachments, built the first time it is asked for.
+ *
+ * Chosen at the draw from what the pass is (`PassContext.format`, `depthFormat`, `samples`), so a
+ * 2D layer drawn over the finished frame, on the canvas at one sample, is not refused for having
+ * been built for the scene target. A lookup through three maps on every later draw, no allocation.
+ */
+export declare function spritePipelineFor(device: GPUDevice, sprites: GpuSprites, format: GPUTextureFormat, depthFormat: GPUTextureFormat, samples: number): GPURenderPipeline;
 export declare function setGpuSpriteTexture(device: GPUDevice, sprites: GpuSprites, slot: number, source: SpriteImage, options: SpriteTextureOptions): void;
 /** The same one white texel, written straight into a texture. See the WebGL2 half for why. */
 export declare function setGpuWhiteTexture(device: GPUDevice, sprites: GpuSprites, slot: number): void;
 export declare function uploadGpuInstances(device: GPUDevice, sprites: GpuSprites, batch: SpriteBatch): void;
-export declare function drawGpuSprites(pass: GPURenderPassEncoder, sprites: GpuSprites, batch: SpriteBatch): void;
+export declare function drawGpuSprites(pass: GPURenderPassEncoder, sprites: GpuSprites, batch: SpriteBatch, 
+/** The pipeline for this pass's attachments: `spritePipelineFor`. */
+pipeline: GPURenderPipeline): void;
 export declare function disposeGpuSprites(sprites: GpuSprites): void;
+export {};

package/dist/spriteGpu.js

@@ -10,7 +10,7 @@ import { SPRITE_FLOATS } from './spriteBatch.js';
  * and nothing else. The alternative was a second copy of the mip blit living here, and the second
  * copy is the one that ends up disagreeing about the colour space.
  */
-import { generateMipChain, mipLevelCount } from '@driftengine/core';
+import { SCENE_ALPHA_COVERS, generateMipChain, mipLevelCount, } from '@driftengine/core';
 const VERT = SPRITE_BINDINGS.SPRITE_VERT;
 const FRAG = SPRITE_BINDINGS.SPRITE_FRAG;
 const STRIDE = SPRITE_FLOATS * 4;
@@ -37,52 +37,14 @@ export function createGpuSprites(device, format, depthFormat, samples, capacity,
             },
         ],
     });
-    const pipeline = device.createRenderPipeline({
-        label,
-        layout: device.createPipelineLayout({ bindGroupLayouts: [layout] }),
-        vertex: {
-            module: device.createShaderModule({ label: `${label}.vert`, code: SPRITE_VERT_WGSL }),
-            entryPoint: 'main',
-            buffers: [
-                {
-                    arrayStride: STRIDE,
-                    stepMode: 'instance',
-                    attributes: [
-                        { shaderLocation: 0, offset: 0, format: 'float32x4' },
-                        { shaderLocation: 1, offset: 16, format: 'float32x4' },
-                        { shaderLocation: 2, offset: 32, format: 'float32x4' },
-                        { shaderLocation: 3, offset: 48, format: 'float32x2' },
-                    ],
-                },
-            ],
-        },
-        fragment: {
-            module: device.createShaderModule({ label: `${label}.frag`, code: SPRITE_FRAG_WGSL }),
-            entryPoint: 'main',
-            targets: [
-                {
-                    format,
-                    /* Premultiplied `over`, matching the WebGL2 half exactly. */
-                    blend: {
-                        color: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
-                        alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
-                    },
-                },
-            ],
-        },
-        /*
-         * Nothing is culled: a sprite is mirrored by giving it a negative width, which reverses its
-         * winding, and a character facing left is exactly that.
-         */
-        primitive: { topology: 'triangle-list', cullMode: 'none' },
-        multisample: { count: samples },
-        /*
-         * Neither tested nor written. The 2D layer's order *is* its layering — there is no z to sort
-         * by — and a pass that depth-tested would let whatever 3D geometry is in the frame punch holes
-         * in an overlay drawn over it. Declared all the same, because a pipeline in a render pass that
-         * has a depth attachment must name its format.
-         */
-        depthStencil: { format: depthFormat, depthWriteEnabled: false, depthCompare: 'always' },
+    const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [layout] });
+    const vertexModule = device.createShaderModule({
+        label: `${label}.vert`,
+        code: SPRITE_VERT_WGSL,
+    });
+    const fragmentModule = device.createShaderModule({
+        label: `${label}.frag`,
+        code: SPRITE_FRAG_WGSL,
     });
     const vertexUniforms = device.createBuffer({
         label: `${label}.vertexUniforms`,
@@ -101,8 +63,12 @@ export function createGpuSprites(device, format, depthFormat, samples, capacity,
     });
     const vertexScratch = new ArrayBuffer(VERT.uniformSize);
     const fragmentScratch = new ArrayBuffer(FRAG.uniformSize);
-    return {
-        pipeline,
+    const sprites = {
+        pipelines: new Map(),
+        pipelineLayout,
+        vertexModule,
+        fragmentModule,
+        label,
         layout,
         vertexUniforms,
         fragmentUniforms,
@@ -138,6 +104,81 @@ export function createGpuSprites(device, format, depthFormat, samples, capacity,
         fragmentFloats: new Float32Array(fragmentScratch),
         fragmentInts: new Int32Array(fragmentScratch),
     };
+    /* The frame's own target, built now, so the common case compiles before its first draw. */
+    spritePipelineFor(device, sprites, format, depthFormat, samples);
+    return sprites;
+}
+/**
+ * The pipeline for a pass with these attachments, built the first time it is asked for.
+ *
+ * Chosen at the draw from what the pass is (`PassContext.format`, `depthFormat`, `samples`), so a
+ * 2D layer drawn over the finished frame, on the canvas at one sample, is not refused for having
+ * been built for the scene target. A lookup through three maps on every later draw, no allocation.
+ */
+export function spritePipelineFor(device, sprites, format, depthFormat, samples) {
+    let byDepth = sprites.pipelines.get(format);
+    if (byDepth === undefined) {
+        byDepth = new Map();
+        sprites.pipelines.set(format, byDepth);
+    }
+    let bySamples = byDepth.get(depthFormat);
+    if (bySamples === undefined) {
+        bySamples = new Map();
+        byDepth.set(depthFormat, bySamples);
+    }
+    const found = bySamples.get(samples);
+    if (found !== undefined)
+        return found;
+    const pipeline = device.createRenderPipeline({
+        label: `${sprites.label}:${format}x${samples}`,
+        layout: sprites.pipelineLayout,
+        vertex: {
+            module: sprites.vertexModule,
+            entryPoint: 'main',
+            buffers: [
+                {
+                    arrayStride: STRIDE,
+                    stepMode: 'instance',
+                    attributes: [
+                        { shaderLocation: 0, offset: 0, format: 'float32x4' },
+                        { shaderLocation: 1, offset: 16, format: 'float32x4' },
+                        { shaderLocation: 2, offset: 32, format: 'float32x4' },
+                        { shaderLocation: 3, offset: 48, format: 'float32x2' },
+                    ],
+                },
+            ],
+        },
+        fragment: {
+            module: sprites.fragmentModule,
+            entryPoint: 'main',
+            targets: [
+                {
+                    format,
+                    /* Premultiplied `over`, matching the WebGL2 half exactly; a sprite covers the scene's
+                       surface by its alpha, so occlusion behind it does not darken it. */
+                    blend: {
+                        color: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+                        alpha: SCENE_ALPHA_COVERS,
+                    },
+                },
+            ],
+        },
+        /*
+         * Nothing is culled: a sprite is mirrored by giving it a negative width, which reverses its
+         * winding, and a character facing left is exactly that.
+         */
+        primitive: { topology: 'triangle-list', cullMode: 'none' },
+        multisample: { count: samples },
+        /*
+         * Neither tested nor written. The 2D layer's order *is* its layering — there is no z to sort
+         * by — and a pass that depth-tested would let whatever 3D geometry is in the frame punch holes
+         * in an overlay drawn over it. Declared all the same, because a pipeline in a render pass that
+         * has a depth attachment must name its format.
+         */
+        depthStencil: { format: depthFormat, depthWriteEnabled: false, depthCompare: 'always' },
+    });
+    bySamples.set(samples, pipeline);
+    return pipeline;
 }
 /**
  * One pipeline per format, kept on the sprite pass rather than in the renderer's cache.
@@ -231,10 +272,12 @@ export function uploadGpuInstances(device, sprites, batch) {
         return;
     device.queue.writeBuffer(sprites.instances, 0, batch.instances.buffer, batch.instances.byteOffset, batch.count * STRIDE);
 }
-export function drawGpuSprites(pass, sprites, batch) {
+export function drawGpuSprites(pass, sprites, batch, 
+/** The pipeline for this pass's attachments: `spritePipelineFor`. */
+pipeline) {
     if (batch.count === 0)
         return;
-    pass.setPipeline(sprites.pipeline);
+    pass.setPipeline(pipeline);
     for (let run = 0; run < batch.runCount; run += 1) {
         const at = run * 3;
         const slot = sprites.slots[batch.runs[at]];

package/dist/spritePass.js

@@ -3,7 +3,7 @@ import { SPRITE_BINDINGS } from './shaders/generated/sprite.wgsl.js';
 import { createAffine2D } from './camera2d.js';
 import { createSpriteBatch, resetSpriteBatch } from './spriteBatch.js';
 import { createWebgl2Sprites, disposeWebgl2Sprites, drawWebgl2Sprites, setWebgl2SpriteTexture, setWebgl2WhiteTexture, uploadWebgl2Instances, } from './spriteGl.js';
-import { createGpuSprites, disposeGpuSprites, drawGpuSprites, setGpuSpriteTexture, setGpuWhiteTexture, uploadGpuInstances, } from './spriteGpu.js';
+import { createGpuSprites, disposeGpuSprites, drawGpuSprites, spritePipelineFor, setGpuSpriteTexture, setGpuWhiteTexture, uploadGpuInstances, } from './spriteGpu.js';
 import { DEFAULT_SPRITE_TEXTURE_OPTIONS } from './spriteTexture.js';
 const VERT = SPRITE_BINDINGS.SPRITE_VERT;
 const FRAG = SPRITE_BINDINGS.SPRITE_FRAG;
@@ -126,7 +126,8 @@ export function createSpritePass(options = {}) {
             device.queue.writeBuffer(gpu.vertexUniforms, 0, gpu.vertexScratch);
             device.queue.writeBuffer(gpu.fragmentUniforms, 0, gpu.fragmentScratch);
             uploadGpuInstances(device, gpu, batch);
-            drawGpuSprites(ctx.pass, gpu, batch);
+            /* For the pass this lands in, which after `endFrame` is the canvas: see `spritePipelineFor`. */
+            drawGpuSprites(ctx.pass, gpu, batch, spritePipelineFor(device, gpu, ctx.format, ctx.depthFormat, ctx.samples));
         },
         dispose() {
             if (gl !== null && context !== null)

package/dist/uiDraw.js

@@ -1,6 +1,7 @@
 /** Turn a laid-out interface tree into quads, parents first so children land on top. */
 import { drawSprite } from './spriteBatch.js';
 import { createSpriteFrame } from './spriteSheet.js';
+import { layersPresent } from './uiLayer.js';
 /* One placement, refilled per node. This is a per-frame path and these are the only objects in it. */
 const PLACEMENT = {
     x: 0,
@@ -30,11 +31,26 @@ const CUT = createSpriteFrame();
  * left at.
  */
 export function drawUiTree(batch, root, white, sink) {
-    return drawWithin(batch, root, white, sink, -Infinity, -Infinity, Infinity, Infinity);
+    /*
+     * **Layer by layer, lowest first, and tree order within one.** A raised node — a dropdown that
+     * must cover the panel its control sits in — was drawn in tree order with everything else, so a
+     * later sibling covered it. Each layer is a walk of the whole tree with the clips it would have
+     * had anyway, so a raised node is still cut by a clipping ancestor; a tree with no raised node is
+     * one walk, as before.
+     */
+    const count = layersPresent(root, LAYERS);
+    let drawn = 0;
+    for (let at = 0; at < count; at += 1) {
+        drawn += drawWithin(batch, root, white, sink, -Infinity, -Infinity, Infinity, Infinity, 0, LAYERS[at] ?? 0);
+    }
+    return drawn;
 }
-function drawWithin(batch, node, white, sink, left, top, right, bottom) {
+/** The layers of the tree being drawn, reused: this runs per frame. */
+const LAYERS = [];
+function drawWithin(batch, node, white, sink, left, top, right, bottom, inherited, only) {
     if (node.hidden)
         return 0;
+    const layer = node.layer === 0 ? inherited : node.layer;
     const rect = node.rect;
     const clipped = left !== -Infinity;
     const x0 = Math.max(rect.x, left);
@@ -47,7 +63,7 @@ function drawWithin(batch, node, white, sink, left, top, right, bottom) {
      * a node is drawn as it always was, whatever its size. Its children are cut one by one either way,
      * since a child can lie outside its parent's box and still inside the clip.
      */
-    if (!clipped || (x1 > x0 && y1 > y0)) {
+    if (layer === only && (!clipped || (x1 > x0 && y1 > y0))) {
         PLACEMENT.x = clipped ? x0 : rect.x;
         PLACEMENT.y = clipped ? y0 : rect.y;
         PLACEMENT.w = clipped ? x1 - x0 : rect.w;
@@ -75,8 +91,9 @@ function drawWithin(batch, node, white, sink, left, top, right, bottom) {
     const ct = keep ? Math.max(top, rect.y) : top;
     const cr = keep ? Math.min(right, rect.x + rect.w) : right;
     const cb = keep ? Math.min(bottom, rect.y + rect.h) : bottom;
-    for (const child of node.children)
-        drawn += drawWithin(batch, child, white, sink, cl, ct, cr, cb);
+    for (const child of node.children) {
+        drawn += drawWithin(batch, child, white, sink, cl, ct, cr, cb, layer, only);
+    }
     return drawn;
 }
 /** The part of a node's frame its visible box shows, or the whole frame when nothing was cut. */

package/dist/uiFocus.js

@@ -1,5 +1,6 @@
 /** Which node a point is on, and which node a keyboard should be talking to. */
 import { uiRectHolds } from './uiNode.js';
+import { layersPresent } from './uiLayer.js';
 /**
  * The interactive node under a point, or `null`.
  *
@@ -14,18 +15,32 @@ import { uiRectHolds } from './uiNode.js';
  * Allocates nothing.
  */
 export function uiHitTest(root, x, y) {
-    if (root.hidden)
+    /* The highest layer first, as it is drawn last: a raised popup takes the pointer over a later
+       sibling it covers. See `drawUiTree`. */
+    const count = layersPresent(root, HIT_LAYERS);
+    for (let at = count - 1; at >= 0; at -= 1) {
+        const hit = hitOn(root, x, y, 0, HIT_LAYERS[at] ?? 0);
+        if (hit !== null)
+            return hit;
+    }
+    return null;
+}
+/** The layers of the tree being pointed at, reused: a hit test runs per pointer event. */
+const HIT_LAYERS = [];
+function hitOn(node, x, y, inherited, only) {
+    if (node.hidden)
         return null;
     /* A clipping node bounds its descendants here as it does in the picture: a row scrolled out of a
        list is not under the pointer, whatever is drawn where it would have been. */
-    if (root.clip && !uiRectHolds(root, x, y))
+    if (node.clip && !uiRectHolds(node, x, y))
         return null;
-    for (let i = root.children.length - 1; i >= 0; i -= 1) {
-        const hit = uiHitTest(root.children[i], x, y);
+    const layer = node.layer === 0 ? inherited : node.layer;
+    for (let i = node.children.length - 1; i >= 0; i -= 1) {
+        const hit = hitOn(node.children[i], x, y, layer, only);
         if (hit !== null)
             return hit;
     }
-    return root.interactive && uiRectHolds(root, x, y) ? root : null;
+    return layer === only && node.interactive && uiRectHolds(node, x, y) ? node : null;
 }
 /**
  * Every focusable node, in tree order, appended to `out`.

package/dist/uiLayer.d.ts

@@ -16,3 +16,10 @@
 import type { UiNode } from './uiNode.ts';
 /** Fill `out` with the tree in draw order and return how many entries were written. */
 export declare function layerOrder(root: UiNode, out: UiNode[]): number;
+/**
+ * The layers a tree draws on, ascending, into `out`; how many there are.
+ *
+ * What `drawUiTree` and `uiHitTest` walk a tree once per: a tree with no raised node answers one
+ * layer and is walked once, exactly as it was before either read a layer.
+ */
+export declare function layersPresent(root: UiNode, out: number[]): number;

package/dist/uiLayer.js

@@ -28,3 +28,27 @@ export function layerOrder(root, out) {
     out.length = count;
     return count;
 }
+/** Ascending, without allocating a comparator per call. */
+const ASCENDING = (a, b) => a - b;
+/**
+ * The layers a tree draws on, ascending, into `out`; how many there are.
+ *
+ * What `drawUiTree` and `uiHitTest` walk a tree once per: a tree with no raised node answers one
+ * layer and is walked once, exactly as it was before either read a layer.
+ */
+export function layersPresent(root, out) {
+    out.length = 0;
+    collect(root, 0, out);
+    if (out.length > 1)
+        out.sort(ASCENDING);
+    return out.length;
+}
+function collect(node, inherited, out) {
+    if (node.hidden)
+        return;
+    const layer = node.layer === 0 ? inherited : node.layer;
+    if (!out.includes(layer))
+        out.push(layer);
+    for (const child of node.children)
+        collect(child, layer, out);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@driftengine/ui2d",
-  "version": "4.8.1",
+  "version": "4.8.3",
   "description": "The 2D layer: batched sprites, sheets, tilemaps, and a retained interface tree over them",
   "license": "Apache-2.0",
   "type": "module",
@@ -27,7 +27,7 @@
   ],
   "sideEffects": false,
   "peerDependencies": {
-    "@driftengine/core": "4.8.1"
+    "@driftengine/core": "4.8.3"
   },
   "author": "Drift Technologies",
   "repository": {

package/src/shaders/generated/sprite.wgsl.ts

@@ -5,7 +5,7 @@
  * the next generation, and `npm run wgsl:check` fails the build when this is stale.
  */
 
-export const SPRITE_FRAG_WGSL = "struct Uniforms {\n    uOutputTransform: i32,\n    uOutputExposure: f32,\n}\n\n@group(0) @binding(1) \nvar<uniform> unnamed: Uniforms;\n@group(0) @binding(32) \nvar uSpriteTexture_t: texture_2d<f32>;\n@group(0) @binding(33) \nvar uSpriteTexture_s: sampler;\nvar<private> vUv_1: vec2<f32>;\nvar<private> vTint_1: vec4<f32>;\nvar<private> fragColor: vec4<f32>;\n\nfn linearToSrgb_u0028_vf3_u003b(c: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var low: vec3<f32>;\n    var high: vec3<f32>;\n\n    let _e55 = (*c);\n    low = (_e55 * 12.92f);\n    let _e57 = (*c);\n    high = ((pow(max(_e57, vec3<f32>(0f, 0f, 0f)), vec3<f32>(0.41666666f, 0.41666666f, 0.41666666f)) * 1.055f) - vec3(0.055f));\n    let _e63 = high;\n    let _e64 = low;\n    let _e65 = (*c);\n    return mix(_e63, _e64, step(_e65, vec3<f32>(0.0031308f, 0.0031308f, 0.0031308f)));\n}\n\nfn rrtAndOdtFit_u0028_vf3_u003b(v: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var a: vec3<f32>;\n    var b: vec3<f32>;\n\n    let _e55 = (*v);\n    let _e56 = (*v);\n    a = ((_e55 * (_e56 + vec3(0.0245786f))) - vec3(0.000090537f));\n    let _e62 = (*v);\n    let _e63 = (*v);\n    b = ((_e62 * ((_e63 * 0.983729f) + vec3(0.432951f))) + vec3(0.238081f));\n    let _e70 = a;\n    let _e71 = b;\n    return (_e70 / _e71);\n}\n\nfn acesFilmic_u0028_vf3_u003b(x: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var param: vec3<f32>;\n\n    let _e55 = unnamed.uOutputExposure;\n    let _e56 = (*x);\n    (*x) = (_e56 * _e55);\n    let _e58 = (*x);\n    param = (mat3x3<f32>(vec3<f32>(0.59719f, 0.076f, 0.0284f), vec3<f32>(0.35458f, 0.90834f, 0.13383f), vec3<f32>(0.04823f, 0.01566f, 0.83777f)) * _e58);\n    let _e60 = rrtAndOdtFit_u0028_vf3_u003b((&param));\n    return clamp((mat3x3<f32>(vec3<f32>(1.60475f, -0.10208f, -0.00327f), vec3<f32>(-0.53108f, 1.10813f, -0.07276f), vec3<f32>(-0.07367f, -0.00605f, 1.07602f)) * _e60), vec3(0f), vec3(1f));\n}\n\nfn applyOutputTransform_u0028_vf3_u003b(c_1: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var param_1: vec3<f32>;\n    var param_2: vec3<f32>;\n\n    let _e56 = unnamed.uOutputTransform;\n    if (_e56 == 0i) {\n        let _e58 = (*c_1);\n        return _e58;\n    }\n    let _e60 = unnamed.uOutputTransform;\n    if (_e60 == 2i) {\n        let _e62 = (*c_1);\n        param_1 = _e62;\n        let _e63 = acesFilmic_u0028_vf3_u003b((&param_1));\n        (*c_1) = _e63;\n    }\n    let _e64 = (*c_1);\n    param_2 = _e64;\n    let _e65 = linearToSrgb_u0028_vf3_u003b((&param_2));\n    return _e65;\n}\n\nfn main_1() {\n    var texel: vec4<f32>;\n    var colour: vec4<f32>;\n    var param_3: vec3<f32>;\n\n    let _e55 = vUv_1;\n    let _e56 = textureSample(uSpriteTexture_t, uSpriteTexture_s, _e55);\n    texel = _e56;\n    let _e57 = texel;\n    let _e58 = vTint_1;\n    colour = (_e57 * _e58);\n    let _e61 = colour[3u];\n    if (_e61 < 0.00392157f) {\n        discard;\n    }\n    let _e63 = colour;\n    param_3 = _e63.xyz;\n    let _e65 = applyOutputTransform_u0028_vf3_u003b((&param_3));\n    let _e66 = colour;\n    colour = vec4<f32>(_e65.x, _e65.y, _e65.z, _e66.w);\n    let _e72 = colour;\n    let _e75 = colour[3u];\n    let _e76 = (_e72.xyz * _e75);\n    let _e78 = colour[3u];\n    fragColor = vec4<f32>(_e76.x, _e76.y, _e76.z, _e78);\n    return;\n}\n\n@fragment \nfn main(@location(0) vUv: vec2<f32>, @location(1) vTint: vec4<f32>) -> @location(0) vec4<f32> {\n    vUv_1 = vUv;\n    vTint_1 = vTint;\n    main_1();\n    let _e5 = fragColor;\n    return _e5;\n}\n";
+export const SPRITE_FRAG_WGSL = "struct Uniforms {\n    uOutputTransform: i32,\n    uOutputExposure: f32,\n}\n\n@group(0) @binding(1) \nvar<uniform> unnamed: Uniforms;\n@group(0) @binding(32) \nvar uSpriteTexture_t: texture_2d<f32>;\n@group(0) @binding(33) \nvar uSpriteTexture_s: sampler;\nvar<private> vUv_1: vec2<f32>;\nvar<private> vTint_1: vec4<f32>;\nvar<private> fragColor: vec4<f32>;\n\nfn linearToSrgb_u0028_vf3_u003b(c: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var low: vec3<f32>;\n    var high: vec3<f32>;\n\n    let _e61 = (*c);\n    low = (_e61 * 12.92f);\n    let _e63 = (*c);\n    high = ((pow(max(_e63, vec3<f32>(0f, 0f, 0f)), vec3<f32>(0.41666666f, 0.41666666f, 0.41666666f)) * 1.055f) - vec3(0.055f));\n    let _e69 = high;\n    let _e70 = low;\n    let _e71 = (*c);\n    return mix(_e69, _e70, step(_e71, vec3<f32>(0.0031308f, 0.0031308f, 0.0031308f)));\n}\n\nfn highlightShoulder_u0028_vf3_u003b(c_1: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var m: f32;\n    var e: f32;\n\n    let _e62 = (*c_1)[0u];\n    let _e64 = (*c_1)[1u];\n    let _e66 = (*c_1)[2u];\n    m = max(_e62, max(_e64, _e66));\n    let _e69 = m;\n    if (_e69 <= 0.8f) {\n        let _e71 = (*c_1);\n        return _e71;\n    }\n    let _e72 = m;\n    e = (_e72 - 0.8f);\n    let _e74 = (*c_1);\n    let _e75 = e;\n    let _e77 = e;\n    let _e81 = m;\n    return (_e74 * ((0.8f + ((0.2f * _e75) / (_e77 + 0.2f))) / _e81));\n}\n\nfn rrtAndOdtFit_u0028_vf3_u003b(v: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var a: vec3<f32>;\n    var b: vec3<f32>;\n\n    let _e61 = (*v);\n    let _e62 = (*v);\n    a = ((_e61 * (_e62 + vec3(0.0245786f))) - vec3(0.000090537f));\n    let _e68 = (*v);\n    let _e69 = (*v);\n    b = ((_e68 * ((_e69 * 0.983729f) + vec3(0.432951f))) + vec3(0.238081f));\n    let _e76 = a;\n    let _e77 = b;\n    return (_e76 / _e77);\n}\n\nfn acesFilmic_u0028_vf3_u003b(x: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var param: vec3<f32>;\n\n    let _e61 = unnamed.uOutputExposure;\n    let _e62 = (*x);\n    (*x) = (_e62 * _e61);\n    let _e64 = (*x);\n    param = (mat3x3<f32>(vec3<f32>(0.59719f, 0.076f, 0.0284f), vec3<f32>(0.35458f, 0.90834f, 0.13383f), vec3<f32>(0.04823f, 0.01566f, 0.83777f)) * _e64);\n    let _e66 = rrtAndOdtFit_u0028_vf3_u003b((&param));\n    return clamp((mat3x3<f32>(vec3<f32>(1.60475f, -0.10208f, -0.00327f), vec3<f32>(-0.53108f, 1.10813f, -0.07276f), vec3<f32>(-0.07367f, -0.00605f, 1.07602f)) * _e66), vec3(0f), vec3(1f));\n}\n\nfn applyOutputTransform_u0028_vf3_u003b(c_2: ptr<function, vec3<f32>>) -> vec3<f32> {\n    var param_1: vec3<f32>;\n    var param_2: vec3<f32>;\n    var param_3: vec3<f32>;\n\n    let _e63 = unnamed.uOutputTransform;\n    if (_e63 == 0i) {\n        let _e65 = (*c_2);\n        return _e65;\n    }\n    let _e67 = unnamed.uOutputTransform;\n    if (_e67 == 2i) {\n        let _e69 = (*c_2);\n        param_1 = _e69;\n        let _e70 = acesFilmic_u0028_vf3_u003b((&param_1));\n        (*c_2) = _e70;\n    }\n    let _e72 = unnamed.uOutputTransform;\n    if (_e72 == 3i) {\n        let _e74 = (*c_2);\n        let _e76 = unnamed.uOutputExposure;\n        param_2 = (_e74 * _e76);\n        let _e78 = highlightShoulder_u0028_vf3_u003b((&param_2));\n        (*c_2) = _e78;\n    }\n    let _e79 = (*c_2);\n    param_3 = _e79;\n    let _e80 = linearToSrgb_u0028_vf3_u003b((&param_3));\n    return _e80;\n}\n\nfn main_1() {\n    var texel: vec4<f32>;\n    var colour: vec4<f32>;\n    var param_4: vec3<f32>;\n\n    let _e61 = vUv_1;\n    let _e62 = textureSample(uSpriteTexture_t, uSpriteTexture_s, _e61);\n    texel = _e62;\n    let _e63 = texel;\n    let _e64 = vTint_1;\n    colour = (_e63 * _e64);\n    let _e67 = colour[3u];\n    if (_e67 < 0.00392157f) {\n        discard;\n    }\n    let _e69 = colour;\n    param_4 = _e69.xyz;\n    let _e71 = applyOutputTransform_u0028_vf3_u003b((&param_4));\n    let _e72 = colour;\n    colour = vec4<f32>(_e71.x, _e71.y, _e71.z, _e72.w);\n    let _e78 = colour;\n    let _e81 = colour[3u];\n    let _e82 = (_e78.xyz * _e81);\n    let _e84 = colour[3u];\n    fragColor = vec4<f32>(_e82.x, _e82.y, _e82.z, _e84);\n    return;\n}\n\n@fragment \nfn main(@location(0) vUv: vec2<f32>, @location(1) vTint: vec4<f32>) -> @location(0) vec4<f32> {\n    vUv_1 = vUv;\n    vTint_1 = vTint;\n    main_1();\n    let _e5 = fragColor;\n    return _e5;\n}\n";
 
 export const SPRITE_VERT_WGSL = "struct Uniforms {\n    uToNdc0_: vec4<f32>,\n    uToNdc1_: vec4<f32>,\n    uClipCorrection: mat4x4<f32>,\n}\n\nstruct gl_PerVertex {\n    @builtin(position) gl_Position: vec4<f32>,\n    gl_PointSize: f32,\n}\n\nstruct VertexOutput {\n    @location(0) member: vec2<f32>,\n    @location(1) member_1: vec4<f32>,\n    @builtin(position) gl_Position: vec4<f32>,\n}\n\nvar<private> gl_VertexIndex_1: i32;\nvar<private> aOrigin_1: vec2<f32>;\nvar<private> aEdges_1: vec4<f32>;\n@group(0) @binding(0) \nvar<uniform> unnamed: Uniforms;\nvar<private> vUv: vec2<f32>;\nvar<private> aUv_1: vec4<f32>;\nvar<private> vTint: vec4<f32>;\nvar<private> aTint_1: vec4<f32>;\nvar<private> unnamed_1: gl_PerVertex = gl_PerVertex(vec4<f32>(0f, 0f, 0f, 1f), 1f);\n\nfn main_1() {\n    var corner: vec2<f32>;\n    var indexable: array<vec2<f32>, 6>;\n    var p: vec2<f32>;\n    var ndc: vec2<f32>;\n    var orientation: f32;\n    var along: vec2<f32>;\n    var local: f32;\n\n    let _e31 = gl_VertexIndex_1;\n    indexable = array<vec2<f32>, 6>(vec2<f32>(0f, 0f), vec2<f32>(1f, 0f), vec2<f32>(0f, 1f), vec2<f32>(0f, 1f), vec2<f32>(1f, 0f), vec2<f32>(1f, 1f));\n    let _e33 = indexable[_e31];\n    corner = _e33;\n    let _e34 = aOrigin_1;\n    let _e35 = aEdges_1;\n    let _e38 = corner[0u];\n    let _e41 = aEdges_1;\n    let _e44 = corner[1u];\n    p = ((_e34 + (_e35.xy * _e38)) + (_e41.zw * _e44));\n    let _e49 = unnamed.uToNdc0_[0u];\n    let _e51 = p[0u];\n    let _e55 = unnamed.uToNdc0_[2u];\n    let _e57 = p[1u];\n    let _e62 = unnamed.uToNdc1_[0u];\n    let _e66 = unnamed.uToNdc0_[1u];\n    let _e68 = p[0u];\n    let _e72 = unnamed.uToNdc0_[3u];\n    let _e74 = p[1u];\n    let _e79 = unnamed.uToNdc1_[1u];\n    ndc = vec2<f32>((((_e49 * _e51) + (_e55 * _e57)) + _e62), (((_e66 * _e68) + (_e72 * _e74)) + _e79));\n    let _e84 = unnamed.uToNdc0_[0u];\n    let _e87 = unnamed.uToNdc0_[3u];\n    let _e91 = unnamed.uToNdc0_[1u];\n    let _e94 = unnamed.uToNdc0_[2u];\n    orientation = ((_e84 * _e87) - (_e91 * _e94));\n    let _e98 = corner[0u];\n    let _e99 = orientation;\n    if (_e99 > 0f) {\n        let _e102 = corner[1u];\n        local = (1f - _e102);\n    } else {\n        let _e105 = corner[1u];\n        local = _e105;\n    }\n    let _e106 = local;\n    along = vec2<f32>(_e98, _e106);\n    let _e108 = aUv_1;\n    let _e110 = aUv_1;\n    let _e112 = along;\n    vUv = mix(_e108.xy, _e110.zw, _e112);\n    let _e114 = aTint_1;\n    vTint = _e114;\n    let _e116 = unnamed.uClipCorrection;\n    let _e117 = ndc;\n    unnamed_1.gl_Position = (_e116 * vec4<f32>(_e117.x, _e117.y, 0f, 1f));\n    return;\n}\n\n@vertex \nfn main(@builtin(vertex_index) gl_VertexIndex: u32, @location(3) aOrigin: vec2<f32>, @location(0) aEdges: vec4<f32>, @location(1) aUv: vec4<f32>, @location(2) aTint: vec4<f32>) -> VertexOutput {\n    gl_VertexIndex_1 = i32(gl_VertexIndex);\n    aOrigin_1 = aOrigin;\n    aEdges_1 = aEdges;\n    aUv_1 = aUv;\n    aTint_1 = aTint;\n    main_1();\n    let _e16 = unnamed_1.gl_Position.y;\n    unnamed_1.gl_Position.y = -(_e16);\n    let _e18 = vUv;\n    let _e19 = vTint;\n    let _e20 = unnamed_1.gl_Position;\n    return VertexOutput(_e18, _e19, _e20);\n}\n";
 

package/src/spriteGl.ts

@@ -1,5 +1,7 @@
 /** The WebGL2 half of the sprite pass: one program, one instance buffer, one texture slot table. */
 
+import { blendCovering } from '@driftengine/core';
+
 import { SPRITE_FRAG, SPRITE_VERT } from './shaders/sprite.ts';
 import { SPRITE_FLOATS } from './spriteBatch.ts';
 import type { SpriteBatch } from './spriteBatch.ts';
@@ -260,8 +262,9 @@ export function drawWebgl2Sprites(
    */
   gl.disable(gl.CULL_FACE);
   gl.enable(gl.BLEND);
-  /* Premultiplied `over`: the fragment stage folds alpha in, so this composes onto opaque pixels. */
-  gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+  /* Premultiplied `over`: the fragment stage folds alpha in, so this composes onto opaque pixels,
+     and covers the scene's surface by its alpha so occlusion behind it does not darken it. */
+  blendCovering(gl, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
   gl.disable(gl.DEPTH_TEST);
   gl.depthMask(false);
   gl.activeTexture(gl.TEXTURE0 + SPRITE_UNIT);

package/src/spriteGpu.ts

@@ -16,7 +16,12 @@ import type { SpriteBatch } from './spriteBatch.ts';
  * and nothing else. The alternative was a second copy of the mip blit living here, and the second
  * copy is the one that ends up disagreeing about the colour space.
  */
-import { generateMipChain, mipLevelCount, type MipPipelines } from '@driftengine/core';
+import {
+  SCENE_ALPHA_COVERS,
+  generateMipChain,
+  mipLevelCount,
+  type MipPipelines,
+} from '@driftengine/core';
 import type { SpriteImage, SpriteTextureOptions } from './spriteTexture.ts';
 
 const VERT = SPRITE_BINDINGS.SPRITE_VERT;
@@ -34,8 +39,24 @@ export interface GpuSpriteSlot {
   readonly bindGroup: GPUBindGroup;
 }
 
+/** Pipelines by colour format, then depth format, then sample count: a lookup that allocates nothing. */
+type PipelinesByTarget = Map<
+  GPUTextureFormat,
+  Map<GPUTextureFormat, Map<number, GPURenderPipeline>>
+>;
+
 export interface GpuSprites {
-  readonly pipeline: GPURenderPipeline;
+  /**
+   * One pipeline per pass the sprites have been drawn into, chosen at the draw by
+   * `spritePipelineFor`. A pipeline must match its pass's attachments exactly, and a 2D layer is
+   * drawn in the frame and over it, which are two different passes: the scene's target at the
+   * scene's samples, and the canvas at one.
+   */
+  readonly pipelines: PipelinesByTarget;
+  readonly pipelineLayout: GPUPipelineLayout;
+  readonly vertexModule: GPUShaderModule;
+  readonly fragmentModule: GPUShaderModule;
+  readonly label: string;
   readonly layout: GPUBindGroupLayout;
   readonly vertexUniforms: GPUBuffer;
   readonly fragmentUniforms: GPUBuffer;
@@ -83,52 +104,14 @@ export function createGpuSprites(
     ],
   });
 
-  const pipeline = device.createRenderPipeline({
-    label,
-    layout: device.createPipelineLayout({ bindGroupLayouts: [layout] }),
-    vertex: {
-      module: device.createShaderModule({ label: `${label}.vert`, code: SPRITE_VERT_WGSL }),
-      entryPoint: 'main',
-      buffers: [
-        {
-          arrayStride: STRIDE,
-          stepMode: 'instance',
-          attributes: [
-            { shaderLocation: 0, offset: 0, format: 'float32x4' },
-            { shaderLocation: 1, offset: 16, format: 'float32x4' },
-            { shaderLocation: 2, offset: 32, format: 'float32x4' },
-            { shaderLocation: 3, offset: 48, format: 'float32x2' },
-          ],
-        },
-      ],
-    },
-    fragment: {
-      module: device.createShaderModule({ label: `${label}.frag`, code: SPRITE_FRAG_WGSL }),
-      entryPoint: 'main',
-      targets: [
-        {
-          format,
-          /* Premultiplied `over`, matching the WebGL2 half exactly. */
-          blend: {
-            color: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
-            alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
-          },
-        },
-      ],
-    },
-    /*
-     * Nothing is culled: a sprite is mirrored by giving it a negative width, which reverses its
-     * winding, and a character facing left is exactly that.
-     */
-    primitive: { topology: 'triangle-list', cullMode: 'none' },
-    multisample: { count: samples },
-    /*
-     * Neither tested nor written. The 2D layer's order *is* its layering — there is no z to sort
-     * by — and a pass that depth-tested would let whatever 3D geometry is in the frame punch holes
-     * in an overlay drawn over it. Declared all the same, because a pipeline in a render pass that
-     * has a depth attachment must name its format.
-     */
-    depthStencil: { format: depthFormat, depthWriteEnabled: false, depthCompare: 'always' },
+  const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [layout] });
+  const vertexModule = device.createShaderModule({
+    label: `${label}.vert`,
+    code: SPRITE_VERT_WGSL,
+  });
+  const fragmentModule = device.createShaderModule({
+    label: `${label}.frag`,
+    code: SPRITE_FRAG_WGSL,
   });
 
   const vertexUniforms = device.createBuffer({
@@ -150,8 +133,12 @@ export function createGpuSprites(
   const vertexScratch = new ArrayBuffer(VERT.uniformSize);
   const fragmentScratch = new ArrayBuffer(FRAG.uniformSize);
 
-  return {
-    pipeline,
+  const sprites: GpuSprites = {
+    pipelines: new Map(),
+    pipelineLayout,
+    vertexModule,
+    fragmentModule,
+    label,
     layout,
     vertexUniforms,
     fragmentUniforms,
@@ -187,6 +174,87 @@ export function createGpuSprites(
     fragmentFloats: new Float32Array(fragmentScratch),
     fragmentInts: new Int32Array(fragmentScratch),
   };
+  /* The frame's own target, built now, so the common case compiles before its first draw. */
+  spritePipelineFor(device, sprites, format, depthFormat, samples);
+  return sprites;
+}
+
+/**
+ * The pipeline for a pass with these attachments, built the first time it is asked for.
+ *
+ * Chosen at the draw from what the pass is (`PassContext.format`, `depthFormat`, `samples`), so a
+ * 2D layer drawn over the finished frame, on the canvas at one sample, is not refused for having
+ * been built for the scene target. A lookup through three maps on every later draw, no allocation.
+ */
+export function spritePipelineFor(
+  device: GPUDevice,
+  sprites: GpuSprites,
+  format: GPUTextureFormat,
+  depthFormat: GPUTextureFormat,
+  samples: number,
+): GPURenderPipeline {
+  let byDepth = sprites.pipelines.get(format);
+  if (byDepth === undefined) {
+    byDepth = new Map();
+    sprites.pipelines.set(format, byDepth);
+  }
+  let bySamples = byDepth.get(depthFormat);
+  if (bySamples === undefined) {
+    bySamples = new Map();
+    byDepth.set(depthFormat, bySamples);
+  }
+  const found = bySamples.get(samples);
+  if (found !== undefined) return found;
+  const pipeline = device.createRenderPipeline({
+    label: `${sprites.label}:${format}x${samples}`,
+    layout: sprites.pipelineLayout,
+    vertex: {
+      module: sprites.vertexModule,
+      entryPoint: 'main',
+      buffers: [
+        {
+          arrayStride: STRIDE,
+          stepMode: 'instance',
+          attributes: [
+            { shaderLocation: 0, offset: 0, format: 'float32x4' },
+            { shaderLocation: 1, offset: 16, format: 'float32x4' },
+            { shaderLocation: 2, offset: 32, format: 'float32x4' },
+            { shaderLocation: 3, offset: 48, format: 'float32x2' },
+          ],
+        },
+      ],
+    },
+    fragment: {
+      module: sprites.fragmentModule,
+      entryPoint: 'main',
+      targets: [
+        {
+          format,
+          /* Premultiplied `over`, matching the WebGL2 half exactly; a sprite covers the scene's
+             surface by its alpha, so occlusion behind it does not darken it. */
+          blend: {
+            color: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha', operation: 'add' },
+            alpha: SCENE_ALPHA_COVERS,
+          },
+        },
+      ],
+    },
+    /*
+     * Nothing is culled: a sprite is mirrored by giving it a negative width, which reverses its
+     * winding, and a character facing left is exactly that.
+     */
+    primitive: { topology: 'triangle-list', cullMode: 'none' },
+    multisample: { count: samples },
+    /*
+     * Neither tested nor written. The 2D layer's order *is* its layering — there is no z to sort
+     * by — and a pass that depth-tested would let whatever 3D geometry is in the frame punch holes
+     * in an overlay drawn over it. Declared all the same, because a pipeline in a render pass that
+     * has a depth attachment must name its format.
+     */
+    depthStencil: { format: depthFormat, depthWriteEnabled: false, depthCompare: 'always' },
+  });
+  bySamples.set(samples, pipeline);
+  return pipeline;
 }
 
 /**
@@ -313,9 +381,11 @@ export function drawGpuSprites(
   pass: GPURenderPassEncoder,
   sprites: GpuSprites,
   batch: SpriteBatch,
+  /** The pipeline for this pass's attachments: `spritePipelineFor`. */
+  pipeline: GPURenderPipeline,
 ): void {
   if (batch.count === 0) return;
-  pass.setPipeline(sprites.pipeline);
+  pass.setPipeline(pipeline);
   for (let run = 0; run < batch.runCount; run += 1) {
     const at = run * 3;
     const slot = sprites.slots[batch.runs[at] as number];

package/src/spritePass.ts

@@ -20,6 +20,7 @@ import {
   createGpuSprites,
   disposeGpuSprites,
   drawGpuSprites,
+  spritePipelineFor,
   setGpuSpriteTexture,
   setGpuWhiteTexture,
   uploadGpuInstances,
@@ -216,7 +217,13 @@ export function createSpritePass(options: SpritePassOptions = {}): SpritePass {
       device.queue.writeBuffer(gpu.vertexUniforms, 0, gpu.vertexScratch);
       device.queue.writeBuffer(gpu.fragmentUniforms, 0, gpu.fragmentScratch);
       uploadGpuInstances(device, gpu, batch);
-      drawGpuSprites(ctx.pass, gpu, batch);
+      /* For the pass this lands in, which after `endFrame` is the canvas: see `spritePipelineFor`. */
+      drawGpuSprites(
+        ctx.pass,
+        gpu,
+        batch,
+        spritePipelineFor(device, gpu, ctx.format, ctx.depthFormat, ctx.samples),
+      );
     },
 
     dispose(): void {

package/src/uiDraw.ts

@@ -5,6 +5,7 @@ import type { SpriteBatch, SpritePlacement } from './spriteBatch.ts';
 import { createSpriteFrame } from './spriteSheet.ts';
 import type { SpriteFrame } from './spriteSheet.ts';
 import type { UiNode, UiRect } from './uiNode.ts';
+import { layersPresent } from './uiLayer.ts';
 
 /**
  * Where a caller draws what a quad cannot be.
@@ -61,9 +62,35 @@ export function drawUiTree(
   white: number,
   sink: UiContentSink | null,
 ): number {
-  return drawWithin(batch, root, white, sink, -Infinity, -Infinity, Infinity, Infinity);
+  /*
+   * **Layer by layer, lowest first, and tree order within one.** A raised node — a dropdown that
+   * must cover the panel its control sits in — was drawn in tree order with everything else, so a
+   * later sibling covered it. Each layer is a walk of the whole tree with the clips it would have
+   * had anyway, so a raised node is still cut by a clipping ancestor; a tree with no raised node is
+   * one walk, as before.
+   */
+  const count = layersPresent(root, LAYERS);
+  let drawn = 0;
+  for (let at = 0; at < count; at += 1) {
+    drawn += drawWithin(
+      batch,
+      root,
+      white,
+      sink,
+      -Infinity,
+      -Infinity,
+      Infinity,
+      Infinity,
+      0,
+      LAYERS[at] ?? 0,
+    );
+  }
+  return drawn;
 }
 
+/** The layers of the tree being drawn, reused: this runs per frame. */
+const LAYERS: number[] = [];
+
 function drawWithin(
   batch: SpriteBatch,
   node: UiNode,
@@ -73,8 +100,11 @@ function drawWithin(
   top: number,
   right: number,
   bottom: number,
+  inherited: number,
+  only: number,
 ): number {
   if (node.hidden) return 0;
+  const layer = node.layer === 0 ? inherited : node.layer;
   const rect = node.rect;
   const clipped = left !== -Infinity;
   const x0 = Math.max(rect.x, left);
@@ -87,7 +117,7 @@ function drawWithin(
    * a node is drawn as it always was, whatever its size. Its children are cut one by one either way,
    * since a child can lie outside its parent's box and still inside the clip.
    */
-  if (!clipped || (x1 > x0 && y1 > y0)) {
+  if (layer === only && (!clipped || (x1 > x0 && y1 > y0))) {
     PLACEMENT.x = clipped ? x0 : rect.x;
     PLACEMENT.y = clipped ? y0 : rect.y;
     PLACEMENT.w = clipped ? x1 - x0 : rect.w;
@@ -115,7 +145,9 @@ function drawWithin(
   const ct = keep ? Math.max(top, rect.y) : top;
   const cr = keep ? Math.min(right, rect.x + rect.w) : right;
   const cb = keep ? Math.min(bottom, rect.y + rect.h) : bottom;
-  for (const child of node.children) drawn += drawWithin(batch, child, white, sink, cl, ct, cr, cb);
+  for (const child of node.children) {
+    drawn += drawWithin(batch, child, white, sink, cl, ct, cr, cb, layer, only);
+  }
   return drawn;
 }
 

package/src/uiFocus.ts

@@ -2,6 +2,7 @@
 
 import { uiRectHolds } from './uiNode.ts';
 import type { UiNode } from './uiNode.ts';
+import { layersPresent } from './uiLayer.ts';
 
 /**
  * The interactive node under a point, or `null`.
@@ -17,15 +18,30 @@ import type { UiNode } from './uiNode.ts';
  * Allocates nothing.
  */
 export function uiHitTest(root: UiNode, x: number, y: number): UiNode | null {
-  if (root.hidden) return null;
+  /* The highest layer first, as it is drawn last: a raised popup takes the pointer over a later
+     sibling it covers. See `drawUiTree`. */
+  const count = layersPresent(root, HIT_LAYERS);
+  for (let at = count - 1; at >= 0; at -= 1) {
+    const hit = hitOn(root, x, y, 0, HIT_LAYERS[at] ?? 0);
+    if (hit !== null) return hit;
+  }
+  return null;
+}
+
+/** The layers of the tree being pointed at, reused: a hit test runs per pointer event. */
+const HIT_LAYERS: number[] = [];
+
+function hitOn(node: UiNode, x: number, y: number, inherited: number, only: number): UiNode | null {
+  if (node.hidden) return null;
   /* A clipping node bounds its descendants here as it does in the picture: a row scrolled out of a
      list is not under the pointer, whatever is drawn where it would have been. */
-  if (root.clip && !uiRectHolds(root, x, y)) return null;
-  for (let i = root.children.length - 1; i >= 0; i -= 1) {
-    const hit = uiHitTest(root.children[i] as UiNode, x, y);
+  if (node.clip && !uiRectHolds(node, x, y)) return null;
+  const layer = node.layer === 0 ? inherited : node.layer;
+  for (let i = node.children.length - 1; i >= 0; i -= 1) {
+    const hit = hitOn(node.children[i] as UiNode, x, y, layer, only);
     if (hit !== null) return hit;
   }
-  return root.interactive && uiRectHolds(root, x, y) ? root : null;
+  return layer === only && node.interactive && uiRectHolds(node, x, y) ? node : null;
 }
 
 /**

package/src/uiLayer.ts

@@ -45,3 +45,26 @@ export function layerOrder(root: UiNode, out: UiNode[]): number {
   out.length = count;
   return count;
 }
+
+/** Ascending, without allocating a comparator per call. */
+const ASCENDING = (a: number, b: number): number => a - b;
+
+/**
+ * The layers a tree draws on, ascending, into `out`; how many there are.
+ *
+ * What `drawUiTree` and `uiHitTest` walk a tree once per: a tree with no raised node answers one
+ * layer and is walked once, exactly as it was before either read a layer.
+ */
+export function layersPresent(root: UiNode, out: number[]): number {
+  out.length = 0;
+  collect(root, 0, out);
+  if (out.length > 1) out.sort(ASCENDING);
+  return out.length;
+}
+
+function collect(node: UiNode, inherited: number, out: number[]): void {
+  if (node.hidden) return;
+  const layer = node.layer === 0 ? inherited : node.layer;
+  if (!out.includes(layer)) out.push(layer);
+  for (const child of node.children) collect(child, layer, out);
+}