# gl-react-joeonmars-fork

> WebGL bindings for react to implement complex effects over images and content, in the descriptive VDOM paradigm

Latest version **1.2.5** (published 2015-11-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install gl-react-joeonmars-fork
pnpm add gl-react-joeonmars-fork
yarn add gl-react-joeonmars-fork
bun add gl-react-joeonmars-fork
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.5 |
| Published | 2015-11-14 |
| First published | 2015-11-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 11 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Project September |
| Maintainers | joeonmars |
| Keywords | react, gl, webgl, stackgl |

## Links

- npm: https://www.npmjs.com/package/gl-react-joeonmars-fork
- Repository: https://github.com/joeonmars/gl-react-joeonmars-fork
- Homepage: https://github.com/ProjectSeptemberInc/gl-react#readme
- Issues: https://github.com/ProjectSeptemberInc/gl-react/issues
- npm.io page: https://npm.io/package/gl-react-joeonmars-fork

## Dependencies (11)

- [raf](https://npm.io/package/raf.md) ^3.1.0
- [envify](https://npm.io/package/envify.md) ^3.4.0
- [gl-fbo](https://npm.io/package/gl-fbo.md) ^2.0.5
- [babelify](https://npm.io/package/babelify.md) ^6.1.3
- [gl-shader](https://npm.io/package/gl-shader.md) ^4.0.5
- [invariant](https://npm.io/package/invariant.md) ^2.1.0
- [gl-texture2d](https://npm.io/package/gl-texture2d.md) ^2.0.9
- [gl-react-core](https://npm.io/package/gl-react-core.md) 1.2.x
- [vendor-prefix](https://npm.io/package/vendor-prefix.md) ^0.1.0
- [performance-now](https://npm.io/package/performance-now.md) ^0.2.0
- [typedarray-pool](https://npm.io/package/typedarray-pool.md) ^1.1.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.5 (latest) — 2015-11-14

## README

**[Gitbook documentation](http://projectseptemberinc.gitbooks.io/gl-react/content/) / [Github](https://github.com/ProjectSeptemberInc/gl-react/) / [live demos](http://projectseptemberinc.github.io/gl-react/) / [gl-react-native](https://github.com/ProjectSeptemberInc/gl-react-native/)** / [#gl-react on reactiflux](https://discordapp.com/channels/102860784329052160/106102146109325312)

# <img width="32" alt="icon" src="https://cloud.githubusercontent.com/assets/211411/9813786/eacfcc24-5888-11e5-8f9b-5a907a2cbb21.png"> gl-react

WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm.

More technically, `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!

**There's also [`gl-react-native`](https://github.com/ProjectSeptemberInc/gl-react-native), a React Native version implementing the same API.**

[![](https://github.com/ProjectSeptemberInc/gl-react/raw/master/docs/examples/blur.gif)](http://projectseptemberinc.github.io/gl-react/Examples/Blur/)

## Examples

[Open Examples page](http://projectseptemberinc.github.io/gl-react/) / [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/content/).
- [SpringCursor](https://github.com/ProjectSeptemberInc/gl-react/tree/master/Examples/SpringCursor) 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).
- [VideoBlur](https://github.com/ProjectSeptemberInc/gl-react/blob/master/Examples/VideoBlur/) shows multi-pass Blur over Hue over a `<video>`! It demonstrates the "shared computation" of the rendering tree [introduced by 1.0.0](https://github.com/ProjectSeptemberInc/gl-react/releases/tag/v1.0.0).


### 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;
uniform float blue;
void main () {
  gl_FragColor = vec4(uv.x, uv.y, blue, 1.0);
}`
  }
});

module.exports = GL.createComponent(
  ({ blue, ...rest }) =>
  <GL.View
    {...rest}
    shader={shaders.helloGL}
    uniforms={{ blue }}
  />,
  { displayName: "HelloGL" });
```

```html
<HelloGL width={511} height={341} blue={0.5} />
```

renders

![](https://cloud.githubusercontent.com/assets/211411/9386550/432492c6-475c-11e5-9328-f3d5187298c1.jpg)

## 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 `<canvas>`, `<video>`** as a texture uniform.


## 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`)
- [GLSL.io](http://glsl.io/) and [Diaporama](https://github.com/gre/diaporama)

## [Read Full Documentation](http://projectseptemberinc.gitbooks.io/gl-react/content/)

---
_Source: https://npm.io/package/gl-react-joeonmars-fork · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._