javascript - 错误的纹理设置或疯狂的纹理行为

Question

我正在尝试为背景矩形(由两个三 Angular 形组成)设置纹理。 取决于我设置为 textCoord 的坐标，我得到了绘图、旋转、缩放等随机选项，但不是我真正需要的。对这个。我需要用我用作背景的这张图片填充形状。

这是我的着色器:

const vsBSource = `
  attribute vec2 aposition;
  attribute vec2 atexCoord;
  varying vec2 vtextCoord;
  void main() {
    gl_Position = vec4(aposition,0,1);
    vtextCoord = atexCoord;
  }
`;
const fsBSource = `
  precision mediump float;

  varying vec2 vtextCoord;
  uniform sampler2D uimage;

  void main() {
    gl_FragColor = texture2D(uimage, vtextCoord);
  }
`;

问题是如何为纹理设置正确的坐标？ webGL 中的裁剪空间坐标是 [x,y] | -1 < x < 1，-1 < y < 1，但在纹理坐标中是 [x,y] | 0 < x < 1, 0 < y < 1。 也许应该是一些明确的对话？

我创建了一个数据结构#Shape，我在其中存储着色器的位置和缓冲区。 这是我的 js 代码:

  var background = new Shape(-1, -1, 2.0)
  background.positionBuffer = gl.createBuffer()
  gl.bindBuffer(gl.ARRAY_BUFFER, background.positionBuffer)
  setBackgroundVerticies(background.origin.x,background.origin.y, 2.0)

  let url = "./res/background.jpg"
  background.texture = loadImageAndCreateTextureInfo(url)
  background.texture.positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, background.texture.positionBuffer)

  setBackgroundVerticies(background.origin.x,background.origin.y, 2.0)

  glManager.background = background

我在上面使用的函数:

function setBackgroundVerticies(_x, _y, _step) {
  var gl = glManager.gl
  var step = _step
  var x = _x
  var y = _y

  var positions = []
  positions = unitBlock(x ,y, step)

  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW)
}

function unitBlock(x, y, step) {
  var x1 = x;
  var x2 = x1 + step;
  let y1 = y;
  let y2 = y1 + step;

  return [
      x1, y1,
      x1, y2,
      x2, y1,

      x1, y2,
      x2, y2,
      x2, y1,
  ]
}


function loadImageAndCreateTextureInfo(url) {
    var gl = glManager.gl
    var tex = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, tex);

    // Fill the texture with a 1x1 blue pixel.
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
                  new Uint8Array([0, 0, 255, 255]));

    // Because in webgl by design texture loads upside down i need to flip it.
    // For flipping im usingg this func gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    // https://www.khronos.org/webgl/public-mailing-list/public_webgl/1212/msg00009.php
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

    var textureInfo = {
      width: 1,   // we don't know the size until it loads
      height: 1,
      texture: tex,
    };

    var img = new Image();
    img.addEventListener('load', function() {
      textureInfo.width = img.width;
      textureInfo.height = img.height;

      gl.bindTexture(gl.TEXTURE_2D, textureInfo.texture);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);

    });
    img.crossOrigin = "null";
    img.src = url;

    return textureInfo;
  }

Answer 1

Problem is how to set the right coordinates for texture? Clipspace coord in webGL is [x,y] | -1 < x < 1, -1 < y < 1, but in texture coord is [x,y] | 0 < x < 1, 0 < y < 1. Maybe it should be some explicit conversation?

[-1.0, 1.0]范围内的顶点坐标可以通过公式转换为[0.0, 1.0]范围内的纹理坐标:

u = x*0.5 + 0.5
v = y*0.5 + 0.5