在WebGL中渲染缓冲区副本时是否可以指定颜色？

debugcn 发表于 Dev

尼古拉斯·希尔

这是我的片段着色器：

precision mediump float;

varying vec4 vColor;

void main(void) {
    gl_FragColor = vColor;
}

这是我的代码，用于渲染与圆关联的缓冲区（每个顶点的顶点和颜色）：

gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_FAN, 0, triangleVertexPositionBuffer.numItems);

是否有可能以某种方式渲染圆形的多个实例，从而每次都指定颜色？这样做是不好的做法吗？我是否应该制作多个圆圈，每个圆圈都有一个预先指定的颜色？

man

为什么不只将片段着色器更改为此呢？

precision mediump float;

uniform vec4 uColor;

void main(void) {
    gl_FragColor = uColor;
}

然后您可以设置颜色以绘制每个圆

gl.uniform4fv(program.uniforms['uColor'], colorOfCircleArrayOf4Floats);

这是一个例子

var countElem = document.getElementById("t");
var canvas = document.getElementById("c");
var gl = canvas.getContext("webgl",
                           {preserveDrawingBuffer:true});
var program = twgl.createProgramFromScripts(
    gl, ["vshader", "fshader"], ["a_position"]);
gl.useProgram(program);

var colorLoc = gl.getUniformLocation(program, "u_color");
var matrixLoc = gl.getUniformLocation(program, "u_matrix");

// make circle triangles
var numDivisions = 36;
var verts = [];
for (var ii = 0; ii <= numDivisions; ++ii) {
    var a0 = (ii + 0) * Math.PI * 2 / numDivisions;
    var a1 = (ii + 1) * Math.PI * 2 / numDivisions;
    verts.push(Math.sin(a0), Math.cos(a0));
}

var vertBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

// make matrix to scale our unit circle.
var aspect = canvas.width / canvas.height;
var scale = 0.25;
var mat = [
    scale, 0, 0, 0,
    0, aspect * scale, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1];
    
function draw() {
   // set translation
   mat[12] = Math.random() * 2 - 1;
   mat[13] = Math.random() * 2 - 1;
   gl.uniformMatrix4fv(matrixLoc, false, mat);
    
   // set color
   gl.uniform4f(colorLoc, Math.random(), Math.random(), Math.random(), 1);

   // draw circle
   gl.drawArrays(gl.TRIANGLE_FAN, 0, numDivisions + 1);
   requestAnimationFrame(draw);
}
draw();

<script src="https://twgljs.org/dist/3.x/twgl.min.js"></script>
<script id="vshader" type="whatever">
    attribute vec4 a_position;
    uniform mat4 u_matrix;
    void main() {
      gl_Position = u_matrix * a_position;
    }    
</script>
<script id="fshader" type="whatever">
precision mediump float;
uniform vec4 u_color;
void main() {
  gl_FragColor = u_color;
}
</script>
<canvas id="c"></canvas>