mirror of
https://github.com/gre/gl-react.git
synced 2026-01-25 16:43:36 +00:00
79 lines
3.0 KiB
Markdown
79 lines
3.0 KiB
Markdown
# gl-react
|
|
|
|
WebGL bindings for react to implement complex graphics and image effects, in VDOM descriptive paradigm.
|
|
|
|
See also: [`gl-react-native`](https://github.com/ProjectSeptemberInc/gl-react-native).
|
|
|
|
## Examples
|
|
|
|
Open [Examples page](http://projectseptemberinc.github.io/gl-react/) and [read the code](https://github.com/ProjectSeptemberInc/gl-react/tree/master/Examples).
|
|
|
|
- [Simple](https://github.com/ProjectSeptemberInc/gl-react/tree/master/Examples/Simple) contains minimal examples, perfect to learn how to use the library. See also the [Related Documentation](http://projectseptemberinc.gitbooks.io/gl-react-native/content/).
|
|
- [SpringCursor](https://github.com/ProjectSeptemberInc/gl-react/tree/master/Examples/SpringCursor/index.js) shows usage with [`react-motion`](https://github.com/chenglou/react-motion).
|
|
- [AdvancedEffects' Intro](https://github.com/ProjectSeptemberInc/gl-react/blob/master/Examples/AdvancedEffects/src/Intro.js) shows usage with [`react-canvas`](https://github.com/Flipboard/react-canvas).
|
|
- [Video](https://github.com/ProjectSeptemberInc/gl-react/blob/master/Examples/Video/index.js) shows usage with the `<video/>` tag.
|
|
- [AdvancedEffects's Transition](https://github.com/ProjectSeptemberInc/gl-react/blob/master/Examples/AdvancedEffects/src/Transition.js) shows a minimal interoperability with [GLSL Transitions](http://transitions.glsl.io/).
|
|
- [Blur](https://github.com/ProjectSeptemberInc/gl-react/blob/master/Examples/Blur/) shows an advanced example of multi-pass pipeline and also shows usage of [glslify](https://github.com/stackgl/glslify).
|
|
|
|
### HelloGL Gist
|
|
|
|
```js
|
|
const React = require("react");
|
|
const GL = require("gl-react");
|
|
|
|
const shaders = GL.Shaders.create({
|
|
helloGL: {
|
|
frag: `
|
|
precision highp float;
|
|
varying vec2 uv;
|
|
void main () {
|
|
gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
|
|
}`
|
|
}
|
|
});
|
|
|
|
class HelloGL extends React.Component {
|
|
render () {
|
|
const { width, height } = this.props;
|
|
return <GL.View
|
|
shader={shaders.helloGL}
|
|
width={width}
|
|
height={height}
|
|
/>;
|
|
}
|
|
}
|
|
```
|
|
|
|
|
|
|
|
|
|
## Installation
|
|
|
|
```
|
|
npm i --save gl-react
|
|
```
|
|
|
|
## Docs and difference with `gl-react-native`
|
|
|
|
**`gl-react` adopts the same API of `gl-react-native`, therefore you can read
|
|
[gl-react-native documentation](https://github.com/ProjectSeptemberInc/gl-react-native/tree/master/docs).**
|
|
|
|
### GL.Target limited support
|
|
|
|
`GL.Target` have a more limited support because the web does not allow to draw DOM element in Canvas.
|
|
|
|
Only one child is supported per `GL.Target` and it MUST be either: an `<img />`, a `<video />` or a `<canvas />`.
|
|
|
|
You might want to take a look at [`react-canvas`](https://github.com/Flipboard/react-canvas) for drawing content.
|
|
|
|
|
|
## Influence / Credits
|
|
|
|
- [stack.gl](http://stack.gl/) approach
|
|
- [GLSL.io](http://glsl.io/) and [Diaporama](https://github.com/gre/diaporama)
|
|
- Source code of [React Native](https://github.com/facebook/react-native)
|
|
|
|
## Documentation
|
|
|
|
|