I'm testing the basic triangle example and noticed that the background color (green in this example) is respected when I render the react component for the first time, but if I change the react component color prop (e.g. on a button click to trigger a re-render in react), the triangle color changes as expected, but the ReglFrame background color turns black (instead of green).

 <ReglFrame width={width} height={height} color={[0, 1, 0, 1]}>
    <Triangle color={props.color}/>
</ReglFrame>

Also, this may be a separate issue, but alpha in ReglFrame's color doesn't affect anything in the frame background. Is there a way to enable alpha support?

I'm trying to follow the basic triangle example, but I'm getting JSX errors. I've tried to see if I can change anything in the tsconfig file to work around this, but I can't see anything that you're doing different.

What am I missing?

'Triangle' cannot be used as a JSX component.
  Its return type 'IDregl<Regl>' is not a valid JSX element.
    Type 'IDregl<Regl>' is missing the following properties from type 'ReactElement<any, any>': type, props, key  TS2786

    36 |         <ReglFrame
    37 |             color={[0.40625, 0.94921, 0.996, 1]}>
  > 38 |             <Triangle />
       |              ^
    39 |         </ReglFrame>
    40 |     );
    41 | };

There may already be a way to do this, but I haven't been able to find it in any of the examples:

I'm trying to modify my shader code by passing in a '#define' value for an array length. As far as I know I can't use the regular "uniforms" method of passing these values to my shader, so I typically use '#define' or const with a hard-coded value that I feed into my shader string.

Ideally this value would be a prop that I can pass to my React component and it would modify the shader code. I tried passing a value as a 'prop' (which seems very clean and React-friendly). But when I try to access the value on regl.prop - it returns a deferred-regl function expecting (context, props) and I'm not sure whether I can access the value at that point.

Is there a way to do this currently? If not, it would be a really helpful feature.

FWIW I noticed three.js uses a 'defines' object to abstract this further - but I don't think regl exposes that in the same way.

const frag = (nArr) => {
    // language=GLSL
    return `
        precision mediump float;

        #define N_ARR ${nArr}
        #define MAX_STACK 2
       ...

const ColorizerRegl = regl({
    vert,
    frag: frag(regl.prop('nArr')),
    attributes: {
        position: [
            0, 4,
            -4, -4,
            4, -4,
        ]
    },

    uniforms: {
        textureReference: regl.prop('reference'),
        textureData: regl.prop('data'),
        textureCurrent: regl.prop('current'),
        dataWidth: regl.prop('dataWidth'),
    },

    count: 3
});

<ColorizerRegl nArr={metaData.nArr}
       reference={images.reference}
       data={images.data}
       current={images.current}
       dataWidth={metaData.dataWidth}/>

Hi,

Thanks for putting together this library. I've been trying to get a basic example running using the minimal "draw a canvas, and shade it" example from the storybook. I was getting the same error as reported in #7 when developing locally in a storybook. Here's the same code sample running in a sandbox.

import React from "react";
import ReactDOM from "react-dom";
import Regl from "react-regl";

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidCatch(e, info) {
    console.log(e, info);
  }

  render() {
    return <Regl width={500} height={500} color={[0.5, 0.5, 0.5, 1]} />;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

https://codesandbox.io/s/nn4x2nx6ml

An error comes out in the console about having difficulty with accessing the store prop:

**Warning: Failed child context type: Cannot read property 'store' of undefined**

Downgrading to older React 16.1.1 for both react and react-dom fixes the issue. However, that version is missing some features that I want to use in a current project (hooks, etc), so I'd like to try to find a workaround that lets me use the latest react together with this library.

Steps to reproduce:

npx create-react-app new_app
cd new_app
npm install --save react-regl

Then use this code in src/App.js:

import React from "react";
import ReactDOM from "react-dom";
import Regl from "react-regl";

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidCatch(e, info) {
    console.log(e, info);
  }

  render() {
    return <Regl width={500} height={500} color={[0.5, 0.5, 0.5, 1]} />;
  }
}

Then: npm run start

What I do wrong?

Based on this line,

https://github.com/kevzettler/react-regl/blob/56153852342f7b52d52fc41fab25dde2f949fc04/src/nodes/DrawNode.js#L5

, users need to install lodash separately for this library to work. The reason for my not opening a PR directly is in case you have an opinion about adding it as a core vs peer dependency.

Hi, thanks for your great work. I get the above error message when trying the following:

app.js

import React, { Component } from 'react'; import Regl from 'react-regl'; import Triangle from './triangle.jsx';

class App extends Component {

render() {
    return (
        <div className="App">
            <h1>React Regl example</h1>
            <Regl width={window.innerWidth} height={window.innerHeight} color={[0,0,0,1]}>
                <Triangle color={[0.812, 0.792, 0.098, 1]} positions={[[-0.5, 0], [0, -0.5], [0.25, 1]]} />
            </Regl>
        </div>
    );
}

}

export default App;

and triangle.jsx: ` import React,{Component} from 'react'; import {Draw} from 'react-regl';

class Triangle extends Component { render(){ return ( <Draw vert={` precision mediump float; attribute vec2 position; void main(){ gl_Position=vec4(position,0,1) }

    `}
        frag={`
        precision mediump float;
        uniform vec4 color;
        void main(){
            gl_FragColor=color;
        }
        `}
        attributes={{
            position:this.props.positions
        }}
        uniforms={{
            color: this.props.color
        }}
        count={3}
        />
    )
}

}

export default Triangle `

I was trying to replicate the Baboon texture example from http://regl.party/examples when I noticed that there is no simple way to reach regl.texture method in react-regl. Actually there is no way to reach the initialized regl object as far as I can tell. Am I missing something? Is there a built-in way to do this?

This is a fix as mentioned here: https://github.com/heroku/heroku-buildpack-nodejs/issues/959

for GitHub security changes as released here: https://github.blog/2021-09-01-improving-git-protocol-security-github/

Thank you for this package,

Bumps elliptic from 6.4.1 to 6.5.4.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps ini from 1.3.5 to 1.3.7.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

The regl calls are deferred, they are not executed until the ReglFrame component mounts and passes a canvas draw context to the reglInit function and then passes a regl reference set method. This will then trigger all the deferred functions to execute. If ReglFrame is unmounted it will call regl.destroy and then when a new ReglFram is mounted it will reinitalize all the deferred functions with the new regl handle. This reinitialization of the deferred function seems to cause some some failures. This can be observed in the storybook by changing between the different stories. This causes a mount and unmount of the ReglFrame components. Which triggers the set/unset of the deferred regl components.

Further concerns are that the deferred resources are defined in shared global scope. So deferred resources that are not part of the ReglFrame component tree are re-initalized. In the story book this means that when you change between stories all of the resources for all other stories are reinitalized.

An idea for improvement here is ReglFrame should not call the global deferred set function which will execution all know deferred functions. Instead ReglFrame should execute a tree of the deferreds it will render. This will have some edge cases where a resources is defined in a scope out side of the render time tree but still used.