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

Question

只是尝试做一些基本的 webgl，其中我有两个“游戏对象”。一个简单的 Sprite 和一个矩形。基本上我想做的是绘制 Sprite 图像，然后绘制具有指定颜色的矩形。

两个对象都有一个 pos 向量以及宽度和高度。 Sprite 有一个图像对象，矩形有一个 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 宽度与图像尺寸计算纹理坐标。并绑定(bind)纹理。

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

现在，在我的列表中，图像 Sprite 是第一个，矩形是第二个，首先针对图像调用bindTexture。这会在绘图调用中保留下来。 OpenGL 是一个状态机，因此图像首先绘制，保持绑定(bind)状态，然后再次绘制矩形坐标。它只使用我在矩形中保存的绿色。

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

这是我的着色器:

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

当您只想使用颜色绘制时，绑定(bind) 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 =颜色;

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