@dylanebert/shallot-grid 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dylan Ebert
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,78 @@
+# shallot-grid
+
+An infinite world grid with axis lines for [Shallot](https://github.com/dylanebert/shallot). One fullscreen pass draws the y=0 plane. Each pixel picks two decade levels from its own screen footprint and cross-fades between them, so the grid reads at any zoom without popping. The horizon fade scales with camera height, and red X, green Y and blue Z axis lines draw in the same pass.
+
+## Enabling it
+
+```bash
+bun add @dylanebert/shallot-grid
+```
+
+Name it in `shallot.json`:
+
+```json
+{
+    "scene": "scenes/main.scene",
+    "plugins": {
+        "Grid": "@dylanebert/shallot-grid"
+    }
+}
+```
+
+Add a `<a grid />` singleton to your scene to show it:
+
+```
+<a grid />
+```
+
+Every field is optional. Colors are sRGB hex with alpha (`0xRRGGBBAA`), and an axis with alpha `00` is hidden:
+
+```
+<a grid="neutral: 0x504945ff; axis-x: 0xcc241dff; axis-y: 0x6b9d65ff; axis-z: 0x458588ff; opacity: 1; fade: 20; cells: 10" />
+```
+
+- `opacity`: the whole grid's opacity.
+- `fade`: horizon fade reach in camera heights; `0` turns it off.
+- `cells`: pixels per cell at a decade boundary; the finest level's cells span `cells / 10` to `cells` pixels.
+
+## Layout
+
+- `src/`: the plugin (`index.ts`) and its shader (`shader.ts`)
+- `examples/world-grid`: I want an infinite reference grid with world axes under my scene. Run it with `bunx shallot dev examples/world-grid`.
+- `tests/frame-cost.oracle.ts`: the `shallot-grid-frame-cost` oracle, which profiles the example at 1920×1080 in headed Chromium and refuses a grid pass over 0.5 ms of GPU time
+
+## Developing
+
+```bash
+bun install --frozen-lockfile
+bun run list                # installed Shallot carrier population
+bun run workflow            # regenerate the hosted surface workflow
+bun run check               # tsc + Biome + carrier declaration/drift checks
+bun run test                # installed carrier unit sweep (src/)
+bun test ./tests/frame-cost.oracle.ts   # grid pass GPU cost at 1080p (headed Chromium, host GPU)
+```
+
+### Against a local engine
+
+`@dylanebert/shallot` is a peer dependency on the published range `>=0.9.5`; the dev dependency is pinned to the exact Git commit. To test against an unreleased engine, link it and its `typegpu` too:
+
+```bash
+# in your shallot checkout
+bun link
+cd node_modules/typegpu && bun link
+
+# here
+bun link @dylanebert/shallot
+bun link typegpu
+bun test src
+```
+
+Run `bun install --frozen-lockfile --force` here to replace the local links with the exact Shallot dependency recorded in `bun.lock`.
+
+## Releasing
+
+Bump `version` in `package.json`, commit, and push a matching `v<version>` tag. The release workflow runs the native `bun run check` and `bun run test` gates before publishing.
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,54 @@
+{
+    "name": "@dylanebert/shallot-grid",
+    "version": "0.1.0",
+    "description": "Infinite world grid with axis lines for Shallot: a fullscreen ray-plane pass that blends decade levels so it reads at any zoom.",
+    "license": "MIT",
+    "author": "Dylan Ebert <dylan.ebert@gmail.com>",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/dylanebert/shallot-grid.git"
+    },
+    "homepage": "https://github.com/dylanebert/shallot-grid",
+    "bugs": "https://github.com/dylanebert/shallot-grid/issues",
+    "keywords": [
+        "webgpu",
+        "grid",
+        "shallot"
+    ],
+    "type": "module",
+    "sideEffects": false,
+    "packageManager": "bun@1.4.2",
+    "engines": {
+        "bun": ">=1.4.2"
+    },
+    "exports": {
+        ".": "./src/index.ts"
+    },
+    "files": [
+        "src",
+        "!src/**/*.test.ts"
+    ],
+    "scripts": {
+        "check": "tsc --noEmit && biome check && shallot check",
+        "list": "shallot list",
+        "workflow": "shallot workflow",
+        "test": "shallot test"
+    },
+    "peerDependencies": {
+        "@dylanebert/shallot": ">=0.9.5",
+        "typegpu": "~0.12.5"
+    },
+    "devDependencies": {
+        "@biomejs/biome": "^2.5.13",
+        "@dylanebert/shallot": "github:dylanebert/shallot#45a1e7bbcfd9bc032082019a573eddeda496d496",
+        "@types/bun": "latest",
+        "@webgpu/types": "^0.1.72",
+        "playwright": "^1.63.0",
+        "typegpu": "~0.12.5",
+        "typescript": "^7.0.2",
+        "unplugin-typegpu": "~0.12.3"
+    },
+    "workspaces": [
+        "examples/*"
+    ]
+}

package/src/index.ts

@@ -0,0 +1,235 @@
+// Grid: an infinite world grid on the y=0 plane with X, Y and Z axis lines, drawn as one fullscreen
+// ray-plane pass after sear's color pass and before glaze. The mechanism is in `./shader`. One `Grid`
+// singleton holds the look; the scene tag `<a grid />` is the whole happy path.
+import type { Plugin, State, System } from "@dylanebert/shallot";
+import {
+    Camera,
+    Compute,
+    f32,
+    formatHex,
+    invert,
+    sparse,
+    Transform,
+    u32,
+    unpackColor,
+} from "@dylanebert/shallot";
+import { GlazePlugin, GlazeSystem } from "@dylanebert/shallot/glaze";
+import {
+    computeViewProj,
+    Render,
+    RenderPlugin,
+    type View,
+    Views,
+} from "@dylanebert/shallot/render";
+import { ColorSystem, DEPTH_FORMAT, Depth, SearPlugin } from "@dylanebert/shallot/sear";
+import { GRID_AT, GRID_BYTES, GRID_FLOATS, GRID_SHADER } from "./shader";
+
+/**
+ * the scene's world grid, one per scene (a singleton). Colors are hex sRGB bytes with alpha
+ * (0xRRGGBBAA); an axis with alpha 0 is hidden.
+ *
+ * @example
+ * ```
+ * <a grid="axis-y: 0x6b9d6500; fade: 40; cells: 12" />
+ * ```
+ */
+export const Grid = {
+    /** hex sRGB color with alpha of the neutral grid lines (e.g. 0x504945ff) */
+    neutral: sparse(u32),
+    /** hex sRGB color with alpha of the X axis; alpha 0 hides it */
+    axisX: sparse(u32),
+    /** hex sRGB color with alpha of the vertical Y axis; alpha 0 hides it */
+    axisY: sparse(u32),
+    /** hex sRGB color with alpha of the Z axis; alpha 0 hides it */
+    axisZ: sparse(u32),
+    /** opacity of the whole grid [0,1] */
+    opacity: sparse(f32),
+    /** horizon fade reach in camera heights: the plane fades out by `fade × height` (0 = off) */
+    fade: sparse(f32),
+    /** pixels per cell at a decade boundary: the finest level's cells span k/10 to k pixels */
+    cells: sparse(f32),
+};
+
+/** the look a `Grid` singleton carries, one number per field. */
+export type GridStyle = { [K in keyof typeof Grid]: number };
+
+export const GRID_DEFAULTS: GridStyle = {
+    neutral: 0x504945ff,
+    axisX: 0xcc241dff,
+    axisY: 0x6b9d65ff,
+    axisZ: 0x458588ff,
+    opacity: 1,
+    fade: 20,
+    cells: 10,
+};
+
+function packColorAt(rgba: number, out: Float32Array, at: number): void {
+    const { r, g, b } = unpackColor(rgba >>> 8);
+    out[at] = r;
+    out[at + 1] = g;
+    out[at + 2] = b;
+    out[at + 3] = (rgba & 0xff) / 255;
+}
+
+/** pack a grid look into its `Grid` uniform lanes. Colors decode to linear rgb with a 0..1 alpha. */
+export function packGrid(style: GridStyle, out: Float32Array): void {
+    packColorAt(style.neutral, out, GRID_AT.neutral);
+    packColorAt(style.axisX, out, GRID_AT.axisX);
+    packColorAt(style.axisY, out, GRID_AT.axisY);
+    packColorAt(style.axisZ, out, GRID_AT.axisZ);
+    out[GRID_AT.params] = style.opacity;
+    out[GRID_AT.params + 1] = style.fade;
+    out[GRID_AT.params + 2] = style.cells;
+    out[GRID_AT.params + 3] = 0;
+}
+
+function readGrid(eid: number): GridStyle {
+    return {
+        neutral: Grid.neutral.get(eid),
+        axisX: Grid.axisX.get(eid),
+        axisY: Grid.axisY.get(eid),
+        axisZ: Grid.axisZ.get(eid),
+        opacity: Grid.opacity.get(eid),
+        fade: Grid.fade.get(eid),
+        cells: Grid.cells.get(eid),
+    };
+}
+
+const ALPHA_BLEND: GPUBlendState = {
+    color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha" },
+    alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha" },
+};
+
+const gpu = {
+    pipeline: null as GPURenderPipeline | null,
+    uniform: null as GPUBuffer | null,
+    bindGroup: null as GPUBindGroup | null,
+};
+
+const _data = new Float32Array(GRID_FLOATS);
+const _viewProj = new Float32Array(16);
+const _invViewProj = new Float32Array(16);
+
+function drawGrid(camera: number, view: View): void {
+    const device = Compute.device;
+    const encoder = Render.encoder;
+    if (!device || !encoder || !gpu.pipeline || !gpu.uniform || !gpu.bindGroup) return;
+    if (!view.framebuffer || !view.depth || view.width === 0 || view.height === 0) return;
+
+    computeViewProj(camera, view.width / view.height, _viewProj);
+    invert(_viewProj, _invViewProj);
+    _data.set(_viewProj, GRID_AT.viewProj);
+    _data.set(_invViewProj, GRID_AT.invViewProj);
+    _data[GRID_AT.camPos] = Transform.pos.x.get(camera);
+    _data[GRID_AT.camPos + 1] = Transform.pos.y.get(camera);
+    _data[GRID_AT.camPos + 2] = Transform.pos.z.get(camera);
+    _data[GRID_AT.camPos + 3] = 1;
+    device.queue.writeBuffer(gpu.uniform, 0, _data);
+
+    const pass = encoder.beginRenderPass({
+        label: "grid",
+        colorAttachments: [{ view: view.framebuffer, loadOp: "load", storeOp: "store" }],
+        depthStencilAttachment: { view: view.depth, depthLoadOp: "load", depthStoreOp: "store" },
+        timestampWrites: Compute.span?.("grid"),
+    });
+    pass.setPipeline(gpu.pipeline);
+    pass.setBindGroup(0, gpu.bindGroup);
+    pass.draw(6);
+    pass.end();
+}
+
+// draws the grid into every camera's view after sear's color pass and before glaze composites it, marking
+// each camera `Depth` so sear stores the depth the pass tests against. No-op unless the scene has a Grid
+// singleton.
+const GridSystem: System = {
+    name: "grid",
+    group: "draw",
+    after: [ColorSystem],
+    before: [GlazeSystem],
+    update(state: State) {
+        const eid = state.only([Grid]);
+        if (eid < 0) return;
+        packGrid(readGrid(eid), _data);
+        for (const camera of state.query([Camera])) {
+            // the pass depth-tests against the scene, which sear publishes only for a `Depth` camera
+            if (!state.has(camera, Depth)) state.add(camera, Depth);
+            const view = Views.get(camera);
+            if (view) drawGrid(camera, view);
+        }
+    },
+};
+
+/**
+ * infinite world grid with X, Y and Z axes. Opt-in: add `GridPlugin` to the plugin set and give the scene
+ * one {@link Grid} singleton (`<a grid />`).
+ */
+export const GridPlugin: Plugin = {
+    name: "Grid",
+    components: { Grid },
+    traits: {
+        Grid: {
+            singleton: true,
+            defaults: () => ({ ...GRID_DEFAULTS }),
+            format: {
+                neutral: formatHex,
+                axisX: formatHex,
+                axisY: formatHex,
+                axisZ: formatHex,
+            },
+        },
+    },
+    systems: [GridSystem],
+    dependencies: [RenderPlugin, SearPlugin, GlazePlugin],
+
+    async warm() {
+        const device = Compute.device;
+        if (!device) return;
+        const module = device.createShaderModule({ label: "grid", code: GRID_SHADER });
+        const layout = device.createBindGroupLayout({
+            label: "grid",
+            entries: [
+                {
+                    binding: 0,
+                    visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                    buffer: { type: "uniform" },
+                },
+            ],
+        });
+        gpu.uniform?.destroy();
+        gpu.uniform = device.createBuffer({
+            label: "grid-uniform",
+            size: GRID_BYTES,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        gpu.bindGroup = device.createBindGroup({
+            label: "grid",
+            layout,
+            entries: [{ binding: 0, resource: { buffer: gpu.uniform } }],
+        });
+        gpu.pipeline = await device.createRenderPipelineAsync({
+            label: "grid",
+            layout: device.createPipelineLayout({ bindGroupLayouts: [layout] }),
+            vertex: { module, entryPoint: "vs" },
+            fragment: {
+                module,
+                entryPoint: "fs",
+                targets: [{ format: Render.format, blend: ALPHA_BLEND }],
+            },
+            depthStencil: {
+                format: DEPTH_FORMAT,
+                depthCompare: "greater-equal",
+                depthWriteEnabled: false,
+            },
+            primitive: { topology: "triangle-list" },
+        });
+    },
+
+    dispose() {
+        gpu.uniform?.destroy();
+        gpu.uniform = null;
+        gpu.bindGroup = null;
+        gpu.pipeline = null;
+    },
+};
+
+export default GridPlugin;

package/src/shader.ts

@@ -0,0 +1,212 @@
+// The world grid shader: one fullscreen ray-plane pass over the y=0 plane plus the vertical Y axis.
+//
+// Decade blend. The plane point's screen footprint is `f = max(fwidth(p.x), fwidth(p.z))`, metres per
+// pixel. With the cells constant `k`, `l = log10(f * k)` names the decade: the finer level's cell is
+// `10^floor(l)` metres and spans between k/10 and k pixels, the coarser level's is `10^(floor(l)+1)`
+// and spans between k and 10k pixels. Both draw with Ben Golus's pristine line primitive (PlayCanvas
+// `scripts/esm/grid.mjs`, `pristineGrid`) at a constant screen width, so a level whose cells approach
+// pixel size resolves to its mean coverage instead of moiré. The finer level is weighted
+// `1 - fract(l)` and the coarser level at full weight, combined with `max`. Every coarse line is also
+// a fine line, so as `fract(l)` reaches 1 the fine level has faded to nothing and the coarse level
+// alone remains, and at the next decade that coarse level becomes the fine level at weight 1. Nothing
+// pops, and no zoom runs out of levels.
+//
+// View-relative fade. The footprint already fades the fine level. The plane also fades toward the
+// horizon by `1 - smoothstep(0, fade * h, dist)`, where `h` is the camera's height above the plane and
+// `dist` the camera's distance to the plane point. Both scale together with zoom, so the grid looks
+// the same at 0.5 m and at 5000 m; `fade: 0` turns the horizon fade off.
+//
+// Y axis. The line x=z=0 is not on the plane, so the fragment finds the ray's closest approach to it,
+// draws it at the plane axes' screen width from the derivative of its signed lateral distance, and
+// takes the nearer of plane and axis depth. It is the one element that draws when the ray misses the
+// plane.
+//
+// Depth is reverse-Z (near 1, far 0): the pass tests `greater-equal` with depth writes off and writes
+// the winning element's depth through `frag_depth`.
+
+/** f32 lane offsets of the `Grid` uniform, as the WGSL struct below lays it out. */
+export const GRID_AT = {
+    viewProj: 0,
+    invViewProj: 16,
+    camPos: 32,
+    neutral: 36,
+    axisX: 40,
+    axisY: 44,
+    axisZ: 48,
+    params: 52,
+} as const;
+
+/** byte size of the `Grid` uniform. */
+export const GRID_BYTES = 224;
+/** `Grid` uniform size in f32 lanes. */
+export const GRID_FLOATS = GRID_BYTES / 4;
+
+export const GRID_SHADER = /* wgsl */ `
+struct Grid {
+    viewProj: mat4x4<f32>,
+    invViewProj: mat4x4<f32>,
+    camPos: vec4<f32>,
+    neutral: vec4<f32>,
+    axisX: vec4<f32>,
+    axisY: vec4<f32>,
+    axisZ: vec4<f32>,
+    params: vec4<f32>,
+}
+
+@group(0) @binding(0) var<uniform> grid: Grid;
+
+const LINE_PX: f32 = 1.0;
+const AXIS_PX: f32 = 2.0;
+const INV_LN10: f32 = 0.4342944819;
+
+struct VSOut {
+    @builtin(position) position: vec4<f32>,
+    @location(0) nearPoint: vec3<f32>,
+    @location(1) farPoint: vec3<f32>,
+}
+
+fn unproject(p: vec3<f32>) -> vec3<f32> {
+    let u = grid.invViewProj * vec4(p, 1.0);
+    return u.xyz / u.w;
+}
+
+@vertex
+fn vs(@builtin(vertex_index) vi: u32) -> VSOut {
+    let pos = array<vec2<f32>, 6>(
+        vec2(-1.0, -1.0), vec2(1.0, -1.0), vec2(-1.0, 1.0),
+        vec2(-1.0, 1.0), vec2(1.0, -1.0), vec2(1.0, 1.0),
+    );
+    let p = pos[vi];
+    var out: VSOut;
+    out.position = vec4(p, 0.0, 1.0);
+    // reverse-Z: clip z 1 is the near plane, 0 the far plane
+    out.nearPoint = unproject(vec3(p, 1.0));
+    out.farPoint = unproject(vec3(p, 0.0));
+    return out;
+}
+
+struct FragOut {
+    @builtin(frag_depth) depth: f32,
+    @location(0) color: vec4<f32>,
+}
+
+// Ben Golus's pristine grid for thin lines: uv in cells, deriv the per-axis cell footprint of one pixel,
+// width the line width in cells. Coverage fades to the line's mean coverage as cells shrink under a pixel.
+fn pristine(uv: vec2<f32>, deriv: vec2<f32>, width: vec2<f32>) -> f32 {
+    let goal = min(width, vec2(0.5));
+    let drawWidth = clamp(goal, deriv, vec2(0.5));
+    let aa = deriv * 1.5;
+    let g = 1.0 - abs(fract(uv) * 2.0 - 1.0);
+    var g2 = 1.0 - smoothstep(drawWidth - aa, drawWidth + aa, g);
+    g2 = g2 * saturate(goal / drawWidth);
+    g2 = mix(g2, goal, saturate(deriv * 2.0 - 1.0));
+    return mix(g2.x, 1.0, g2.y);
+}
+
+fn axisCoverage(px: f32) -> f32 {
+    return saturate(AXIS_PX * 0.5 + 0.5 - px);
+}
+
+fn depthOf(p: vec3<f32>) -> f32 {
+    let clip = grid.viewProj * vec4(p, 1.0);
+    if (clip.w <= 0.0) { return -1.0; }
+    return clip.z / clip.w;
+}
+
+fn over(front: vec4<f32>, back: vec4<f32>) -> vec4<f32> {
+    let a = front.a + back.a * (1.0 - front.a);
+    if (a <= 0.0) { return vec4(0.0); }
+    let rgb = (front.rgb * front.a + back.rgb * back.a * (1.0 - front.a)) / a;
+    return vec4(rgb, a);
+}
+
+@fragment
+fn fs(input: VSOut) -> FragOut {
+    let opacity = grid.params.x;
+    let fade = grid.params.y;
+    let cells = max(grid.params.z, 1e-3);
+
+    let origin = input.nearPoint;
+    let ray = input.farPoint - input.nearPoint;
+
+    // plane point; derivatives stay in uniform control flow
+    let t = -origin.y / ray.y;
+    let p = origin + t * ray;
+    let dx = dpdx(p.xz);
+    let dy = dpdy(p.xz);
+    let deriv = vec2(length(vec2(dx.x, dy.x)), length(vec2(dx.y, dy.y)));
+    let f = max(fwidth(p.x), fwidth(p.z));
+
+    // Y axis: closest approach of the ray to x=z=0, measured in the xz plane
+    let rayXZ = ray.xz;
+    let flatLen2 = dot(rayXZ, rayXZ);
+    let s = select(0.0, max(-dot(origin.xz, rayXZ) / max(flatLen2, 1e-12), 0.0), flatLen2 > 1e-12);
+    let q = origin + s * ray;
+    let side = vec2(-rayXZ.y, rayXZ.x) / sqrt(max(flatLen2, 1e-24));
+    let lateral = dot(origin.xz, side);
+    let lateralPx = abs(lateral) / max(fwidth(lateral), 1e-12);
+
+    var plane = vec4(0.0);
+    var planeDepth = -1.0;
+    let hit = t > 0.0 && abs(ray.y) > 1e-12;
+    if (hit) {
+        planeDepth = depthOf(p);
+    }
+    if (hit && planeDepth >= 0.0 && planeDepth <= 1.0) {
+        let l = log(f * cells) * INV_LN10;
+        let fine = pow(10.0, floor(l));
+        let coarse = fine * 10.0;
+        let fineWeight = 1.0 - fract(l);
+        let gFine = pristine(p.xz / fine, deriv / fine, deriv * LINE_PX / fine);
+        let gCoarse = pristine(p.xz / coarse, deriv / coarse, deriv * LINE_PX / coarse);
+        var alpha = max(gCoarse, gFine * fineWeight) * grid.neutral.a;
+        var color = grid.neutral.rgb;
+
+        let xCov = axisCoverage(abs(p.z) / max(deriv.y, 1e-12)) * grid.axisX.a;
+        let zCov = axisCoverage(abs(p.x) / max(deriv.x, 1e-12)) * grid.axisZ.a;
+        color = mix(color, grid.axisX.rgb, xCov);
+        alpha = max(alpha, xCov);
+        color = mix(color, grid.axisZ.rgb, zCov * (1.0 - xCov));
+        alpha = max(alpha, zCov);
+
+        if (fade > 0.0) {
+            let h = abs(grid.camPos.y);
+            let dist = length(p - grid.camPos.xyz);
+            alpha = alpha * (1.0 - smoothstep(0.0, fade * h, dist));
+        }
+        plane = vec4(color, alpha);
+    } else {
+        planeDepth = -1.0;
+    }
+
+    var axis = vec4(0.0);
+    var axisDepth = -1.0;
+    if (flatLen2 > 1e-12) {
+        axisDepth = depthOf(vec3(0.0, q.y, 0.0));
+        if (axisDepth >= 0.0 && axisDepth <= 1.0) {
+            axis = vec4(grid.axisY.rgb, axisCoverage(lateralPx) * grid.axisY.a);
+        } else {
+            axisDepth = -1.0;
+        }
+    }
+
+    var color: vec4<f32>;
+    var depth: f32;
+    if (axis.a > 0.0 && axisDepth >= planeDepth) {
+        color = over(axis, plane);
+        depth = axisDepth;
+    } else if (plane.a > 0.0) {
+        color = over(plane, axis);
+        depth = planeDepth;
+    } else {
+        discard;
+    }
+    color.a = color.a * opacity;
+    if (color.a < 1.0 / 255.0) { discard; }
+
+    var out: FragOut;
+    out.depth = depth;
+    out.color = color;
+    return out;
+}
+`;