Search code examples
javascriptwebgltextures

Wrong texture setup or crazy texture behaviour

I'm trying to setup texture for a background rectangle (consist of two triangles). Depends on coordinates that I set to textCoord I got random options of drawing, rotating, scaling and so on, but not what I actually need. About this. I need to fill the shape with this picture, that I used as background. Result

This is my shaders:

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

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?

I have created a data structure #Shape, where I store positions and buffers for shaders. This is my js code:

  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

Functions that I use above:

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;
  }
Solution

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

    The vertex coordinates in the range [-1.0, 1.0], can be converted to the texture coordinates in the range [0.0, 1.0], by the formula:

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