parisjs51
gl-react
- demo (10 min)
- Under the hood (10 min)
- questions (5 min)
@greweb
Imperative → Functional
- DOM → Virtual DOM react
- WebGL → Virtual GL gl-react
The same way we moved from DOM to VDOM with react, We can move from tedious WebGL setup code to a productive, descriptive and functional abstraction, without hiding the underneath technology.
<Blur>
<NegativeColor>
<video ... />
</NegativeColor>
</Blur>
Fragment Shader
Each pipeline brick is a function from pixels to colors...
{x,y} => {r,g,b,a}
...implemented in a Fragment Shader.
DEMOS !
Shared node optimization
Duplicate nodes
<Add>
<HelloGL blue={0.5} />
<HelloGL blue={0.5} />
</Add>
Shared node
const helloGL = <HelloGL blue={0.5} />;
<Add width={w} height={h}>
{helloGL}
{helloGL}
</Add>
factorizing the render tree minimizes the render cost.
(Most of the time, you don't have to use a variable)
How it works
Referencial transparency of VDOM elements: If the reference of a VDOM element is found multiple time in the tree, algorithm factorizes it to render it once.
optimization not built-in in React (DOM). Only makes sense in WebGL context: factorizing 2 branchs of the tree saves extra computation time.
gl-react-native
Native Implementation for iOS and Android!
Both uses OpenGL ES.
A crazy demo that runs at 60 FPS. (on iOS)
Effect on texts !
Effect over UI !
We can rasterize native views to texture.
Too bad we can't do this with DOM...
Complex UI
Future direction
Better API
split GL.View into GL.Surface and GL.Node.
- better separation of concerns, currently you are forced to put uniforms in the top level GL.View.
- gl-react abstracted of any plateform-specific and allow to write universal effects more easily.
Status: Implemented, but eagerly waiting React Native to depends on React.
Android implementation
To be released soon!!!
Better tooling
gl-react-inspector: Work in Progress
- How to actually make it a plugin for React Devtools?
- Implement support for React Native
More features
see issues created on Github:
More Open Subjects
We focused on 2D effects with hardcoded Vertex Shader.
We can try to be more generic, but this involves a bit of work especially for the React Native implementation.
For more advanced use-cases like 3D models, we recommend to directly use the OpenGL / WebGL API.
More demos
Wrap Up
WebGL API
hybrid paradigms
WebGL is a very low level imperative API... but fundamentally uses functional bricks.
fragment shader
How to draw things in WebGL:
{x,y} => {r,g,b,a}
"Functional Rendering"
gl-react
a wrapper that hides WebGL complexity.
like how React hides the stateful imperative DOM API
<Blur>
<NegativeColor>
<video ... />
</NegativeColor>
</Blur>
WebGL as easy as composing React components.
Our current focus: making (2D) effects.
gl-react-native
The same wrapper on top of OpenGL for React Native.
Write universal effects for both the Web and Native.
@greweb
THA NKS
working at Project September.