JSFiddle - React, Tailwind, and code Playground

by gero3

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>WaterStretch</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>
<body >
<script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://raw.github.com/gero3/three.js/master/examples/js/shaders/BasicShader.js"></script>
<script src="https://raw.github.com/gero3/three.js/master/examples/js/shaders/BleachBypassShader.js"></script>
<script src="https://raw.github.com/gero3/three.js/master/examples/js/shaders/BlendShader.js"></script>
<script src="https://raw.github.com/gero3/three.js/master/examples/js/shaders/BokehShader.js"></script>
<script src="https://raw.github.com/gero3/three.js/master/examples/js/shaders/BrightnessContrastShader.js"></script>
<script src="https://raw.github.com/gero3/three.js/master/examples/js/shaders/ColorCorrectionShader.js"></script>
<script src="https://raw.github.com/gero3/three.js/master/examples/js/shaders/ColorifyShader.js"></script>
<script src="https://raw.github.com/gero3/three.js/master/examples/js/shaders/ConvolutionShader.js"></script>
<script src="https://raw.github.com/gero3/three.js/master/examples/js/shaders/CopyShader.js"></script>
<script src="https://raw.github.com/gero3/three.js/master/examples/js/shaders/DOFMipMapShader.js"></script>
<script src="https://raw.github.com/gero3/three.js/master/examples/js/shaders/DotScreenShader.js"></script>
<script src="https://raw.github.com/gero3/three.js/master/examples/js/shaders/FilmShader.js"></script>
<script src="https://raw.github.com/gero3/three.js/master/examples/js/shaders/FocusShader.js"></script>
<script src="https://raw.github.com/gero3/three.js/master/examples/js/shaders/FXAAShader.js"></script>
<script...

JavaScript

THREE.HeightMapShader = {
    uniforms:{
        tData:{
            type:"t",
            value:0,
            texture:null
        },
        mousePoint:{
            type:"v2",
            value:new THREE.Vector2(-1, -1)
        },
        mouseActive:{
            type:"i",
            value:0
        },
        texelSize:{
            type:"v2",
            value:new THREE.Vector2(0, 0)
        },
        radius:{
            type:"f", value:0.01
        },
        strength:{
            type:"f",
            value:0.1
        }
    },
    vertexShader:"varying vec2 vUv;\nvoid main() {\nvUv = vec2( uv.x, 1. - uv.y );\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",
    fragmentShader:"const float v=3.14159;uniform sampler2D tData;uniform vec2 texelSize,mousePoint;uniform int mouseActive;uniform float radius,strength;varying vec2 vUv;void main(){vec4 t=texture2D(tData,vUv);if(mouseActive>=1){float m=max(0.,1.-length(mousePoint-vUv)/radius);m=.5-cos(m*v)*.5;t.r-=m*strength;}vec2 m=vec2(texelSize.r,0.),r=vec2(0.,texelSize.g);float f=(texture2D(tData,vUv-m).r+texture2D(tData,vUv-r).r+texture2D(tData,vUv+m).r+texture2D(tData,vUv+r).r)*.25;t.g+=(f-t.r)*2.;t.g*=.995;t.r+=t.g;t.r*=.995;gl_FragColor=vec4(t.r,t.g,t.b,1.);}"
};

THREE.NormalMapShader = {
    uniforms:{
        tData:{
            type:"t",
            value:0,
            texture:null
        },
        texelSize:{
            type:"v2",
            value:new THREE.Vector2(0, 0)
        }
    },
    vertexShader:"varying vec2 vUv;\nvoid main() {\nvUv = vec2( uv.x,  1. - uv.y );\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",
    fragmentShader:"uniform sampler2D tData;uniform float deltaNormal;uniform vec2 texelSize;varying vec2 vUv;void main(){vec3...