Fix WebGL2 hybrid overlay placement vs WGSL shaders

[ford442]

Summary

Headless Colab screenshots showed WebGPU unavailable (expected) and highlighted that the WebGL frosted-cap overlay can drift from the WGSL cell grid. This PR aligns overlay geometry with the WGSL shaders in three areas.

Findings from Colab / headless captures

• WebGPU path (?renderer=webgpu): canvas stays blank in headless Chrome — overlay cannot be visually verified there, but console/packing paths are clean.
• WebGL2 path (?renderer=webgl2): falls back to HTML in headless Puppeteer (no WebGL2 context), so shader captures are the DOM grid — not the GPU overlay stack.
• Hybrid path (WebGPU + useWebGLOverlay): the real misalignment bug lives here when both layers render.

Root causes fixed

1. Canvas stacking — The overlay canvas was absolutely centered in the flex container (top/left 50% + translate), while the WebGPU canvas was centered as a flex child. Sub-pixel drift between the two centering strategies caused visible cap offset.
2. Circular step count — Overlay GLSL hardcoded totalSteps = 64.0; WGSL shaders use uniforms.numRows for arc spacing (v0.42, v0.45b, v0.46, etc.).
3. Horizontal header row — patternv0.40.wgsl remaps channel 0 as a header/pad row and divides gridRect.h by dataChannels (not padded channel count). The overlay used raw trackIndex * cellH with cellH = gridH / numChannels, shifting data rows down one line.

Changes

• components/PatternDisplay.tsx — wrap WebGPU + overlay canvases in a shared relative container; overlay uses inset-0 on that wrapper.
• hooks/webGLShaders.ts — circular totalSteps from u_rows; horizontal Y uses WGSL channelIndex remapping.
• utils/geometryConstants.ts — calculateHorizontalCellSize(..., hasHeaderRow) + horizontalLayoutHasHeader() helper.
• hooks/useWebGLOverlay.ts + WebGL2PatternRenderer.ts — pass header-row flag; circular instance count uses rows.

Verification

• npm run typecheck ✅
• npm run build ✅

Manual follow-up

In a WebGPU-capable browser, load a hybrid shader (patternv0.46.wgsl, patternv0.45b.wgsl, or patternv0.40.wgsl) and confirm frosted caps sit on the WGSL cell centers while seeking rows 0/16/32.

  

[coderabbitai]

Warning

Review limit reached

@ford442, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 27 minutes and 27 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 7e791401-85a6-43d5-9288-b72245cd9176

📥 Commits

Reviewing files that changed from the base of the PR and between ec43035 and 749e690.

📒 Files selected for processing (5)

• components/PatternDisplay.tsx
• hooks/useWebGLOverlay.ts
• hooks/webGLShaders.ts
• src/renderers/webgl2/WebGL2PatternRenderer.ts
• utils/geometryConstants.ts

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cursor/webgl2-overlay-placement-d5b7

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}