React-regl resource interfaces

react-regl-interfaces.js

//The following examples demonstrate the current and potential interfaces for rendering a texture

//1 Current external resource initilization
// Needs a reference to the `regl` object to create `regl.texture`
// results in some weird handshake where `Regl` component needs to initialize and pass `regl` object around
class ThreeDThing extends React.Component{
  constructor(){
    super(props)
    this.state.reglRef = null
  }

  reglInitHandler(regl){
    this.setState({
      reglRef: regl
    });
  }

  render(){
    return (
      <Regl onReglInit={this.reglInitHandler}>
        {this.state.reglRef ?
        <Draw
          vert={...}
          frag={...}
          attributes={...}
          uniform={
            tex: this.state.reglRef.texture({
              data: ...,
              mag: 'linear',
              min: 'linear'
            })
          }
          />
        : null}
      </Regl>
    );
  }
}


// 2 potentiel interface in which react-regl infers the resource creation from passed pops
// `tex` is passed props that "look like a texture" and `Regl` component initializes `regl.texture` internally
const derp = () => {
  return (
    <Regl>
      <Draw
        vert={...}
        frag={...}
        attributes={...}
        uniform={
          tex: {
            data: ...,
            mag: 'linear',
            min: 'linear'
          }
        }
        />
    </Regl>
  );
}

//3 potentiel interface in which react-regl infers resource creation from child components
const derp = () => {
  return (
    <Regl>
      <Draw
        vert={...}
        frag={...}
        attributes={...}>
        <Uniform id="text">
          <Texture
            data={...}
            mag: "linear",
            min: "linear",
            />
         </Uniform>
      </Draw>
    </Regl>
  );
}