The JavaScript blog.


tutorials graphics webgl space science

WebGL Spaceship Tutorial, Voxel Mars, particle-excess-demo

Posted on .

WebGL Spaceship Tutorial

WebGL Spaceship Tutorial

Jerome Etienne shared Game Workshop: Let's Do a Fighting Spaceship Minigame Together -- a talk about building a little game with three.js and the Web Audio API. It includes slides, a video of the talk, and a demo.

Voxel Mars

Voxel Mars

Voxel Mars (GitHub: rachel-carvalho / voxel-mars, License: MIT) by Rachel Carvalho uses NASA data to generate Martian terrain, allowing you to run around a WebGL version of Mars.

As you move it displays your position on a map, and also shows the longitude and latitude. Therefore, your challenge (should you choose to accept it), is to get to the top of Olympus Mons!

The rendering style makes it look a little bit like Minecraft, and one of the author's ideas sounds like an amazingly interesting take on that genre:

a science-based (no dragons) survival mode on which you have to generate your oxygen and fuel, extract your water, grow your food, make martian bricks, etc


Particle Excess

Hugh Kennedy sent in particle-excess-demo (GitHub: hughsk / particle-excess-demo, License: MIT):

The particle simulation is running on the GPU to handle 262,144 particles in real time. It's a pretty standard technique these days, but it could be helpful as a reference for some. No three.js, just modules.

If you look at the source you'll see how shaders can be used to create interesting particle effects.


webgl debugging space instrumentation

Orbit Viewer, Earhorn

Posted on .

Orbit Viewer

Orbit Viewer

Orbit Viewer is a Chrome Experiment by Kevin Gill that helps visualise the orbits of comets and satellites. You can watch the famous comet Shoemaker–Levy 9, or see the current position of the International Space Station. It should work with most WebGL capable browsers.

A sort of "Where are they now" for spacecraft and comets: Check out realtime positions, along with historical and projected flight paths of our solar system's trailblazing spacecraft and comets. All in a zoomable/rotatable 3D interface. Using historical and real-time trajectory information for NASA's JPL Horizons system, and in-browser WebGL and Three.js rendering.


Earhorn (GitHub: omphalos / earhorn, License: MIT) by "omphalos" is a library for instrumenting JavaScript. You pass earhorn$ a label and a function, and then you can view the function as the values change.

The mouse example shows how this works: the source for a jQuery mousemove listener is displayed, and whenever you move the mouse the integer values for the current coordinates will be reflected in real time.

An iframe is used that loads the earhorn/index.html page which knows how to display an instrumented version of the function. Internally, Earhorn uses Esprima to generate an abstract syntax tree that is manipulated to allow the code to be observed.

It reminds me a little bit of the Watches feature in Light Table, and some of the recent improvements to WebKit Inspector.


jquery space simulation

Moonjs, jQuery Removes Sourcemap Comments

Posted on .


Moonjs (GitHub: siravan / moonjs, License: GPL) by Shahriar Iravanian is a port of the Apollo Guidance Computer using Emscripten.

AGC was the main computer system of the Apollo program that successfully landed 12 astronauts on Moon. There was one AGC on each of the Apollo Command Modules and another one on each Lunar Module. There was also a second backup computer system called Abort Guidance System (AGS) on the Lunar Modules, which is simulated by Virtual AGC, but not the current version of Moonjs.

Recent advances in the JavaScript language - such as optimized engines, ahead-of-time (AOT) compilation, and asm.js - make it possible to write computationally extensive applications in JavaScript. My previous experience with online JavaScript-based simulation (svtsim and hemosim) was very positive and convinced me of the suitability of the HTML5/JavaScript combination in writing portable, easy-to-use simulators.

I was going to try figuring it out, but it reminded me of Kerbal Space Program and I got distracted...

jQuery 1.11.0/2.1.0

jQuery 1.11.0/2.1.0 Beta 2 were released last week. The beta includes AMD support, which is still the headline feature.

Something that I found interesting was the removal of the sourcemap comment:

One of the changes we've made in this beta is to remove the sourcemap comment. Sourcemaps have proven to be a very problematic and puzzling thing to developers, generating scores of confused questions on forums like StackOverflow and causing users to think jQuery itself was broken.

We'll still be generating and distributing sourcemaps, but you will need to add the appropriate sourcemap comment at the end of the minified file if the browser does not support manually associating map files (currently, none do). If you generate your own jQuery file using the custom build process, the sourcemap comment will be present in the minified file and the map is generated; you can either leave it in and use sourcemaps or edit it out and ignore the map file entirely.

That fact sourcemaps generate so much confusion is worth thinking about, because it's one of those things that people cite as making compile-to-JavaScript languages easier to work with.