{"id":13422518,"url":"https://github.com/gre/gl-react-v2","last_synced_at":"2025-03-15T12:30:48.480Z","repository":{"id":57742035,"uuid":"75011317","full_name":"gre/gl-react-v2","owner":"gre","description":"DEPRECATED =\u003e","archived":true,"fork":false,"pushed_at":"2017-10-07T15:40:26.000Z","size":98246,"stargazers_count":265,"open_issues_count":0,"forks_count":32,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-04-15T00:34:14.506Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/gre/gl-react","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gre.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-28T20:26:22.000Z","updated_at":"2023-12-03T16:11:28.000Z","dependencies_parsed_at":"2022-09-06T05:20:13.046Z","dependency_job_id":null,"html_url":"https://github.com/gre/gl-react-v2","commit_stats":null,"previous_names":["projectseptemberinc/gl-react"],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gre%2Fgl-react-v2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gre%2Fgl-react-v2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gre%2Fgl-react-v2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gre%2Fgl-react-v2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gre","download_url":"https://codeload.github.com/gre/gl-react-v2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243730966,"owners_count":20338747,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T23:00:46.868Z","updated_at":"2025-03-15T12:30:43.465Z","avatar_url":"https://github.com/gre.png","language":"JavaScript","funding_links":[],"categories":["Utilities","JavaScript"],"sub_categories":["Framework bindings / integrations"],"readme":"**STATUS: project is being rewritten from scratch in https://github.com/gre/gl-react. It will be the next v3.**\n\n\n**[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)\n\n# \u003cimg width=\"32\" alt=\"icon\" src=\"https://cloud.githubusercontent.com/assets/211411/9813786/eacfcc24-5888-11e5-8f9b-5a907a2cbb21.png\"\u003e gl-react\n\nWebGL/OpenGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm.\n\n`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!\n\n`gl-react` is the universal library that have 2 implementations:\n\n- [`gl-react-dom`](https://github.com/ProjectSeptemberInc/gl-react-dom) for React DOM (web using WebGL).\n- [`gl-react-native`](https://github.com/ProjectSeptemberInc/gl-react-native) for React Native (iOS and Android using OpenGL).\n\n\nThe library `gl-react` share most of the common code and exposes `{ Node, Uniform, Shaders, createComponent }`.\n\nBoth `gl-react-dom` and `gl-react-native` depends on `gl-react` and exposes the `{ Surface }` implementation.\n\n[![](https://github.com/ProjectSeptemberInc/gl-react/raw/master/docs/examples/blur.gif)](http://projectseptemberinc.github.io/gl-react-dom/Examples/Blur/)\n\n## Playground\n\nyou want to experiment / show us some code?\n\nyou can fork this JSFiddle:\n\nhttps://jsfiddle.net/greweb/bztz8494/\n\n## Examples\n\n[Open Examples page](http://projectseptemberinc.github.io/gl-react-dom/) / [Read the code](https://github.com/ProjectSeptemberInc/gl-react-dom/tree/master/Examples).\n\n- [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/).\n- [SpringCursor](https://github.com/ProjectSeptemberInc/gl-react-dom/tree/master/Examples/SpringCursor) shows usage with [`react-motion`](https://github.com/chenglou/react-motion).\n- [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).\n- [Video](https://github.com/ProjectSeptemberInc/gl-react-dom/blob/master/Examples/Video/index.js) shows usage with the `\u003cvideo/\u003e` tag.\n- [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/).\n- [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).\n- [VideoBlur](https://github.com/ProjectSeptemberInc/gl-react-dom/blob/master/Examples/VideoBlur/) shows multi-pass Blur over Hue over a `\u003cvideo\u003e`! 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).\n- [Image Effects](https://github.com/gre/gl-react-image-effects) implements an Image Effects app for Web and Native with a same codebase.\n\n### Some universal GL effects made with `gl-react` (published on NPM)\n\n- [gl-react-blur](https://github.com/gre/gl-react-blur)\n- [gl-react-contrast-saturation-brightness](https://github.com/gre/gl-react-contrast-saturation-brightness)\n- [gl-react-negative](https://github.com/gre/gl-react-negative)\n- [gl-react-hue-rotate](https://github.com/gre/gl-react-hue-rotate)\n- [gl-react-color-matrix](https://github.com/gre/gl-react-color-matrix)\n\n### HelloGL Gist\n\n```js\nconst GL = require(\"gl-react\");\nconst React = require(\"react\");\n\nconst shaders = GL.Shaders.create({\n  helloGL: {\n    frag: `\nprecision highp float;\nvarying vec2 uv;\nuniform float blue;\nvoid main () {\n  gl_FragColor = vec4(uv.x, uv.y, blue, 1.0);\n}`\n  }\n});\n\nmodule.exports = GL.createComponent(\n  ({ blue }) =\u003e\n  \u003cGL.Node\n    shader={shaders.helloGL}\n    uniforms={{ blue }}\n  /\u003e,\n  { displayName: \"HelloGL\" });\n```\n\n```js\nconst { Surface } = require(\"gl-react-dom\"); // in React DOM context\nconst { Surface } = require(\"gl-react-native\"); // in React Native context\n```\n\n```html\n\u003cSurface width={511} height={341}\u003e\n  \u003cHelloGL blue={0.5} /\u003e\n\u003c/Surface\u003e\n```\n\nrenders\n\n![](https://cloud.githubusercontent.com/assets/211411/9386550/432492c6-475c-11e5-9328-f3d5187298c1.jpg)\n\n## Focus\n\n- **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.\n- **Performance**\n- **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).\n- **Uniform bindings**: bindings from JavaScript objects to OpenGL GLSL language types (bool, int, float, vec2, vec3, vec4, mat2, mat3, mat4, sampler2D...)\n- **Support for images** as a texture uniform.\n- **Support for `\u003ccanvas\u003e`, `\u003cvideo\u003e`** as a texture uniform.\n\n`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.\n\n3D 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).\n\n\n## Installation\n\n```\nnpm i --save gl-react\n```\n\n## Influence / Credits\n\n- [stack.gl](http://stack.gl/) approach (`gl-shader`, `gl-texture2d`, `gl-fbo` are library directly used by `gl-react-dom`)\n- [GLSL.io](http://glsl.io/) and [Diaporama](https://github.com/gre/diaporama)\n\n## [Read Full Documentation](https://github.com/ProjectSeptemberInc/gl-react/tree/master/docs)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgre%2Fgl-react-v2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgre%2Fgl-react-v2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgre%2Fgl-react-v2/lists"}