像素和体素,Quora上的超长解答(翻译完毕)

本文翻译自:Pixels and voxels, the long answer(已获得作者翻译许可),原文作者:Matej ‘Retro’ Jan


今年早些时候,有人在Quora上问:

像素和体素有什么区别?

这个问题很让人抓狂,相比于给出直接答案,最终我写了一篇关于这个主题的文章。

我能想到提问者为什么会问这个问题。因为我们经常会看到一些像素电影海报之类的东西,这会让人很困惑。这是一个像素画呢,还是一副体素画呢?这是画的一只鸟呢,还是一架飞机呢?所有的这些疑问都会吧我们搞得非常狼狈。

我仍然无法决定是处于对怀旧游戏的热爱,(导致)我应该去看这部电影还是绝对看这部电影。

不用担心,你马上就会解脱了。当你读完这篇文章的时候,你就会知道关于像素、体素以及两者之间的一切。不过不用不着急,我们先吃块饼干。

(这是一篇很长的文章,但我保证:你的阅读体验就像是在翻阅《Retronator》杂志,因为图片要远远多于文字。)


我们先铺垫一点背景知识,这样就能了解全貌。在计算机中表示图形主要有两种方法:矢量图和光栅图(译者注:也称作位图,以下统称为光栅图)。

矢量图的数学精度(左)和光栅图的离散性(右)。

矢量图通过数学方程式描述图像,通常用直线,曲线和形状等形式表示。相反,光栅图通过一组颜色描述图像,这些颜色被连续地放置在一个个网格中。

在计算机图形学中的第二个区别是2D和3D空间上的表现。如果包含矢量图与光栅图在内,一共可以得到四个象限:

每个人都喜欢象限

矢量图

在2D矢量图中,直线或图形上的每个点都用一个包含两个分量(x和y)的矢量来描述。这就是为什么它是2D的(两个分量也即是二维)。

这就是二维向量描述二维向量图形中所有点的方式。

下面是一个被称为低多边形二维矢量图像的例子。

Uluru the Mighty Dreamer, Anh Tran, 2015

它完全由2D多边形(在本例中为三角形)构成。术语“低多边形”是指用于制作图像的多边形数量相对较少。这使得三角形很容易被观察到。

现在我们添加一个维度。在3D矢量图中,原理是相同的,但是每个矢量使用三个分量(x, y和z)。

让我们看一下3D低多边形的作品。

Racetrack iOS Game Concept, Timothy J. Reynolds, 2013

上面的艾尔斯岩(Ayers Rock)的2D图像与此处的3D赛道之间的最大区别是:可以从我们需要的任何位置查看赛道。

Racetrack iOS Game Concept, Timothy J. Reynolds, 2013

为了在屏幕(2D表面)上显示跑道,我们必须选择一个特定的视点并将3D几何体从该视点投影到2D。

从3D到2D的转换称为投影

这也是我们获取一张特定角度2D图像的方式。

但是,即使在2D中,我们也可以使用一个技巧来展示3D物体具有的体积特性——我们可以制作一个动画,围绕物体移动视点(或保持视点不变的同时旋转物体本身,如下所示)。

Wagon, Timothy J. Reynolds, 2013

耶,我们可以看到它确实是3D的,并不需要3D眼镜!

光栅图

刚刚只是一个热身。搞定矢量图后,我们看看光栅图如何处理2D和3D。

在2D光栅图中,图像被分成若干大小相等的行和列:

Turbo Esprit Sprite, Matej ‘Retro’ Jan, 2014

每个单元格称为像素(来自于图像中的一个元素)。除了包含在网格(x,y)内的2D坐标外,每个像素的主要属性是位于该坐标上的颜色。

我们已经看到了低多边形矢量作品如何使用众多的多边形。如果我们在光栅图中做同样的操作(使用大量像素),我们将获得像素风格作品。

Turbo Esprit Sprite, Matej ‘Retro’ Jan, 2014

对于2D像素作品,即使它们试图表示三维对象(Lotus Esprit或X-wing),它们也会直接绘制到2D像素网格上。你不能像上面的3D旅行车那样旋转这个图像。同样,文章开头的艾尔斯岩(Ayers Rock)图像也不能旋转。尽管它是由多边形构成的,但它们不是被放置在3D空间,而是直接放置在2D空间。


到目前为止,我们已经介绍了2D和3D矢量图以及2D光栅图。最后一步是3D光栅图。

前方就是激动人心的时刻!

在3D光栅图中,整个体块被均匀地划分成行和列,覆盖所有三个不同的方向(上下、左右、内外)。这将三维空间划分为一个个小立方体,也称为体素(体块元素或体积像素)。每个体素由3D坐标和颜色定义。

就像像素作品(这是一种精心布局的像素艺术)一样,现在我们有了体素作品,每个立方体的设计都经过了仔细的考虑。

星际大战场景,@Sir_Carma,2015年

这很像乐高积木,你不觉得吗?

需要指出的是,因为是在3D空间中,体素也可以从任何角度被观察。下面是对体素塔图因(译者注:塔图因是《星球大战》中天行者家族的故乡行星)另外一个视角的观察:

星球大战场景(另一个视角),@Sir_Carma,2015

我们甚至可以做成动画!以下是 Sir Carma的一个体素动画角色:

骑士奔跑,Sir_Carma,2015年

与2D像素角色进行比较:

Final Element中的精灵,Glauber Kotaki,2015年

你可以看到在体素作品中,动画是如何改变每个小立方体——体素的状态(颜色),而在像素作品中,颜色的变化是发生在小正方形也即像素上。

现在你知道像素和体素之间的区别了(其实还有更多……哈哈,抱歉)。

但是现在还不是停下来的时候。我之所以解释了矢量图/光栅图,2D/3D特性,是因为在现代显示器上,每种图形最终都最终显示为2D光栅图。

我们在像素作品杂志中讨论这一点原因是,我们可以利用这些类型变换,使用非像素风格的资源创建现代风格的像素作品。

你可能会说:“我可以用体素或3D模型制作像素作品?当然可以!巧妙的着色和渲染技术使我们能够创建独特的视觉风格,从而将像素艺术作品带入未来。

矢量图显示和投影

上面的图表并不完全正确。有一种方法可以直接显示2D矢量图作品,不过有一点需要注意。

当你有一个2D矢量图像时,它只能直接显示在矢量显示器上,如雅达利的街机游戏《Asteroids》所使用的显示器。

以下是它的实际效果(游戏邦注:这是一款在示波器上显示的类似于《asteroids》的游戏):

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

我们也可以用这种方式显示3D矢量图像(通常称为3D模型)。

如前所述,3D模型首先需要投影到2D,从而生成可以在矢量显示器上显示的2D矢量图像。

VEC9, Andrew Reitano & Todd Bailey, 2013

我强烈建议看一看VEC9的预告片,也要看大量的80年代的恶搞电影:

光栅化

如今,您很难在博物馆外找到矢量监视器。取而代之的是,我们使用由像素组成的显示器!

RGB LCD, Luís Flávio Loureiro dos Santos, 图片来源:Wikimedia Commons [CC BY 3.0]

现代LCD显示器通过打开和关闭(或介于两者之间)红色,绿色和蓝色元素来创建不同的颜色。这和在CRT(阴极射线管)时代的原理很类似,只是他们使用了三种不同类型的荧光粉类型,当受到电子束撞击时发出的是红色,绿色或蓝色的光。

CRT phosphor dots, 图片来源:Wikimedia Commons [CC-SA]

那么,如果我们有一个矢量图像,并且只有一个光栅显示器来显示它,我们该怎么办呢?从2D矢量图像到2D光栅图,需要对图形进行渲染或光栅化。每个多边形(通常是三角形)被渲染成到一个像素网格中。

使用采样进行光栅化, 幻灯片来源:Making WebGL Dance, Steven Wittens, 2013

这种机制可以扩展到在光栅显示器上渲染3D模型。首先,将3D三角形投影到2D三角形中。然后二维矢量三角形被光栅化为像素。

星际火狐,任天堂 1993

三角测量

那么体素要如何处理呢?如今最常见的方法是将每个体素表示为3D矢量立方体。我们通过创建一个沿体素立方体边缘放置三角形的3D模型来做到这一点。

世界上最激动人心的3D模型, Matej ‘Retro’ Jan, 2016

就像之前一样,3D三角形被投射到2D图像空间中,并最终光栅化并显示为2D光栅图。

旋转立方体(技术演示), Matej ‘Retro’ Jan, 2016

这就是获得最常见体素艺术风格的方式,几乎只使用免费的建模工具MagicaVoxel就能搞定。

Rapunzel tower, Thibault Simar, 2016

untitled, Argo San, 2016

Pokemon Voxel, Playiku, 2016

Cat vs Voxel, Stefan Smiljkovic, 2016

Trench Run, Gabriel de Laubier, 2015

Voxair balloon, Gabriel de Laubier, 2015

Sky Chase, Sir Carma, 2015

Talaak village, Sir Carma, 2016

Latica Cliffs, Sir Carma, 2015

射线检测

不过没有必要采用多维数据集方法。每个体素都可以看作是三维空间中的一个点,是那个位置上的一个体块。你可以通过在2D位置放置一个(或几个)像素直接在2D空间中绘制每个体素。或者反过来——你在屏幕上取一个像素,然后查看场景中的哪个体素出现在那个位置。

这种相反的方法叫做射线检测。你从视点投射一束光线到场景中,看看你击中了哪个体素。事实上,你投射了很多光线来扫过整个视野。

Simple raycasting with fisheye correction, Kieff, 源自Wikimedia Commons [public domain]

该技术由《德军总部3D》首创,它的体素是所有的房间块,所以这只是另一种呈现体素即盒子的方法。这种方式效率很高,因为你只需要在屏幕上投射一条射线就可以得到一整列像素。这使得它本质上成为一个的2D过程,这也是为什么我们有时也称这种类型的3D图形为2.5D(第三个维度是假的,因为它只允许拉伸2D表面)。

德军总部 3D, id Software, 1992

我们通常不会认为《德军总部》是在绘制体素。我们必须让绘制单元足够小并且允许它们有不同的高度。这就是90年代开始使用的经典体素图形引擎的方式。

Comanche: Maximum Overkill, NovaLogic, 1992

体素最初只用于地形中。这么做的目的是简化操作,这样可以把所有的体积相关的信息就是存储在二维图像(也称为高度图)的高度信息中。

通过高度图(左)来标定体素的高度是多少(黑色表示低,白色表示高)

将体素信息限制在高度地图上意味着你不能拥有悬垂的悬崖。不过也不得不说,地形上有非常多类似的细节,这是我们之前在游戏中都没有见过的。

Delta Force, NovaLogic, 1998

Outcast, Appeal, 1999

体素的终结

射线检测并不是90年代中游戏渲染体素信息的唯一方式。也出现了其他解决方案,每一种都有自己的优势,如可破坏的地形或支持车辆和角色渲染。这可是最前沿的技术!但是具有讽刺意味的是,正是这种创造性的多样性成为该技术被终结的另外一个原因。

Vangers, K-D Lab, 1998

时间来到2000年,图形加速卡开始普及。这些图形加速卡是用于投影和光栅化3D多边形的专用硬件(今天我们将这些芯片称为图形处理单元或GPU)。图形加速卡绘制三角形的速度非常快,但是它们能做的也仅限于此。包括射线检测在内的自定义体素渲染算法都超出了它们的能力范围。

Hexplore, Doki Denki Studio, 1998

体素引擎仍然需要在CPU(中央处理单元)中实现,但是CPU也需要处理其他内容,如物理、游戏玩法和AI。在GPU上进行图形计算的目的是将渲染剥离到专用芯片上,使渲染更快,并释放CPU去做更复杂的模拟计算。而体素引擎无法跟上多边形图形的性能,最终体素的历史终于画上了句号……

直到大约十年后,一款游(译者注:《我的世界》)戏让体素的人气达到了一个全新的水平。这款游戏抛弃了旧的方法,为“体素即立方体”的方法铺设了道路。而到目前为止,这都可以用GPU进行有效地渲染,其余的都已经成为历史。

我的世界, Mojang, 2009–present

定义

让我们回顾一下我们学过的知识,并使用数学的方式回答最初的问题:什么是像素,什么是体素?

像素是将二维空间划分为离散的、均匀(大小相等)的区域时的最小单位。

每个像素都可以由两个分量的向量寻址,其中x和y都是整数。与矢量图的连续特性相比,像素空间是离散的,而矢量图的每个坐标都是一个实数(用浮点数表示)。

同样,体素是将三维空间划分为离散的、均匀的区域时最小的体积单位。

这就是答案。

这就完了?很显然,并没有。

有了这样的一般性的定义,像素和体素可以以许多不同的方式出现,我们可以创造性地将这些概念转化为不同的视觉外观。尤其是我们还可以组合了光栅图/矢量图、2D/3D形成四个象限。

纯2D图形

在过去,如果你想在屏幕上绘制一个2D精灵,你必须直接将存储精灵颜色的内存复制到存储屏幕上显示的颜色的内存中(这种复制也被称为bit blit或bit BLT,缩写为位块传输)。今天几乎没有人像这样渲染二维图形。PICO-8作为使用现代渲染技术的应用,表达了对过去的美好时光的敬意,在那时位块传输是唯一的途径。

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

3D图形中的纹理

如今,大多数图形引擎都是在最底层使用向量,因为GPU就是这样工作的。在这个系统中,使二维图像出现在屏幕上的主要方法是使用一种称为纹理映射texture mapping)的技术在多边形上绘制它们。

纹理是放置(或映射)到三维多边形上的2D光栅图。

这就是绝大多数3D视频游戏(以及一般的3D图像)是如何以最简单的方式创建的。

例如,这是一个当我们有一个高多边形3D模型(译者注:也即是高精度模型)并向其添加高分辨率纹理时的外观:

镜之边缘:催化剂 Keyart, Per Haagensen, 2016

因为我们使用平滑多边形着色和纹理映射,所以我们甚至不需要那么多三角形来创建好看的角色。以下是具有高分辨率纹理的低多边形3D模型:

Low Poly Peon, Mark Henriksen, 2015

当我们将高分辨率纹理换成低分辨率的版本时,我们会得到一种线条类似于像素风格的低多边形3D模型:

Drift Stage, 2014–present (work in progress)

最典型的例子当然是《我的世界》。虽然《我的世界》的中方块就是上文定义一节中的体素(它们是游戏中最小的,离散的体积单位),但它们有各种各样的类型,由带有像素风格纹理的低多边形模型表示。尽管它们是块状的,但其中许多都不是简单的立方体。

我的世界, Mojang, 2009–present

目前已经涵盖了所有的3D模型案例(不需要讨论高多边形模型和低分辨率纹理的组合,但如果我搞错了,请纠正我)。

镜像边缘(左上),马克思·佩恩(左下)和我的世界(右下)

2D图形中的纹理

轮到2D了,当我们将纹理映射应用于2D矩形时,我们得到了常规的现代2D游戏。在今天的硬件中,每个2D图像(通常被称为精灵)都被放置在由2个三角形组成的矩形上。这两个三角形(合起来也称为四边形)通过映射到它们上的精灵进行渲染,使图像出现在它们的位置上。

角色的图像部分(左)被纹理映射到动画四边形(右) Badminton, Matej ‘Retro’ Jan, 2006

在高分辨率图像中,这事也是非常直接……

Braid, Number None, 2008

Limbo, Playdead, 2010

但是对于低分辨率的像素风格纹理来说,情况就复杂了。这完全取决于我们渲染精灵的显示分辨率。

Braid (top-left), Path to the Sky (top-right), Kingdom (bottom-right)

我们已经看到我们可以将像素风格纹理应用到低多边形的3D模型上,但仍然以非常高的分辨率渲染它。想一下《我的世界》:它是低多边形模型,16×16像素的低分辨率纹理,可以放在以1920×1080的显示分辨率进行渲染的场景中。

我的世界, Mojang, 2009–present

同样的操作也适用于2D多边形。我们可以将像素风格图像放在2D四边形上,并将其渲染到高分辨率屏幕上,使得源图像中的每个像素覆盖显示器中的多个像素。

Hotline Miami, Dennaton Games, 2012

我们称之为大像素(big pixel)美术风格。每个精灵像素的渲染比显示器中的像素更大,所以它在图像中呈现为一个更大的正方形。

源精灵中的每个像素被渲染到3x3显示像素上, Moonman, Ben Porter, 2011–present (work in progress)

当精灵旋转或倾斜时,大像素风格会比较明显:

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

观察上图的树叶,并且和下面以低分辨率渲染的旋转精灵进行比较:

Kingdom, Noio & Licorice, 2015

你看到水车的像素是如何水平/垂直对齐的,而在《Path to the Sky》中,树叶、小鸟和桥的“大像素”是如何倾斜和转换的了吗?(译者注:注意观察倾斜时的树叶,会发现锯齿感明显要小)

《Kingdom》通过低分辨率渲染游戏,然后将渲染后的图像放大到显示分辨率来实现这一目标。而《Path to the Sky》、《Hotline Miami》和《Moonman》则将精灵直接渲染到高分辨率的屏幕上。

回到3D

《Kingdom》是一个2D游戏,但是它的制作方法也可以被延伸到3D中。

我们也可以使用像素风格材质的3D模型,但是将其渲染到低分辨率上,类似这样:

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

你可以看到我们可以得到有正确3D阴影投影的着色。尽管看起来像是某种2D像素风格,但实际上却是使用了像素风格纹理且低分辨率渲染的3D场景:

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

基于矢量的动画(使用绑定)也可以利用这一点。以下是它们在大像素风格下的样子:

Animation rig with reference, Matej ‘Retro’ Jan, 2016

但当它们以低分辨率渲染时,它们看起来更像像素风格,像素风格类似于上面的《Kingdom》。

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

这可远远不是那种可爱的手绘的逐帧动画,但是仍然保持某种美术风格,让人想起90年代的动画。

波斯王子, Jordan Mechner, 1989

3D特效

回到高分辨率的话题上,Odd Tales的《The Last Night》便是一款充分利用了3D元素的游戏。

The Last Night, Odd Tales, 2014–present (work in progress)

它们的美术资源本质上是2D的,但却被分层构建到一个3D世界中,并且使用了你所能想到的所有现代图形特效(如动态光照,全屏泛光,动态模糊,景深,电影运镜、反射等等)。

WIP scene from The Last Night, Tim Soret, 2016

通过这种方式,他们构建了一个非常3D的世界,你可以从不同的角度看这个世界。

3D scene construction in The Last Night, Tim Soret, 2016

另一个动态3D光照的例子是氛围超赞,但命运多舛的《Confederate Express》:

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

虽然美术资源仍然是2D的,但《Confederate Express》也包含了来自多个方向的阴影贴图。这些都可以通过Sprite Lamp等工具进行处理,并从光源的任何位置生成精灵的平滑光照。

体素的像素风格

上述方法的问题在于,仅可以精确地对精灵进行着色,而它们所投射的阴影由于缺少必要的3D几何图形而不能正确生成。要想做到这一点,最终就必须有大量的信息。那我们就来谈谈体素吧!

这个方法的一个很好的例子就是最近发布的《Pathway》:

Pathway, Robotality, 2016 (work in progress)

图像看起来像是在使用像素风格的2D资源,但这些资源实际上都是有3D体积的。不像90年代的体素引擎试图尽可能地让效果起来很现代和真实,开发者Robotality不需要做额外的工作,他只需要将体素匹配到显示像素的大小。这样子很巧妙地创造了一个看起来像像素风格的假象,但是在幕后,他们包含完整的3D信息来创建正确的动态光照。

使用体素来创造像素风格并不是一种很新的方法。这方面的先驱是使用了被叫做trixels(3D像素)的FEZ。而trixels只是一组由16×16×16 triles(3d贴图)的组合。

Development screenshots from FEZ, Polytron, 2007

当FEZ场景在游戏中渲染时,通常会使用2D正交投影,这是它们实现传统像素风格的方式,但是也允许进行FEZ风格的旋转。

FEZ GDC ’09 trailer, Polytron Corporation, 2009

FEZ, Polytron Corporation, 2012

纯粹体素

最后,转了一圈后我们回到了体素,所以我们可以抛开像素风格不谈,只在3D空间中渲染纯粹的、离散的体素(使用没有任何纹理的立方体)。

Lexallofle的Voxatron正是这个领域的主角。

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

您是否注意到Lexallofle的虚拟控制台中的主题?(译者注:这句不知道怎么翻译,原文为:Do you notice a theme in Lexallofle’s virtual consoles?)Pico-8具有纯2D的图形引擎,而对于3D体素,Voxatron也是如此。他们真是完美的伴侣。

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

Voxatron是为数不多的(如果不是唯一的话)在3D离散空间内使用纯粹体素的示例之一。但是它有一个类似于2D下的大像素风格的兄弟,在许多游戏中都占有一席之地,尤其是在移动领域。

Crossy Road, Hipster Whale, 2014
Shooty Skies, Mighty Games, 2016

PAC-MAN 256, Hipster Whale, 2015

绕了一圈后让我们再次回到Sir Carma。在成为最知名的体素艺术家之一之后,他现在正在使用Unity将纯粹体素的美学推向更高的高度,并提供大量的视觉效果,就像是《Odd Tales》(译者注:参考上文)在像素风格中所做的那样。

The Way Back, Sir Carma, 2016 (work in progress)

The Way Back, Sir Carma, 2016 (work in progress)

体素风格的《塞尔达》/《Atic Atac》?(译者注:原文为:Voxel Zelda/Atic Atac anyone?)

The Way Back, Sir Carma, 2016 (work in progress)

到目前为止,我们涵盖了我能想到的所有2D / 3D /光栅图/矢量图/低分辨率/高分辨率的组合。我能确定我会遗漏某些细节,也确定在将来会出现更多有趣的方法,但是就目前而言,这已经足够了。