{"id":16533807,"url":"https://github.com/kevzettler/react-regl","last_synced_at":"2025-04-06T21:15:00.841Z","repository":{"id":40003080,"uuid":"90500436","full_name":"kevzettler/react-regl","owner":"kevzettler","description":"React Fiber Reconciler Renderer for Regl WebGL","archived":false,"fork":false,"pushed_at":"2023-07-19T09:01:42.000Z","size":259343,"stargazers_count":198,"open_issues_count":6,"forks_count":24,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T19:11:06.073Z","etag":null,"topics":["3d-graphics","glsl","glsl-shaders","react","reconciler","regl","regl-webgl","renderer","shaders","webgl"],"latest_commit_sha":null,"homepage":"http://kevzettler.com/react-regl/","language":"TypeScript","has_issues":true,"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/kevzettler.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,"governance":null}},"created_at":"2017-05-07T01:04:30.000Z","updated_at":"2025-03-16T00:11:50.000Z","dependencies_parsed_at":"2023-02-17T00:00:50.618Z","dependency_job_id":"e1baf531-297c-4427-a59d-31c7b3e740a3","html_url":"https://github.com/kevzettler/react-regl","commit_stats":{"total_commits":293,"total_committers":7,"mean_commits":"41.857142857142854","dds":0.03754266211604096,"last_synced_commit":"0022f7349ac173d0fe6721159719cd5054f63363"},"previous_names":[],"tags_count":58,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevzettler%2Freact-regl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevzettler%2Freact-regl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevzettler%2Freact-regl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevzettler%2Freact-regl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kevzettler","download_url":"https://codeload.github.com/kevzettler/react-regl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247550690,"owners_count":20956987,"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":["3d-graphics","glsl","glsl-shaders","react","reconciler","regl","regl-webgl","renderer","shaders","webgl"],"created_at":"2024-10-11T18:15:52.359Z","updated_at":"2025-04-06T21:15:00.821Z","avatar_url":"https://github.com/kevzettler.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-regl\nThis library enables [Regl](http://regl.party/) shader WebGL draw commands to be rendered directly as React components.\n\n[![Stability](https://img.shields.io/badge/Stability-Experimental-orange.svg)](https://nodejs.org/api/documentation.html#documentation_stability_index)\n[![npm version](https://badge.fury.io/js/react-regl.svg)](https://badge.fury.io/js/react-regl)\n[![Build Status](https://travis-ci.org/kevzettler/react-regl.svg?branch=master)](https://travis-ci.org/kevzettler/react-regl)\n\n## Demos\n[View demos in the Storybook](https://kevzettler.com/react-regl)\n\nThere is a [React Storybook](https://storybook.js.org/) included in the `/docs` directory with usage examples. The source for the Storybook is in the [`/stories`](./src/stories) directory and demonstrates how to create the examples.\n\nVisit the [Regl gallery page](http://regl.party/examples) for more ideas on usage.\n\n## Install\nUse your perferred package manager\n\n### npm\n```\nnpm install --save react-regl\n```\n\n### yarn\n```\nyarn add react-regl\n```\n\n### Example Usage\nThere is a test app that demonstrates both modes of ussage in `./react-regl-test-app`\n\n#### Triangle.js\n```javascript\n// Define a draw call for rendering a 2D triangle\nconst DrawTriangle = regl({\n  // Shaders in regl are just strings.  You can use glslify or whatever you want\n  // to define them.  No need to manually create shader objects.\n\n  vert: `\n          precision mediump float;\n          attribute vec2 position;\n          void main () {\n            gl_Position = vec4(position, 0, 1);\n          }`,\n\n  frag:`\n          precision mediump float;\n          uniform vec4 color;\n          void main () {\n            gl_FragColor = color;\n          }`,\n\n  // Here we define the vertex attributes for the above shader\n  attributes:{\n    position: [\n      [-1, 0],\n      [0, -1],\n      [1, 1]\n    ]\n    // regl automatically infers sane defaults for the vertex attribute pointers\n  },\n\n  uniforms:{\n    // This defines a dynamic regl value that can bethat can be passed as a react prop\n    color: regl.prop('color')\n  },\n\n  // This tells regl the number of vertices to draw in this command\n  count: 3\n});\n\nexport default DrawTriangle;\n```\n\n#### use in React App\n```javascript\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { ReglFrame } from 'react-regl';\nimport { DrawTriangle } from './DrawTriangle';\n\nconst container = document.getElementById('root');\nconst root = createRoot(container!);\nroot.render(\n  \u003cReglFrame\n    color={[0.40625, 0.94921, 0.996, 1]}\u003e\n    \u003cDrawTriangle /\u003e\n  \u003c/ReglFrame\u003e\n);\n```\n\n#### use in Standalone (Non-react) App\n```javascript\nimport reglInit from \"regl\";\nimport reactRegl from \"react-regl\";\nimport { DrawTriangle } from './DrawTriangle';\n\n// Create a canvas\nconst canvas = document.createElement('canvas');\ncanvas.id = 'gameplay-canvas';\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight\ncanvas.style.width = '100%';\ncanvas.style.height = '100%';\ndocument.body.appendChild(canvas);\n\n// create a gl context\nconst gl = canvas.getContext(\"webgl\", {\n  alpha: false,\n  antialias: false,\n  stencil: false,\n  preserveDrawingBuffer: false\n});\n\n// create a regl scope reference\nconst reglRef = reglInit({\n  gl,\n});\n\n// pass the regl reference to reactRegl\nreactRegl.setRegl(reglRef);\n\nreglRef.clear({\n  color: [0.40625, 0.94921, 0.996, 1],\n  depth: 1\n});\n\n// render react regl components\nDrawTriangle();\n\n```\n\n## Design Goals\nThis libaray was developed as a byproduct of using regl for an HTML5 game engine rendering layer. The game engine has many views that render 3D content. Some of the game engine views need to be high performance with as little over head as possible like the realtime gameplay view. Other views are less performance demanding and are used for stateful UI e.g. inventory, store, character select views.\n\n**This libaray enables developers to write shader code in a Regl syntax style and then seamlesssly execute it as a regular Regl command or a React component.**\n\nThis library brings a JSX interface to `regl`, enabling easy integration of Regl UI into existing `react` projects. `react-regl` Allows you to render regl draw commands as React components. You can define the Regl draw command as you would with raw `regl` but with `react-regl` you can pass and render it as React component.\n\nThis library was inspired by a discussion in the main regl repository: https://github.com/regl-project/regl/issues/576\n\n### Caveats\nThis library uses some magic to 'deferr' WebGL resource and context creation. This library is not a 1-to-1 match with base regl functionality. There are some cases of breakage with the regl examples.\n\n### Alternative libraries\nBecause of the Caveats mentioned above we feel compled to mention alternative libraries. `@psycobolt/react-regl` is a purely React focused regl reconciler which seems to 100% cover the example cases of the base regl library.\nhttps://github.com/psychobolt/react-regl\n\nWorldview is a higher level 3D engine (think Three.js or Babylon.js) abstraction on top of Regl with corporate backing from Crusie self driving.\nhttps://webviz.io/worldview/#/\n\n### Regl vs Other WebGL frameworks\nRegl follows the unix philosophy of \"small sharp tools\" or \"do one thing and do it well\". Regl has full test coverage and aims for stable non-breaking updates. Other popular WebGL frameworks encompass much more responsiblity, usually including heavy abstractions for: scene graphs, animation systems, input systems, and cross device compatibility. The large amount of responsiblity in these other libraries leads to unstable, breaking releases, and lacking documentation and support.\n\nlearn more in the official [Why Regl?](https://github.com/regl-project/regl#why-regl) documentation.\n\n## Development\nThis repo is using yarn. You can build the module with `yarn build` Then in a seperate project you can require the dependency with a local file path like `yarn add ../path/to/react-regl`\n\n\n#### Publishing\n\npublish to npm with the version command and `patch` `minor` `major`, and `pre` versions or explicit tag `4.0.0-beta.2`\n```\nnpm version prerelease\n```\n\n`npm version` will create a git tag that needs to be pushed..\n```\ngit push --tags\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevzettler%2Freact-regl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevzettler%2Freact-regl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevzettler%2Freact-regl/lists"}