Learning Three.js

or WebGL for Dummies

tQuery V0 - Let’s Get Started

This post is an update on tquery progress. Our previous posts were previews, for example valentine card in tQuery or linkify, a tQuery extension. This post is the release of version 0. It will walk you thru the website and shows how to run your first tQuery project with the boilerplate. You should be able to play with tQuery after that :)

Ok It is still experimental. I have been paddling hard to make it usable by other people tho. The playground is the easiest way to start experimenting. It is all online. no install, no download, simple and understandable. tQuery code is all on github repository. The screencast below will walk you thru the website.

Linkify, a tQuery Extension

This post is an update on tquery progress. It is about linkify, a first experimental extension. Thanks to it, any 3D object may become a link. So 3D objects act as a <a> tag, i.e. the object becomes clickable and clicking on it open a new url. It is built on top of domEvents. It is used to incoporate dom kindof events in 3D world. We saw them a few week back in ‘dom events in 3D space’ post. Previous posts on tquery may be found here.

An Extension System for three.js

This post an overview of a work-in-progress. It is about an extension system on top of three.js which mimics jQuery API. I came up with the idea while thinking about how to trim three.js and make it easier to maintain. I have always been impressed with jQuery plugin ecosystem. It is lively, varied, and contains impressive specimens. I would love to have such a rich ecosystem for three.js’s plugins.

Let’s call this experiment tQuery as in “three.js + jQuery”. It makes it easier to understand if you already known this library. This is a v0 in the “publish early, publish often” vibe. The goal of this little project is to see if we can mix to mix three.js power with jquery API usability… How far this concept can fly ? We will see.

So what do we want ? The code must make three.js easy to extend and should mimics jQuery whenever possible. In order to see if the system hold under load, i wrote several extensions already. It is very early. The architecture of it all is far from stable. Code is advancing at fast pace tho :) The screencast below is short live coding session. Just to give an idea of the current status.

Fun With Live Video in WebGL

This post is about live video in webgl. It is possible in today browsers to read the webcam using a new feature from html5, called WebRTC. This standard is about real-time communications such video conferences. It is an open source project supported by Google, Mozilla and Opera. Quite neat hey!

I think live video has a lot of potential usages in 3D. It is so cool for interactivity. The player sees himself on the screen. It becomes part of the actions. Quite immersive effect. We can imagine something like second life, where people wander around and interact live with each other in a virtual world. Our demo is about TV… Another obvious use may be reflections like mirror or water. What about your face from the webcam reflecting in water with animated waves ? Would be nice!

Casting Shadows

This post is about shadow casting, a technique which approximates the effect you see in real life everyday. They may be tricky to tune but they looks so good, it worths it. Shadows are an efficient tool when you to make your scene more realistic. We will see how they can be used inside three.js and see more about lights while we are at it.

As usual, there is a demo. It is kept it real simple thus you can read the code more easily. The scene is a simple object in the middle, a spotlight moving around and a plane to receive the object shadow. The light frustum is left visible in orange.

Boilerplate Builder for Three.js

We recently introduced a boilerplate for three.js in a previous post. It aims to ease your first contact with three.js. It contains a template for a simple project, a sample on which we already applied good practices. You download it and run it in a matter of minutes. Thus you can immediatly focus on your own things. In short, it aims for Fast bootstrap + Good Practices.

It seems nice, hey ? Well there is a glitch. The boilerplate for three.js needs more flexibily. In a way, it acts as a ground on top of which you start your own thing. We do our best to provide good defaults, but they are only defaults. What if you got specific requirements ? How to start your project then ? The boilerplate builder has been written for you :)

Try it out. Go ahead, play with the options, discover what they do and customize your own boilerplate. The screencast below is short introduction where i describe the boilerplate builder.

Dom Events in 3D Space

Ever dreamed of a object3d.on(‘click’, function(){ … });?

I have :) This post presents a little experiment. What about implementing the concept of dom events in 3D Space. In a web page, a click event is trigger when a user click on a element. This is common knowledge in web development. What about having that but in a three.js scene ? Maybe people will start do 3D user interface with that, who knows. How great would that be ?!? So let’s do that.

Try it out. The demo contains 3 teapots. Each bind a different type of events. When the events are triggered, teapots are animated. Animations are made by tween.js, a nice js tweening engine seen in a previous post. Play with it to get a feel of it, maybe think about the type of UI you could do in 3D.

Tunnel Effect for Your Demo

This post presents a tunnel effect. This is a classic in 3D demo. They are visually efficient and easy to code. In fact, tunnels are so trendy that even doctor who and stargate have fun in them :)

Try the demo. It has been built using the boilerplate for three.js seen in a previous post. The code is simple and small. Less than 20lines has been added on top of the boilerplate. We will create a THREE.Geometry to get the shape of tunnel. Then we will use a texture trick to create the visual illusion of moving.

Let’s Make a 3D Game: Supporting Mobile

This post is about supporting mobile. We will try to port marblesoccer on mobile. When doing a boilerplate for three.js, mobile had to be supported for compatibility. So it gave me the idea of this post. What about porting our game on mobile ? Porting a 3D web game to mobile ? crazy :)

The desktop version looks kindof ok. What would be the result of this experiment ? Is that even possible ? What about usable ? This is the purpose of this experiment to find out.