跳轉到內容

GLSL 程式設計/GLUT/順序無關透明度

來自華夏公益教科書,開放的書,開放的世界
“Where Have You Bean” 來自 flickr 使用者 Ombligotron。標題中的拼寫錯誤指的是名為 “Cloud Gate” 或 “The Bean” 的雕塑。

本教程涵蓋了順序無關混合

它延續了關於透明度教程的討論,並解決了標準透明度的一些問題。如果您還沒有閱讀該教程,您應該先閱讀它。

“84 – Father son” 來自 Ben Newton。雙重曝光的例子。

順序無關混合

[編輯 | 編輯原始碼]

正如透明度教程中所述,混合的結果通常(特別是對於標準 alpha 混合)取決於三角形的渲染順序,因此如果三角形沒有從後到前排序(通常不會),就會導致渲染偽影。術語“順序無關透明度”描述了各種避免此問題的技術。其中一項技術是順序無關混合,即使用不依賴於三角形柵格化順序的混合方程。有兩種基本方法:加法混合和乘法混合。

加法混合

[編輯 | 編輯原始碼]

加法混合的標準示例是雙重曝光,如本頁上的影像所示:顏色被新增在一起,因此無法(或至少非常難)說出照片的拍攝順序。加法混合可以用透明度教程中介紹的混合方程來描述

vec4 result = SrcFactor * gl_FragColor + DstFactor * pixel_color;

其中 SrcFactorDstFactor 由 OpenGL 的一個函式設定

glBlendFunc({SrcFactor 的程式碼},{DstFactor 的程式碼})

對於加法混合,DstFactor 的程式碼必須是 GL_ONE,而 SrcFactor 的程式碼不能依賴於幀緩衝區中的畫素顏色;即它可以是 GL_ONEGL_SRC_COLORGL_SRC_ALPHAGL_ONE_MINUS_SRC_COLORGL_ONE_MINUS_SRC_ALPHA

一個例子是

attribute vec3 v_coord;
uniform mat4 m, v, p;

void main()
{
  vec4 v_coord4 = vec4(v_coord, 1.0);
  mat4 mvp = p*v*m;
  gl_Position = mvp * v_coord4;
}
void main()
{
  gl_FragColor = vec4(0.0, 1.0, 0.0, 0.3); 
}
glBlendFunc(GL_SRC_ALPHA, GL_ONE)

請記住,您必須在3D 檢視選單中將視口著色設定為紋理,才能啟用混合。此外,您應該啟用Z 透明度並停用背面剔除,如透明度教程中所述。

乘法混合

[編輯 | 編輯原始碼]

攝影中乘法混合的一個例子是使用多個統一的灰色濾鏡:濾鏡放在相機上的順序對最終影像的衰減沒有影響。在三角形柵格化方面,影像對應於三角形柵格化之前幀緩衝區的內容,而濾鏡對應於三角形。

當使用以下方法在 OpenGL 中指定乘法混合時

glBlendFunc({SrcFactor 的程式碼},{DstFactor 的程式碼})

SrcFactor 的程式碼必須是 GL_ZERO,而 DstFactor 的程式碼必須依賴於片段顏色;即它可以是 GL_SRC_COLORGL_SRC_ALPHAGL_ONE_MINUS_SRC_COLORGL_ONE_MINUS_SRC_ALPHA。使用 GL_ONE_MINUS_SRC_ALPHA 作為 DstFactor 的程式碼,是衰減背景(其不透明度由片段的 alpha 分量指定)的一個典型例子

attribute vec3 v_coord;
uniform mat4 m, v, p;

void main()
{
  vec4 v_coord4 = vec4(v_coord, 1.0);
  mat4 mvp = p*v*m;
  gl_Position = mvp * v_coord4;
}
void main()
{
  gl_FragColor = vec4(0.0, 1.0, 0.0, 0.3); 
}
glBlendFunc(GL_ZERO, GL_ONE_MINUS_SRC_ALPHA)

恭喜您已完成本教程。我們已經瞭解了

  • 什麼是順序無關透明度和順序無關混合。
  • 兩種最重要的順序無關混合型別是什麼(加法和乘法)。
  • 如何實現加法和乘法混合。

進一步閱讀

[編輯 | 編輯原始碼]

如果您還想了解更多

  • 關於著色器程式碼,您應該閱讀透明度教程
  • 關於另一種順序無關透明度技術,即深度剝離,您可以閱讀 Cass Everitt 的技術報告:“Interactive Order-Independent Transparency”,該報告可在網上獲得。


< GLSL 程式設計/GLUT

除非另有說明,本頁上的所有示例原始碼均授予公有領域。
返回OpenGL 程式設計 - 照明部分 返回GLSL 程式設計 - GLUT 部分
華夏公益教科書