v1.1.0
This release note applies both for [email protected] and [email protected]
autoRedraw, eventsThrough, visibleContent props
Here is a first (React Native) use-case solved by these 3 new props added on GL.View: You can now start making effects over interactive UIs !!!
(click for more information)This also allows us to simplify and optimize use-cases such as the VideoBlur example:
<Blur eventsThrough visibleContent autoRedraw width={width} height={height} passes={blurPasses} factor={blur}>
<HueRotate hue={hue}>
<video autoPlay loop>
<source type="video/mp4" src="video.mp4" />
</video>
</HueRotate>
</Blur>
VideoBlur is now more performant, and lets events like right click pass directly to the
<video>.
autoRedraw prop (#11)
The autoRedraw prop improves performance of effects applied on top of living contents like videos, other canvas, or UI components (for React Native case).
This removes the need to do render loop, saving the cost of render() lifecycle and only requiring implementers to rasterize content and perform a redraw.
eventsThrough prop (#13)
eventsThrough causes the GL view not to intercept events. Instead, events get intercepted by whatever is underneath it.
One use-case that eventsThrough solves is to make a transparent layer on top of a something that is still interactive.
visibleContent prop (#17)
visibleContent makes a content visible under the GL view (by default, the content are all visibility:hidden).
When combined with eventsThrough, it allows to make content interactive. For instance, in VideoBlur example,
a right click actually happens on the <video> beneath and not the <canvas/> used for the WebGL effects.
Support for ndarray textures + disableLinearInterpolation option (#14)
This feature has only been implemented in gl-react.
This feature, requested by @tjpotts,
allows to give an ndarray() object as a possible value for a texture.
You can programmatically generate a texture with ndarray() and send it to your shaders.
Refer to ndarray documentation for more information.
See also @mikolalysenko's presentation.
The second introduced feature is the ability to configure the Interpolation mode on textures: you can set disableLinearInterpolation which disable the default linear interpolation in textures. N.B: this currently only works with ndarray but it is planned to work with more formats.
{ value: ndarray(...), opts: { disableLinearInterpolation: true } }
Example:
(click for more information)Add captureFrame(cb) method (#19)
This feature has only been implemented in gl-react.
This feature, requested by @tjpotts, allows you to capture the view rendering as a data64 image. It is implemented with a captureFrame(cb) method on GL.View.
Example:
render() {
return <GL.View ref="view" ... />;
}
capture () {
this.refs.view.captureFrame(data64 => ...);
}
See also improved version of Simple #1.
gl-react-core: better performance, more comprehensive code (#15)
The gl-react-core algorithm that implements 1.0.0's Shared computation feature has been improved.
This results in a significant performance improvement during render() React lifecycle.
The internal format to describe the different texture formats from gl-react-core to implementers is also more comprehensive. This allowed us to remove some branching code in implementations.
Finally, gl-react-core has been refactored in a more readable and maintainable way.
Some obscure parts, like the initial "GL.View discovery" is now more straightforward.