Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gre/gl-react-v2
DEPRECATED =>
https://github.com/gre/gl-react-v2
Last synced: about 2 months ago
JSON representation
DEPRECATED =>
- Host: GitHub
- URL: https://github.com/gre/gl-react-v2
- Owner: gre
- Archived: true
- Created: 2016-11-28T20:26:22.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-07T15:40:26.000Z (almost 7 years ago)
- Last Synced: 2024-04-15T00:34:14.506Z (6 months ago)
- Language: JavaScript
- Homepage: https://github.com/gre/gl-react
- Size: 93.7 MB
- Stars: 265
- Watchers: 14
- Forks: 32
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
**STATUS: project is being rewritten from scratch in https://github.com/gre/gl-react. It will be the next v3.**
**[Gitbook documentation](https://github.com/ProjectSeptemberInc/gl-react/tree/master/docs) / [Github](https://github.com/ProjectSeptemberInc/gl-react/) / [live demos](http://projectseptemberinc.github.io/gl-react-dom/) / [gl-react-dom](https://github.com/ProjectSeptemberInc/gl-react-dom/) / [gl-react-native](https://github.com/ProjectSeptemberInc/gl-react-native/)** / [#gl-react on reactiflux](https://discordapp.com/channels/102860784329052160/106102146109325312)
# 
gl-react
WebGL/OpenGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm.
`gl-react` allows you to write a fragment shader that covers a component. The shader can render: generated graphics/demos, effects on top of images, effects over content (video, canvas)... anything you can imagine!
`gl-react` is the universal library that have 2 implementations:
- [`gl-react-dom`](https://github.com/ProjectSeptemberInc/gl-react-dom) for React DOM (web using WebGL).
- [`gl-react-native`](https://github.com/ProjectSeptemberInc/gl-react-native) for React Native (iOS and Android using OpenGL).
The library `gl-react` share most of the common code and exposes `{ Node, Uniform, Shaders, createComponent }`.
Both `gl-react-dom` and `gl-react-native` depends on `gl-react` and exposes the `{ Surface }` implementation.
[](http://projectseptemberinc.github.io/gl-react-dom/Examples/Blur/)
## Playground
you want to experiment / show us some code?
you can fork this JSFiddle:
https://jsfiddle.net/greweb/bztz8494/
## Examples
[Open Examples page](http://projectseptemberinc.github.io/gl-react-dom/) / [Read the code](https://github.com/ProjectSeptemberInc/gl-react-dom/tree/master/Examples).
- [Simple](https://github.com/ProjectSeptemberInc/gl-react-dom/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/content/).
- [SpringCursor](https://github.com/ProjectSeptemberInc/gl-react-dom/tree/master/Examples/SpringCursor) shows usage with [`react-motion`](https://github.com/chenglou/react-motion).
- [AdvancedEffects' Intro](https://github.com/ProjectSeptemberInc/gl-react-dom/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-dom/blob/master/Examples/Video/index.js) shows usage with the `` tag.
- [AdvancedEffects's Transition](https://github.com/ProjectSeptemberInc/gl-react-dom/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-dom/blob/master/Examples/Blur/) shows an advanced example of multi-pass pipeline and also shows usage of [glslify](https://github.com/stackgl/glslify).
- [VideoBlur](https://github.com/ProjectSeptemberInc/gl-react-dom/blob/master/Examples/VideoBlur/) shows multi-pass Blur over Hue over a ``! It demonstrates the "shared computation" of the rendering tree [introduced by 1.0.0](https://github.com/ProjectSeptemberInc/gl-react-dom/releases/tag/v1.0.0).
- [Image Effects](https://github.com/gre/gl-react-image-effects) implements an Image Effects app for Web and Native with a same codebase.
### Some universal GL effects made with `gl-react` (published on NPM)
- [gl-react-blur](https://github.com/gre/gl-react-blur)
- [gl-react-contrast-saturation-brightness](https://github.com/gre/gl-react-contrast-saturation-brightness)
- [gl-react-negative](https://github.com/gre/gl-react-negative)
- [gl-react-hue-rotate](https://github.com/gre/gl-react-hue-rotate)
- [gl-react-color-matrix](https://github.com/gre/gl-react-color-matrix)
### HelloGL Gist
```js
const GL = require("gl-react");
const React = require("react");
const shaders = GL.Shaders.create({
helloGL: {
frag: `
precision highp float;
varying vec2 uv;
uniform float blue;
void main () {
gl_FragColor = vec4(uv.x, uv.y, blue, 1.0);
}`
}
});
module.exports = GL.createComponent(
({ blue }) =>
,
{ displayName: "HelloGL" });
```
```js
const { Surface } = require("gl-react-dom"); // in React DOM context
const { Surface } = require("gl-react-native"); // in React Native context
```
```html
```
renders
## Focus
- **Virtual DOM and immutable** paradigm: OpenGL is a low level imperative and mutable API. This library takes the best of it and exposes it in an immutable, descriptive way.
- **Performance**
- **Developer experience**: the application doesn't crash on bugs - Live Reload support make experimenting with effects easy (also `gl-react-native`'s version uses React Native error message to display GLSL errors).
- **Uniform bindings**: bindings from JavaScript objects to OpenGL GLSL language types (bool, int, float, vec2, vec3, vec4, mat2, mat3, mat4, sampler2D...)
- **Support for images** as a texture uniform.
- **Support for ``, ``** as a texture uniform.
`gl-react` primary goal is not to do 3D. The library currently focus on stacking fragment shaders (that runs with static vertex) and exposes these features in a simple API applying React paradigm. This already unlock a lot of capabilities shown in the examples.
3D graphics implies more work on vertex shader and vertex data. We might eventually implement this. In the meantime, if this is a use-case for you, feel free to [comment on this issue](https://github.com/ProjectSeptemberInc/gl-react/issues/6).
## Installation
```
npm i --save gl-react
```
## Influence / Credits
- [stack.gl](http://stack.gl/) approach (`gl-shader`, `gl-texture2d`, `gl-fbo` are library directly used by `gl-react-dom`)
- [GLSL.io](http://glsl.io/) and [Diaporama](https://github.com/gre/diaporama)
## [Read Full Documentation](https://github.com/ProjectSeptemberInc/gl-react/tree/master/docs)