The JavaScript blog.


libraries graphics webgl translations japanese jpeg

Z3d, is-progressive, Japanese Translations, textlint

Posted on .



Z3d (GitHub: NathanEpstein/Z3d, License: MIT, Bower: z3d) by Nathan Epstein is a library that generates 3D plots. It gives you a Three.js scene, so you can further manipulate the graph with the Three.js API.

One of the useful things about Z3d is it has sensible built-in defaults, so you can throw data at it and get something cool out. The basic example is just plot3d(x, y, z), where the arguments are arrays of numbers to plot in 3D space.

The plot3d function also accepts a configuration argument, which allows things like colours and labels to be defined.


If you're running through a checklist of website performance improvements and see image optimisation, then you might want some automated tools to do the job for you. Sindre Sorhus suggests using progressive JPEG images, and sent in a tool that can check if a JPEG is progressive or not.

It's called is-progressive (GitHub: is-progressive, License: MIT, npm: is-progressive), and can be used as a Node module or on the command-line. The command-line use is either is-progressive filename or you can redirect data into it.

The Node module supports streams and has a synchronous API. That means you can do isProgressive.fileSync, or pipe HTTP requests through it with res.pipe(isProgressive.stream(callback)).

DailyJS Japanese Translation and textlint

Hideharu Sakai wrote in to say he's been translating DailyJS into Japanese, here: panda.node.ws/?cat=19.

He also mentioned a nice project for linting text: textlint (License: MIT, npm: textlint). You can use it to check plain text and Markdown files for various rules which are customisable. The example ensures to-do lists are written a certain way.

You can use textlint as a command-line tool or a Node module, so you could put it into a build script to validate your project's documentation.

Many thanks to Hideharu!


graphics webgl

After Many Years of Desktop Programming...

Posted on .

If you're interested in WebGL development, then you might enjoy My forays into JavaScript by Stavros Papadopoulos. It's basically a paper, WebGL GUI library, and terrain rendering engine all rolled into one fascinating project. The GUI toolkit is desktop and Android inspired, but it's rendered with WebGL. There's a live demo that loads chunks of terrain data as you fly around -- the terrain is rendered offline by a Delphi program.

Project Windstorm

There are a few things that I found interesting about this project. The author is a desktop developer that is learning JavaScript, so the demo itself should be encouraging to anyone in the same position. The screenshots are incredible, and it runs fairly well (I get 30fps on a 2013 MacBook Air).

The section in the article about fetching tiles will be of interest to anyone starting out in WebGL game development. If you've got server-side experience then designing the API for this is an early problem that you'll have to tackle:

A very simple and efficient way to determine the potentially visible tiles is by performing a simple intersection test against the bounding box of the viewing frustum's projection on the Y = 0 (horizontal) plane (see first image below).

A slightly more involved but potentially better way (as long as the viewpoint remains above and relatively close to the ground) is to construct our bounding box from the points of the polygon that results from intersecting the frustum with the horizontal plane, combined with the projected points of the frustum's near plane (got that?).

I find the GUI particularly impressive, it's actually pretty usable and I haven't managed to break it yet. It would be nice if Stavros released it as a library. I haven't spent much time taking the JavaScript apart yet, so I don't know if he's used any libraries. In fact, I entered flight mode in the demo and ended up wasting all of my DailyJS writing time for the day!

All in all, the GUI weighs in at ~12KLOC and spans 24 files, which is quite a bit more than the terrain engine itself!

It sounds like WebGL GUIs can be complicated, depending on your requirements. In this case I think it was well worth the effort.


libraries graphics modules webgl

verb: A CAD Library for the Web

Posted on .

Peter Boyer shared two modules related to 3D graphics: Flood, a visual programming language, and verb, a library for working with NURBS surfaces.

Flood (GitHub: pboyer / flood, License: MIT) behaves a bit like a 3D modelling application. It uses a Scheme interpreter that's written with JavaScript, with immutable data and first order functions.

The beta application allows you to sign in with a Flood account, Google+, or Facebook. You can add nodes that perform arithmetical operations, shapes, and even functions.


It's built with Grunt and Bower, and uses libraries like three.js and Bootstrap.

Peter's other project is verb (GitHub: pboyer / verb, License: MIT), a library for creating and manipulating NURBS surfaces. It works with browsers and Node and supports advanced tools like derivative evaluation, adaptive tessellation, and intersection.

The examples include things like arcs, Béziers curves, and various extrusions. You can rotate the examples if you click and drag.

NURBS are used in CAD, I don't think they're particularly popular for game graphics, so presumably Peter intends to use this with the Flood project.


animation graphics webgl d3

WebGL D3 with PathGL

Posted on .

A PathGL particle simulation.

"PatrickJS" sent in PathGL (GitHub: adnan-wahab / pathgl, License: GPL, npm: pathgl) by Adnan Wahab. It's a library for data visualisation with D3.js that allows you to do cool things with WebGL and particles.

The particle physics example looks like this:

var particles = pathgl.sim.particles(1e5);

    .attr('r', function (d,i) { return d.z })
    .attr('cx', function (d,i) { return d.x })
    .attr('cy', function (d,i) { return d.y })
    .shader({ stroke: 'texel(pos.xy).xzwy' });

  .on('click', particles.reverse);

As you can see, PathGL uses the familiar D3 chained API with an additional shader method that adds texels.

There are other GL-specific methods as well, like uniform, texture, and pipe. These are documented in the API reference.

If you're already used to D3 but don't know much about WebGL, then you should take a look at the PathGL documentation for SVG vs. WebGL. It explains how the scenegraph relates to SVG. There's also a page on GPGPU, a technique for offloading heavy computation to the graphics card.


graphics webgl

Rendering Large Terrain in WebGL

Posted on .

Rendering large terrains by Felix Palmer is a tutorial that demonstrates how to render terrain with a variable level of detail. There's a demo and the source is on GitHub. It's built with three.js, and is based on a paper on level-of-detail distribution.


A simple way to do better is to split our plane into tiles of differing sizes, but of constant vertex count. So for example, each tile contains 64×64 vertices, but sometimes these vertices are stretched over an area corresponding to a large distant area, while for nearby areas, the tiles are smaller.

The code uses GLSL, but the main app/ JavaScript code is all neatly organised with RequireJS, so it's surprisingly easy to navigate and understand. The tutorial blog post also makes some of these difficult ideas more accessible, so I thoroughly recommend checking it out.