Wouldn’t that be cool if we were able to mix normal web pages in our webgl? To interact with them as we usually do? to view them, to click on them… To scroll, to hover or even to type in input tags. Oh yeah it would be so great! We, webgl people, are currently an isolated Island in the web world. Being able to mix with normal page would give us access to so much interactive content. In this post, we gonna see how to do exactly this: how to seamlessly mix normal DOM elements in our webgl scene. They will actually appear as part of the 3d scene. Don’t worry it is surprisingly easy with three.js.

This post will present to you how to debug your webgl with chrome’s canvas inspection. This is an experimental feature available in chrome devtools. It gives you all the WebGL calls which are done in your webgl scene. So it helps if you actually know some raw WebGL :) In anycase you can see it being replayed call by calls, which is uber cool.

This post is about loading your game faster. Appcache may be great help on this. In this post, i will use a little game of mine called ‘Marble Labyrinth’ as an example to show how i got from 2.4mbyte to 0byte of download in 5min of work. Appcache provides faster access to your users, and less bandwidth cost to you. A well used time :)

This post is about head tracking and how to use it in 3D. It is surprisingly easy to do with the suitable libraries. We will experiment with headtrackr.js and three.js. headtrackr.js is a nice library from auduno to do head tracking in the browser. You will learn how to do head tracking in webgl in only 20lines of javascript. I love the web and how easy it is :)

tl;dr; links

• For a simple example. see the “move a cube with your head” demo
• To mess with the code now without any installation, see this jsfiddle example
• for an attempt to make 3d more immersive by using head tracking, see this demo

This post is about Minecraft Character. We will play with the minecraft character, learn how to do your own and make it move. I recently saw this excelent minecraft items demo by @daniel_hede. It triggered a switch in my head :) I felt in love with minecraft style of 3d. It makes modeling so simple. You don’t need to learn how to use 3d modeling software like blender, maya and such. It is easy to create new model based on this style.

Try the minecraft plugin demo. This is the one we gonna build. I used @daniel_hede’s code and did many plugins to make it all simple and fun :) In this demo, i introduce three.js post processing for the first time. This is the Vignetting and sepia color that you see. Additionnaly, you can easily change the skins with the UI within the demo. Now let’s get started!

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.

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!

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.

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.

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.