Learning Three.js

or WebGL for Dummies

Zero to Nyancat in 30 Seconds Flat!

So, today we are gonna learn how to use Yeoman for three.js. We are gonna create a Nyancat in WebGL, starting from nothing in only 30 seconds. It was a challenge to see how fast we could reach using the yeoman tools. Here is the demo we gonna build in 30 seconds :) You are gonna see how easy it is through a talk i made at parisjs! But first… what is yeoman? Well, yeoman is a “Modern Workflow for WebApps”. It is composed of 3 tools: bower, grunt and yo.

Let’s see how yeoman will help us ease up and speed up the work when we’re doing three.js. You can look at the screencast of me doing the talk, or directly at the slides below. If you are in a rush, here is the TL;DR executive summary. Have Fun :)

Update: I am experimenting with udemy and made a course from this post. Check it out “Yeoman For Three.js”. More than 30min of video :)

How to Make the Earth in WebGL?

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

Discovering Leap Device

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.

Mixing HTML Pages Inside Your WebGL

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.

Debugging With Chrome’s Canvas Inspection

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.

Move a Cube With Your Head or Head-Tracking With WebGL

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

Minecraft Character in WebGL

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!