Posts Tagged 'geometry'

What are UV coordinates?

Isn’t it amazing how many people in the field do not understand UV coordinates? I thought so too, so back in 2011 I took two images from Senocular article and made this animated GIF:


Well, I am just reposting it here now in case Alternativa3D wiki currently hosting it will go down, like their forum did.

On the alternative to gl_FrontFacing

Ok, this post is still about three.js and GLSL shaders, but unlike raytracing loads of cubes or relativity simulations, this is something more down-to-earth. In this post, we shall discuss some possible alternatives to gl_FrontFacing in your WebGL apps… Continue reading ‘On the alternative to gl_FrontFacing’

Relativistic lattice

How would the space look like if you were going really fast? You could find some videos if you know the key words, but not enough interactive stuff, so here goes one:

development screenshot Continue reading ‘Relativistic lattice’

First-person shooter using three.js

I am no longer working on COLT and currently contemplating what to do next. I have strong flash background, but this technology does not feel well. With WebGL technology exploding, on the other hand, I’ve decided to do old-school first-person shooter to see if this kind of work is something I want to do from now on, and get better idea of all the challenges involved.

Click to play

The result

The result is this sort of game where you pointlessly run around the platform and shoot monsters. Originally I thought I would complete it in 2-3 days, Ludum Dare style, but since I had no enough motivation to spend all my time on this, it took me whole month of random short coding sessions to “complete” it (and there are still some bugs to fix).

Another thing I hoped for was to write “how to make complete game with three.js” tutorial that all the internet would link to, as apparently there are no tutorials like that. It is easy to write “how to move the box” tutorial, but something more takes time that noone is really willing to spend. Well, the bad news are that I still can’t write the tutorial. I would need to make 10 more games like this before I can write one :) So the rest of this post is simply going to be adventure log, noting some tricks I used and some mistakes I made along the way.

Continue reading ‘First-person shooter using three.js’

3D bar chart on the globe using three.js

When people need to present per-country data such as GDP, they usually resort to color-coded maps or simple bar charts. In 3D, you could combine these two and end up with something like this:

globe bar chartThis is very obvious idea, yet I had no time to try it until last November. It worked, and I went on with my life, leaving the code to collect the dust. Then I saw Kaspersky cyberthreat map this March, which used extruded country shapes to support zooming. This reminded me this gold I was sitting on, and now I was finally able to fork out some time to undust it and push to github.


Basically, you take 2D country shapes and tessellate it on the sphere surface, then extrude towards the sphere center. You end up with cone-shaped meshes that you can then scale to build this kind of geo- bar chart. The catch is that corresponding three.js scene weighs much more than its 2D source data (ObjectExporter blows 100 KB of GeoJSON up to many MBs). Much of this extra weight comes in the form of useless digits in vertex data, but even with that removed there is extra dimension, data duplication and so on. To work around this issue you have to build 3D geometry from tessellated 2D data on the fly – this puts 3D data size at ~150% of 2D. Still sucks, if compared to TopoJSON, but tolerable. Corresponding code looks like

for (var name in data) {
    geometry = new Map3DGeometry (data[name], innerRadius);
    globe.add (data[name].mesh = new THREE.Mesh (geometry, material));

Map3DGeometry class and the tool to create the data are now at github.


Following documents the problems you would encounter if you did it yourself, so you may probably skip it. Continue reading ‘3D bar chart on the globe using three.js’

Amazing Maps (and one in particular :)

Today I came across (and followed) Amazing Maps twitter account. They post loads of interesting maps, like the one that shows who has supplies the oil, or the one that shows that my country has world’s best extinction rate. This post, however, is dedicated to the map of countries prosecuting gays:

Personally, I don’t care if you are gay or not (unless you’re girl that I am interested in), but this map scored two points on my bullshitometer for dirty tricks it uses to influence my opinion. 1st, and obvious, was to cover offending countries in blood. Of executed gays, I suppose. 2nd, and less obvious, is clever choice of projection where gay-neutral Greenland (small island with 80% of its area being nothing but ice) has roughly the same size as whole gay-hating Africa. So, I decided to re-do this map using positive green color and population-based projection to make it a bit more representative:

Turns out it does not look that different, after all :) Gay-neutral China, the world’s most populated country, conveniently offsets all those aftrican gay haters. In fact, I’m sure that very soon indian government will sort out their bureaucratic bullshit, and half of this green spot will be gone.

Update: they have now posted new version of the map that uses better projection and breaks it up by punishment severity.

[ᴘᴏʟʟ] Left or right?

What is better way to fill Mandelbrot exterior? Colors were intentionally left dull, please vote for best geometry:

left or right?

In case you want to check more locations, click here.

Old stuff

February 2017
« Jan    

Oh, btw…