gl-react – React library to write and compose WebGL shaders
MIT License
Bot releases are visible (Hide)
We have noticed some report about problem with Safari, indeed because Safari does not yet support WebGL 2. To allow a smooth backward compatibility, we've made the <Surface
using a version="auto"
mode by default. ("webgl2" can be forced if needed)
This will make WebGL correctly works on Safari if your shader is still a GL 1.0 shader.
version="webgl"
prop. Only reason you might need it is to be supporting older browser that would not support WebGL2 (see https://caniuse.com/webgl2). This is the one and only reason why we are going to release a MAJOR bump on gl-react. Apart from this user's choice, there are no expected breaking changes.#version 300 es
. A vertex shader of that version will also will be provided. There is currently no other version supported (unless you provide yourself the associated "vert").A few changes can be done to migrate a GLSL shader to ES 3.0.
#version 300 es
varying
with in
. Basically only on varying vec2 uv;
out vec4 fragColor;
(you can chose whatever naming you want on that variable like color
) and replace the usage of setting the gl_FragColor
to your new out vec4
variable.Example:
before:
precision highp float;
varying vec2 uv;
void main() {
gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
}
after:
#version 300 es
precision highp float;
in vec2 uv;
out vec4 color;
void main() {
color = vec4(uv.x, uv.y, 0.5, 1.0);
}
gl-react is stable. We are finally releasing gl-react v3 in latest
tag!!
gl-react-dom
implementation is pretty robust now, implemented on top of WebGL.gl-react-native
and gl-react-expo
are light wrapper on top of respectively react-native-webgl
and exgl webgl impl. They are a bit more experimental and it will be up to that underlying library to improve the state of the WebGL implementation if there are bugs/performance concerns. (there is no native code in gl-react side)v3.15.0 should already be ready for React 16.3.0 (that is deprecating hooks like componentWillReceiveProps,..) and there will be more work done in the future to prepare for this whole new React async rendering idea. This will be very interesting for gl-react with current usage of https://github.com/gre/webgltexture-loader . Embracing that new React paradigm will likely simplify codebase and making it more powerful.
There also will be challenging work to make gl-react compatible with the new Context API idea. This is not making it easy because our GL.Node are both consumer and provider and I don't really like the idea it will multiply by 3 the component tree, especially technically the context we use never changes (because it's this
, the component instance itself, we are providing to children components).
The library will continue to embrace React paradigm as close as possible, and will stabilize its purpose of doing various effects over many kind of contents.
We already support many kind of contents (image, video, canvas, camera,...) and we'll continue to add more and more type of textures if we find any missing.
There will be more advanced features to explore in the future, for instance covering WebGL usecases like vertex shaders and vertex data if there is a need to go there. NB: we won't compete with library like Three.js (if you need a 3D scene, use something like threejs) or Pixi.js (if you need efficient 2D sprites, typically for a game), but we can be a elegant alternative when it comes to do complex effects over contents.
This is an important internal change in gl-react-native but it shouldn't break anything (Surface API does not change at all).
import {WebGLView} from react-native-webgl
(there is however no longer any Image polyfill, but it should be possible to implement your own OR just directly use the new gl.getExtension("RN").loadTexture({ image })
)fixes https://github.com/gre/gl-react/issues/136 : a new Uniform.backbufferFrom()
function that accepted a Bus
or a Node
instance in parameter tells the Node to use the backbuffered texture rendered by the pointed Node's. the pointed Node needs to have set "backbuffering".
This allows a more advanced usecase for backbuffering
: the ability to backbuffer and accumulate a rendering with some effects piped into many passes.
basic gist:
<Node
backbuffering
ref="mainNode"
uniforms={{
t: <SomeEffectStack>{
initializingWithImage
? image
: Uniform.backbufferFrom(this.refs.mainNode)
}</SomeEffectStack>
}}
/>
Example
For instance, we can feed an image to a blur effect and then feedback-loop the output back into the blur effect again & again & again:
<GL.Uniform>
now replaced by Bus as well as the createComponent
now unnecessary.Uniform
object with Backbuffer, Resolution, textureSize(t), textureSizeRatio(t) ( more info https://gl-react-cookbook.surge.sh/api#uniform )Backbuffer
that was directly exposed in gl-react: instead of import {Backbuffer} from "gl-react"
you should do import {Uniform} from "gl-react"
and use Uniform.Backbuffer
C = connectSize(({width,height}) => <Node uniforms={{ res: [width,height], ... }} ... />)
, you can now just do C = () => <Node uniforms={{ res: Uniform.Resolution, ... }} ... />
uniform vec2
and that will inject the size of the given texture. where input
it whatever you can give to a texture uniform (e.g. uniforms={{ t: input, tSize: Uniform.textureSize(input) }}
)width/height
ratio (for an uniform float
)style
(like in React Native paradigm)internal changes
textureSize usage example: https://gl-react-cookbook.surge.sh/golwebcam
https://github.com/gre/gl-react/commit/7a1d31401d820a7b4581023c11ceb3a56b6ede1a feat(gl-react): add Node#setDrawProps escape hatch
ExponentGLObjectManager.createObjectAsync
example-gl-react-camera-effects
(it only runs in expo#HEAD)fixed missing "events" dep for gl-react-native. by @kesha-antonov https://github.com/gre/gl-react/pull/100
raf
library. instead it's provided by implementation. gl-react-dom depends on raf
, the RN implementations provides global.requestAnimationFrame
– & maybe later there might be a GL related hook (still a draft idea).we're getting more and more close to a release candidate for the v3.
Image
and EXGLView
so you can literally just do WebGL vanilla with the library. as a proof, here is a Three.js example:There are a bunch of things we want to tackle down (see TODO list file in packages/gl-react-native
) before considering gl-react-native "robust" but you can already give it a try if you want. (and giving us feedback).