Add shader context to Three.js selections

[aidenybai]

What changed

• Include attached ShaderMaterial and RawShaderMaterial context in Three.js selection previews.
• Copy uniform and define names together with the vertex and fragment shader sources.
• Preserve the owning mesh, points, or line as the selection target so projected bounds and React Three Fiber source lookup continue to work.
• Add vanilla Three.js and React Three Fiber shader-point fixtures and browser coverage.
• Add a clearly labeled E2E playground with larger purple shader targets for manual testing.
• Add the supplied full-screen particle shader as a standalone E2E page, register its scene with React Grab, and verify that its particle points can be selected.
• Add an explicit Start React Grab control to the particle page and exercise that manual activation path in the browser test.
• Isolate the particle page's React Grab instance so an embedded same-origin host cannot capture activation away from its Three.js scene registry.

Why

Three.js raycasting identifies the rendered Object3D, but React Grab previously omitted its attached shader material. As a result, agents received the object/component context without the shader code responsible for its appearance.

This adds the missing shader context while keeping existing selection behavior stable. GPU-only vertex displacement still requires the object's standard custom raycast implementation or selectable proxy geometry because the CPU raycaster cannot infer arbitrary GLSL transforms.

The standalone canvas originally depended on the global keyboard activation gesture, while its automated test activated React Grab directly through the API. The on-page control now makes the tested flow identical to the manual flow. The page also opts out of automatic parent-instance reuse before initializing a local instance, which keeps it functional inside embedded browser hosts.

Validation

• nr build
• E2E_ENVIRONMENT=vite-plus-development nr --filter react-grab test -- e2e/three-js-selection.spec.ts (166 unit tests and 5 focused Playwright tests, including same-origin embedding)
• nr lint
• nr typecheck
• nr format
• git diff --check

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
react-grab-storybook	Ready	Preview, Comment	Jul 25, 2026 2:39am
react-grab-website	Ready	Preview, Comment	Jul 25, 2026 2:39am

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@react-grab/cli@604

npm i https://pkg.pr.new/grab@604

npm i https://pkg.pr.new/react-grab@604

commit: 2947f7f