pmndrs / pmndrs/react-three-examples
Seven REVIEW(shared-instance) markers are candidates for <Instances>/InstancedMesh
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2
- Forks
- 1
- PR merge metrics
- No merged PRs in 30d
Description
What
House style rule 3 has a carve-out: a single material/geometry instance shared by many
meshes gets useMemo(() => new X()) + material={…} instead of a JSX child (JSX would
create one instance per mesh), flagged with a REVIEW(shared-instance): comment for a
human to weigh whether the scene actually wants <Instances>/InstancedMesh instead.
Seven live in the corpus:
| file | what's shared |
|---|---|
postprocessing-ao/Furniture.tsx:51 |
3 materials across ~20 meshes |
postprocessing-ao/Gallery.tsx:160 |
wall material ×3, column material ×N |
scene/backdrop-water/WaterScene.tsx:51 |
1 geometry + 1 material across 100 icosahedra |
scene/backdrop-area.tsx:94 |
4 materials, picked by prop (see review-queue #9) |
compute-particles-snow/SnowParticles.tsx:207 |
1 sphere across both instanced meshes |
compute-particles-snow/SnowScenery.tsx:27 |
1 material for 8 tree cones + trunk |
tsl/tsl-angular-slicing.tsx:73 |
2 physical materials over a traversed GLTF |
WaterScene's 100 icosahedra sharing one geometry + one material is the strongest
<Instances> candidate of the seven — the clearest case where per-mesh draw calls are
being paid for no visual reason.
Why it matters
Performance/style polish across seven single-demo files, not a correctness bug and not
site-wide — the rule's carve-out is working as intended (each is REVIEW-flagged rather
than silently accepted). Worth tracking as a batch rather than fixing ad hoc, since
converting to <Instances> changes the component shape (data-driven instances vs. JSX
children) and is worth doing consistently if done at all.
Recommendation already on file
docs/REVIEW-QUEUE.md #8: review each of the seven for whether <Instances> is a better
fit, starting with WaterScene as the strongest candidate. Not urgent — the current code
is correct and performant, just possibly not idiomatic.
Pointer
docs/REVIEW-QUEUE.md §8 ("Shared-instance markers — is <Instances> the real answer?").
See also §9, which covers backdrop-area.tsx's variant of the pattern (N instances, one
live, picked by a leva switcher) — decided separately as "leave marked, no new rule needed
yet" since it's a single occurrence.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with docs/REVIEW-QUEUE.md §8, then inspect scene/backdrop-water/WaterScene.tsx:51 as the strongest candidate and compare its shared geometry/material pattern with the available Instances/InstancedMesh approach. Review the other six listed files, and mark each as converted or intentionally left as-is with the rationale recorded in the queue.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, three.js, typescript
- Domain
- frontend, performance
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100