Learn to Create Everything In a Fragment Shader(譯)
學習在片元著色器中建立一切
介紹
這篇部落格翻譯自Shadertoy： learn to create everything in a fragment shader
大綱
本課程將介紹使用Shadertoy在Web瀏覽器中使用片段著色器的創新，藝術和創造性方法。 與會者將透過使用實時編碼學習諸如raymarching，程式內容建立（紋理，建模和動畫），影象壓縮和體積渲染等技術。 本課程涵蓋的演算法是stateoftheart，它們目前用於不同的行業，如互動娛樂或電影。
以下說明旨在對2014年Siggraph亞洲課程中深入探討的主題進行高階描述
預備知識
目標受眾是那些對
計算機圖形學
感興趣的專業人士或學生，他們希望瞭解程式碼和藝術之間的交集。 這包括遊戲開發者，電影製片人和藝術家。
課程需要中級知識：基本計算機圖形學，陰影/光照模型，著色語言（GLSL，HLSL或RSL），代數和幾何。
平臺簡介
Shadertoy是一個網路工具，它允許全球的開發人員使用WebGL將程式碼中的畫素推送到螢幕上。 在不到兩年的時間裡，我們的使用者建立了數以千計的片段著色器，可以探索各種各樣的實時圖形演算法。 Shadertoy也是一個社交平臺，專業人士和學生都可以學習和講授視覺，互動，反應性，程式建模，GPU內部結構和底紋。
來自Shadertoy的挑戰
Shadertoy有一個挑戰，貢獻者只能寫一個自動應用於四元組的片段著色器。 這種限制使創作過程非常簡約，但與此同時，它引發了創造難以想象的內容的新方法。
一個簡單的例子：
Code Editor and Visualizer
在Shadertoy中，建立環境在視覺化器和程式碼編輯器之間分開。
視覺化器具有通常的選項，如播放或倒帶，但它也包含著色器的描述和其他相關元資料。
程式碼編輯器
具有語法高亮顯示功能，並且還顯示編譯錯誤和其他相關資訊。 使用者還可以看到著色器中提供的“著色器輸入”，或者透過按下“新增”按鈕建立一個新的“透過”以向著色器新增音訊。
資源
Shadertoy中的每個著色器都可以（隨意）使用有限數量的紋理，聲音或影片。 一旦使用者在編輯器下面的框中選擇了一個，那麼他們可以透過紋理提取訪問。
社群
Shadertoy是一個擁有數千使用者的社群。 為了釋出內容，使用者需要一個免費的賬戶。 使用者可以檢查其他使用者的配置檔案並瀏覽彼此的創作。 最重要的是，每個著色器都包含一個評論部分，內容建立者可以回答社群提問或接收反饋。
隱式思維，2d：非多邊形形狀
隱性思維導論
與透過在空間和時間上明確放置幾何圖形或顏色在不同位置構建影象的自然方式相反，Shadertoy鼓勵（如果不強制的話）使用隱式方法來實現相同。 即使通常用
程式方法
構建的內容往往是明確的，理解和翻譯成計算機程式可遵循的一系列例程或程式（因此是程式性的）也更簡單。 這些例子包括
LS系統
，基於細分的幾何體，布料模擬，地形侵蝕以及一般用於製作遊戲或電影的所有常規建模和紋理/繪畫管線。 只有少數流行的演算法會以自然方式導致隱式描述，例如分形渲染或光線追蹤。
因此，當需要Shadertoy中的複雜動畫模型（比如說游泳的海豚，或避開太空船的障礙物）時，使用者需要以隱式的方式定義其形狀和建模，紋理和動畫，儘管缺乏隱含的文化和傳統方法。
因此，為了在Shadertoy中建立豐富的內容，使用者往往需要圍繞新的行事方式，這需要想象力和創造力。 有時，他們甚至可能會發現自己處於極少甚至甚至沒有研究人員之前的地方！ 其他時候，這可能會幫助他們從一個非常不同的角度接近一個簡單的挑戰，讓他們更深入地瞭解問題。
本節將快速回顧一些隱式整形的基本原則（建模的形式，紋理/曲面的顏色和動畫的運動）。
座標和顏色漸變
這第一個著色器將顯示如何建立顏色漸變以確保瞭解座標系統的矩形概念，值標準化和顏色表示。
實現程式碼如下：
void mainImage（ out vec4 fragColor， in vec2 fragCoord ）
{
vec2 uv = fragCoord。xy / iResolution。xy；
fragColor = vec4（uv，0。5+0。5*sin（iTime），1。0）；
}
塑形
如何從矩形/
直角座標系
轉到圓形座標？ 在這個例子中，觀眾將看到如何定義圓和
徑向模式
。
平滑步將用於劃分平面區域並對它們進行不同的著色。 這也可以作為對
正弦訊號
中幅度，頻率和相位概念的快速回顧。
紋理對映
雖然紋理對映的使用違背了程式化構建所有內容的目的，但Shadertoy並不是關於程式性內容創作，而是關於隱性思維。
使用紋理可以透過高質量濾波以簡單的方式新增細節（與純
程式模式
相反）。
動畫
Shadertoy中的動畫也需要隱含。
缺乏對幀/時間歷史的訪問使諸如物理整合或簡單運動邏輯等事情變得不可能。 因此，在hadertoy中動畫的所有內容都必須是時間的函式，除了時間之外別無其他。 沒有IIR濾波器可以實現，沒有力量可以被施加到質量塊上以將其彎曲越過障礙物。 複雜的模仿避障的運動只能作為時間的函式來實現。
反應性
為了讓Shadertoy更具互動性和趣味性，我們確實允許使用預製聲音波形來提供隱式著色器。
使用者可以從中挑選一些配樂。 在渲染時間，音軌的實際波形和頻譜被提取並複製到GPU，透過使用紋理使著色器消耗。
隱式思維，3D
Raymarching
Raymarching是在Shadertoy中獲得3D場景的最流行的技術。 它分享了光線追蹤的簡單性和隱含性，但它提供了一種更加強大的方式來描述3D形狀和光照。
本課程將花費大量時間來確保參加者瞭解技術，以及控制影象質量和速度的不同引數，例如步數，
步長乘數
，基於距離的距離場 前進vs線性等
本節還將介紹表面的隱式定義如何匯出欄位的概念以及如何為其提取法線以進行照明。
以下部分將成為本課程其餘部分的基礎，因此將花費時間來深入瞭解基於raymarching的影象建立過程。
建模
透過使用基元和運算子可以將隱式距離場的建模轉換為顯式問題。
基元以分析封閉形式定義簡單的形狀。 球體，圓形盒子，螺旋線等等都是很好的例子。
域運算子允許縮放，彎曲，扭曲和重複形狀。 範圍操作員允許組合和移位和變形形狀。
許多這些操作員只要滿足一些條件就不需要在數學上完美無缺，從而使建模過程非常具有探索性和直觀性。
位移
位移可能是操作中最簡單的，它很容易理解。 它的能力來自於需要理解的權衡（例如打破
距離度量條件
，需要用更小的步長來補償）。
然而它是一個非常強大的技術。 例如，豎直圓柱體可以在其基部以及一些全域性噪聲下以指數移位，以便使樹幹變皺。
域重複
根據所使用的技術，構建巨大的3D設定（或無限）有時可能具有挑戰性。 在raymarching的情況下，域重複是以一種非常便宜的方式用一行程式碼實現這一點的一種方法。
有些規則需要遵循才能運用，但一旦理解了這些規則，這是隱式程式建模工具箱中非常強大的工具。
形狀混合
形狀混合，類似於位移，是一個範圍運算子。 然而，這種方法可以用於以類似於產生C1連續曲面的聯合操作的方式組合形狀，而它在表面上只能接近一個曲面的空間區域中表現得非常接近。
這種技術對於建立光滑的形狀非常有用。
無狀態的動畫
程式動畫
遊戲和電影製作常常依賴增量動畫系統，其中元素的最終位置由隨時間推移的
瞬時力量
和速度的綜合決定。 這樣的系統可以很容易地對場景中不同元素的相對位置作出反應並建立豐富的行為。 玩家和敵人在物理模擬遊戲中的定位就是這樣的例子。 在Shadertoy中，程式動畫的時間軸也是隱含的，就像影象一樣。 沒有資料透過幀邊界傳遞，因此無法實現整合器或
增量物件
定位。
相反，所有著色器都需要找到產生合理動畫的隱式公式或演算法，這可能具有挑戰性。 然而，避障，行為模擬和物理可以透過不同的方式實現。 以下部分將解釋如何解決這些挑戰。
混合動畫曲線
以同樣的方式，表面的隱式建模可以利用分層的方法，其中簡單的形狀被組合並混合在一起以構建更高複雜度的表面，可以以類似的方式豐富隱式動畫。 鑑於隱式動畫，例如水下游泳和失水跳躍動畫，我們將看到一個以平滑方式混合的示例，以便可以將不同的行為組合為新的單個動畫功能。
物理模擬
物理整合是一個明確的程式過程的典型例子，當然這在Shadertoy中是不可能實現的。 因此，物理學必須以不同的方式解決。 透過簡化系統的規則（其中的物體之間不發生碰撞），我們可以找到解析系統中物體的完整運動的解析解，並建立基於物理的動畫。
Pro-Tricks
景深
在光線追蹤和光線追蹤的情況下，可以透過對渲染影象進行超級取樣並對鏡頭進行取樣（射線的原點和方向）來平均解決景深（DoF）或鏡頭散焦問題。 然而，該技術對於實時渲染而言非常快速地變得昂貴。
幸運的是，在過去的幾個月中，Shadertoy的使用者已經找到了利用Shadertoy中使用的大多數隱式建模的距離場表示的方法
運動模糊
運動模糊傳統上也是透過多重取樣來解決的。 然而，有時候有必要重新思考一個問題，並試圖找出是否有更快的方法來解決問題。
在某些特定情況下，Motion Blur實際上可以透過分析來解決，這是令人驚訝的，但它也帶有一系列問題和挑戰。
軟陰影
軟陰影（半影）是計算機圖形學中基於光線渲染演算法的另一個解決問題的例子，它透過多重取樣進行積分。
然而，距離場又一次提供了關於場景的足夠全域性資訊，即透過單一投影來建立令人信服的柔和陰影。
環境光遮蔽
Ambient Occlusion是一種廉價的方法，可以在不解決全域性照明問題的情況下將全域性照明外觀渲染。
本節將介紹如何使用距離場和隱式程式建立4種不同的環境遮擋演算法，這些演算法的速度足以實時呈現。
大氣干擾
在傳達場景中的尺度感時，大氣效應起著重要作用。 雖然本節中的技巧同樣適用於基於普通光柵化的渲染器，但Shadertoy的實時編碼功能使其成為一個很好的框架，可以解釋一些創造有趣的霧和線索的藝術可能性和技巧。
原部落格連結：Learn to Create Everything In a Fragment Shader（譯）
