復制代碼代碼如下: var canvas = document.createElement('canvas'); var _gl = canvas.getContext('experimental-webgl'); var vertices = []; for(var i = 0; i 1000*3; i++){ vertices.push(i * Math.random() ); } var buffer = _gl.createBuffer(); console.profile('buffer_test'); bindBuffer(); console.profileEnd('buffer_test'); function bindBuffer(){ for(var i = 0; i 1000; i++){ _gl.bindBuffer(_gl.ARRAY_BUFFER, buffer); _gl.bufferData(_gl.ARRAY_BUFFER, new Float32Array(vertices), _gl.STATIC_DRAW); } }
先簡單解釋下這個程序，vertices是一個保存頂點的數組，這里是隨機生成了1000個頂點，因為每個頂點都有x,y,z三個坐標，所以需要一個3000大小的數組， _gl.createBuffer命令在顯存中開辟了一塊用來存放頂點數據的緩存，然后使用_gl.bufferData將生成的頂點數據從內存傳輸一份copy到顯存中。 這里假設了一個場景中有1000個1000個頂點的物體，每個頂點是3個32位4個字節的float數據，計算一下就是差不多1000 x 1000 x 12 = 11M的數據，profile一下差不多消耗了15ms的時間，這里可能看看15ms才這么點時間，但是對于一個實時的程序來說，如果要保證30fps的幀率，每一幀所需要的時間要控制在30ms左右，僅僅是做一次數據的傳輸就花去了一半的時間怎么成，要知道大頭應該是GPU中的繪制操作和在CPU中的各種各樣的處理啊，應該吝嗇整個渲染過程中的每一步操作。 所以應該盡量減少這一步的傳輸次數，其實可以做到剛加載的時候就把所有的頂點數據和紋理數據從內存一并傳輸到顯存當中，這就是現在three.js做的，第一次就把需要繪制的物體(Geometry)的頂點數據傳輸到顯存中，并且緩存這個buffer到geometry.__webglVertexBuffer，之后每次繪制的時候都會判斷Geometry的verticesNeedUpdate屬性，如果不需要更新就直接使用現在的緩存,如果看到verticesNeedUpate為true, 就會重新將Geometry中的頂點數據傳輸到geometry.__webglVertexBuffer中，一般對于靜態物體我們是不需要這一步操作的，但是如果遇到頂點會頻繁改變的物體，例如用頂點來做粒子的粒子系統，還有使用了骨骼動畫的Mesh, 這些物體每一幀都會改變自己的頂點，所以需要每一幀都需要將其verticesNeedUpdate屬性設為true來告訴renderer我需要重新傳輸數據了！ 其實在WebGL程序中，更多的會在vertex shader中去改變頂點的位置來完成粒子效果和骨骼動畫，盡管如果放在cpu端計算更容易擴展，但是因為javascript的計算能力的限制，更多的還是會把這些計算量大的操作放到gpu端操作。 這種情況下并不需要重新傳輸一次頂點數據，所以上面那種case在實際程序中其實用到的不多，更多的還是會去更新紋理和材質的緩存。 上面那個case主要描述的是一個傳輸頂點數據的場景，除了頂點數據，還有一個大頭就是紋理，一張1024*1024大小的R8G8B8A8格式的紋理所要占用的內存大小也要高達4M，于是看下面這個例子
復制代碼代碼如下: var canvas = document.createElement('canvas'); var _gl = canvas.getContext('experimental-webgl'); var texture = _gl.createTexture(); var img = new Image; img.onload = function(){ console.profile('texture test'); bindTexture(); console.profileEnd('texture test'); } img.src = 'test_tex.jpg'; function bindTexture(){ _gl.bindTexture(_gl.TEXTURE_2D, texture); _gl.texImage2D(_gl.TEXTURE_2D, 0, _gl.RGBA, _gl.RGBA, _gl.UNSIGNED_BYTE, img); }
