3D Cubes Study 2 - blur

3d-cubes-study-2-blur.markdown

3D Cubes Study 2 - blur

Experimenting Webgl textures with Threejs

A Pen by Stephen Larson on CodePen.

License.

3d-cubes-study.markdown

3D Cubes Study

Experimenting Webgl textures with Threejs

A Pen by Stephen Larson on CodePen.

License.

index.html

<figure></figure>
<iframe width="0" height="0" src="http://www.youtube.com/embed/eXjkgyTeWl8?autoplay=1&amp;start=409" frameborder="0" allowfullscreen></iframe>

script.js

// Global vars (ehy this is just an experiment you should avoid this!)
var wrapper = document.querySelector('figure'),
  bigCubes = [],
  lights = [],
  viewport = {},
  // Some constants
  BIG_CUBES_AMOUNT = 1,
  BIG_CUBES_ROWS = 10,
  BIG_CUBES_COLS = 10,
  BIG_CUBES_DEPTH = 15,
  CUBES_SIZE = 30,
  CUBES_PADDING = 30,
	width = window.innerWidth,
  height = window.innerHeight,
  postprocessing = {},
  // THREEJS fancy magic vars
  scene, renderer, camera;

// Full screen makes everything cooler
var setViewport = function() {
  viewport = {
    width: window.innerWidth,
    height: window.innerHeight
  };
  camera.aspect = viewport.width / viewport.height;
  renderer.setSize(viewport.width, viewport.height);
  camera.updateProjectionMatrix();
};
// I like the way you move it
var animate = function() {
  var time = Date.now() * 0.0005;
  requestAnimationFrame(animate);
  var i = bigCubes.length;
  while (i--) {
    //bigCubes[i].rotation.x += bigCubes[i].speed;
    //bigCubes[i].rotation.y += bigCubes[i].speed;
  }
  i = lights.length;
  while (i--) {
    //lights[i].position.x = Math.sin(time * 0.7) * 10;
    //lights[i].position.y = Math.cos(time * 0.5) * 10;
    //lights[i].position.z = Math.cos(time * 0.3) * 10;
  }
  renderer.render(scene, camera);
  postprocessing.composer.render( 0.1 );
};
// dont't try this at home
var createCubes = function() {
  while (BIG_CUBES_AMOUNT--) {
    var bigCube = new THREE.Geometry(),
      r = BIG_CUBES_ROWS;
    while (r--) {
      var c = BIG_CUBES_COLS;
      while (c--) {
        var d = BIG_CUBES_DEPTH;
        while (d--) {
          var cube = new THREE.Mesh(new THREE.CubeGeometry(CUBES_SIZE, CUBES_SIZE, CUBES_SIZE));
          cube.position.x = r * (CUBES_SIZE + CUBES_PADDING);
          cube.position.y = c * (CUBES_SIZE + CUBES_PADDING);
          cube.position.z = d * (CUBES_SIZE + CUBES_PADDING);
          THREE.GeometryUtils.merge(bigCube, cube);
        }

      }
    }
    bigCube = new THREE.Mesh(bigCube, new THREE.MeshLambertMaterial({
      transparent: true,
      color: 0xdddddd
    }));
    bigCube.position.set(-200, -200, -300);
    //bigCube.position.set(Math.random() * 500 - 250, Math.random() * 500 - 250, Math.random() * 500);
    //bigCube.rotation.set(Math.random() * 3000 - 2500, Math.random() * 5000 - 2500, Math.random() * 5000 - 2500);
    bigCube.speed = Math.random() * 0.001;
    bigCubes.push(bigCube);
    scene.add(bigCube);
  }
};
// turn on the light
var addLights = function() {
  var lightsColors = [0x8A1616, 0x660303, 0xA10B0B];
  // ambient lighting
  var ambientLight = new THREE.AmbientLight(0xdddddd);
  scene.add(ambientLight);
  var i = lightsColors.length;
  while (i--) {
    var directionalLight = new THREE.DirectionalLight(lightsColors[i], 1.3, 20000);
    directionalLight.position.set(Math.random() * 1000 - 500, Math.random() * 1000 - 500, Math.random() * 1000 - 500);
    scene.add(directionalLight);
    lights.push(directionalLight);
  }
};
// are you still reading the source code? srsly!?
var init = function() {
  // set the THREEJS things
  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();
  camera = new THREE.PerspectiveCamera(35, viewport.width / viewport.height, 1, 10000);
  camera.position.z = 1000;
  // let's make it beauty
  setViewport();
  // throw it out
  
  scene.matrixAutoUpdate = false;

  initPostprocessing();

  renderer.autoClear = false;
  
  wrapper.appendChild(renderer.domElement);
  addLights();
  createCubes();
  animate();
};


function initPostprocessing() {
  var renderPass = new THREE.RenderPass( scene, camera );

  var bokehPass = new THREE.BokehPass( scene, camera, {
    focus: 		1.4,
    aperture:	0.025,
    maxblur:	1.0,

    width: width,
    height: height
  } );

  bokehPass.renderToScreen = true;

  var composer = new THREE.EffectComposer( renderer );

  composer.addPass( renderPass );
  composer.addPass( bokehPass );

  postprocessing.composer = composer;
  postprocessing.bokeh = bokehPass;

}

// you shouldn't move but just in case
window.onresize = setViewport;

// Bring it on
init();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/BokehShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/MaskPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/BokehPass.js"></script>

style.css

body, figure {
	margin:0;
	background:#ddd;
}
img {
	display: none;
}