v1.0.0

This release note applies both for [email protected] and [email protected]

Shared computation

This is a huge performance and usability gain: we can now be as performant as pure GL code, but in the React immutable paradigm!

For use-cases that require passing the same uniform parameter multiple times - such as Blur (multi-pass) - the content is now computed only once. For example, a 4-pass blur where you provide some content to each blur pass, the content will be rasterized just once. This also works for sub GL.View: if you pass a sub-tree of effects, this sub-tree will be factorized and computed once (in a Framebuffer) so it is never duplicated.

But how?!

This is implemented by comparing references in the Virtual DOM tree - as a VDOM object can be considered to be referential transparent. If we find two identical Virtual DOM elements in your effects stack tree, we can share their computation in the final GL rendering.

Concrete example: VideoBlur

 <Blur width={width} height={height} passes={blurPasses} factor={blur}>
  <HueRotate hue={hue}>
    <video autoPlay loop>
      <source type="video/mp4" src="video.mp4" />
    </video>
  </HueRotate>
</Blur>

(Note that Blur will result in a blurPasses number of nested Blur1D's GL.Views, with the children content being passed to each one)

• The video DOM element gets shared - only one video is created.
• The HueRotate value get also factorized and computed once in a framebuffer.

The best part is, implementers don't have to worry about this factorization: just pass in content wherever you need it – and whatever this content is (another stack of effects, content to rasterize - such as canvas / video or RN View, or just a simple image URL) and it'll be handled for you.

GL.Target[uniform] gets renamed to GL.Uniform[name]

uniforms object is also identical to providing GL.Uniform children. The second option is just more elegant when composing GL.Views or rasterizing VDOM content.

<GL.Uniform name="foo">...</GL.Uniform>

width/height of sub-GL.View gets inferred

When composing effects, only the root effect must define the width and height, not children. If you don't provide width and height in children, the parent's dimension will be used. Example: <Hue width={w} height={h}><Blur>...</Blur></Hue>.

Explicitly setting width and height is still possible and allow to use different framebuffer sizes (if you want to bake an image with a different resolution for instance).

Better image loading experience

There is a new preload props that allows you to prevent any GL rendering until ALL textures are loaded.

onLoad / onProgress

Following the preload feature, there are 2 callbacks to be called when the textures are being loaded / fully loaded.