JSFiddle - React, Tailwind, and code Playground

by hughes

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r54/three.min.js'></script>

<script id="vertexShader" type="x-shader/x-vertex">
    varying vec2 vUv;
    
    void main() {
    vUv = uv;
    
    gl_Position =   projectionMatrix * 
    modelViewMatrix * 
    vec4(position,1.0);
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    uniform sampler2D texture1;
    uniform float SCALE;
    uniform float P0;
    uniform float P1;
    uniform float P2;
    uniform float P3;
    uniform float P4;
    
    varying vec2 vUv;
    
    float scale(float r) {
    float z = P0 + P1*r + P2*r*r + P3*r*r*r + P4*r*r*r*r;
    return SCALE/z;
    }
    
    void main() {
    float x = vUv.x - 0.5;
    float y = vUv.y - 0.5;
    float r2 = x*x + y*y;
    float r = sqrt(r2);
    float angle = 0.0;
    if (x != 0.0) {
    angle = atan(y, x);
    }
    float s = scale(r);
    // s = 1.0;
    vec2 v;
    v.x = x*s + 0.5;
    v.y = y*s + 0.5;
    gl_FragColor = texture2D(texture1, v);
    // gl_FragColor = vec4(P1/10.0, P2/10.0, P3/10.0, 1.0);
    }
</script>
<!--     SCALE <input type="range" step="1" min="1" max="200" value="75" id="SCALE" /><br />
    P0 <input type="range" step="1" min="1" max="200" value="75" id="P0" /><br /> -->
    P1 <input type="range" step="0.01" min="1" max="10" value="1" id="P1" /><br />
    P2 <input type="range" step="0.01" min="1" max="10" value="1" id="P2" /><br />
    P3 <input type="range" step="0.01" min="1" max="10" value="1" id="P3" /><br />
    P4 <input type="range" step="0.01" min="1" max="10" value="1" id="P4" />

JavaScript

$(document).ready(function () {
    var scene = new THREE.Scene();
    // var camera = new THREE.OrthographicCamera(200,200,200,200,1000);
    var w = window.innerWidth;
    var h = window.innerHeight/2;
    var camera = new THREE.PerspectiveCamera(75, w/h, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(w, h);
    document.body.appendChild(renderer.domElement);

    var vertShader = document.getElementById('vertexShader').innerHTML;
    var fragShader = document.getElementById('fragmentShader').innerHTML;

    window.uniforms = {
        "texture1": { type: "t", value: THREE.ImageUtils.loadTexture( "http://www.corsproxy.com/www.roborealm.com/help/Radial_barrel.jpg" ) },
        "SCALE": { type: "f", value: 75.0 },
        "P0": {type: "f", value: 75.0 },
        "P1": {type: "f", value: 0.5 },
        "P2": {type: "f", value: 0.0 },
        "P3": {type: "f", value: 0.0 },
        "P4": {type: "f", value: 0.0 }
    };

    material = new THREE.ShaderMaterial({uniforms: uniforms,
        vertexShader: vertShader,
        fragmentShader: fragShader
    });

    // plane
    var plane = new THREE.Mesh(new THREE.PlaneGeometry(8, 8),material);
    plane.overdraw = true;
    scene.add(plane);
    camera.position.z = 5;

    function render() {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
    render();

    $('input').on('change', function (e) {
        var $el = $(e.target);
        key = $el.attr('id');
        value = $el.val();
        console.log(key, value);
        window.uniforms[key].value = value;
    });
});