Where in the world have I been the past two months?
Late last December Pokki announced their 1UP HTML5 game contest, which ends today. I started working on a World War II themed RTS. As it turns out, making a real time strategy game requires more than 2 months if you’re starting from scratch. So one week before the contest deadline I scrapped that idea and started work on a completely different game.
Fortunately I was able to complete the second concept in time. The game is called Tower and the aim is to build the tallest stack of wooden and stone blocks as you can while racing the clock. For now Tower is only available to Windows users through the Pokki store, but I will put it online for others when the contest is over.
I will put up another post in a week or so detailing how I put Tower together. It was the first time I worked with any of physics libraries (happily decided on ammo.js) but overall everything was straightforward.
A few days ago Evan Wallace released his Constructive solid geometry library for WebGL. This library uses Boolean operations (addition, subtraction, union, intersect) to be applied on 3D geometry such as cubes, spheres, or anything else you can throw at it. I thought this would be a very nice capability to have in Three.js and wrote a wrapper for Evan’s CSG library.
First, an example of what code using just the CSG library looks like:
var cube = new CSG.cube();
var sphere = CSG.sphere({radius: 1.3, stacks: 16});
var geometry = cube.subtract(sphere);
Let’s add in Three.js and my CSG wrapper:
var cube = THREE.CSG.toCSG(new THREE.CubeGeometry( 2, 2, 2 ));
var sphere = THREE.CSG.toCSG(new THREE.SphereGeometry(1.4, 16, 16));
var geometry = THREE.CSG.fromCSG( sphere.subtract(cube) );
var mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
It’s that simple. The toCSG function accepts objects of both THREE.Geometry and THREE.Mesh types. Objects can be positioned either by the mesh’s position or by supplying a second parameter to the toCSG function. Both methods are shown below. (rotation can be set from the mesh’s rotation property or through a supplied third parameter)
var cube_mesh = new THREE.Mesh(
new THREE.CubeGeometry( 2, 2, 2 )
);
cube_mesh.position.x = 1;
var cube = THREE.CSG.toCSG(cube_mesh);
var sphere = THREE.CSG.toCSG(new THREE.SphereGeometry(1.4, 16, 16));
var geometry = sphere.subtract(cube);
var mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
var cube = THREE.CSG.toCSG(
new THREE.CubeGeometry( 2, 2, 2 ),
new THREE.Vector3(-1, 0, 0)
);
var sphere = THREE.CSG.toCSG(new THREE.SphereGeometry(1.4, 16, 16));
var geometry = THREE.CSG.fromCSG( sphere.subtract(cube) );
var mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
In these examples I only used the built in primitive objects but the same functionality should work for any Three.js compatible models. UV coordinates are not generated (all values are set to 0) but everything else related to THREE.Mesh works as you would expect.
I’m always a bit excited after writing a fairly succinct-yet-powerful regular expression, so I thought I’d take a short break from the WebGL topics for this tidbit:
([^\s][\s\S]{0,20}(?!=[^\s]))([\s]|$)
This magical regex will trim & truncate text down to 20 characters without breaking apart the last word. Need a different number of characters? Just change the “20″ to whatever you need. Here are some quick examples:
"I'm sorry Dave, I cannot let you do that." -> "I'm sorry Dave, I"
"Top 'o the morning to ye!" -> "Top 'o the morning to"
" Testing the trimming out! " -> "Testing the trimming"
After my last post about a basic parallax shader I have been working on implenting a steep parallax shader in WebGL. This shader is a lot more computationally intense than normal parallax because it uses ray tracing to find the correct UV values and to cast shadows onto itself. There is only one big change between the original shader and my WebGL implementation and that is using for loops instead of whiles. This change had to be made because WebGL’s specifications don’t support while loops. This is for security reasons, so that a website cannot create infinite loops in the GPU and hang the user’s system. Likewise, for loops must loop over constants. This change makes the shader less efficient but it isn’t too much of an impact and requires the number of ray trace steps to be hard-coded in the shader.
As this shader ray traces each individual pixel it is best used on objects which take up a smaller amount of the screen real estate. When viewing the example I see 60fps at 800×600 but it drops to around 30fps at 1920×1200.
Follow me on Twitter
Follow me on GitHub
