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