2014-10-10 57 views
0

我的問題是:爲什麼相同的示例WebGL代碼導致不同平臺/瀏覽器上的輸出不同? enter image description here對WebGL drawElements的多次調用導致不正確的呈現

左上圖:

在Firefox 30.0(和最新的一個,32)在Windows上,但Mac,使得多個drawElements渲染點的時候調用不正確的渲染結果火狐(不正確)。 右上:Chrome(正確)。

通過複製和適應示例代碼我已經重新創建了這個問題(在軟件項目,我不能分享第一次碰到):

https://developer.mozilla.org/samples/webgl/sample5/index.html

然後我修改了代碼示例最大簡單,刪除所有動畫,並渲染三個點而不是一個立方體,三次調用drawElements,每個都調整一個統一的顏色。

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer); 
    setMatrixUniforms(); 
    gl.uniform4f(colorUniformLoc,1.0,0.0,0.0,1.0); 
    /***** 
    gl.drawElements(gl.POINTS, 36, gl.UNSIGNED_SHORT, 0); //commented out, from original example. 
    *****/ 
    gl.drawElements(gl.POINTS, 1, gl.UNSIGNED_SHORT, 0); 
    gl.uniform4f(colorUniformLoc,1.0,1.0,0.0,1.0); 
    gl.drawElements(gl.POINTS, 1, gl.UNSIGNED_SHORT, 2); 
    gl.uniform4f(colorUniformLoc,0.0,0.0,1.0,1.0); 
    gl.drawElements(gl.POINTS, 1, gl.UNSIGNED_SHORT, 4); 

呈現三個點應該是在一條直線上:

var vertices = [ 
// Front face 
-1.0, -1.0, 1.0, 
-1.5, -1.0, 1.0, 
-2.0, -1.0, 1.0, //more verts not shown... 

我已經通過共享的人誰感覺就像是極有幫助的公開谷歌驅動器文件夾的完整源代碼:

https://drive.google.com/folderview?id=0B5OXnggcG9_7VlZHY003UzFYNGc&usp=sharing

可悲的是,火狐30是由我們的客戶使用(不可轉讓)的平臺,所以不容易解決,通過改變瀏覽器。

謝謝您的閱讀!

回答

1

This seems to be a bug in firefox。我猜想沒有簡單的解決方法,除非在使用Firefox時不使用gl.drawElements中的偏移量。 :(這可能只是在POINTS的問題,所以你可以使用四邊形繪製點而不是另一個解決方案。

+0

感謝您的快速回答,並感謝報告錯誤!我找不到任何看起來類似,當我搜索bugzilla之前,我會和我們的客戶討論升級到FF33 +,或者繼續我的解決方法,這可能類似於使用多個頂點緩衝區,這樣可以調用drawArrays而不是drawElements。 – Freya301 2014-10-11 15:12:09