复制代码代码如下: 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); }
