Learning Three.js

or WebGL for Dummies

Performance: Caching Material

This article is about performance and how caching can improve them. In WebGL, it is important not to push the same textures multiple times to the GPU. It uselessly slow down the rendering. As a rules of thumbs, the less data are exchanged between the cpu and the gpu, the better it is for performance.

A Basic Caching

three.js handles cache cleanly and eleguantly. If you instanciate a javascript object THREE.texture or a THREE.Material only once, it will be pushed only once to the GPU. It is the simplest way to avoid pushing them multiple times.

1
var material = new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture( 'foo.jpg')});

Then you use this material as many times as you want, foo.jpg will be sent only once to the GPU. For example, let’s create many spheres.

1
var mesh = new THREE.Mesh( new THREE.SphereGeometry( 75, 20, 10 ), material );

This solution is simple and eleguant but may not be practical with a large code, like a game. In such case, you can use microcache.js. It is a micro library to handle in-memory cache which works in node and browser.

Let’s Make a 3D Game: Map Editor

This is a new article of the “Let’s Make a 3D Game” series. In the previous one, we focused on keyboard. We will focus on map editor for this one. In most games, the player moves around a map, sometime they are called levels. Maps are a key part of a game. They describes the world the player lives in, its rules, its limits, its geography. Additionnaly when a player completes a map, he goes in another better/harder map. It gives a sense progression which is fun. Players like fun things :)

So let’s make a map editor

So i searched for a way to do map for our marble game. I wanted something very reusable and hackable, something you could easily use in your own games. I picked voxels. The illustration from wikipedia on the right, may help understanding. They are easy to code, simple to understand, yet efficient and flexible. On top of that, one of three.js examples is a voxel painter in WebGL. So most of the work was already done for us!

Only two features were missing to make it a map editor. First, we need to load and save those maps. Thus we can edit those maps, and tune them until to get a good gameplay. Second, the map must be composed of various type of cubes. Different type of cubes will have different purposes in the game. e.g. one cube may be wood or be water, one may make your explode on contact, one may make you teleport, anything you want. So i did those modifications and came up with this editor.

Let’s Make a 3D Game: Keyboard

This post is the first of a series Let’s Make a 3d game. The series will walk you down the path of game developement. It will describe the various parts of a web game: input handling, map generation, collision, physics, sounds, graphics etc… Obviously we will glue them to make an actual game. Quite a bit of work but im super excited !

It will be a marble game. Not sure which kind yet, but they are many. I did pacmaze, a pacman in 3D and buddymaze, a multi-player first personn shooter. But this one gonna be from scratch, thus we will discover things as together :)

We will try to code each part of the game to be as reusable as possible. The first part will be the keyboard handling. It isnt the hardest, nor the most important, but it is super simple. Perfect to get us started.

Let’s get started

In a game, a keyboard handler is a bit special. Usually this is done with events , e.g. jQuery.bind() or hotkeys. But we are doing a game and all games revolve around a game loop. So the keyboard must be queryable at any time during this loop, as opposed to event-driven. Our code should keep tracks of which key and which modifier is pressed. Let’s call it KeyboardState.

Let’s include the script

You download it from here and include it in your page like this

1
<script src='THREEx.KeyboardState.js'></script>

Screenshot in Javascript

Sometime it would be cool if you could take a screenshot of your demo to share with your friends. This post will explain how to do that single a single line. Additionnaly, THREEx.screenshot helper is provided at the end if you want to add printscreen key in your demos without hasles.

Let’s get started

So as usual you got a renderer variable to render your 3D scene. This renderer contains a domElement property. It is a DOM element on which it renders, who would have guessed ? We will use the .toDataURL() method on this element to get the screenshot.

1
var dataUrl = renderer.domElement.toDataURL("image/png");

Window Resize for Your Demos

It is cool when you look at a demo and it is resized automatically when you change the dimension of the browser’s window. To switch it fullscreen or such. THREEx.WindowResize is an little piece of code. It helps you do exactly that on your own demos in a single line.

Let’s include the script

You download it from here and include it in your page like this

1
<script src='THREEx.WindowResize.js'></script>

Tween.js for Smooth Animation

This post presents tween.js and how you can use it to easily smooth your animation. tween.js is a “super simple, fast and easy to use tweening engine” from sole. It provides tweening and full blown animations thanks to chaining. Let’s get started! But first, here is a demo using tween.js. It has basic parameters for you to play with and get a feel of what tweening may be.

Tweening… what’s that?

From wikipedia article, tweening is an abreviation of inbetweening, i dont know why but i find that funny maybe because inbetweening isnt a word to begin with. Let’s get back to business, what is a tween? It is a interpolation between 2 values, from the source to the target. The tween will simply generate the needed values needed inbetween those 2 limits. The key is where are those values. This is done with the ease function. The most obvious one is to go straight from source to target. This is the linear function you see on on the right.

But some are more funky, you can see Elastic EaseInOut on the left and see Cubic EaseInOut on the right. Many others exist for our delight as you can see here.

Lets Do a Sky

This tutorial is about doing a sky. It makes a nice panorama with a nice immersive effect. This is much simpler than people would expect : only 3 steps for a total around 20 lines. You can find a live demo of it. It may be a easy addition to your effects. This is simple and efficient.

Background

Technically this is called a cube mapping. Why that ? because the principle is so simple: we create a large cube, apply some images on each face of this cube and put the camera inside it. That’s it.

The illustration (from SharkD at wikipedia) on the right, may help understanding. On the bottom left, you can see a 3D scene with a dot in the middle… This is where the camera will be positionned. On the bottom right, you can see the same 3D scene, with the large cube and now the camera is inside. The kind of cross on the top half are the images used as texture. Those are the ones which gonna be applied inside the large sky cube. If you go to the demo, open your browser debugger and look at downloaded images, you will see those 6 images.

Dat-gui - Simple UI for Demos

Dat.gui is a GUI widget for your demos. It provide way for the user to set parameters of the demo to play with it. It is simple to code, yet cool and minimalist on the screen. It is the blue vuemeters on the screenshot below. This post is a presentation of the library.

How to include it

Simply include the library file in your page. Download it there

1
<script type='text/javascript' src='DAT.GUI.min.js'></script>

Lets Do a Cube

Here is the first lesson! I started with something real simple, a cube. I wasnt sure how to present the lesson, so i did an annotated source of the example to get things started. I kept it small as possible to simplicity sake. It is only 70 lines of javascript for a webgl simplistic demo. I hope it shows that webgl is quite accessible.

You can see this example live or in the screencast below.