Learning Three.js

or WebGL for Dummies

3D Physics With Three.js and Physijs

This is yet another post about physics. This one is about physijs by Chandler Prall. It easily bind ammo.js and three.js. We will walk thru an example using it. Physics is always important in 3D graphics. It makes scenes more realistic. Additionally, if you simple put your object into the scene, it will move nicely and realisticly. So you spend less time tuning each moves. I am quite lazy so it matters :) The screencast presents the demo we gonna code and various examples of what is possible with ammo.js.

Three.js Sport Car on iOS at 40fps

This post is about iOS and three.js. It may seem surprising, but iOS supports WebGL since version 4.2. There is a tough limitation tho, it is available only in their advertisment plateform, iAds, not in safari browser. I got a ipad2 so i experimented a bit with three.js on iOS to see what is going on. Most WebGL examples from three.js and tQuery are working nicely on iOS.

The screencast below shows an ipad2 running the car demo we did last week in “Sport Car in WebGL” post. It runs at 40fps on the video. Rather good! Especially when you know the demo isn’t optimized. This car is way too detailed. One could reduce the size of this model by half without loosing much. So on mobile, the Good part is that fps are good. The Bad part is that speed is slower and balanced differently. This unbalanced part worries me a bit i admit. We need to better understand the mobile plateform. But hey, 40fps is quite good, way enougth to make a game!

Sports Car in WebGL

This post is about sports cars and how cool they can be! Once again, we gonna expose gems from three.js examples. It contains several sport cars which are fun to play with. You can drive them around and all. This is a good base for a game. We made tQuery plugins on top to make them easily reusable. Our scene will be a nice sport car, a grass ground, a sunset sky with shadow casting. All that in 40-lines of javascript.

Punch a Doom Character in Augmented Reality

Did you ever dreamed of punching a doom character ? They look evil and killed you so many time while you were playing the game. It is revenge time! This post will help you realize your dream :) It is about a minigame called “Punch A Doom Character in Augmented Reality” because in this game, the player can punch Doom Character in augmented reality :)

The character is displayed in 3D with WebGL with three.js. The player gestures are recognized thru the webcam by augmentedgesture.js library. It uses WebRTC getUserMedia to get the webcam using open standards. You can play this minigame here. In fact, it is an example of augmentedgesture.js library. We will walk you thru the code. Only 60 lines of Javascript.

Sound Visualisation: A Vuemeter in WebGL

This post is about producing a 3D Vuemeter for real time sound. We gonna walk thru the code of a webaudio.js example. This example will show you how to create a WebGL vuemetter with webaudio.js. It should be simple to understand, only 40-lines of javascript. webaudio.js is a web audio library for game. We gonna use it to reach Web Audio API. We gonna use tQuery to reach three.js 3D engine.

webaudio.js has been first coded as a tQuery plugin. You can find a post about it on learningthreejs blog. But this technology is so nice, it deserved its own repository. The library gained in flexibility in the process: It is now possible to display histogram in canvas2D of simply play sound, with no 3D at all :) see here for a list of webaudio.js examples.

Try the demo. This is the result that we gonna build together. Below is a small screencast of me presenting the code.

tQuery Plugin for Doom Characters

This post is about tQuery.md2Character plugin: a cool plugin which allow you to easily play with doom characters. You can see a live demo here. I will walk you thru its example. It include a checkerboard for the ground, a fog for the depth, keyboard to move your player and obviously plugins for the MD2 characters (doom formats). We gonna learn how to move doom characters in webgl in only 50lines of javascript!

Video Conference on Top of WebGL

This post presents WebGL Meeting, a very simple WebGL application to do webrtc call. It is a follow up of “Fun with live video on webgl”. It was presenting how to use the WebCam using WebRTC getUserMedia(). This one goes one step further and make an actual WebRTC call displayed in a WebGL scene.

In fact, it has already been done a month ago! As you can see here :) The video from the first post, ‘being on tv, watching tv’ has been answered by Ethan Hugg from cisco. My very first video reponse btw! He shows a SIP video call using an version of Chromium hacked by Suhas Nandakumar. Definitly cool stuff! WebGL Meeting is similar but run on unmodified browsers. The screencast below is short demo of it.

tQuery WebAudio for More Realistic 3D

This post is about Web Audio API. It is a new HTML5 api which provide great controls on the audio layer. It is much better than the audio tag. It is more suitable for games or music software. As 3D lovers, the one feature that we care about is audio spacialization. This makes Web Audio a complement to webgl. It implements positional sounds, so you get panning, dopler and all. It makes the scene so much more realistic.

The user tends to associate 3D to reality, so efficient 3D is a lot about realism. The brain identifies 2D as artificial while 3D seems immediatly more natural. Anything which appears close to reality increase this effect. Feeding this illusion creates a more immersive experience to the user. Realistic physics is one (stay tuned :). Web Audio audio spacialization is another.

The screencast below is a live coding session using tQuery.WebAudio. If you want, you can experiment with this code in our playground. Just click here and start coding :)

Augmented Reality in the Browser

This post is about augmented reality in the browser. In a recent post, we saw that it is now possible to have live video in webgl with WebRTC. Due to this, augmented reality is under the spotlight. Recently html5rock published a tutorial by ilmari heikkinen about ”writting augmented reality application using jsartoolkit”. Ilmari is google devrel for webgl and the author of JSARToolKit too. So we are in good hands :) The tutorial even include a part about binding it with three.js. I took this nice tutorial and packaged the code even easier to reuse.