3D模型是怎么渲染的?(如何理解游戏系列)


图片来源:USTWO 

《图片是怎么画到屏幕上的?》一文里,我们把图片想象成一个围棋盘,棋盘上每个格子都有自己的颜色,而颜色是可以表达成三个数字的,所以图片最终被表达成一系列的数值。在绘制图片的时候,游戏会把图片的数值告诉屏幕,屏幕根据这些数值把这张图片绘制出来。

这篇文章说说3D模型是怎么表达成一系列数值的,以及怎么把这些数值告诉屏幕,从而实现3D模型的绘制。

先以《水果忍者》里的西瓜为例说下什么是3D模型。

假设我们到水果摊上买了一个西瓜(真正能吃的西瓜),完了拿一根针在西瓜皮上戳洞,每戳一下,相当于在西瓜表面上挑选一个点,戳了一个小时后,我们得到了成百上千的点,然后我们再耐着性子,把邻近的点用直线连起来,使它们之间形成一个个的小三角形,等把全部点连完,我们就大功告成了。这些戳出来的点叫做3D模型的顶点,它们之间的直线叫做3D模型的边,而那些三角形叫做3D模型的面。这些点、边、面一起构成了一个非常复杂的多面体,这就是西瓜的几何模型。大家看看下边这个海豚的模型就会有个直观的感受。


图片来源:维基百科 

显然,戳出来的点越多,多面体的面就会越多,整个模型也就越贴近真实的西瓜。如果你还记得《声音是如何播放出来的?》一文里所提到的数字信号的采样过程,你会发现,这个血腥残忍的西瓜戳洞过程其实就相当于对西瓜表面位置信息的一次采样,采样率越高,模型自然就越真实。

现在,我们得记录下每个点的位置以及每个面的颜色。点的位置容易理解,面的颜色得解释一下。出于简单考虑,我们定一个规则:如果这个面的三个点都戳在了黑色瓜纹上,我们就把这个面定成黑色,否则我们把它定成绿色。记录好后,我们就得到了这个西瓜模型的数值表述:这里面不仅有几何位置,还有颜色。

接着,我们说说怎么把3D模型画到屏幕上。我们依然可以把这个绘制的过程看做是给屏幕上的每个像素格子赋予一个颜色值的过程,只不过如今赋值的方式会稍微复杂一些。

我们把西瓜的模型放在屏幕后方的某个地方,然后在屏幕前方选一个点,这个点叫做焦点(下图中蓝色的点)。我们知道两点可以决定一条直线,因此屏幕上的每个像素格子都可以和这个焦点一起,决定一条直线,如果这条直线和西瓜模型的某个面相交了,我们就把这个面的颜色(绿色或黑色)赋值给这个像素格子;如果这条直线没有和西瓜模型相交,我们就把背景的颜色(比如灰色)赋值给这个像素。这样,等所有像素格子都扫过一遍,我们就画出一个灰色背景下的西瓜了。


图片来源:维基百科

在《水果忍者》里,一个西瓜飞上来的时候,它除了飞行以外,还在翻滚。每一帧,游戏都得根据它的物理规则,计算出模型上的每个顶点的位置,然后按照上面所说的方法把模型渲染出来。由于每一帧都需要重新渲染,所以我们说这个3D模型是通过即时渲染的方式绘制出来的。

最后得特别说明一下,本文并不是在叙述具体的建模过程,实际上从原画、建模到贴图、动作是一个十分繁复的流程;而渲染时除了位置和颜色外,还涉及到材质、光源等许多因素。跟本系列的其它文章一样,本文还是希望以易读为目的,不周全之处大家见谅。

下一篇《再谈游戏状态的改变》

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,230评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,261评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,089评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,542评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,542评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,544评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,922评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,578评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,816评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,576评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,658评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,359评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,937评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,920评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,859评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,381评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,387评论 25 707
  • 本文将要介绍图形渲染管线,它被认为是实时图形学中的核心部分。图形渲染管线的主要功能是在给定了的虚拟摄像机,三维的对...
    SwordMaster阅读 15,082评论 0 19
  • 现在主流APP首页头部都会应用轮播图,将这个封装成一个类,这样只需要一行代码就可以创建一个轮播图了,😄,方便自己以...
    紅寶石阅读 332评论 0 0
  • 人间三月,几处枝头早已鸣起鸟鸣。明媚的阳光,似箭挥下,映入宋玉的梦境。 “咚咚咚”,几声敲门声,已将宋玉吵醒。 “...
    金忆潇阳阅读 652评论 0 7
  • 前些天看到L小姐的时候,突然觉得她变得不一样了,越来越恬静可爱,以前的她是那种说话大大咧咧,笑起来人仰马翻,可是现...
    茗语阅读 285评论 0 1