问webgl tilemap绘制不正确的UV计算

EN

// sample "tile map" texture
vec4 data = vec4(texture(uMAP, vTEXCOORD));
// calculate UV
vec2 uv = (data.xy * 32.0 / uATLAS_SIZE) + (vTEXCOORD * 32.0 / uATLAS_SIZE);
// sample the tileset

const vs = `#version 300 es
precision mediump float;

uniform mat4 uVIEW;
uniform mat4 uPROJECTION;
uniform mat4 uMODEL;

uniform mat4 uTEXMATRIX;

layout(location = 0) in vec4 aPOSITION;
layout(location = 1) in vec4 aTEXCOORD;

out vec2 vTEXCOORD;

void main()
{
    vTEXCOORD = (uTEXMATRIX * aTEXCOORD).xy;
    gl_Position = uPROJECTION * uVIEW * uMODEL * aPOSITION;
}
`;

const fs = `#version 300 es
precision mediump float;
precision mediump usampler2D;

uniform usampler2D uMAP;
uniform sampler2D uATLAS;
uniform vec2 uTILESET_SIZE; // how many tiles across and down the tileset

in vec2 vTEXCOORD;

out vec4 oFRAG;

void main()
{
    // the integer portion of vTEXCOORD is the tilemap coord
    ivec2 mapCoord = ivec2(vTEXCOORD);
    uvec4 data = texelFetch(uMAP, mapCoord, 0);
    
    // the fractional portion of vTEXCOORD is the UV across the tile
    vec2 texcoord = fract(vTEXCOORD);

    vec2 uv = (vec2(data.xy) + texcoord) / uTILESET_SIZE;
    
    // sample the tileset
    oFRAG = texture(uATLAS, uv);
}
`;

const tileWidth = 32;
const tileHeight = 32;
const tilesAcross = 8;
const tilesDown = 4;

const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl2');
if (!gl) alert('need WebGL2');

// compile shaders, link, look up locations
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
// gl.createBuffer, bindBuffer, bufferData
const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
  aPOSITION: {
    numComponents: 2,
    data: [
      0, 0,
      1, 0,
      0, 1,
      
      0, 1,
      1, 0,
      1, 1,
    ],
  },
  aTEXCOORD: {
    numComponents: 2,
    data: [
      0, 0,
      1, 0,
      0, 1,
      
      0, 1,
      1, 0,
      1, 1,
    ],
  },
});

function r(min, max) {
  if (max === undefined) {
    max = min;
    min = 0;
  }
  return min + (max - min) * Math.random();
}

// make some tiles
const ctx = document.createElement('canvas').getContext('2d');
ctx.canvas.width = tileWidth * tilesAcross;
ctx.canvas.height = tileHeight * tilesDown;
ctx.font = "bold 24px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";

const f = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ~';
for (let y = 0; y < tilesDown; ++y) {
  for (let x = 0; x < tilesAcross; ++x) {
    const color = `hsl(${r(360) | 0},${r(50,100)}%,50%)`;
    ctx.fillStyle = color;
    const tx = x * tileWidth;
    const ty = y * tileHeight;
    ctx.fillRect(tx, ty, tileWidth, tileHeight);
    ctx.fillStyle = "#FFF";
    ctx.fillText(f.substr(y * 8 + x, 1), tx + tileWidth * .5, ty + tileHeight * .5); 
  }
}
document.body.appendChild(ctx.canvas);

const tileTexture = twgl.createTexture(gl, {
 src: ctx.canvas,
 minMag: gl.NEAREST,
});

// make a tilemap
const mapWidth = 400;
const mapHeight = 300;
const tilemap = new Uint32Array(mapWidth * mapHeight);
const tilemapU8 = new Uint8Array(tilemap.buffer);
const totalTiles = tilesAcross * tilesDown;
for (let i = 0; i < tilemap.length; ++i) {
  const off = i * 4;
  // mostly tile 9
  const tileId = r(4) < 1 
      ? (r(totalTiles) | 0)
      : 9;
  tilemapU8[off + 0] = tileId % tilesAcross;
  tilemapU8[off + 1] = tileId / tilesAcross | 0;
}

const mapTexture = twgl.createTexture(gl, {
  internalFormat: gl.RGBA8UI,
  src: tilemapU8,
  width: mapWidth,
  minMag: gl.NEAREST,
});

function ease(t) {
  return Math.cos(t) * .5 + .5;
}

function lerp(a, b, t) {
  return a + (b - a) * t;
}

function easeLerp(a, b, t) {
  return lerp(a, b, ease(t));
}

function render(time) {
  time *= 0.001;  // convert to seconds;
  
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  gl.clearColor(0, 1, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
  
  gl.useProgram(programInfo.program);
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);  

  // these mats affects where the quad is drawn
  const projection = m4.ortho(0, gl.canvas.width, gl.canvas.height, 0, -1, 1);
  const view = m4.identity();
  const model =
  m4.scaling([gl.canvas.width, gl.canvas.height, 1]);
 
  const tilesAcrossQuad = 10;//easeLerp(.5, 2, time * 1.1);
  const tilesDownQuad = 5;//easeLerp(.5, 2, time * 1.1);
  
  // scroll position in tiles
  // set this to 0,0 and the top left corner of the quad
  // will be the start of the map.
  const scrollX = time % mapWidth;
  const scrollY = 0;//time % (mapHeight * tileHeight);
  
  const tmat = m4.identity();
  // sets where in the map to look at in tile coordinates
  // so 3,4 means start drawing 3 tiles over, 4 tiles down
  m4.translate(tmat, [scrollX, scrollY, 0], tmat);
  // sets how many tiles to display
  m4.scale(tmat, [tilesAcrossQuad, tilesDownQuad, 1], tmat);

  twgl.setUniforms(programInfo, {
    uPROJECTION: projection,
    uVIEW: view,
    uMODEL: model,
    uTEXMATRIX: tmat,
    uMAP: mapTexture,
    uATLAS: tileTexture,
    uTILESET_SIZE: [tilesAcross, tilesDown],
  });
  
  gl.drawArrays(gl.TRIANGLES, 0, 6);
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

canvas { border: 1px solid black; }

<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>