人气 2348

[随笔/杂谈/经验/分享] 《纪念碑谷》是如何欺骗人们的视觉的? [复制链接]

Davidzen 2017-12-14 21:32:47

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?注册

x
玩了玩,觉得移动转轴在空间上各种不合理呀 移动完了看起来很合理的样子
回复

使用道具 举报

DavidDug 2017-12-14 20:50:26
谢谢大家的赞同和感谢.

----------粉鸽线-----------
本回答将纪念碑谷中出现的视觉欺骗进行归类 不包括技巧性上的设计 如上下移动装置 曲面行走造成空间上的位移.
Ep5dD5sz08Y5a9cd.jpg


像上图这种通过曲面行走使人从X-Y平面走到X-Z平面再Y-Z平面这种 不包含视觉欺骗.

总结:所有的欺骗都建立在游戏是个二维的图像上 如果给出了一个场景的三视图 一切的欺骗都将不复存在.


----------------------多图 剧透 分割线----------------------
1. 潘洛斯三角形
这是游戏中出现的最多的欺骗种类 先上一张代表性的原理图
njza3eGEdSX179Zd.jpg


再看看纪念碑谷中出现的三角形
I42mE42Vww2au7zW.jpg


bHH82MU77g93myZ9.jpg


水流永动~
qFfCI28CWZFcF6bF.jpg


剩下的几张不标出来了 大家自己找找~
Oo0eX6521orZZo01.jpg


UWfZxXvV2R9vglza.jpg


Ug35wm93wrm91848.jpg



oHuXpUXOOPdKhEfn.jpg


以及我最喜欢的一个场景 在艾滋病主题中出现的 巧妙的利用旋转90度  构成两个潘洛斯三角形 简直炫酷.
原始状态
Oj92wr12g91FWdwf.jpg


旋转90度后 看出来哪两个三角形是不合理的了吗?
sF1asqskzdXs8W88.jpg



2. 凸出来还是凹下去
在被遗忘的海岸章节开始多次出现 同样先上一张代表性的原理图
NxLapUkHlaVvLuhX.jpg


图中的正方体是凸出来还是凹下去的呢? 看看纪念碑谷中出现的场景
z0VuNPYhlCHuh4QH.jpg


红圈中是部分看上去好像是凸出来的 但是..
m09zh99j2VHn6H27.jpg


现在看呢 明显是凹下去的.
上一张图 图中圈出的部分既可以看作是凸出来的 也可以看作是凹下去的.
cW2O1wWooMWFTfN4.jpg



3. 旋转产生的二维上的重合
这个没什么特别之处 在二维平面上近处的东西可以和远处的东西重合 想想那些顶着比萨斜塔的照片你就懂了..
倒是看到  的回答讲了程序上的实现过程 新建路径什么的 很有意思 可移步
动画图解开始
fVZ8meWvApxDvs6w.jpg


V5ubbCqNY0b9u5of.jpg


l1n24rro3xE0Mr12.jpg


Y6CY8zyLcP2R6UoO.jpg


就是这样 算是最常出现的一种.(知乎什么时候可以插GIF呀)

4. 莫比乌斯环 (不算视觉欺骗 也列出来吧)
先上代表性原理图 找图片多没意思 看我拿UG建模画一个 想学可以留言呀.
WMvNREV1n4eVMZre.jpg



纪念碑谷中的.
E7r2sl3377UqlQL4.jpg


I7UzDYIig20Lw9nv.jpg



---------------------------以下内容与题无关 放在最后求不折叠 0 0 ---------------------
看到有人说想学莫比乌斯环的画法 我来小贴一下步骤 UG大神欢迎收我为徒 我定勤加练习 每日给您提供吐槽素材.
UG版本 7.0 (不要问我为什么用这么老的版本)
1.画一个半圆作为草图1.
h8ZJKJJ5bjNw5C15.jpg



2.画一个半圆作为草图2 (两个半圆可接成一个圆)
nZN7oV7BSn3vOYZy.jpg



3.画环的截面作为草图4 (咦 3哪去了)
zeV7FgfhnNFhbehb.jpg


4.截面沿草图1扫掠 角度那里选择线性 角度选择0-90度 两边加起来弯180度 是弯一次的莫比乌斯环.
evDioA1Zm3t9I9e9.jpg


5.扫掠另一边 完成.

倘若直接画一个圆 扫掠 线性 0-180 是做不出来的~
莫比乌斯环用来装13怎么够 我一般都用这个.
bnTuQFBT7HLqdBtz.jpg


都是论坛上学的啦 自己搜一下就行.
回复 支持 反对

使用道具 举报

ylifk 2017-12-14 20:53:41
1.21更新: 感谢热心的同学将相关视频搬运到墙内,视频地址附在本文末尾,有兴趣的同学可以去观摩一下~

***************更新的分割线**************

本人研究生程序猿一枚,毕设做的Unity游戏设计,最近刚刚玩通了《纪念碑谷》,被这款完美的作品震撼了。由于了解到《纪念碑谷》是用Unity进行开发的,本着个人兴趣和对这个游戏的热情,我大致地了解了一下《纪念碑谷》的开发流程和技术实现,在这里和大家分享一下。

此问题有许多同学回答过,其中@赵瓮祥大神对几何图形进行了详细的介绍和分析。也有同学提出疑问,包括光影的效果和透视的远近,这些问题在下面的技术介绍中也会得到解答。

本回答将会大致解答《纪念碑谷》是如何在技术层面上实现这些不可能,从而让人们在视觉上获得完美的体验的(如何通过技术欺骗你们的视觉的)。资料来源是ustwo monument valley team的技术主管应Unity官方邀请对游戏开发者做的presentation

由于主讲人讲得比较概括(不愿透露过多技术细节),以下答案还会加入一些我个人的分析,如有错误有请大神们指正。

OK,废话说了好多,下面是干货。

个人总结:《纪念碑谷》其实就是通过将人们从2D平面看见的路径,在3D的游戏场景中加以实现。人们看见的效果其实只是3D游戏场景的一个投影(Projection)。

下面的内容我将配合图片进行讲解~多图预警!!

ZChoddDcchMOZOOO.jpg



主讲人一上来就摆上了潘洛斯三角形,从别的角度看实物是一个奇形怪状的东西,可是如果从特定角度看过去,就变成了那个神奇的三角形~这就是monument valley team开发秉承的思想:See things in different angle!同时也是技术上实现的核心。
YfnZzZyevqnz5vvO.jpg



然后可以看到,在Unity的游戏场景(左图)里其实也是这么个奇怪的几何体!可是调好摄像机的角度(右图)效果就出来了
c3x3HgI5YGHI443I.jpg


于是问题就来了。我们在玩游戏的时候看到的效果感觉艾达是在一条路上走的(右图中艾达可以从三角形最上面的角通过中间的角到达下方的角)。可是在3D的场景中两条路(左图中根本木有中间的角)根本没有交汇,那艾达是怎么走过去的呢?

答案就是对路径进行标记,如下图
BE2E799BEBC6e4G6.jpg


由图中我们可以看到,可供艾达行走的矩形路面都用Node进行了标记,Node由蓝色的Boundary Point和绿色的Connection Indicator。我个人认为游戏程序的寻路算法是基于Node组成的路径网络的,而通过对Connection Indicator进行处理,可以决定不同的Node之间是否相连。通过这种方法,技术人员可以轻松地根据视觉效果在3D场景中标出路径,下面是效果展示:
Djk7LWGeiUi93W7w.jpg


zBl8GUQDTd88tNDq.jpg


图中可以看见两个实际上分离的Connection Indicator,换个角度后就重合了。

有些同学会有这样的疑问:就算视觉上重合了,可是艾达的位置应该也有改变呀,远近不同会导致物体大小在视觉上的变化,可是怎么完全看不出来?

我来告诉你,其实艾达的位置并不是一直位于方块的上面,只是让你看着像而已...请看下图:
wLmSo64EliKZs88L.jpg


由图我们可以知道艾达的位置并不是单纯地在方块上面,而是针对用户的视角进行了偏移。可是这些在技术上怎么实现呢。我推测是通过Node来实现的,由于Node是一个圆心处于矩形单位正中心的球体,通过预先设定艾达通过特定Node时离圆心的距离,从特定的角度看就像在大路上行走一样。

我这么推测的原因是主讲人在presentation中明确表示艾达通过曲面的时候,是通过调整艾达和Node圆心的相对倾斜度来实现走曲线的效果的。
msd4sdz08M8wFx3K.jpg


而且Node还决定了艾达通过它的时候采取什么动画,这就是他们实现爬梯子和走楼梯的动画的原理。当一个梯子同时可以当做地面(左图路径)或者梯子(右图路径)的时候他们还头疼了一阵,后来通过在这种功能重叠的地方放置多个Node,然后通过艾达的位置来决定具体哪一个Node有效。
asw43kUz44uCVNu4.jpg


由此可见艾达的行走是由基于标记的寻路系统决定的,用于标记的Node还储藏了特定的渲染方式。通过定义特定的位置,旋转角度以及动画,来保证艾达行走的真实效果。

以上为大概的原理!看起来貌似是比较简单,可是据说实际实现起来问题一大堆。

上面说了通过设置Connection Indicator可以标记哪些节点相互连接,可是实际玩得时候有些情况还需要对某些点进行闭塞,如下图
GZOMb0mYXatBLktA.jpg


在这个图里,通过视觉我们可以发现当艾达位于左上角的时候,她是三个地方都可以去的,寻路算法必须通过人们的点击输入来选择性地闭塞掉一些Connection Indicator,如下图。
jxmvz3p7vI2Xx1z7.jpg


然后下面是NPC的路径图,直接上不同的Node,各走各路哈~
C67ToMVltm3t4VZV.jpg


这些就是presentation关于纪念碑谷技术设计部分的全部内容啦。最后上一张完整关卡的实际效果与视觉效果对比图!
QjzEzPi4PAuTpP4e.jpg


谢谢观看!:)
对想要了解更多其他内容的小伙伴,这是视频地址:
这是同学提供的墙内观看地址:
回复 支持 反对

使用道具 举报

liujiajia796 2017-12-14 20:56:31
这个我不是很清楚,但大概的方法我还是能理解的
ie83iO3NbzY39ie1.jpg
回复 支持 反对

使用道具 举报

Thomassourl 2017-12-14 20:59:15
yDWrD3m2FdA9Isld.jpg



轴测图长度线和高度线同一个位置就会这样了
回复 支持 反对

使用道具 举报

陶勾 2017-12-14 21:02:39
呃,这个问题鄙人还真盯着研究过并画了图。。。
如下,可以试着画一下。

当看图时,只能注意到每个面分别光影正确,但整体看时,
总要有一个面是不可能存在的 illusionの面。

b3dq8mrm4pgCD3zP.jpg



三角是最基本的,方框同理。
回复 支持 反对

使用道具 举报

eqwov 2017-12-14 21:05:25
非欧几何,大量参考埃舍尔的作品
回复 支持 反对

使用道具 举报

9uhk 2017-12-14 21:09:04
每当看到纪念碑谷的时候,就会想起《无限回廊》
请折叠
回复 支持 反对

使用道具 举报

lwyangliuan 2017-12-14 21:12:19
说了这么多理论不如实际动手做一个,首先要解决3d空间内的视觉错觉表现,也就是说,要让模型是具有视觉悖论的说服力的,看起来真实,但又完全是错误的空间结构。
zrSmSsE2AbjOxc1g.jpg



这是我用3dmax软件直接建模后渲染得到的图,几乎没有任何ps,其中至少有3处明显的空间矛盾点,而造成这样结果的原因是在于某些不同空间位置的模型当处于这个唯一角度的时候,看起来就像是连起来的,而且模型上也做了一些手脚欺骗了前后空间顺序的理解。

当然有人已经给了官方视频,里面有很详细的关于角色坐标是如何改变的寻路机制,所以实际上就是把整个寻路部分在引擎里面编辑好,矛盾空间的角色转移连接做好,其实实现起来就很简单了。
回复 支持 反对

使用道具 举报

DavidDug 2017-12-14 21:14:51
纪念碑谷1 之后 纪念碑谷2 上线,我们在纪念碑谷2上看到是国外的建筑风格,现在纪念碑谷2上线后与国内目前最具人气的站酷网合作 纪念碑谷2 大赛,在这里我们国人也可以看到有中国建筑风格的原型,好期待大赛结束能上线与我们中国有关的建筑场景。
直达链接: 纪念碑谷 - 妙旅开平碉楼|插画|商业插画|知了青年 - 原创作品 - 站酷 (ZCOOL)
大赛链接:寻找现实中的纪念碑谷 - 纪念碑谷2创意插画设计征集 - 站酷网(ZCOOL)
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

QQ|手机版|小黑屋|九艺游戏动画论坛 ( 津ICP备2022000452号-1 )

GMT+8, 2024-4-24 22:06 , Processed in 0.081890 second(s), 25 queries .

Powered by Discuz! X3.4  © 2001-2017 Discuz Team.