Three.js --- Inigo Quilez famous GLSL shader over the ball

<div class="container">

    <input type="range" min="0" max="0" value="0" step="1" id="zoom-range" />

</div>

​

​

<script type="x-shader/x-fragment" id="fragmentShader">

    precision highp float;

​

    varying vec2 vUv;

    uniform float shrink;

    uniform vec3 base_color_1;

    uniform vec3 base_color_2;

    uniform vec3 mid_color;

    uniform float vignette;

    uniform float brightness;

    uniform float darkness;

​

    float random (in vec2 st) {

        return fract(sin(dot(st.xy,vec2(12.9898,78.233)))*43758.5453123);

    }

​

    // Based on Morgan McGuire @morgan3d

body {

    overflow: hidden;

    padding: 0;

    margin: 0;

}

canvas {

    display: block;

}

#zoom-range {

    position: absolute;

    width: 200px;

    bottom: 0;

    right: 10px;

    padding: 30px 0;

}

.cr.color .selector {

    width: 50px !important;

}

.cr.color .saturation-field,

.cr.color .field-knob {

    display: none !important;

}

.cr.color .hue-field {

    width: calc(100% - 8px) !important;

// -------------------------------

// -------------------------------

​

// Interactive eyeball animation based on the famous shader created by Inigo Quilez.

​

// -------------------------------

​

let visualization, pointer, controls, animations;

const container = document.querySelector('.container');

​

let eyeConfig = {

    zoomLevel: 600,

    zoomLevelBounds: [ 300, 1000 ],

    shrink: 0,

    fstBaseColor: '#03565c',

    scdBaseColor: '#42cf44',

    midColor: '#f2aa00',

    vignette: 0.65,

    brightness: 0.6,

    darkness: 0.5,