ShaderMaterial Shading

by jmcjc5u

HTML

<div id="info">GLSL Shading</div>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>
<script src="http://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
    

<script id="myVertexShader" type="x-shader/x-vertex">
    varying vec2 vUv;
    void main() {
    		vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
		varying vec2 vUv;
    uniform float iTime;
    
    vec2 N22 (vec2 p) {
    	vec3 a = fract (p.xyx*vec3(123.34, 234.34, 345.65));
      a += dot (a, a+34.45);
      return fract (vec2 (a.x*a.y, a.y*a.z));
    }
    
		void main() {
    		float m = 0.;
        float t = iTime*0.2;
        float minDist = 100.;
        float cellIndex = 0.;
        vec2 uv = vec2(vUv.x, vUv.y);
        //vec2 uv = gl_FragCoord.xy;
        float nodes = 150.;
        for (float i = 0.; i < 150.; i++) {
        	vec2 n = N22 (vec2(i));
          vec2 p = sin(n*t);
          float d = length(uv - p);
          m += smoothstep (.02, .01, d);
          if (d < minDist) {
          	minDist = d;
            cellIndex = i;
          }
        }
        //vec3 col = vec3 (minDist)*2.;
        vec3 col = vec3 (cellIndex/nodes);
        
        gl_FragColor = vec4(col, 1.0);
    }
</script>

CSS

body {
    background-color: #fff;
    color: #111;
    margin: 0px;
    overflow: hidden;
    font-family: Monospace;
    font-size: 10px;
    position: absolute;
}
#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 5px;
    text-align: center;
    color: #ffff00
}

JavaScript

var scene, renderer, camera;
var clock = new THREE.Clock();

init();
animate();

function init() {
    var width = window.innerWidth;
    var height = window.innerHeight;

    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);
    renderer.setClearColor(0x888800);

    scene = new THREE.Scene();

    camera = new THREE.OrthographicCamera(-15,15,15,-15,1, 100);
    camera.position.y = 0;
    camera.position.z = 40;

    meshMaterial = new THREE.ShaderMaterial({
    		uniforms: {
           iTime: {type: 'f', value: 0.0}
        },
        vertexShader: document.getElementById('myVertexShader').textContent,
        fragmentShader: document.getElementById('myFragmentShader').textContent
    });

    var geometry = new THREE.PlaneGeometry(20, 20);
    var mesh = new THREE.Mesh(geometry, meshMaterial);
    scene.add(mesh);
}

function animate() {    
	  meshMaterial.uniforms.iTime.value = clock.getElapsedTime();
    requestAnimationFrame(animate);
    render();
}

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