So today we gonna learn how to display the earth in webgl. That will be a nice introduction to material and textures. I got the idea while coding threex.planets, a three.js extension to easily display all the planets from the solar system based on planetpixelemporium. With this post, you will be able to feel like astronauts conquering the outer space for the day and creating your own galaxy. :)
This post is about monitoring rendering performance within three.js.
It presents a small standalone extension called
It collect information from three.js renderer and display it live.
It is very usefull to diagnose performance issues while developping.
The API is exactly the same as stats.js
so it is easy for you to include in your own stuff.
Imagine controlling your computer without needing a mouse or a keyboard but only with the movement of your hands! That is what the Leap motion device is all about! It was all over the net a few months back. This device is not unlike the kinect, however it is designed to be used at a shorter range. The leap device is a new way of motion on your screen and it is able to trace your fingers. Quite sci-fi, don’t you think? Especially when you see the accuracy, even the slightest movement of your fingers is tracked. They have been nice enough to send me one so that I could play with it and get an idea of what it does and why it is such a cool device.
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.