Tag Archives: WebGL

Depth of Field

I'm glad I finally managed to get this working. I have almost no experience in real-time graphics like these, so this was a bit of a battle. Really interesting effect though. It's not perfect, as it's some kind of 2D blur process, but I think it's effective for what it is!

Your browser does not support the canvas tag. This is a static example of what would be seen.

GL Lines

Thought I'd play a bit more with WebGL through three.js. I wanted to play with lines a bit more, as wireframe just looks cool.

Your browser does not support the canvas tag. This is a static example of what would be seen.

WebGL Test!

Under the assumption that this may be useful at some point, I spent a while hunting online for the best way to get WebGL running in WordPress.

Your browser does not support the canvas tag. This is a static example of what would be seen.

After reading lots of articles, blog posts, stackoverflow posts and doing my own editing, I ended up with the code below!

First, upload three.js to your /js directory on your webserver. Then paste all the code below into a blog post as HTML.

<canvas id="canvas" width="550" height="375">Your browser does not support the canvas tag. This is a static example of what would be seen.</canvas>

<script src="js/three.js"></script>

<script type="text/javascript">
   var canvas = document.getElementById('canvas');    
    
   var renderer = new THREE.WebGLRenderer({canvas: canvas});
   canvas.width  = canvas.clientWidth;
   canvas.height = canvas.clientHeight;

   renderer.setViewport(0, 0, canvas.clientWidth, canvas.clientHeight);
	
   var scene = new THREE.Scene();
      
   var camera = new THREE.PerspectiveCamera(75, canvas.clientWidth/canvas.clientHeight, 0.1, 1000);
   camera.position.z = 3;
   var geometry = new THREE.BoxGeometry(1, 1, 1);
     
   var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
   var cube = new THREE.Mesh(geometry, material);
   scene.add(cube);
    
   function animate() {
      requestAnimationFrame( animate );
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
   };
   animate();

</script>