We have proven in this example using react-motion that gl-react can interoperate with React animation libraries and in the continuation of a "descriptive" expressivity.
Now, in react-native context, there is Animated (docs / source code).
I see nothing preventing us for being able to support this for values passed in uniforms.
As an use-case example: awesome things that solves Animated (like user interruptibility / UI driven like responsive to dragging) could be used with glsl-transitions effects:
Code Usage Example
For instance, I should be able to do:
// example adapted from the React Animation documentation
class Playground extends React.Component {
constructor(props) {
super(props);
this.state = {
animatedValue: new Animated.Value(0)
};
}
render() {
return (
<GL.View
shader={shaders.myEffect2}
width={200}
height={100}
uniforms={{
value: this.state.animatedValue
}} />
);
}
componentDidMount() {
this.state.animatedValue.setValue(1.5);
Animated.spring(this.state.animatedValue, { toValue: 0.8, friction: 1 }).start();
}
}Another and more probable use-case is using with a pre-defined GL Component, like Blur.
And I should just be able to do:
<Blur factor={this.state.animatedValue} width={w} height={h}>
<Something/>
</Blur>Implementation
We can implement shader uniform animations in a very efficient way in the Objective-C / OpenGL side.
Now we can't just use Animated.createAnimatedComponent for this because it is specific to animate style. Also, in our implementation uniforms props DOES NOT directly map to the final component props, in fact <GL.View/> is just an intermediary way (DSL) to express a tree of effects and gets transformed to a single "GLCanvas" (GLKView in case of iOS).
A tree of GL.View gets consumed and results of a single data that contains everything the OpenGL implementation needs to render the effects pipeline.
For example, see this example (left shows the usage part, right shows the resulting data props that represents the usage tree):
# Help Wanted on this:
Right now, if we try to use Animated.Value as uniforms props, we are going to have this data filled with Animated.Values.
So it sounds like we just need a way to resolve all Animated.Value objects in that object tree. I don't know yet the Animated specifics to implement a Animated Component from scratch and do this resolving:
- Is there a React utility to resolve a object tree filled with some
Animated.Value at a given time?
- What do we need to do at the component level? (start/stop? render loop?
setNativeProps for the props that gets animated?)
Thanks
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent