React Regl

React fiber renderer and custom container for regl

Install

Recommended: (react|react-dom) @ 17.x and regl @ 2.1.x.

npm install @psychobolt/react-regl
# or
yarn add @psychobolt/react-regl

Example

There are several demos. Also check out their sources. Here is one to get you started:

import React from 'react';

import { ReglContainer, Drawable } from '@psychobolt/react-regl';

import frag from './Basic.frag';
import vert from './Basic.vert';

const clear = ({ regl }) => regl.clear({
  color: [0, 0, 0, 1],
  depth: 1,
});

const attributes = {
  position: [[-1, 0], [0, -1], [1, 1]],
};

const uniforms = {
  color: [1, 0, 0, 1],
};

export default () => (
  <ReglContainer onMount={clear}>
    <Drawable
      frag={frag}
      vert={vert}
      attributes={attributes}
      uniforms={uniforms}
      count={3}
    />
  </ReglContainer>
);

Please see API Documentation for more details.

Extensions

See packages.