React App / Gatsby about curtainsjs

[martinlaxenaire]

Hi @joebentaylor,

Here is the code of a working React example using react-router-dom and curtains.js.

First, you need to put the shaders inside the body tag of your index.html file:

`
<script id="plane-vs" type="x-shader/x-vertex">
#ifdef GL_ES
precision mediump float;
#endif

	// those are the mandatory attributes that the lib sets
	attribute vec3 aVertexPosition;
	attribute vec2 aTextureCoord;

	// those are mandatory uniforms that the lib sets and that contain our model view and projection matrix
	uniform mat4 uMVMatrix;
	uniform mat4 uPMatrix;

	// if you want to pass your vertex and texture coords to the fragment shader
	varying vec3 vVertexPosition;
	varying vec2 vTextureCoord;

	void main() {
		vec3 vertexPosition = aVertexPosition;

		gl_Position = uPMatrix * uMVMatrix * vec4(vertexPosition, 1.0);

		// set the varyings
		vTextureCoord = aTextureCoord;
		vVertexPosition = vertexPosition;
	}
</script>
<script id="plane-fs" type="x-shader/x-fragment">
	#ifdef GL_ES
	precision mediump float;
	#endif

	// get our varyings
	varying vec3 vVertexPosition;
	varying vec2 vTextureCoord;

	// the uniform we declared inside our javascript
	uniform float uTime;

	// our texture sampler (default name, to use a different name please refer to the documentation)
	uniform sampler2D uSampler0;

	void main() {
        // get our texture coords
		vec2 textureCoord = vTextureCoord;

		// displace our pixels along both axis based on our time uniform and texture UVs
		// this will create a kind of water surface effect
		// try to comment a line or change the constants to see how it changes the effect
		// reminder : textures coords are ranging from 0.0 to 1.0 on both axis
		const float PI = 3.141592;

		textureCoord.x += (
			sin(textureCoord.x * 10.0 + ((uTime * (PI / 3.0)) * 0.031))
			+ sin(textureCoord.y * 10.0 + ((uTime * (PI / 2.489)) * 0.017))
			) * 0.0075;

		textureCoord.y += (
			sin(textureCoord.y * 20.0 + ((uTime * (PI / 2.023)) * 0.023))
			+ sin(textureCoord.x * 20.0 + ((uTime * (PI / 3.1254)) * 0.037))
			) * 0.0125;

		gl_FragColor = texture2D(uSampler0, textureCoord);
	}
</script>

`

Then in your App.js (the real magic is happening inside CurtainsPage):

`
import React, { Component } from 'react';
import './App.css';

import {Route, Switch, Link} from 'react-router-dom';

import {Curtains} from 'curtainsjs';

// default plane params
const planeParams = {
vertexShaderID: "plane-vs", // our vertex shader ID
fragmentShaderID: "plane-fs", // our framgent shader ID
uniforms: {
time: {
name: "uTime", // uniform name that will be passed to our shaders
type: "1f", // this means our uniform is a float
value: 0,
},
}
};

class HomePage extends React.Component {

render() {
    return (
        <div className="home-page">
            Homepage
        </div>
    );
}

}

// this is the page where our plane lies
class CurtainsPage extends React.Component {

constructor( props ) {
	super(props);

    this._planes = null;
}

componentDidMount() {
    // if we got our curtains object, create the plane
    this.props.curtains && this.createPlanes(this.props.curtains);
}

componentWillUpdate(nextProps, nextState) {
    // if we haven't got our curtains object before but got it now, create the plane
    if(!this.props.curtains && nextProps.curtains) {
        this.createPlanes(nextProps.curtains);
    }
}

componentWillUnmount() {
    // remove the plane before unmounting component
    if(this.props.curtains && this._planes) {
        this.props.curtains.removePlane(this._planes);
        this._planes = null;
    }
}


createPlanes(curtains) {
    // create our plane
    if(curtains) {
        this._planes = curtains.addPlane(this.planeElement, planeParams);

        this._planes.onRender(function() {
            this.uniforms.time.value++;
        });
    }
}

// register our plane element ref
registerPlaneElement(el) {
    this.planeElement = el;
}

render() {

    return (
        <div
            className="plane"
            ref={(el) => this.registerPlaneElement(el)}
        >
            <img src="/images/plane-texture.jpg" />
        </div>
    );
}

}

class MainContent extends React.Component {

render() {
    return (
        <main>
            <Switch>
                <Route exact path="/" component={HomePage} />
                <Route path="/curtains" render={props => <CurtainsPage curtains={this.props.curtains} {...props} />} />
            </Switch>
        </main>
    );
}

}

class App extends Component {

constructor( props ) {
	super(props);

	this.state = {
        curtains: null
	};
}

componentDidMount() {
    let curtains = new Curtains("canvas");
    this.setState({ curtains: curtains });
}

render() {
    let curtains = this.state.curtains;

    return (
        <div className="App">

            <div id="canvas" />

            <header className="wrapper">
                <div><Link to="/">Accueil</Link></div>
                <div><Link to="/curtains">Curtains test</Link></div>
            </header>

            <MainContent
                curtains={curtains}
            />

        </div>
    );
}

}

export default App;
`

Hop it will hep!

[joehuggans]

How would we modify this to work with functional ReactJS?