的WebGL：應用多顏色着色器4個三角形

新的WebGL在這裏。我使用WebGL繪製了幾個三角形，看起來像矩形。我聲明瞭顏色作爲變量，並想知道如何申請多色效果不僅僅是最後繪製的兩個三角形？理想情況下，我希望所有人都有這種彩虹效果。的WebGL：應用多顏色着色器4個三角形

下面是關於頂點位置和顏色

var gl; 
var vertices_and_colors = new Float32Array(6*3*4); 


    window.onload = function init() 
{ 

var canvas = document.getElementById("gl-canvas"); 

gl = WebGLUtils.setupWebGL(canvas); 
if (!gl) { alert("WebGL isn't available"); } 


var vertices_and_colors = [ 
          vec3(-0.5, -.55, 0.0), //left triangles, 1 
          vec3(-0.5, 0.25, 0.0), 
          vec3(-0.40, -0.55, 0.0), 

          vec3(-0.40, 0.25, 0.0), //left 2 
          vec3(-0.40, -0.55, 0.0), 
          vec3(-0.5, 0.25, 0.0), 
          vec3(-0.15, 0.25, 0.0), //l3 
          vec3(-0.5, 0.25, 0.0), 
          vec3(-0.15, 0.15, 0.0), 
          vec3(-0.5, 0.15, 0.0), //l4 
          vec3(-0.15, 0.15, 0.0), 
          vec3(-0.5, 0.25, 0.0), 



          vec3(0.35, -0.55, 0.0), //right triangle 1 
          vec3(0.35, 0.15, 0.0), 
          vec3(0.25, -0.55, 0.0), 
          vec3(0.25, 0.15, 0.0), 
          vec3(0.25, -0.55, 0.0), 
          vec3(0.35, 0.15, 0.0), 

          vec3(0.10, 0.25, 0.0), //top of 't' (rainbow) 
          vec3(0.5, 0.25, 0.0), 
          vec3(0.10, 0.15, 0.0), 
          vec3(0.5, 0.15, 0.0), 
          vec3(0.10, 0.15, 0.0), 
          vec3(0.5, 0.25, 0.0), 

          vec3(1.0, 0.0, 0.0), // r 
          vec3(0.0, 1.0, 0.0), // g 
          vec3(0.0, 0.0, 1.0), // b 
          vec3(0.0, 1.0, 1.0), // c 
          vec3(1.0, 0.0, 1.0), // m 
          vec3(1.0, 1.0, 0.0), // y 


          ]; 

gl.viewport(0, 0, canvas.width, canvas.height); 
gl.clearColor(0.8, 0.8, 0.8, 1.0); 

    var program = initShaders(gl, "vertex-shader", "fragment-shader"); 
    gl.useProgram(program); 

    var bufferId = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferId); 

     gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices_and_colors), gl.STATIC_DRAW); 


gl.vertexAttribPointer(vPosition, 3, gl.FLOAT, false, 0, 0); 

gl.enableVertexAttribArray(vPosition); 


var vColor = gl.getAttribLocation(program, "vColor"); 
    gl.vertexAttribPointer(vColor, 3, gl.FLOAT, false, 0, 6*3*4); //6 
gl.enableVertexAttribArray(vColor); 

render(); 
}; 

function render() { 
    gl.clear(gl.COLOR_BUFFER_BIT); 
    // draw the data as an array of points 
    gl.drawArrays(gl.TRIANGLES, 0, 24); //30 
    //gl.drawArrays(gl.TRIANGLE.STRIP, 21, 30); 
}

來源

2015-09-11 user3295674

你可以用你的片段着色器對於這一點，使'gl_FragColor' X和Y座標的函數。儘管如此，您仍然必須爲左側的形狀編寫其他着色器。 – Atrahasis

目前還不清楚在所有你的代碼是做的代碼。你有18個職位，但只有12個頂點顏色和你打電話gl.drawArrays 24？

你需要相同數量的頂點顏色的位置，以便要麼都是18歲或兩個12。然後，你需要調用gl.drawArrays了正確的號碼。無論是18或12

而且我建議你使用頂點顏色和位置單獨緩衝區。它只是使事情變得更容易，但既然你結合他們的偏移你的顏色是錯誤的

gl.vertexAttribPointer(vColor, 3, gl.FLOAT, false, 0, 6*3*4);

你有18個職位，每3個值，每4個字節所以這是18 * 3 * 4。

如果您使用位置和頂點顏色不同的緩衝區，那麼你就不必進行計算。少了一件錯誤的事情。

You also might find these articles helpful

來源

2015-09-11 21:23:51 gman

的WebGL：應用多顏色着色器4個三角形

回答

相關問題