WebGL绘制矩形&图像到一个着色器

只是想做一些基本的webgl，我有两个"游戏对象"。一个简单的精灵和一个矩形。基本上，我想做的是绘制精灵图像，然后绘制一个指定颜色的矩形。

两个对象都有一个pos矢量，宽度和高度。sprite有一个图像对象，rect有一个rgb值为0到1的颜色对象。

对不起所有的代码，但这是我的绘图方法：

draw: function () {
  this.resize();
  var delta = this.getDeltaTime();
  gl.viewport(0, 0, gl.canvas.clientWidth, gl.canvas.clientHeight);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  var shaderProgram = this.shader.shaderProgram;
  var matrixLocation = gl.getUniformLocation(shaderProgram, "uMatrix");
  for (var i = 0; i < this.objects.length; i++) {
    var planePositionBuffer = gl.createBuffer();
    mat3.identity(this.mvMatrix);
    gl.bindBuffer(gl.ARRAY_BUFFER, planePositionBuffer);
    var object = this.objects[i];
    var x1 = object.pos.x;
    var y1 = object.pos.y;
    var x2 = object.pos.x + object.width;
    var y2 = object.pos.y + object.height;
    var vertices = [
      x1, y1,
      x2, y1,
      x1, y2,
      x1, y2,
      x2, y1,
      x2, y2
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
    var textureBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, textureBuffer);
    var textureCoords;
    if (object.image) {
      var dw = (object.width / object.image.image.width);
      var dh = 1.0 - (object.height / object.image.image.height);
      textureCoords = [
        0.0, 1.0,
        dw, 1.0,
        0.0, dh,
        0.0, dh,
        dw, 1.0,
        dw, dh
      ];
      gl.activeTexture(gl.TEXTURE0);
      gl.bindTexture(gl.TEXTURE_2D, this.objects[i].image);
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
      gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
    }

    mat3.multiply(this.mvMatrix, this.mvMatrix, [
      2 / gl.canvas.clientWidth, 0, 0,
      0, -2 / gl.canvas.clientHeight, 0,
      -1, 1, 1
    ]);
    gl.uniformMatrix3fv(matrixLocation, false, this.mvMatrix);
    gl.uniform1i(shaderProgram.samplerUniform, 0);
    var colorLocation = gl.getUniformLocation(shaderProgram, "uColor");
    if (object.color) {
      var color = object.color;
      gl.uniform4f(colorLocation, color.r, color.g, color.b, 1);
    }
    else {
      gl.uniform4f(colorLocation, 1.0, 1.0, 1.0, 1);
    }
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 6);
  }
  requestAnimationFrame(this.draw.bind(this));
}

基本上，我正在做的是把位置坐标放在一起，以便在哪里绘制图像/矩形。

然后我检查对象是否有图像。如果是，则根据其精灵宽度与图像尺寸计算纹理坐标。并绑定纹理。

然后在下面，如果对象没有颜色，我将统一颜色设置为白色。如果对象确实有一种颜色，则会根据该颜色设置统一。

现在，在我的列表中，图像sprite是第一个，rect是第二个，bindTexture首先针对图像调用。这会一直持续到抽签。OpenGL是一个状态机，因此图像首先绘制，保持绑定，然后再次绘制直角坐标。它只是使用了我保存在矩形中的绿色。

所以我在这里的主要问题是：有合适的方法来解决这个问题吗或者有没有一种方法只在某些情况下针对顶点绘制颜色，而在另一种情况下针对纹理绘制颜色？

这是我的着色器：

<script id="shader-fs" type="x-shader/x-fragment">
  precision mediump float;
  varying vec2 vTextureCoord;
  uniform sampler2D uSampler;
  uniform vec4 uColor;
  void main(void) {
    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)) * uColor;
  }
</script>
<script id="shader-vs" type="x-shader/x-vertex">
  attribute vec2 aVertexPosition;
  attribute vec2 aTextureCoord;
  uniform mat3 uMatrix;
  varying vec2 vTextureCoord;
  void main() {
    gl_Position = vec4((uMatrix * vec3(aVertexPosition, 1)).xy, 0, 1);
    vTextureCoord = aTextureCoord;
  }
</script>

很简单。使用统一矩阵使代码中的屏幕坐标超过剪辑坐标。