What is the difference between pixel and voxel?

What is the difference between pixel and voxel? by @Retronator

Answer by Matej Jan:

I’ll first give you just a bit of a background so you understand the full picture. There are two main ways of representing graphics on computers: vector and raster.

Vector graphics describe the image with mathematical equations, usually with shapes such as lines and polygons (which are then outlined and colored as specified).

Raster graphics instead describe the image as an array of color values.

Most of the time we try and represent graphics of two types: 2D and 3D.

In 2D vector graphics, each point of a line or a polygon is described with a vector with two components (x and y). That makes it 2D. Here is an example of a so called low-poly 2D image (small number of big polygons):

Uluru the Mighty Dreamer, Anh Tran, 2015

3D graphics are the same, but each vector uses three components (x, y and z). Here too, a low-poly 3D model can demonstrate things best:

Island Map, Timothy J. Reynolds, 2012

Note that the above island can be rotated around. To show it on this page (which is a 2D surface), one particular view had to be selected and the 3D geometry projected into 2D from the chosen viewpoint.

But you can make an animation to show the volumetric nature of 3D vector geometry:

Wagon, Timothy J. Reynolds, 2013

Let’s move onto your question and look at how raster graphics deal with 2D and 3D.

In 2D raster graphics, the image is divided into a number of evenly sized rows and columns:

Turbo Esprit Sprite, Matej 'Retro' Jan, 2014

Each cell is called a pixel (picture element). besides its 2D coordinate within the grid (x, y) its main property is the color that is placed at that coordinate.

The analog to the 2D low-poly vector art in raster graphics is pixel art.

Tribute (cropped), Matej ‘Retro’ Jan, 2005, 2012

With 2D pixel artworks, even though they try to represent 3-dimensional objects (a Lotus or an X-wing), they are drawn directly onto the 2D grid of pixels. You can’t rotate this image around like you can with the 3D vector car above. Similarly, the image of the Ayer’s Rock at the start of the article also can’t be rotated. Even though it is made of polygons, they weren’t placed in 3D space, but in 2D directly.

So far we’ve covered 2D and 3D vector graphics, as well as 2D raster graphics. The last step is 3D raster graphics.

In 3D raster graphics, the volume is divided into evenly spaced rows and columns, covering the three different directions (up-down, left-right, in-out). This divides the 3D space into cubes, also know as voxels (volume elements). Each voxel has a 3D coordinate within the volume and again holds the color at that coordinate.

Just like pixel art (art with very deliberate placing of pixels), we have voxel art, where each cube is carefully considered. It’s a lot like LEGOs.

StarWars Scene, Sir carma, 2015

Note that like in the vector 3D case, the voxel scene too can be observed from any possible angle.

StarWars Scene (alternative view), Sir carma, 2015

Here is an example of one of Sir Carma’s animated voxel characters:

Knight Run, Sir carma, 2015

Compare this to a 2D pixel art character:

sprite from Final Element, Glauber Kotaki, 2015

And now you know the difference between pixels and voxels (and much more … haha ^_^*, sorry about that).

But I won’t stop there. See, the reason why I explained the vector/raster, 2D/3D nature is that on our modern displays, every graphics type ends up being displayed as a 2D raster image.

When you have a 2D vector image it can be directly displayed only on vector monitors, such as those used by Atari’s arcade game Asteroids:

Asteroids, Atari, 1979

This is how it would look in practice (an asteroid-like game displayed on an oscilloscope):

Space Rocks (game), Autopilot, via Wikimedia Commons [CC BY-SA 3.0]

We can also display 3D vector images (usually called 3D models) this way. As mentioned before, they need to be projected onto the 2D image, resulting in a 2D vector image of polygons in the 2D image space. That 2D image can then again be displayed on a vector monitor:

https://youtu.be/rSPixmsLfn4

VEC9, Andrew Reitano & Todd Bailey, 2013

These days you’ll have a hard time seeing a vector monitor outside a museum. Instead, we use raster monitors that are made out of … pixels!

To go from a 2D vector image to a 2D raster image, the image needs to be rendered or rasterized. Each polygon (usually a triangle) gets rendered into a grid of pixels.

Spinning cube (tech demo), Matej ‘Retro’ Jan, 2016

It’s the same for rendering 3D models. 3D triangles get projected into 2D triangles, which in turn get rasterized into pixels.

Now what about voxels?

The most common approach with voxel art is to represent each voxel (defined by its three coordinates and a color) as a 3D vector cube. To display a 3D voxel art image it is first converted into a (vector) 3D model, which gets projected into 2D image space, which gets rasterized into a final 2D raster image.

#cog, Thibault Simar, 2016

But it’s not necessary to take this approach. Each voxel can be thought of as a point in 3D space, a blob of volume at that location. You can just as easily project the single 3D point into 2D space and then rasterize a pixel at that 2D location (or extend it to a circle or square that covers multiple neighboring pixels).

In fact, this was a trend in the 90s with voxel graphics engines used in video games.

Comanche: Maximum Overkill, NovaLogic, 1992

It was mostly used just for terrain in combination with 3D models for other geometry.

Delta Force, NovaLogic, 1998

Most will mention the game Outcast as the peak of technological advancement in voxel engines at the time.

Outcast, Appeal, 1999

However, by the year 2000, graphics accelerator cards took off. These were specialized pieces of hardware for transforming (projecting) and rasterizing 3D polygons (today we call them graphics processing units or GPUs). Voxel graphic engines were at the time implemented with custom rendering routines on the CPU (central processing unit, which had to also take care of all the rest of the game like input, sound, gameplay and artificial intelligence) and couldn’t catch up with the polygon graphics quality and so voxels died …

… until about ten years later when one game took voxels to a whole new level of popularity.

Minecraft, Mojang, 2009–present

It used the mentioned voxel-is-a-cube (LEGO) approach and the rest is history.

Let’s recap with some mathematical precision.

A pixel is the smallest area unit when dividing 2D space into discrete, usually uniform (equally sized) regions. The width and height of the 2D image is expressed in integer units and therefore each pixel can be addressed by a two-component vector where x and y are both positive integers or zero. That’s what makes the pixel space discreet compared to continuous nature of vector graphics where each coordinate is a real number, represented as closely as possible with floating point numbers.

A voxel is on the other hand the smallest unit of volume when dividing 3D space into discrete regions. The width, height and depth of the 3D volume are also expressed with integers, just like the coordinates of each voxel.

Am I done now? No I’m not done.

Everything I’ve told you so far can be creatively combined into many different visual looks.

These days it’s hard to find a pure 2D engine where pixels need to be individually placed. To draw 2D sprites, the memory that stores the colors for the sprites are directly copied into the memory that stores the colors displayed on the screen (this copying is also know as bit blit or bit BLT, which is short for bit block transfer). The fantasy console PICO-8 is a modern example of this as it pays homage to the good old days when bit blitting was the only way to go.

PICO-8, Lexallofle Games (and respective authors of featured carts), 2014–present

I won’t go into detail of those days. Instead I want to focus on modern approaches that combine pixel art and voxel art with 2D and 3D vector graphics.

See, nowadays most graphic engines work with 3D vectors at the lowest level since that’s how GPUs work. To achieve the look of old pixel art games, a technique called texture mapping needs to be used.

Textures are 2D raster images that get placed (or mapped) onto 3D polygons. This is how we move from untextured, low-poly vector art we’ve seen at the start of the article to textured 3D models (be it with low or high number of polygons). That is how the vast majority of 3D video games (and 3D images in general) are created at their simplest.

For example, this is a high-poly 3D model with a high-res texture:

"Mirror's Edge: Catalyst" Keyart, Per Haagensen, 2016

With smooth polygon shading and texture mapping we don’t even need so many triangles to create nice looking characters. Here is a Low-poly 3D model with a high-res texture:

Low Poly Peon, Mark Henriksen, 2015

When we also switch a high-resolution texture for a low-res version, we get something like this low-poly 3D model with a pixel art texture:

Drift Stage, 2014–present (work in progress)

And this covers all 3D model cases (there’s not much need for a high-poly 3D model with a low-res texture combination).

Onto 2D! When texture mapping is applied to 2D rectangles (images are placed on vector polygons in 2D space) we get the usual 2D games. Even though we can have multiple layers at different distances (resulting in the parallax effect), and a whole bag of special effects like depth-of-field, vignettes and dynamic lighting, everything is pretty much 2D.

Things are pretty straight-forward with high-res textures …

Braid, Number None, 2008

Limbo, Playdead, 2010

… bug get complicated with low-res, pixel art textures.

Similar to how a pixel art texture can be applied to a low-poly 3D model and rendered at high resolution (see Drift Stage above), so can the same be done with 2D polygons. When pixel art images are placed on rotated 2D polygons and rendered at high resolution we get the “big pixel” art style:

Path to the Sky, Johannes ‘Dek’ Märtterer, 2011–present (work in progress)

Compare this to the same concept, but rendered at low resolution so that the size of the sprite pixels matches the size of the display pixels:

Kingdom, Noio & Licorice, 2015

Do you see how the water wheel pixels stay square and aligned horizontally/vertically whereas in Path to the Sky the foliage, bird, and bridge pixels get rotated and transformed.

Kingdom achieves this by rendering the whole game at low-resolution and then enlarging (upscaling) the final image to the display resolution. Path to the Sky on the other hand renders each individual low-resolution sprite directly to a high-resolution display.

I’ve also taken Kingdom’s approach into 3D. When we looked at Drift Stage above, the 3D model was rendered at a high-resolution.

Drift Stage, 2014–present (work in progress)

You can see how each pixel on the car texture gets slightly diagonally rendered onto the rotated car (each big car pixel covers many image pixels).

If we take this approach but render it at low-resolution we get something like this:

Pixel Art Academy tech demo, Matej ‘Retro’ Jan, 2016

This allows us to have complex 3D engine shading because even though the image looks like some sort of 2D pixel art it is actually a 3D scene rendered to low-resolution using pixel art textures.

Pixel Art Academy tech demo (scene view), Matej ‘Retro’ Jan, 2016

Similarly, the character is animated with 2D vector animation techniques. Here’s how it would look like in big pixel style …

Pixel Art Academy animation rig with reference, Matej ‘Retro’ Jan, 2016

… but when it gets rendered at low resolution it appears more like pixel art, similar to Kingdom above.

Pixel Art Academy animation test, Matej ‘Retro’ Jan, 2016

It’s far from lovely hand-crafted, frame-by-frame animations, but holds a certain aesthetic nonetheless, reminiscent of rotoscoped animations of the 90s.

Prince of Persia, Jordan Mechner, 1989

What else do we have?

Similar to my experiments, the lighting can be animated in 3D with a variety of possible looks.

Confederate Express, Maksym Pashanin, 2013–2014 (unreleased)

Pathway, Robotality, 2016 (work in progress)

With Pathway, I highly suspect that they might be using some sort of voxel (volume) information to produce correct shadows. Confederate Express above, on the other hand, mostly just involves a smart use of normal maps (3D information of surface direction stored into a 2D image).

Another example of 3D geometry being used for pixel art is FEZ’s trixels (3d pixels). The are just fancy voxels that get combined into a 16x16x16 trile (3d tile). The concept is the same, except the geometry calculation is a bit more complicated.

FEZ trile with trixels, Polytron, 2007

Trixels make up triles and triles get placed to make a full scene:

FEZ scene, Polytron, 2007

When a FEZ scene is rendered in-game it is seen mostly with a 2D orthogonal projection, which is how they achieve the traditional pixel art look (but allow for FEZ’s trademark view rotation).

FEZ GDC ’09 trailer, Polytron, 2009

Finally, we can also go with pure, discrete voxels. Unlike Minecraft, where the players move continuously through the seemingly discreet world, Lexallofle’s Voxatron only works on a discreet level.

Voxatron, Lexallofle Games, 2010–present (work in progress)

And there you have it.

I’m sure I forgot something, but that’s a long enough answer for a Quora question. I hope you enjoyed reading—congrats on coming all the way to the end—and I hope it gave you a deeper understanding of pixel and voxel graphics as well as some creative ideas of where to take them next.

What is the difference between pixel and voxel?

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s