Search code examples
react-360

Animating Shader Uniforms on React VR Geometry

I am trying to animate a shader in react VR and can't seem to get the animation going. 

<Box
  dimWidth={1}
  dimHeight={1}
  style={{
    transform: [
      {translate: [-2, 0, -2]},
      {rotateY: '20deg'}
    ],
    color: '#4444ff'
  }}
  lit={true}
  materialParameters={{
    uniforms: {
      'iGlobalTime': { value: seconds, hidden: 1 }
    },
    vertexShader: this.vertexShader,
    fragmentShader: this.fragmentShader,
  }}
/>

'iGlobalTime' is the value I am attempting to animate above and 'seconds' is coming from state which is set by an interval created on mount. Within render if I log out seconds I can see the value changing but the shader does not animate. Thanks!

Solution

  • This was resolved by the React team. Relevant post is here: https://github.com/facebook/react-vr/issues/312