文章著作权归作者所有。转载请联系作者,并在文中注明出处,给出原文链接。
本系列原更新于作者的github博客,这里给出链接

前言

本系列仅用于记录并分享自己的学习过程,以及学习过程中遇到的问题,如有错漏,欢迎讨论。(第0章是Shader系列的引导部分,已经有计算机图形学基本认识、游戏开发基础知识、Unity基础的可以选择性跳过。)

引言

从冯诺依曼到现代计算机,从简单的计算结果呈现到丰富多彩的视觉体验,计算机总是在带给我们惊喜。而这一切,都离不开计算机图形学。

什么是计算机图形学?首先,随着硬件水平的发展,我们已经能够支持的最小显示精度是 Pixel (像素),但仅仅只有精度还远远不够,我们还需要配套的显示模式来发挥这一优势,所以,为了尽可能好地呈现画面,计算机图形学应运而生。既然我们已经知道了图像显示的最小单位,那么我们要做的就是如何把想要呈现的图像绘制到屏幕的一个个像素点上,也就是栅格化图像。简单来说,计算机图形学就是研究将图形转化为计算机显示器栅格形式的算法的科学。

游戏总是给我们带来最直观的计算机视觉盛宴,而在这背后,计算机为我们做了很多事情。假设现在我们在玩一款第三人称RPG游戏,主角就站在我们屏幕中间。对于这样一个简单的画面,在计算机内部是如何实现的呢?

首先,计算机的精度是有穷的,有穷意味着不连续,所以我们只能以简单的、足够小的平面去近似得到曲面的效果,在计算机中,通常以三角面或者四边形为最小的面元。我们以三角面为例,现在我们已经有了一个三角面,但我不知道它在哪,这个时候,我们需要一个三维坐标系来辅助定位这个面,有了坐标系,我们就知道了这个三角形三个顶点的坐标,但仅仅知道顶点位置还不够。我们还知道,物体是通过反射光来让我们看到的,所以,我们还需要一个光源,以及一个观测者(观测者即虚拟摄像机,呈现在屏幕前的图像就是他看到的)。现在已经有了观察者,被观察物体,还有光,是不是我们就可以“看到”图像了呢?对于现实世界来说,确实可以,但计算机不行,因为这些都是我们的假设,计算机所能理解的只有计算。所以,我们要“计算”出这个物体在哪,观察者才能看到。怎么计算呢?首先,虚拟摄像机会基于自己的“视角”在摄像机和物体之间铺上一张网格(因为计算机的图像是不连续的,所以不是铺上平面),视点和图像连线与网格的交点就是图像最终显示出来的样子,它对应着一个个的像素,这一个步骤,我们便形象地称为栅格化。现在已经知道了三角形基于屏幕的相对位置信息,只要按屏幕比例缩放便可以呈现出图像了。但仅仅是这样还不够,每一个步骤都必须等待上一步工作完成后才可以开始进行,这并不高效,为了解决这个问题,计算机渲染引入了流水线工作模式,在流水线上,每一个阶段都有特定的程序和硬件去执行,最后把数据统一发送给下一阶段,这也就是我们通常所说的 Render Pipeline (渲染流水线)。

现在我们知道了,屏幕画面其实就是顶点和片元的 Render (绘制,呈现,渲染)过程,这个过程本质上是一种信息转换。不可否认,视觉上的冲击是最直观的,在游戏上更是如此,这也是Arts drive us crazy的原因。

游戏渲染又有何不同?

游戏大家都不陌生,但游戏最重要的是什么?是最直接迅速的反馈,尤其是视觉反馈。这又更依赖于强大的渲染技术。但与一般的计算机图形绘制不同,游戏渲染更注重效率。由于性能瓶颈,我们永远也无法为玩家提供最优质的游戏体验,但我们可以有侧重地进行计算,也就是让计算发生在最值得计算的地方,或者,使用更高效,但并不一定完全正确的算法。可能大家会有疑惑,为什么不正确的东西也可以被推崇呢?在图形学领域有一句名言: If it seems right, it is. (如果他看起来是对的,那他就是对的。)这其实是在告诉我们,没有绝对的正确的渲染,只有看上去正确的,即便有,但如果它的代价很大,我们仍然会选择效率高的经验模型(如经典光照模型)去计算。这也是为什么我们偶尔会在一些游戏镜头中看到“穿帮”镜头,但这并不影响我们的游戏体验。

最后

相信大家都是被游戏的精美画面或者独特玩法所吸引,进而热爱游戏,希望接触游戏开发。如果是前者,那么可以更深入地了解游戏美术行业,乐在其中。


这里给出一个书籍资料目录:

《3D数学基础:图形与游戏开发》

《Unity Shader入门精要》

《Real-Time Rendering》

《GPU gems》

《Unity Shaders and Effects Cookbook》

0.1:Why are We Addicted to Games的更多相关文章

  1. css隐藏元素display:none,opacity:0;filter:alpha(opacity=0-100;,visibility:hidden的区别

    在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.我们一般有三种方式:display:none, opacity:0;fil ...

  2. SignalR 2.0 系列: 开始使用SignalR 2.0

    这是微软官方SignalR 2.0教程Getting Started with ASP.NET SignalR 2.0系列的翻译,这里是第四篇:开始使用SignalR 2.0 原文:Getting S ...

  3. Common Lisp学习笔记(0):从SLIME开始 | 优哉·幽斋

    Common Lisp学习笔记(0):从SLIME开始 | 优哉·幽斋 Common Lisp学习笔记(0):从SLIME开始

  4. [渣译文] SignalR 2.0 系列:SignalR的高频实时通讯

    原文:[渣译文] SignalR 2.0 系列:SignalR的高频实时通讯 英文渣水平,大伙凑合着看吧…… 这是微软官方SignalR 2.0教程Getting Started with ASP.N ...

  5. [渣译文] SignalR 2.0 系列: SignalR 自托管主机

    原文:[渣译文] SignalR 2.0 系列: SignalR 自托管主机 英文渣水平,大伙凑合着看吧…… 这是微软官方SignalR 2.0教程Getting Started with ASP.N ...

  6. [渣译文] SignalR 2.0 系列: 开始使用SignalR 2.0

    原文:[渣译文] SignalR 2.0 系列: 开始使用SignalR 2.0 英文渣水平,大伙凑合着看吧…… 这是微软官方SignalR 2.0教程Getting Started with ASP ...

  7. [渣译文] SignalR 2.0 系列: 支持的平台

    原文:[渣译文] SignalR 2.0 系列: 支持的平台 英文渣水平,大伙凑合着看吧,并不是逐字翻译的…… 这是微软官方SignalR 2.0教程Getting Started with ASP. ...

  8. [渣译文] SignalR 2.0 系列: SignalR简介

    原文:[渣译文] SignalR 2.0 系列: SignalR简介 英文渣水平,大伙凑合着看吧,并不是逐字翻译的…… 这是微软官方SignalR 2.0教程Getting Started with ...

  9. .Net 2.0实例学习:WebBrowser页面与WinForm交互技巧

    原文:.Net 2.0实例学习:WebBrowser页面与WinForm交互技巧 最近看到博客园入门教学文章比较流行,自己最近又偷懒比较多,没啥心得,不妨写一篇没啥深度的入门文章吧. 话说有了WebB ...

随机推荐

  1. Android基础开发归档

    一.Android 基本组件汇总 1. Android中PackageManager使用示例 :  http://blog.csdn.net/qinjuning/article/details/686 ...

  2. 转载:VOC2007数据集制作

    转载自:https://blog.csdn.net/gaohuazhao/article/details/60871886 另外,可参考:https://blog.csdn.net/dcxhun3/a ...

  3. 【转】Android 为什么 dp2px 或 px2dp 公式需要加 0.5f

    转自:http://blog.csdn.net/changcsw/article/details/52440543 网上 dp2px 和 px2dp 公式: public static int px2 ...

  4. 11.14 redis

    2018-11-14 10:07:39 购物车有思路,用django中redis来做!!!具体思路参考下面笔记 回学校后,把笔记里面面试题都认真整理一下!!!!!! 越努力,越幸运!永远不要高估自己! ...

  5. F - Currency Exchange

    来源poj1860 everal currency exchange points are working in our city. Let us suppose that each point sp ...

  6. 3D Slicer Programmatically Set Slice Offset and Intersections 用代码修改Slicer中的切片偏移和交叉点显示

    在3D Slicer中,当我们导入.mha/.mhd等格式的volume文件后,那么我们就可以在Axial, Sagittal, Coronal三个方向来观察我们的MRI或者CT的图像了.3D Sli ...

  7. Python Solve UnicodeEncodeError 'gbk' / 'ascii' / 'utf8' codec can't encode character '\x??' in position ? 解决有关Python编码的错误

    在Python中,处理中文字符一直是很令人头痛的问题,一言不合就乱码,而且引起乱码的原因也不尽相同,有时候是python本身默认的编码器设置的不对,有时候是使用的IDE的解码器不对,还有的时候是终端t ...

  8. 免费API 接口罗列,再也不愁没有服务器开发不了APP了(下)【申明:来源于网络】

    免费API 接口罗列,再也不愁没有服务器开发不了APP了(下)[申明:来源于网络] 地址:http://mp.weixin.qq.com/s/QzZTIG-LHlGOrzfdvCVR1g

  9. mybatis cloud not autowired

    mybatis代码生成器生成的mapper在service引用的时候报cloud not autowired.... 即是在pom.xml中配置了不过滤mapper文件,报错还在 其实这不影响使用,但 ...

  10. css学习_css伪元素的本质

    1.伪元素的本质(插入了一个元素(行内元素/标签/盒子) 案例1: 案例2: