pmndrs / pmndrs/react-postprocessing

Dynamically changing props (e.g. visibleEdgeColor) of Outline breaks it / no longer renders

Aperta
#143 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

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>
image

🔥 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>
image

Workaround

Changing the visibleEdgeColor of Outline element breaks it.
Workaround is to change the key of EffectComposer so 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

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. 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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.