通過WebGL使用GLSL的投影紋理映射

我想將紋理投影到牆上或任何物體上。基於這個Cg投影紋理映射tutorial（ctrl-f「9.3」），我修改了這個tutorial's着色器，但是我得到一個空白的白色畫布。我是着名的新手，不太清楚如何調試這個（沒有JS錯誤），任何提示？通過WebGL使用GLSL的投影紋理映射

頂點着色器：

uniform mat4 u_modelViewProjMatrix; 
uniform mat4 u_normalMatrix; 
uniform vec3 lightDir; 

attribute vec3 vNormal; 
attribute vec4 vTexCoord; 
attribute vec4 vPosition; 

varying float v_Dot; 
varying vec2 v_texCoord; 

void main() 
{ 
    gl_Position = u_modelViewProjMatrix * vPosition; 
    v_texCoord = vTexCoord.st * vPosition; 
    vec4 transNormal = u_normalMatrix * vec4(vNormal, 1); 
    v_Dot = max(dot(transNormal.xyz, lightDir), 0.0); 
}

片段着色器：

uniform sampler2D sampler2d; 

varying float v_Dot; 
varying vec2 v_texCoord; 

void main() 
{ 
    vec4 color = texture2DProj(sampler2d,v_texCoord); 
    gl_FragColor = vec4(color.xyz * v_Dot, color.a); 
}

來源

2011-04-07 user696142

如果在你的代碼中的問題，我認爲這是你的工作v_texCoord的奇怪的方式。你確定你不想採用矩陣代替vTexCoord嗎？除此之外，與我的預期相反，texture2DProj是在GLSL ES 1.0中定義的，它在句法上似乎是正確的，並且具有匹配的不同名稱。

當您沒有可用的調試器時調試GLSL往往會涉及將中間值作爲片段顏色輸出。所以，你的測試可能是：

調整你的片段着色器輸出一個常量的顏色，如鮮紅色。如果你的幾何不變爲鮮紅色，那麼你的程序沒有正確的鏈接，你應該檢查日誌中是否有編譯錯誤。
嘗試將gl_FragColor設置爲適當修改版本的v_texCoord。嘗試使用頂點着色器中的不同中間值加載v_texCoord。觀看輸出以確保您獲得正確的數字。
嘗試紋理沒有投影步驟，以確保您上傳紋理並正確設置適當的制服。

再加上你可以想象的其他任何變化。

來源

2011-04-07 10:42:56 Tommy

非常感謝湯米。我通過使用texture2D並在頂點着色器中執行以下操作來實現它：\t \t vec4 clip = u_modelViewProjMatrix * vPosition; vec3 ndc = clip.xyz/clip.w; v_texCoord = 0.5 *（ndc.xy + 1.0）; – user696142 2011-04-08 00:32:49

通過WebGL使用GLSL的投影紋理映射

回答

相關問題