Uniform stops updating on a component "rerender"

[youroff]

I'm new to 3d and cannot quite figure this out on my own. Basically what happens, is that update to some state irrelevant to the component (Stars) triggers its re-render which somehow disrupts render loop and updates to uniforms are not coming through anymore. I created a codesandbox representing the problem (clicking on a white box breaks stars blinking): https://codesandbox.io/s/shaderanimation-27n74?file=/src/index.js
Can anyone help figure out what am I doing wrong? Thanks!

[drcmda]

youre overwriting uniforms, thats something that threejs doesnt do: https://threejs.org/docs/#manual/en/introduction/How-to-update-things

reason is a missing ,[]

  const uniforms = useMemo(() => ({
    time: { value: 0.0 }
  }), [])

nice effect btw!

[drcmda]

ps. would you like to make this a <Stars /> component for drei? https://github.com/react-spring/drei/

[youroff]

Sure, I'll send a PR soon

[dowrow]

Thank you!!

[OscarKanNilsson]

This answer helped me with a bug i've been fighting with for a week! Thank you so much!

[youroff]

Oh, thanks! This thing was bugging me for a while :)

[youroff]

Done: pmndrs/drei#32

Also I have a custom (and extremely compact) implementation of some controls. Had to do it, cause OrbitControls was absolutely unusable with actual planetary view mainly due to constant zoom speed. Also I implemented the transition to bird-view as it gets closer to the planet. Check it out here:
http://ec2-54-171-206-202.eu-west-1.compute.amazonaws.com

[drcmda]

awesome, thanks, i've added a few options. had to make a slight adjustment to the shader code because bigger size would speed up the pulse, not sure if correct but looks ok to me.

as for the controls, do you have the source somewhere? looks very nice indeed.

[youroff]

Maybe an extra attribute? Or it can be adjusted that range of sizes maps to appropriate range of frequencies, which was already kinda ok for my app.

Another thing that might need change... I was struggling with blending of overlapping points, which in the implementation from PR was solved by ordered generation of stars. But this solution on works if the viewer is located in (0, 0, 0), once camera is not there, some stars might appear overlapped. So I found an option that seems to fix it: depthWrite: false on material.

[drcmda]

I noticed that, wondered what caused it. Would you want to add these as prs, too? if you like i can also give you contrib access. you know far more about all this than i do, and if you like you can have stake.

btw, that camera, using use-gesture is freaking genius! :-D

[youroff]

More context...
This is the issue described on stackoverflow: https://stackoverflow.com/questions/12337660/three-js-adjusting-opacity-of-individual-particles
Not sure why it marked as solved, when in fact it wasn. Illustration: http://jsfiddle.net/5kz64ero/1/
And probable solution: http://jsfiddle.net/5kz64ero/2/

[youroff]

Lol... I don't know about genius, but thanks! :))) I've been playing with 3D for a couple of months and it already spoiled a lot of my blood. And I created that camera control only because I couldn't figure out what was going on in OrbitControls and how to make it do what I wanted :-D

Sure, I'll make these PRs, but probably not rn, need to get back to another project for at least two weeks.

[drcmda]

i dont think ive ever seen a more compact control than this. i once forked orbitcontrols and it was so hard to see how it all fits together.