pmndrs / pmndrs/react-three-examples

Seven REVIEW(shared-instance) markers are candidates for <Instances>/InstancedMesh

Open
#3 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.