React-glslcanvas NPM

react-glslcanvas

Four react elements running four different shaders

Thanks to @patriciogonzalezvivo for amazing glslCanvas

Installation

npm i -s react-glslcanvas

Quick Start

import React from 'react';
import {render} from 'react-dom';
import GLSLCanvas from 'react-glslcanvas';

/**
String that containes our fragment shader.
You can also use 
https://github.com/stackgl/glslify
https://github.com/stackgl/glslify-loader
Or
https://github.com/grieve/webpack-glsl-loader
**/
let myFragShader = 'void main() { ... }'; 

export default class Demo extends React.Component {
  render() {
    return (
      <GLSLCanvas 
        frag = {myFragShader} //Our fragment shader
        width = {640} //Width of the canvas 
        height = {480} //Height of the canvas
      />
    );
  }
}

render(<Demo />, document.querySelector('#root'));

Uniforms and other parameters

uniforms – should be passed as an array:

let uniforms = [
  {name: 'my_float', value: 0.5},
  {name: 'my_vec2', value: [0.5, 0.5]},
  {name: 'my_vec3', value: [0.5, 0.5, 0.5]},
  {name: 'my_tex', value: 'http://.../img.png'}
  ...
];

...

<GLSLCanvas uniforms={uniforms} />

playOnHover – if set to true, shader will only play, when mouse is hovering over the canvas.

onMouseEnter – callback for mouseenter event, if playOnHover is true

onMouseLeave – callback for mouseleave event, if playOnHover is true