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