curtains.js basic plane

            
              		<!-- div that will hold our WebGL canvas -->
		<div id="canvas"></div>

		<!-- div used to create our plane -->
		<div class="plane">

			<!-- image that will be used as a texture by our plane -->
			<img src="https://www.martin-laxenaire.fr/csstricks/images/first-example-texture.jpg" />
		</div>

        <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>


		<script src="https://cdn.rawgit.com/martinlaxenaire/curtainsjs/master/build/curtains.min.js" type="text/javascript"></script>