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

Question

只是尝试做一些基本的 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));
}

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

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

然后，如果对象没有颜色，我将统一颜色设置为白色。如果对象确实有颜色，它会从那里设置制服。

现在，在我的列表中，图像精灵是第一位的，矩形是第二位的，首先针对图像调用 bindTexture。这一直存在于draw call。 OpenGL是一个状态机，所以图像首先绘制，保持绑定，然后再次绘制矩形坐标。它只是使用我保存在矩形中的绿色。

所以我的主要问题是：有没有适当的方法来清除这个？或者有没有办法只在某些情况下针对顶点绘制颜色，而在另一种情况下绘制纹理？ p>

这是我的着色器：

<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>

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

Answer 1

使用单个着色器绘制纹理或颜色的典型方法是将不使用的着色器设置为白色并相乘或黑色并相加。我更喜欢白色和乘法，这是你已经拥有的。

所以，当您只想使用纹理进行绘制时

var whiteColor = [1, 1, 1, 1];

gl.bindTexture(gl.TEXTURE_2D, textureWithImageInIt);
gl.uniform4fv(uColorLocation, whiteColor);

当您只想使用颜色进行绘制时，请绑定 1x1 像素的白色纹理

在初始化时

var white1PixelTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, white1PixelTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
              new Uint8Array([255,255,255,255]));

在绘制时

gl.bindTexture(gl.TEXTURE_2D, white1PixelTexture);
gl.uniform4fv(uColorLocation, someColor);  

这是因为white = 1 和1 * something = something 所以texture * 1 = texture, 1 * color = color;

它还可以让您为纹理着色以获得简单的效果。将颜色设置为红色[1, 0.4, 0.4, 1]，您将获得红色版本的纹理。随着时间的推移调整 alpha [1, 0, 0, lerpColorOverTime]，你可以淡出你的纹理。

Answer 2

是的，有一个正确的方法，当你完成后解开纹理：

 gl.activeTexture(gl.TEXTURE0);
 gl.bindTexture(gl.TEXTURE_2D, null);