如何在運行時在WebGl中繪製各種不同大小的形狀？

Question

我在閱讀here。 initBuffers函數用於存儲我們需要繪製到緩衝區中的對象的頂點。

var triangleVertexPositionBuffer; 
var triangleVertexColorBuffer; 
function initBuffers() { 
    triangleVertexPositionBuffer = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); 
    var vertices = [ 
     0.0, 1.0, 0.0, 
     -1.0, -1.0, 0.0, 
     1.0, -1.0, 0.0 
    ]; 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 
    triangleVertexPositionBuffer.itemSize = 3; 
    triangleVertexPositionBuffer.numItems = 3; 

    triangleVertexColorBuffer = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer); 
    var colors = [ 
     1.0, 0.0, 0.0, 1.0, 
     0.0, 1.0, 0.0, 1.0, 
     0.0, 0.0, 1.0, 1.0, 
    ]; 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); 
    triangleVertexColorBuffer.itemSize = 4; 
    triangleVertexColorBuffer.numItems = 3; 
} 

現在這是一種爲三角形定義的「形狀」。現在，如果我想要所有類型和大小的形狀我將不得不爲每個形狀保留像triangleVertexPositionBuffer緩衝區，對吧？它必須初始化正確？

是否每個新形狀都有新的緩衝區對象？

我打算創建一個系統，其中可以在運行時通過使用按鈕創建各種形狀。 那麼是否有解決這個問題？ 如何在運行期間創建新的緩衝區？有沒有共同的現有解決方案？

如果我創建一個緩衝區對象數組，它會妨礙性能嗎？

Answer 1

WebGl不關心你是否每幀調用initBuffers。那麼，表現可能。

由於javascript是解釋型語言，因此運行時與編譯時間的概念並不存在。然而，一個先進的事情是，webgl所需的着色器可以從運行時生成的「字面」字符串以及外部文件和html元素生成。

有webgl-infrastructures可用，例如， three.js，但我認爲Javascript本身就是答案。

編輯：關於你在評論中的額外問題。 OpenGL和WebGL的工作原理基本上是如何描述的，但使用的矩陣比給對象提供偏移更靈活。還有'索引緩衝區'，幫助共享三角形之間的頂點。

CubeCorners = [0,0,0, 0,0,1, 0,1,0, 0,1,1, 1,0,0, 1,0,1, 1,1,0, 1,1,1 ]; 
// There are 8 corners in a cube 
//    0----1 <-- vertices (aka corners, with x=0) 
//    /| /| 
//   4-+--5 | 
//   | 2--|-3 
//   |/ |/ 
//   6----7 
Triangles = [0,1,2, 1,3,2, 6,4,2, 2,4,0, 5,4,7, 4,6,7, ... + 6 other triangles ]; 
// 
TransScaleMatrix = [X,0,0,0, 0,Y,0,0, 0,0,Z,0, ox,oy,oz,1]; 
// scales the object and sets an internal origin (around which object is rotated) 
RotMatrix = [rx,ry,rz, 0, ux,uy,yz,0, tx,ty,tz, 0, Ox,Oy,Oz,1]; 
// aligns the objects orthogonal up,right,toward vectors to r,u,t, (i.e. rotates it) 
// and translates it to new origin O. 
CameraOrientationMatrix = [ ... ... ]; 
// sets cameras lookat, up and right vector + position 
PerspectiveMatrix = [ ... ...]; 
// transforms viewing frustums 6 planes left,right,top,bottom,near and far planes 
// to unit cube. (objects outside this cube are clipped away) 

這些數組通常呈現一個層次場景，其中頂點和對象被重用。上可以地方立方體不僅在兩個不同的位置，但不同的規模和不同的方向。然後，一旦在「世界座標」中對場景進行建模，就會將攝像機放置在某個位置和某個方向，並應用透視矩陣將座標轉換爲模擬屏幕座標x，y和深度z的「剪輯空間」。

這些矩陣的美妙之處在於人們可以將其中每一個預乘以一個單一的矩陣，執行所提到的一切。或者，我們可以將這個操作鏈分解成儘可能多的操作，這些操作可以在着色器中實時計算，也可以在頂點緩衝區中預先計算。人們應該仔細考慮重用對象的最佳平衡，因爲渲染瓶頸通常是drawElements/drawArray -calls和狀態更改（gl.useProgram）的數量，而不是每個對象的頂點數量。