Webgl рендеринг плиточного слоя не работает * Typescript - PullRequest
Новая
       71

Webgl рендеринг плиточного слоя не работает * Typescript

0 голосов
/ 07 апреля 2020

Это задание, которое требует спрайта и рендеринга карты. Оба должны работать одинаково, но карта не работает. Я пытался позволить ему нарисовать случайный посох на холсте, но независимо от того, как я изменяю атрибут, ничего не рисуется.

Вот код для рендеринга одной ячейки слоя листов. Я думаю, что ошибка, скорее всего, происходит здесь. 

private renderTile(webGL: WebGLRenderingContext,
  viewport: Viewport,
  tileSet: TileSet, tile: number) {

  let canvasWidth: number = webGL.canvas.width;
  let canvasHeight: number = webGL.canvas.height;

  let texture: WebGLGameTexture = tileSet.getTexture();

  let spriteWidth: number = tileSet.getTileWidth(); //canvasWidth/tiledLayer.getMinimumVisibleColumn(0);
  let spriteHeight: number = tileSet.getTileHeight(); //canvasWidth/tiledLayer.getMinimumVisibleRow(0);

  let spriteLeft: number = tile % tileSet.getColumns();
  let spriteTop: number = Math.floor(tile / tileSet.getColumns());

  let spriteXInPixels: number = (spriteLeft * tileSet.getTileWidth() + tileSet.getTileSpacing() * (spriteLeft + 1));
  let spriteYInPixels: number = (spriteTop * tileSet.getTileHeight() + tileSet.getTileSpacing() * (spriteTop + 1));

  let spriteXTranslate: number = (spriteXInPixels - (canvasWidth / 2)) / (canvasWidth / 2);
  let spriteYTranslate: number = (spriteYInPixels - (canvasHeight / 2)) / (canvasHeight / 2);

  this.meshTranslate.setX(spriteXTranslate);
  this.meshTranslate.setY(-spriteYTranslate);

  let defaultWidth: number = canvasWidth;
  let defaultHeight: number = canvasHeight;
  let scaleX: number = 2 * spriteWidth / defaultWidth;
  let scaleY: number = 2 * spriteHeight / defaultHeight;
  this.meshScale.set(scaleX, scaleY, 0.0, 0.0); //1.0, 1.0);

  MathUtilities.identity(this.meshTransform);
  MathUtilities.model(this.meshTransform, this.meshTranslate, this.meshRotate, this.meshScale);

  let texCoordFactorX: number = spriteWidth / texture.width;
  let texCoordFactorY: number = spriteHeight / texture.height;

  let texCoordShiftX: number = (spriteLeft * tileSet.getTileWidth() + tileSet.getTileSpacing() * (spriteLeft + 1)) / texture.width; //spriteLeft/texture.width;
  let texCoordShiftY: number = (spriteTop * tileSet.getTileHeight() + tileSet.getTileSpacing() * (spriteTop + 1)) / texture.height; //spriteTop/texture.height;

  webGL.bindBuffer(webGL.ARRAY_BUFFER, this.vertexDataBuffer);
  webGL.bindTexture(webGL.TEXTURE_2D, texture.webGLTexture);

  let a_PositionLocation: GLuint = this.webGLAttributeLocations.get(this.A_POSITION);
  webGL.vertexAttribPointer(a_PositionLocation, this.FLOATS_PER_TEXTURE_COORDINATE, webGL.FLOAT, false, this.TOTAL_BYTES, this.VERTEX_POSITION_OFFSET);
  webGL.enableVertexAttribArray(a_PositionLocation);
  let a_TexCoordLocation: GLuint = this.webGLAttributeLocations.get(this.A_TEX_COORD);
  webGL.vertexAttribPointer(a_TexCoordLocation, this.FLOATS_PER_TEXTURE_COORDINATE, webGL.FLOAT, false, this.TOTAL_BYTES, this.TEXTURE_COORDINATE_OFFSET);
  webGL.enableVertexAttribArray(a_TexCoordLocation);

  let u_MeshTransformLocation: WebGLUniformLocation = this.webGLUniformLocations.get(this.U_MESH_TRANSFORM);
  webGL.uniformMatrix4fv(u_MeshTransformLocation, false, this.meshTransform.getData());
  let u_SamplerLocation: WebGLUniformLocation = this.webGLUniformLocations.get(this.U_SAMPLER);
  webGL.uniform1i(u_SamplerLocation, texture.webGLTextureId);
  let u_TexCoordFactorLocation: WebGLUniformLocation = this.webGLUniformLocations.get(this.U_TEX_COORD_FACTOR);
  webGL.uniform2f(u_TexCoordFactorLocation, texCoordFactorX, texCoordFactorY);
  let u_TexCoordShiftLocation: WebGLUniformLocation = this.webGLUniformLocations.get(this.U_TEX_COORD_SHIFT);
  webGL.uniform2f(u_TexCoordShiftLocation, texCoordShiftX, texCoordShiftY);

  webGL.drawArrays(webGL.TRIANGLE_STRIP, this.INDEX_OF_FIRST_VERTEX, this.NUM_VERTICES);
}
...