Experimenting Webgl textures with Threejs
A Pen by Stephen Larson on CodePen.
Experimenting Webgl textures with Threejs
A Pen by Stephen Larson on CodePen.
Experimenting Webgl textures with Threejs
A Pen by Stephen Larson on CodePen.
<figure></figure> | |
<iframe width="0" height="0" src="http://www.youtube.com/embed/eXjkgyTeWl8?autoplay=1&start=409" frameborder="0" allowfullscreen></iframe> |
// 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(); |
<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> |
body, figure { | |
margin:0; | |
background:#ddd; | |
} | |
img { | |
display: none; | |
} |