Learning Three.js

or WebGL for Dummies

Let’s Make a 3D Game: Virtual Joystick

Here is another article of the “Let’s Make a 3D Game” series. We have already seen how to handle other inputs like keyboard and device orientation. This post is about virtualjoystick.js It virtual joystick, another input you can use for your games. A virtual joystick emulates a joystick behaviour on a touch screen. virtualjoystick.js has been coded in a effort to port marblesoccer to mobile device. Show, dont tell, Try it out.

This demo works with mouse events too thus, it is easier to test/debug. virtualjoystick.js has been widely inpired by this post by Seb Lee-Delisle. The screencast below is short introduction about virtualjoystick.js

Boilerplate for Three.js

This post presents boilerplate for three.js. I looked at html5 boilerplate and found it awesome. html5 boilerplate is a fast way start a clean project. It avoids repetitive tasks, following DRY principles. It includes all those good practices, which are so easy to forget. It seems all good to me :) boilerplate for three.js tries to apply similar principles. I frequently write simple three.js demo for tutorials, and repeat the first steps way too often for my tastes :) It has been done in effort to make 3D on the web even easier.

Try it out. “Boilerplate for three.js is a web template for a fast, robust and future-proof site. Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.” - freely adapted from html5 boilerplate site.

Particles: Online Editor for Sparks.js

This post is the second of our serie on particles. It presents sparkseditor , an online editor for sparks.js with three.js. In a few word, it is a webpage which provide an text editor with a sparks.js effect. You got the code in the editor and you see live the resulting particles effect. I like this live aspect a lot :) I think it makes your design more direct, lower latency, less overhead. More creative in a way. Try it out.

This editor has been made to lower the barrier of entry on sparks.js with three.js particles. The UI is rather simple and obvious. You can find a small presentation in the screencast below.

Particles: Introduction to Sparks.js

This post is the first of a serie on particles. It specifically is about sparks.js. sparks.js is lightweight 3d Particle system in javascript, for use with three.js and tween.js. It is from zz85 who already did 3D text and Catmull Clark subdivision. a productive guy :)

The demo below is one of the many three.js examples. While im on it, the example directory is a gold mine. Go dig in it to understand how to code three.js :) Back to the point, this demo is rather cool no ? You want to do the same ? During this short post, let me walk you walk thru the code for particles in this example.

Constructive Solid Geometry With csg.js

This post is about constructive solid geometry , an impressive word :) In fact, it is just a way to build complex objects from simpler ones. Those simple objects are assembled using operations such as union, difference and intersection.

Recently Evan Wallas released csg.js, a clean self-contained library to do constructive solid geometry. So Chandler Prall wrote a bridge to make it easy to use with three.js.

With all this nice code, i wrote the little demo of a dice you can see on the right. Thus you can click to change the operations, play with it and have a feel of the various operations.

Lets Make a 3D Game: Make It Embedded

This post is part of the “Let’s make a 3D game” series. The previous post was on fullscreen API. Here is another one on resizing the display area. This post is about embedding your game in another page. It is usefull to include it in a blog, in facebook, iGoogle or other game plateforms.

MarbleSoccer now contains all the tricks explained in this post. Show dont tell, you can see it embedded on the left. Embedding your game implies various things. As your game is hosted in another page, it likely got a smaller display area. HTML5 CSS media query makes it easy to fit various sizes. Another part are the DOM events from the iframe. They will be propagated to the host page and may produce undesirable effects. We see how to shield them. But first let’s see about iframe

Let’s go play in an iframe

iframe is an easy and secure way to embed a page in another. Let’s declare it.

1
2
3
4
<iframe src="http://marblesoccer.com"
  allowfullscreen webkitallowfullscreen mozallowfullscreen
  width="480" height="320" frameborder="0">
</iframe>

Lets Make a 3D Game: Make It Fullscreen

This post is part of the “Lets make a 3D game” series. It is about the fullscreen API. This API allows to make DOM elements fullscreen. Fullscreen is quite important for games. It provides a larger display so a more immersive experience for your players. All that from javascript, so no more needed to ask “please f11” to your players, isnt that sweet ? :)

The fullscreen API is still in discussion, but the basics are settled. At the time of this writing, it is available in firefox nightly, webkit nightlyand chrome stable. It has been already added in marbleSoccer. The icon is from The Noun Project, a source of nice and clean icons. Try it out! Click on it to toggle fullscreen state. If you dont see the icon, your browser doesn’t yet have the fullscreen API.

Ok now is time for code :)

Let’s get started

As usual, i provide a little helper to make it easier for you to include it in your games. It is called THREEx.FullScreen.js. It hides the prefix of each vendor and the little discrepencies between their API implementation. You download this file from here and include it in your page like this

1
<script src='THREEx.FullScreen.js'></script>

Lets Make a 3D Game: microphysics.js, Even Easier

This post is part of the “Lets make a 3D game” series. It is a follow up from the previous article on microphysics.js. It will describe how to easily include microphysics.js in your three.js games. THREEx.microphysics.js is a THREEx wrapper for microphysics.js. It helps binding three.js objects to microphysics.js. The API is chained for convenience.

Let’s get started

So lets see how to use it. First step, you download it here. Then include it in your own code with this line.

1
<script src="THREEx.microphysics.js"></script>

Lets Make a 3D Game: microphysics.js

This post is part of the “Lets make a 3D game” series. 3D and physics simulation always go well together even more so with marble games. One is required for marblesoccer but i wasnt convinced by current 3d physics engines. I explain why at the end. Fortunatly, @pyalot from codeflow.org has been kind enough to write one taylor-made for us: microphysics.js!!

It is bite-sized, elegant and efficient. Less than 500 lines at the moment!! It is small engouh to be understood, important feature for a tutorial blog. It is a work in progress tho. We aren’t aware of any bugs. New features will be added and the API is expected to move. Currently it implements moving spheres and static boxes (or AABB as we like to say). This is all we need for marblesoccer, the good thing about tailor-made. We are in business!!!

Below is a screencast of me doing a short introduction of the playground. This just a page for you to experiment with microphysics.js.

Let’s get started

So lets see how to use it. First step, you download it here. Then include it in your own code with this line.

1
<script src="physics.js"></script>

Performance: Merging Geometry

This article is about merging geometry and how it can improve performance. It is important for perfomance to reduce the number of WebGL calls as much as possible. The rules of thumbs is the less data are exchanged between the cpu and the gpu, the better it is for performance.

The demo is rendering many cubes and put them randomly in the space. It is a simplictic way to measure the performance, but it will do for us. If the geometries arent merged, my computer is able to display 2000 cubes at 30fps. See on the left. But if the geometry are merged, it displays 120000 cubes at 30fps. See on the right. Screenshots make it pretty obvious :) This is 60 times more cubes!!!