铁人赛终於也进入尾声了~ (加上今天还剩下4天)

我们也终於来到规划中最後的篇章 --- 3D绘图篇

而我们今天要讨论的题目是 ~『2D图片上面的3D图样是怎麽产生的?』

是搞错了什麽吗? 为什麽会想要在2D渲染环境的系列文里面讨论3D?

之所以会规划这个篇章，主要是因爲我注意到很多人似乎不理解3D图像的产生原理，

甚至有些人可能觉得canvas应该也存在某种api，可以让人直接画出3D物件，就像我们在用ctx.arc()画圆一样。

我们今天的文主要是轻松惬意的理论讲解，没有什麽困难的实作片段，所以大家可以放心～

3D 其实是一种假象

一定有人好奇过 ~ 明明电脑萤幕上面呈现的画面都是2D的，那为什麽会有3D动画的存在呢?

3D 的视觉效果到底是怎麽产出的? 如果我要在画面上画出一个3D的方块，有什麽原生的方法吗?

例如，像是这种感觉：

ctx.drawCube(x,y,z,size,color)

实际上，图像之所以有3D/2D的区别，那是经由人类的眼睛观测才有的定义。

而对电脑来说，任何的图像其实都是由像素组成的二维阵列，也就是2D图像

 那麽按照你这种说法，我用2D渲染环境的api难道也可以做出3D效果吗？

『是的没错。』

3D物件与其说是3D效果，不如说他其实是一种视觉上的假象。

再继续讲这部分的理论之前，我可能需要先给各位科普一下一个概念，那就是 『透视(Perspective)』。

什麽是『透视』

咦？你是要讲解怎麽用哆拉Ａ梦的道具偷看静香洗澡吗？

咳呃。。当然不是。

所谓的『透视(Perspective)』其实是一种绘画的技法

大家应该都有在漫画中看过这种街景的仿画。图画中我们可以看到：

越远的景物，会被画得越小，而当东西被放在极远处，他的大小就会缩成一个点。

这个就是『透视』的基本概念：『近大远小』，而当视野延伸到极远处时，所有景物都会缩小成一个的点

我们把这种点称为消失点（有些人会叫消点）。

一张以正确的透视理论技法来绘制的图片，可能会有多个消点。

美术系上课常常会提到一点透视、两点透视还有三点透视，指的就是画面中消点的数量。

像上面这张街景图，他就是一个典型的一点透视，我们可以发现在马路的末端存在一个消点，而且就只有这麽一个。

普通人光凭想像力可能没办法在脑海里面描绘出来两点透视还有三点透视的样子，所以我这边找了一张图片给各位参考~

不过其实两点透视还有三点透视对今天要讲的主题来说没什麽太大关联性，所以关於『透视』的科普就让我们先在这打住～

如果对透视学原理还有兴趣的人，可以考虑看这篇 ： https://news.gamme.com.tw/1443732?fbclid=IwAR0cNVzdfQs_fLIjbPMYEEataEs03eC-tRBwEIuNwAOI_ApkRx4L8w6DMIg

透视理论与3D景深

从上述的透视概念讲解中，我们可以发现，透视构图中，物体的大小和物体与观察者的距离，具有某种`比例关系，

在现实生活中我们其实也常常可以体会到类似的案例，例如我们看远方的行人走路，当行人已经走了10公尺，但是在我们眼里，他移动的距离却看起来极短。

我们来看看下面这张图：

我们如果用一点透视的方法去把两颗球的样子画在纸上，假设在这个距离(w)下离纸比较近的球，我把他的尺寸画成原本的0.8倍，请问比第一颗球还要离纸稍远z单位的球，会被画成多大?

像这样的问题探讨的就是3D景深的实际原理，各位可以思考一下答案会是什麽。

为了避免一次破太多梗，所以今天的讲解大概就先到这~答案就留到下回分晓

我们明天会再继续後续的探讨~