pmndrs / pmndrs/react-postprocessing
Dynamically changing props (e.g. visibleEdgeColor) of Outline breaks it / no longer renders
Nessuno ha ancora preso questa issue.
- Lingua principale
- TypeScript
- Stelle
- 1.4k
- Fork
- 134
- Merge medio
- 4m
- PR unite (30g)
- 4
Descrizione
Problem
Demo of bug and workaround: https://codesandbox.io/s/bug-change-outline-color-dmu52j?file=/src/App.js
✅ Constant/fixed visibleEdgeColor
<EffectComposer multisampling={8} autoClear={false}>
<Outline
blur edgeStrength={100} width={500}
visibleEdgeColor="red"
/>
</EffectComposer>
🔥 Dynamically changing visibleEdgeColor breaks Outline, stops rendering
+ // `color` variable is dynamically changing
<EffectComposer multisampling={8} autoClear={false}>
<Outline
blur edgeStrength={100} width={500}
+ visibleEdgeColor={color}
/>
</EffectComposer>
Workaround
Changing the
visibleEdgeColorof Outline element breaks it.
Workaround is to change thekeyofEffectComposerso everything re-mounts and re-renders.
<EffectComposer
multisampling={8} autoClear={false}
+ key={color}
>
<Outline
blur edgeStrength={100} width={500}
- visibleEdgeColor={"red"}
+ visibleEdgeColor={color}
/>
</EffectComposer>
To see this in action, change the APPLY_WORKAROUND in the demo sandbox.
Is this expected behaviour? Thanks!
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
La riproduzione è il CodeSandbox collegato che usa EffectComposer e Outline; inizia eseguendolo e confrontando fixed con changing visibleEdgeColor. Segui questi punti di ingresso dei componenti per scoprire perché l’aggiornamento della prop smette di eseguire il rendering, e considera il problema risolto quando il colore può cambiare senza cambiare la key di EffectComposer, mentre il rendering continua.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- react, three.js, typescript
- Ambito
- computer-graphics, frontend
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 38/100