Skip to content

compute-reduce / storage-buffer: bring back the DOM timing readout the originals use to make their point #1

Description

@DennisSmolek

What

Two ports render a faithful, correct WebGPU canvas that nonetheless fails to show what
the demo is about, because the substance lives in DOM the shell doesn't render:

  • compute-reduce (webgpu_compute_reduce): the original's canvas is two flat white
    planes — ours matches exactly (verified against pnpm shot:original webgpu_compute_reduce,
    a live oracle capture). The actual point of the demo — comparing reduction kernels — is
    conveyed entirely by DOM text around the canvas: per-side pass counts and GPU timings
    ("18 pass in 0.024541ms" vs "2 pass in 0.013125ms"), a subgroup-reduction explainer, and
    an animated thread-value diagram.
  • storage-buffer (webgpu_storage_buffer) drops the same kind of trackTimestamp
    readout for the same reason.

Both ports followed the standing convention correctly — "examples never build their own
titleblock UI" — but the convention as written has no escape hatch for a demo whose whole
point is a DOM readout, so the result is a canvas that "conveys almost nothing on its own."

Why it matters

Single-demo (two demos) fidelity issue, not site-wide — the port is technically correct,
just uninformative. Worth fixing because the corpus's whole premise is teaching techniques
clearly, and these two currently don't for their headline comparison.

Recommendation already on file

From docs/REVIEW-QUEUE.md #1: bring back the timing readout only, scoped tightly to the
timing comparison, as in-example DOM — which needs a new convention since AGENTS.md
currently says examples never build their own titleblock UI. This is a "yes, and here's
the shape" question, not a "should we" question — worth deciding the shape once (e.g. a
small shared src/utils/ readout component) since it applies to at least two examples now.

Pointer

docs/REVIEW-QUEUE.md §1 ("compute-reduce: the canvas is faithful, but the DEMO was in
the DOM we dropped") and §6 ("storage-buffer drops the original's WebGL-vs-WebGPU
comparison", which references the same DOM-readout question for its trackTimestamp UI).

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions