Motion Blur | ThreeJS R76-79 Latest

by LeroyRon

HTML

<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>
<script type="x-shader/x-vertex" id="vertexShader">
      varying vec2 vUv;
      varying float fadeGain;
			
      uniform float shutterSpeed;
      
      uniform vec3 velocities;
      uniform vec3 boundingBoxMax;
      uniform vec3 boundingBoxMin;

      void main() {
        vec4 velocityPosition =  modelMatrix * vec4(position, 1.0);
        vec4 boundingBoxMaxView = modelMatrix * vec4(boundingBoxMax, 1.0);
        vec4 boundingBoxMinView = modelMatrix * vec4(boundingBoxMin, 1.0);
        float influence;
				
        //To-Do - Implement x, y, z effectivly with less code
        //x
        if (position.x > 0.0) {
           if (velocityPosition.x + (velocities.x*shutterSpeed) > boundingBoxMaxView.x) {
            influence = position.x/boundingBoxMax.x;
            velocityPosition.x += (velocities.x*shutterSpeed*influence);
           }
        } else if (position.x < 0.0) {
           if (velocityPosition.x + (velocities.x*shutterSpeed) < boundingBoxMinView.x) {
            influence = position.x/boundingBoxMin.x;
            velocityPosition.x += (velocities.x*shutterSpeed*influence);
           }
        }
        //for .y
        if (position.y > 0.0) {
            //To-Do
        } else if (position.y < 0.0) {
            //To-Do
        }

        //for .z
        if (position.z > 0.0) {
            //To-Do
        } else if (position.z < 0.0) {
            //To-Do
        }
				
        fadeGain = 1.0*influence;

        gl_Position = projectionMatrix * viewMatrix * velocityPosition;
        vUv = uv;
      }
    </script>
    <script type="x-shader/x-fragment" id="fragmentShader">
      varying vec2 vUv;
			varying float fadeGain;

      void main() {
          gl_FragColor = vec4(vec3(vUv, 1.0), 1.0-fadeGain);
      }
    </script>
    <div id="info">
    <div id="infoText">
      Info
    </div>
    ShutterSpeed:
    <input type="number" id="inputShutterSpeed"...

CSS

body {margin: 0px; padding: 0px; overflow: none;}
#info {color:#fff; position: absolute; top: 0px; left: 0px; z-index: 1;}
input {right: left;}
canvas {position: absolute; top: 0px; left: 0px;}

JavaScript

var camera, renderer, scene, clock, delta;
var shutterSpeed = 10.0;
var mesh, speedUpMesh = 20;

var uniforms = {
	shutterSpeed: {type: "f", value: shutterSpeed},
  velocities: {type: "v3", value: new THREE.Vector3()},
  boundingBoxMin: {type: "v3", value: new THREE.Vector3()}, 
  boundingBoxMax: {type: "v3", value: new THREE.Vector3()}
}

function setupWorld() {
  mesh = new THREE.Mesh(
    new THREE.TorusGeometry(10, 5, 10, 15),//Eh sorry using a Torus//BoxGeometry(10, 10, 10),
    new THREE.ShaderMaterial({
      uniforms: uniforms,
      vertexShader: document.getElementById("vertexShader").text,
      fragmentShader: document.getElementById("fragmentShader").text,
      transparent: true
    })
  );
	mesh.velocities = new THREE.Vector3()
  mesh.velocities.copy(mesh.position);
  
  //send boundingbox values to shader//to calculate influences of fade and stretch
  mesh.geometry.computeBoundingBox();
  uniforms.boundingBoxMax.value = mesh.geometry.boundingBox.max;
  uniforms.boundingBoxMin.value = mesh.geometry.boundingBox.min;
  
  scene.add(mesh);
}

//Setting up and then animate
function setup() {
  setupThreeJS();
  setupWorld();
  requestAnimationFrame(function animate() {
    renderer.render(scene, camera);
    
    delta = clock.getDelta();
    mesh.rotation.x += delta*speedUpMesh;
    //mesh.rotation.y += delta*speedUpMesh;
    //mesh.rotation.z += delta*speedUpMesh;

    mesh.velocities.copy(mesh.position);
    
    mesh.position.x = (80 * mesh.quaternion.x);
    //mesh.position.y = (50 * mesh.quaternion.y);
    //mesh.position.z = (50 * mesh.quaternion.x);
    
    mesh.velocities.sub(mesh.position);
    mesh.velocities.multiplyScalar(0.1);
        
    uniforms.velocities.value = mesh.velocities;
    
    infoText.innerHTML = 'RelativeVelocity:<br> X: '+mesh.velocities.x+
                     '<br>Y: '+mesh.velocities.y+
                     '<br>Z: '+mesh.velocities.z;
    
    requestAnimationFrame(animate);
  });
}

//Setting up the...