《紀念碑谷》是如何欺騙人們的視覺的？

12-10

玩了玩，覺得移動轉軸在空間上各種不合理呀移動完了看起來很合理的樣子

謝謝大家的贊同和感謝.

----------粉鴿線-----------
本回答將紀念碑谷中出現的視覺欺騙進行歸類不包括技巧性上的設計如上下移動裝置曲面行走造成空間上的位移.

像上圖這種通過曲面行走使人從X-Y平面走到X-Z平面再Y-Z平面這種不包含視覺欺騙.

總結:所有的欺騙都建立在遊戲是個二維的圖像上如果給出了一個場景的三視圖一切的欺騙都將不復存在.

----------------------多圖劇透分割線----------------------
1. 潘洛斯三角形
這是遊戲中出現的最多的欺騙種類先上一張代表性的原理圖

再看看紀念碑谷中出現的三角形

水流永動~

剩下的幾張不標出來了大家自己找找~

以及我最喜歡的一個場景在艾滋病主題中出現的巧妙的利用旋轉90度構成兩個潘洛斯三角形簡直炫酷.
原始狀態

旋轉90度後看出來哪兩個三角形是不合理的了嗎?

2. 凸出來還是凹下去
在被遺忘的海岸章節開始多次出現同樣先上一張代表性的原理圖

圖中的正方體是凸出來還是凹下去的呢? 看看紀念碑谷中出現的場景

紅圈中是部分看上去好像是凸出來的但是..

現在看呢明顯是凹下去的.
上一張圖圖中圈出的部分既可以看作是凸出來的也可以看作是凹下去的.

3. 旋轉產生的二維上的重合
這個沒什麼特別之處在二維平面上近處的東西可以和遠處的東西重合想想那些頂著比薩斜塔的照片你就懂了..
倒是看到 @伍一峰的回答講了程序上的實現過程新建路徑什麼的很有意思可移步「紀念碑谷」（Monument Valley）遊戲的空間結構是如何設計的？
動畫圖解開始

就是這樣算是最常出現的一種.(知乎什麼時候可以插GIF呀)

4. 莫比烏斯環 (不算視覺欺騙也列出來吧)
先上代表性原理圖找圖片多沒意思看我拿UG建模畫一個想學可以留言呀.

紀念碑谷中的.

---------------------------以下內容與題無關放在最後求不摺疊 0 0 ---------------------
看到有人說想學莫比烏斯環的畫法我來小貼一下步驟 UG大神歡迎收我為徒我定勤加練習每日給您提供吐槽素材.
UG版本 7.0 (不要問我為什麼用這麼老的版本)
1.畫一個半圓作為草圖1.

2.畫一個半圓作為草圖2 (兩個半圓可接成一個圓)

3.畫環的截面作為草圖4 (咦 3哪去了)

4.截面沿草圖1掃掠角度那裡選擇線性角度選擇0-90度兩邊加起來彎180度是彎一次的莫比烏斯環.

5.掃掠另一邊完成.倘若直接畫一個圓掃掠線性 0-180 是做不出來的~
莫比烏斯環用來裝13怎麼夠我一般都用這個.

都是論壇上學的啦自己搜一下就行.

1.21更新: 感謝熱心的@何凱同學將相關視頻搬運到牆內，視頻地址附在本文末尾，有興趣的同學可以去觀摩一下～

***************更新的分割線**************

本人研究生程序猿一枚，畢設做的Unity遊戲設計，最近剛剛玩通了《紀念碑谷》，被這款完美的作品震撼了。由於了解到《紀念碑谷》是用Unity進行開發的，本著個人興趣和對這個遊戲的熱情，我大致地了解了一下《紀念碑谷》的開發流程和技術實現，在這裡和大家分享一下。

此問題有許多同學回答過，其中@趙瓮祥大神對幾何圖形進行了詳細的介紹和分析。也有同學提出疑問，包括光影的效果和透視的遠近，這些問題在下面的技術介紹中也會得到解答。

本回答將會大致解答《紀念碑谷》是如何在技術層面上實現這些不可能，從而讓人們在視覺上獲得完美的體驗的（如何通過技術欺騙你們的視覺的）。資料來源是ustwo monument valley team的技術主管應Unity官方邀請對遊戲開發者做的presentation

由於主講人講得比較概括（不願透露過多技術細節），以下答案還會加入一些我個人的分析，如有錯誤有請大神們指正。

OK，廢話說了好多，下面是乾貨。

個人總結：《紀念碑谷》其實就是通過將人們從2D平面看見的路徑，在3D的遊戲場景中加以實現。人們看見的效果其實只是3D遊戲場景的一個投影（Projection）。

下面的內容我將配合圖片進行講解~多圖預警！！

主講人一上來就擺上了潘洛斯三角形，從別的角度看實物是一個奇形怪狀的東西，可是如果從特定角度看過去，就變成了那個神奇的三角形~這就是monument valley team開發秉承的思想：See things in different angle！同時也是技術上實現的核心。

然後可以看到，在Unity的遊戲場景（左圖）里其實也是這麼個奇怪的幾何體！可是調好攝像機的角度（右圖）效果就出來了

於是問題就來了。我們在玩遊戲的時候看到的效果感覺艾達是在一條路上走的（右圖中艾達可以從三角形最上面的角通過中間的角到達下方的角）。可是在3D的場景中兩條路（左圖中根本木有中間的角）根本沒有交匯，那艾達是怎麼走過去的呢？

答案就是對路徑進行標記，如下圖

由圖中我們可以看到，可供艾達行走的矩形路面都用Node進行了標記，Node由藍色的Boundary Point和綠色的Connection Indicator。我個人認為遊戲程序的尋路演算法是基於Node組成的路徑網路的，而通過對Connection Indicator進行處理，可以決定不同的Node之間是否相連。通過這種方法，技術人員可以輕鬆地根據視覺效果在3D場景中標出路徑，下面是效果展示：

圖中可以看見兩個實際上分離的Connection Indicator，換個角度後就重合了。

有些同學會有這樣的疑問：就算視覺上重合了，可是艾達的位置應該也有改變呀，遠近不同會導致物體大小在視覺上的變化，可是怎麼完全看不出來？

我來告訴你，其實艾達的位置並不是一直位於方塊的上面，只是讓你看著像而已...請看下圖：

由圖我們可以知道艾達的位置並不是單純地在方塊上面，而是針對用戶的視角進行了偏移。可是這些在技術上怎麼實現呢。我推測是通過Node來實現的，由於Node是一個圓心處於矩形單位正中心的球體，通過預先設定艾達通過特定Node時離圓心的距離，從特定的角度看就像在大路上行走一樣。

我這麼推測的原因是主講人在presentation中明確表示艾達通過曲面的時候，是通過調整艾達和Node圓心的相對傾斜度來實現走曲線的效果的。

而且Node還決定了艾達通過它的時候採取什麼動畫，這就是他們實現爬梯子和走樓梯的動畫的原理。當一個梯子同時可以當做地面（左圖路徑）或者梯子(右圖路徑）的時候他們還頭疼了一陣，後來通過在這種功能重疊的地方放置多個Node，然後通過艾達的位置來決定具體哪一個Node有效。

由此可見艾達的行走是由基於標記的尋路系統決定的，用於標記的Node還儲藏了特定的渲染方式。通過定義特定的位置，旋轉角度以及動畫，來保證艾達行走的真實效果。

以上為大概的原理！看起來貌似是比較簡單，可是據說實際實現起來問題一大堆。

上面說了通過設置Connection Indicator可以標記哪些節點相互連接，可是實際玩得時候有些情況還需要對某些點進行閉塞，如下圖

在這個圖裡，通過視覺我們可以發現當艾達位於左上角的時候，她是三個地方都可以去的，尋路演算法必須通過人們的點擊輸入來選擇性地閉塞掉一些Connection Indicator，如下圖。

然後下面是NPC的路徑圖，直接上不同的Node，各走各路哈~

這些就是presentation關於紀念碑谷技術設計部分的全部內容啦。最後上一張完整關卡的實際效果與視覺效果對比圖！

謝謝觀看！：）
對想要了解更多其他內容的小夥伴，這是視頻地址：https://www.youtube.com/watch?v=mCCC9hQm6MM
這是@何凱同學提供的牆內觀看地址：http://www.tudou.com/programs/view/wmktBQ6Zeu8/

因為遊戲裡面欺騙人們視覺那些地方，物體的遮擋順序是不正確的

我知道很多大兄弟都想搬出「潘洛斯三角形」來解釋遊戲的實現。但是經過一波實力分析（逃），我感覺潘洛斯三角形只是這個遊戲核心創意的靈感，真正欺騙我們的視覺的還是靠在三維渲染的時候做了一點手腳——在一些關鍵地方的物體遮擋順序改變了。

光沿直線傳播，所以人眼（相當於一個相機）看到的圖像中的「某一個像素點」，一定是離自己最近的某個點（那肯定是的啊，離自己更遠的物體肯定會被擋住）。所以有兩個物體，一前一後的話，我肯定是能看到A而不是B的。這就是正常的遮擋，就是近的物體一定能擋住遠的物體。

但是紀念碑谷的操作就很騷了，因為是個2D遊戲（遊戲只從一個視角看向場景），所以想利用投影來實現一些騷操作也是未嘗不可的。

就說紀念碑谷2的第一關，這裡的遮擋是正確的，明顯能feel到AB在上面，CD在下面，然後ABCD組成一個矩形。

那好吧，我們來旋轉一下看看從什麼時候開始我們的大腦和眼睛就被黑掉了

停一下！有陰謀！

說好的B在上面的，如果像這樣旋轉的話，B那塊是會遮擋到C那塊才對（可以自己想像一波）。結果這裡遊戲特別心機的，讓C遮擋了B。從這個錯誤的遮擋開始，遊戲的畫面就平滑流暢地欺騙了我們的眼睛和大腦。

改成上圖那樣才是正確的遮擋啊！

看看上圖，我旋轉完成了，這畫面居然若！無！其！事！地給我無縫融合了起來，假裝什麼都沒發生過，實在是太心機了啊。

上圖才是真正能存在於3維空間、遮擋正確的立體形狀，這樣可以feel到其實這條路在三維空間中是根本不連通的，只是投影疊在一起，再加上故意弄錯的物體遮擋順序，使得玩家有一種眼睛被欺騙的感覺。

所以最後看起來高度就是A=B=C=D，這跟一開始的A=B&>C=D有矛盾，這是必然的，你想要給玩家一種錯覺，幾何位置關係也就一定要順勢改變，甚至幾何關係有矛盾。

再看一個例子：

上圖我們能feel到從離海平面高度來講，A=B&>C，然後粉色的條條就跟A、B高度一樣。

但是旋轉過後，粉色的條條看起來就跟C的高度一樣了。這明顯又是利用了物體遮擋順序的little trick偷偷破壞了物體之間的幾何位置關係，看到的圖像跟自己的先驗知識有衝突，所以就會產生一系列令人不解但是好像又很牛逼的錯覺= =

ok我後來又發現，《紀念碑谷》不只一種類型的錯覺，有一種是遮擋正確，但僅僅是在渲染在二維屏幕上的菱形連在一起，然後強行設置為一個通路，這個其實就比較trivial了

最後，我自己的一點小想法：有一點我還沒完全想懂，每個需要改變遮擋順序的「錯覺關鍵位置」要怎麼寫進遊戲里咧？總不可能每個這種產生錯覺的地方都寫代碼特殊處理改Z-Buffer吧？因為遊戲內容和程序邏輯最好還是分開的，這樣子關卡設計師才能放開手去設計場景而不需要理會實現的細節。所以我覺得紀念碑谷的遊戲場景和遊戲引擎都是做了一些驚為天人的操作的，光這個邏輯和設計分離的具體實現就夠吃一壺了，技術總監牛逼！

（PS：看到高票答案的官方ppt，設計時的場景好像是有一點複雜，辛苦關卡設計師了）

（PPS：紀念碑谷的美術和音樂也很棒，太厲害了）

（PPPS：這個遊戲核心玩法是很簡單和常見，但是評論區的大兄弟不要因為這樣就搞得代碼寫起來很容易一樣，我也不多說什麼，如果你覺得「這沒什麼」，那你可以自己試下寫代碼把這效果做出來）

這個我不是很清楚，但大概的方法我還是能理解的

軸測圖長度線和高度線同一個位置就會這樣了

呃，這個問題鄙人還真盯著研究過並畫了圖。。。
如下，可以試著畫一下。

當看圖時，只能注意到每個面分別光影正確，但整體看時，
總要有一個面是不可能存在的 illusionの面。

三角是最基本的，方框同理。

非歐幾何，大量參考埃舍爾的作品

每當看到紀念碑谷的時候，就會想起《無限迴廊》
請摺疊

說了這麼多理論不如實際動手做一個，首先要解決3d空間內的視覺錯覺表現，也就是說，要讓模型是具有視覺悖論的說服力的，看起來真實，但又完全是錯誤的空間結構。

這是我用3dmax軟體直接建模後渲染得到的圖，幾乎沒有任何ps，其中至少有3處明顯的空間矛盾點，而造成這樣結果的原因是在於某些不同空間位置的模型當處於這個唯一角度的時候，看起來就像是連起來的，而且模型上也做了一些手腳欺騙了前後空間順序的理解。當然有人已經給了官方視頻，裡面有很詳細的關於角色坐標是如何改變的尋路機制，所以實際上就是把整個尋路部分在引擎裡面編輯好，矛盾空間的角色轉移連接做好，其實實現起來就很簡單了。

紀念碑谷1 之後紀念碑谷2 上線，我們在紀念碑谷2上看到是國外的建築風格，現在紀念碑谷2上線後與國內目前最具人氣的站酷網合作紀念碑谷2 大賽，在這裡我們國人也可以看到有中國建築風格的原型，好期待大賽結束能上線與我們中國有關的建築場景。

直達鏈接：紀念碑谷 - 妙旅開平碉樓|插畫|商業插畫|知了青年 - 原創作品 - 站酷 (ZCOOL)

大賽鏈接：尋找現實中的紀念碑谷 - 紀念碑谷2創意插畫設計徵集 - 站酷網（ZCOOL）

可以參考潘洛斯階梯，類似的還有潘洛斯三角等。

引用自百科：
潘洛斯階梯（PenroseStairs），又名潘羅斯階梯，由英國數學物理學家名譽教授羅傑·潘洛斯（RogerPenrose）提出。潘洛斯階梯是一個無盡的迴廊，一個迷宮。四條樓梯，四角相連，但可每條樓梯都是向上的，因此可以無限延伸發展，是三維世界裡不可能出現的悖論階梯。

如上圖，利用的是人的空間錯覺。以下是鏈接：
感知覺研究：空間維度錯覺擴展：
視錯覺實驗合輯

個人感覺其實原理很簡單，用的是軸側視角，沒有透視。再加上一點點光影的影響

利用3d投影到2d，缺失了一個維度後所造成的視覺偏差，深度信息丟失造成了這種偏差。

喜歡紀念碑谷的小夥伴給你們推薦一個稍微遠古一點的小遊戲《無限迴廊》 psp上面的。大概算同類遊戲吧…感覺難度更高一些。

三維和二維都能做到。

前者是一個場景做一個三維建模，女孩有四種運動軌跡對應四個視角，然後路雖然沒有連起來，但是讓主角用走的動作飛過去就行(甚至不能算作飛，因為這個遊戲明顯沒有重力，不存在跳躍也就不存在飛翔)；

後者是一個場景做四個二維場景(可能更多)，旋轉後的場景都是獨立並且連接在一起的，人物行動和其他二維遊戲一樣。

前者是用不帶物理屬性——比如重力的場景讓人腦產生錯覺，也就是欺騙常識，因為人腦會默認認為斷裂的地方應該掉下去，沒掉下去的就一定是連起來的，殊不知在不加重力場的時候飛行竟然如此容易；
後者是單純的視覺欺騙，比如單一關卡視角切換後其實是換了一個場景(scene)，但是它用場景轉換時的銜接和不同場景相似的背景(比如同一類型的無限迴廊就用了純色背景，讓人無法區分物體旋轉和空間旋轉)，讓人以為這是一個三維的場景旋轉了，其實它根本就切換了場景。

說一個有意思的事情，《蒙娜麗莎的微笑》，蒙娜麗莎背後其實是一個墓碑，它被蒙娜麗莎遮住了而已，為什麼一個女人在墓碑前面微笑會讓人覺得美呢？因為墓碑看不見啊！

怎麼樣能讓人相信這句話呢？先畫一張側視圖和一連串過渡視角圖片，然後把這個視角轉換的過程做成動畫，給一個人播放，他就會以為正視圖和我們做的側視圖是一個場景了。

透視與光影結合，以上

空間悖論。

兩點透視的bug，不太遵循光影效果，畢竟是二次元的動畫界面。

潘洛斯三角形都出來了。。。。玩時還真沒想這麼多，不過如今這種不挑釁玩家智商小遊戲太少了，這款確實不錯。