WebGL/Javascript：使用多個對象進行對象轉換

Question

我想繪製多個對象，然後通過選擇具有鍵盤索引的特定對象來轉換它們。比方說1-5。

• 我加載了畫布。
• 我初始化了webgl-context。
• 我定義了頂點/片段着色器並將它們綁定到我「使用」的程序（gl.useProgram("program")）。

然後我初始化了一個VertexBuffer（這是一個自己的函數）。在那裏我定義了一個立方體的頂點並綁定了該緩衝區。在同一個函數中，我定義了我的圓錐頂點，並將其綁定到不同的緩衝區。

事情是，我該如何製作不同的對象，以便我可以分別進行轉換？我的意思是着色器從緩衝區獲取數據。但是當我最後一次嘗試時，只繪製了一個對象。

Answer 1

這是幾乎所有的WebGL程序

僞代碼

// At init time 
for each shader program 
    create and compile vertex shader 
    create and compile fragment shader 
    create program and attach shaders 
    link program 
    record locations of attributes and uniforms 

for each model/set of geometry/points/data 
    create buffer(s) for model 
    copy data into buffer(s) for model 

for each texture 
    create texture 
    usually asynchronously load textures 

// at draw time 
clear 

for each model 
    useProgram(program for model) 
    setup attributes for model 
    setup textures for model 
    set uniforms for model 
    draw 

僞代碼這是不超過1個繪製模型1個着色器程序不同。只要做相同的設置。

多一點代碼...

有關設置屬性會看起來像

for each attribute used by model 
    gl.enableVertexAttribArray(attribLocation); 
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferWithDataForAttribute); 
    gl.vertexAttribPointer(attribLocation, ...); 

設置紋理（可能）看起來liek這

for each texture used by model 
    gl.activeTexture(gl.TEXTURE0 + ndx); 
    gl.bindTexture(gl.TEXTURE_2D, texture); 

最後你」 d使用程序

gl.useProgram(programForModel); 
for each uniform 
    gl.uniform???(uniformLocation, uniformValue); 

gl.drawArrays(...) 
or 
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufferOfIndicesForModel); 
gl.drawElements(...);