如何正確啓用WebGL DEPTH_TEST？

我不知道爲什麼黃色正方形（z = 0）出現在紅色正方形（z = 0.5）的前面。就好像我沒有啓用DEPTH_TEST，但我肯定有。如果標有「繪製紅色」和「繪製黃色」的塊反轉，則紅色正方形應該顯示在前面。但我不明白爲什麼這是必要的，如果DEPTH_TEST啓用。這裏的相關代碼：如何正確啓用WebGL DEPTH_TEST？

... 
    gl.enable(gl.DEPTH_TEST); 
    gl.depthFunc(gl.LEQUAL); 
    ... 
    vertices = [ // red square 
       0.0, 0.0, 0.5, 1.0, 0.2, 0.1, 1.0, 
       -1.0, 0.0, 0.5, 1.0, 0.2, 0.1, 1.0, 
       0.0, -1.0, 0.5, 1.0, 0.2, 0.1, 1.0, 
       -1.0, -1.0, 0.5, 1.0, 0.2, 0.1, 1.0, 

       // yellow square 
       0.5, 0.5, 0.0, 1.0, 0.9, 0.2, 1.0, 
       -0.5, 0.5, 0.0, 1.0, 0.9, 0.2, 1.0, 
       0.5, -0.5, 0.0, 1.0, 0.9, 0.2, 1.0, 
       -0.5, -0.5, 0.0, 1.0, 0.9, 0.2, 1.0 ]; 

    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); 
    gl.bufferData(
     gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 

    // draw red 
    gl.vertexAttribPointer(
     vertexPositionAttribute, 3, gl.FLOAT, false, 28, 0); 
    gl.vertexAttribPointer(
     vertexColorAttribute, 4, gl.FLOAT, false, 28, 12); 
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 

    // draw yellow 
    gl.vertexAttribPointer(
     vertexPositionAttribute, 3, gl.FLOAT, false, 28, 112); 
    gl.vertexAttribPointer(
     vertexColorAttribute, 4, gl.FLOAT, false, 28, 124); 
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

來源

2011-12-01 user1076323

你應該澄清的一些事情：你正在測試的瀏覽器;你的司機是否更新？你的投影矩陣;你在模型視圖中加載標識嗎？ – Chiguireitor

從Ubuntu包管理器測試Chrome和Firefox，NVidia驅動程序。（所有新的都足以讓其他WebGL演示工作。）我只有一個矩陣用於頂點着色器中的模型，視圖和投影： mat4 mvpMatrix = mat4（1.0，0.0，0.0，0.0， 0.0，1.0，0.0，0.0 ， 0.0,0.0，-1.0，-1.0, 0.0,0.0,3.0,3.0）; （請注意，紅色正方形較大，因爲距離較近，所以很有意義，但在其上方繪製了黃色） – user1076323

出於好奇，如果將黃色方塊的Z分量設置爲1.0，會發生什麼情況？ – Toji

僅供參考，我的矩陣是壞的。我正在看一本書，它的觀點是在Z軸上看着相反的方向，並且計算的投影部分是錯誤的。（感謝Chiguireitor幫我解決這個問題。）

來源

2011-12-07 17:55:01 user1076323

如何正確啓用WebGL DEPTH_TEST？

回答

相關問題