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.

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!

This post presents a livecoding screencast of Augmented Reality 3D Pong. This is an experiment to use augmented gestures as a way to interact with game. So i picked a game classic “pong”. We gonna learn how to code a pong in augmented reality with webgl. The result code is only 100lines!! Nice for augmented reality + webgl + a game :)

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.

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 :)

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.

This post is an update on tquery progress. Our previous posts were previews, for example valentine card in tQuery or linkify, a tQuery extension. This post is the release of version 0. It will walk you thru the website and shows how to run your first tQuery project with the boilerplate. You should be able to play with tQuery after that :)

Ok It is still experimental. I have been paddling hard to make it usable by other people tho. The playground is the easiest way to start experimenting. It is all online. no install, no download, simple and understandable. tQuery code is all on github repository. The screencast below will walk you thru the website.

This post is an update on tquery progress. It is about linkify, a first experimental extension. Thanks to it, any 3D object may become a link. So 3D objects act as a <a> tag, i.e. the object becomes clickable and clicking on it open a new url. It is built on top of domEvents. It is used to incoporate dom kindof events in 3D world. We saw them a few week back in ‘dom events in 3D space’ post. Previous posts on tquery may be found here.

The tQuery experimentation is going on. It is a lot of fun to code :) This post is just a short presentation of two plugins currently in incubation: tquery.text and tquery.shape. Yesterday was valentine day, so i thought it would be cool to stay in topic. The screencast is a live coding of a valentine card in tQuery :)