無料GitHub で公開

testing-web-gallery

How to run and test the docs/index.html AGSL shader web gallery locally (static server, WebGL2-capable Chrome flags, CDP verification hooks).

dantech0xff/dreams

インストール方法を見る

含まれるファイル（1）

SKILL.md3.1 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Testing the Dreams web gallery (docs/index.html)

The gallery at docs/index.html is a fully static page — the lesson catalog (with transpiled GLSL) is inlined in <script id="data">, so the only server requirement is serving docs/ so gallery/<id>.png thumbnails resolve:

cd <repo>/docs && python3 -m http.server 8471   # http://localhost:8471/

WebGL2 in the on-screen browser

Chrome for Testing on this box (managed instance, CDP on port from --remote-debugging-port, profile ~/.browser_data_dir) launches without --enable-unsafe-swiftshader. On Chrome 137+ software WebGL is blocked without it, so the gallery shows the yellow "browser has no WebGL2" banner and falls back to static thumbnails — easy to mistake for working live renders since thumbnails come from the same shaders. Verify the banner is actually hidden before trusting canvas screenshots.

Fix: relaunch the same chrome binary with its existing flags plus --enable-unsafe-swiftshader (capture them from /proc/<pid>/cmdline and keep --remote-debugging-port + --user-data-dir unchanged). Verify with document.createElement('canvas').getContext('webgl2') over CDP — must be truthy and #nowebgl must be display:none.

Objective verification hooks (all exposed on `window`)

__dreams.DATA — catalog; __dreams.openLesson(id) — opens the lesson modal.
__dreams.player.state — { touch: {x,y,t} | null, values: {uniform: number}, ripples: Float32Array(64), paused }. After clicking #mCanvas, state.touch should be non-null for hasTouch lessons; CUSTOM showcases set touch AND ripple slots.
#mErr displays shader compile errors — check it's display:none after open.
Canvas pixels: #mCanvas has preserveDrawingBuffer:true, so drawImage it onto a 2d canvas and getImageData for luminance stats; or toDataURL('image/png') for artifacts.
Deep links: #<lesson-id> works on fresh load AND via hashchange (no reload needed).

Playwright is at tools/shader-catalog/node_modules — connect to the visible browser with chromium.connectOverCDP('http://localhost:<port>') so page.mouse/page.evaluate drive the same browser being recorded. Home/End keys set range sliders to min/max; Esc closes the modal; Left/Right arrows switch lessons.

Gotchas

Card thumbnails are loading="lazy" — naturalWidth==0 until scrolled into view; scroll or scrollIntoView() before flagging broken images.
fractals-05-burning-ship has NO time uniform (static — changes only via sliders), and its Zoom slider centers on a set-interior point: zoom ≳10 renders a fully black frame by construction.
interactive-05-lens-flare Intensity=0 → fully black (intensity is a direct multiplier). Slider-extreme checks should allow for legitimately dark outputs.
RENDER_EFFECT lessons (postfx-*) paint a sampleCard texture — the preview should show a UI card, not a blank field.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

kta-code-review

無料

Senior Kotlin specialist code review — framework-agnostic. Use whenever the user asks to review, audit, critique, or get feedback on Kotlin code, a file, a class, a function, a module, a diff, a branch, a commit, or a pull request. Judges Kotlin language idioms, logic correctness, architecture and layering, concurrency (coroutines, Flow, structured concurrency, cancellation, race conditions), null safety, exception safety, testability, performance, and security. Detects force-unwraps, unchecked casts, GlobalScope, leaked mutability, broken structured concurrency, hidden side effects, weak abstractions, untestable seams, allocation hot spots, weak crypto, input-validation gaps, and PII logging. Outputs prioritized findings with file:line anchors and minimal-diff fixes. No assumptions about DI framework, UI framework, or build system.

日本語の概要は準備中です。原文の説明を表示しています。