Question

我正在尝试为背景矩形（由两个三角形组成）设置纹理。取决于我设置为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中的clipspace coord是[x，y] | -1＆lt; x＆lt; 1，-1＆lt; y＆lt; 1，但在纹理坐标是[x，y] | 0＆lt; x＆lt; 1,0 <＆lt; y＆lt; 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

问题是如何为纹理设置正确的坐标？ webGL中的clipspace coord是[x，y] | -1＆lt; x＆lt; 1，-1＆lt; y＆lt; 1，但在纹理坐标是[x，y] | 0＆lt; x＆lt; 1,0 <＆lt; y＆lt;也许它应该是一些明确的对话？

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

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

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

1 个答案: