Learning Three.js

or WebGL for Dummies

Have You Seen YourSelf When You Are Drunk ? - Making of a Fun WebGL Demo

This post is about a demo called “Have you seen yourself When you are Drunk ?”. What is it all about ? Well have you seen yourself when you are drunk ?

You don’t look at your best, but you don’t remember the morning after, lucky you. So now you are sober, this demo will show you how you look when you are drunk… Hopefully this will make you realize that alcohol abuse is a bad thing! And that we could save the world by stopping it!

Or it will just show some cool webgl effects… Honnestly i wasnt that sure of its exact purpose. Well, up to you to pick :) In other words, this is a webgl demo which reads your webcam, to show yourself on screen, then it does some screen deformations to give you an idea of what you look like when you are drunk.

We will learn how to code that. So first the tools of the trade…

Game Workshop: Let’s Do a Fighting Spaceship Minigame Together

In this post, we are going to present how to do a mini-game called “Flying Spaceships”. We are going to do it together in 40 minutes. You can read the slides or watch the video to follow along! Just look at this demo. It uses three.js for the 3D, WebAudio API for the sound and several threex extensions for stuff like spaceships and planets. I love the fact that now we can code mini-games in less than an hour! All that on the web, and with open source, so cool!

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

Monitor Rendering Performance Within Three.js

This post is about monitoring rendering performance within three.js. It presents a small standalone extension called threex.rendererstats. 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.

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.

Load Your Game Faster With AppCache

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