Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gre/gl-react
gl-react – React library to write and compose WebGL shaders
https://github.com/gre/gl-react
glsl react react-native universal webgl
Last synced: about 2 months ago
JSON representation
gl-react – React library to write and compose WebGL shaders
- Host: GitHub
- URL: https://github.com/gre/gl-react
- Owner: gre
- License: mit
- Created: 2015-08-17T15:49:51.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-07-19T05:34:44.000Z (11 months ago)
- Last Synced: 2024-04-09T22:33:10.801Z (3 months ago)
- Topics: glsl, react, react-native, universal, webgl
- Language: JavaScript
- Homepage: https://gl-react-cookbook.surge.sh
- Size: 128 MB
- Stars: 2,895
- Watchers: 47
- Forks: 160
- Open Issues: 55
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Lists
- awesome-list - gl-react - react – React library to write and compose WebGL shaders | gre | 2463 | (JavaScript)
- awesome-github-repos - gre/gl-react - gl-react – React library to write and compose WebGL shaders (JavaScript)
- awesome-stars - gre/gl-react - gl-react – React library to write and compose WebGL shaders (JavaScript)
- awesome-stars - gre/gl-react - gl-react – React library to write and compose WebGL shaders (JavaScript)
- awesome-stars - gre/gl-react - gl-react – React library to write and compose WebGL shaders (JavaScript)
- awesome-stars - gl-react - [gl-react v3 alpha] – a React library to write and compose WebGL shaders (JavaScript)
README
[](https://travis-ci.org/gre/gl-react) [](https://www.npmjs.com/package/gl-react)
# 
gl-react (v4)
`gl-react` is a [React](https://facebook.github.io/react/) library to write and compose WebGL shaders. _Implement complex effects by composing React components._
This universal library must be coupled with one of the concrete implementations:
- [`gl-react-dom`](packages/gl-react-dom/) for React DOM (backed by WebGL).
- [`gl-react-native`](packages/gl-react-native/) for React Native (iOS/Android OpenGL, backed by [Expo implementation](https://docs.expo.io/versions/latest/sdk/gl-view.html) over unimodules).
- [`gl-react-expo`](packages/gl-react-expo/) for React Native (iOS/Android OpenGL, backed by [Expo implementation](https://docs.expo.io/versions/latest/sdk/gl-view.html)).
- [`gl-react-headless`](packages/gl-react-headless/) for Node.js (backed by [headless-gl](https://github.com/stackgl/headless-gl))
## Links
- **[Cookbook, examples, API](https://gl-react-cookbook.surge.sh)**
- [Expo Cookbook](https://expo.io/@gre/gl-react)
- [JSFiddle hello gl example](https://jsfiddle.net/greweb/cup5feke/)
- [](https://gitter.im/gl-react/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
## References
- [GLSL spec](https://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf)
- ['the books of shaders'](https://thebookofshaders.com)
- [shader-school workshop](https://www.npmjs.com/package/shader-school)
## They use gl-react 🙂
- [onthisspot.ca](https://www.reddit.com/r/reactnative/comments/4ucgdq/just_launched_my_first_iosandroid_app_thanks/)
- [ProjectSeptember](http://greweb.me/2016/07/projectseptember-opengl/)
- [WallGen](https://szymonkaliski.github.io/wallgen/)
- [noisesculptor.com](http://www.noisesculptor.com/)
- _... your project ?_
## Gist
```js
import React from "react";
import { Shaders, Node, GLSL } from "gl-react";
const shaders = Shaders.create({
helloBlue: {
frag: GLSL`
precision highp float;
varying vec2 uv;
uniform float blue;
void main() {
gl_FragColor = vec4(uv.x, uv.y, blue, 1.0);
}`
}
});
class HelloBlue extends React.Component {
render() {
const { blue } = this.props;
return ;
}
}
```
import the correct implementation,
```js
import { Surface } from "gl-react-dom"; // for React DOM
import { Surface } from "gl-react-expo"; // for React Native via Expo GLView
import { Surface } from "gl-react-native"; // for React Native
import { Surface } from "gl-react-headless"; // for Node.js!
```
and this code...
```js
```
...renders:
## Features
- **React, VDOM 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 with React.
- **React lifecycle** allows partial GL re-rendering. Only a React Component update will trigger a redraw. Each Node holds a framebuffer state that get redrawn when component updates and schedule a Surface reflow.
- **Developer experience**
- React DevTools works like on DOM and allows you to inspect and debug your stack of effects.
- **Uniform bindings**: bindings from JavaScript objects to OpenGL GLSL language types (bool, int, float, vec2, vec3, vec4, mat2, mat3, mat4, sampler2D...)
- An **extensible texture loader** that allows to support any content that goes in the shader as a sampler2D texture.
- support for images
- support for videos (currently `gl-react-dom`)
- support for canvas (`gl-react-dom`)
- **flowtype** support.
- Modular, Composable, Sharable. Write shaders once into components that you re-use everywhere! At the end, users don't need to write shaders.
## Atom nice GLSL highlighting
If you are using Atom Editor, you can have JS inlined GLSL syntax highlighted.
**To configure this:**
- add `language-babel` package.
- Configure `language-babel` to add `GLSL:source.glsl` in settings "_JavaScript Tagged Template Literal Grammar Extensions_".
- (Bonus) Add this CSS to your _Atom > Stylesheet_:
```css
/* language-babel blocks */
atom-text-editor::shadow .line .ttl-grammar {
/* NB: designed for dark theme. can be customized */
background-color: rgba(0, 0, 0, 0.3);
}
atom-text-editor::shadow .line .ttl-grammar:first-child:last-child {
display: block; /* force background to take full width only if ttl-grammar is alone in the line. */
}
```