WebGL은 2D 스프라이트의 텍스처를 렌더링합니다. 나타나지 않음

이전에는이 ​​작은 정사각형을 렌더링하기위한 색상 정점이 있었지만 이제 이미지를 사용하고 싶습니다. 나는 64x128 너비에 누워있는 이미지 스프라이트를 사용하고 있습니다.

오류가 발생하지 않지만 아무것도 표시되지 않습니다. 먼저 셰이더 :

<script id="shader-fs" type="x-shader/x-fragment">
  precision mediump float;

  varying vec2 vTextureCoord;

  uniform sampler2D uSampler;

  void main(void) {
    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
  }
</script>

<script id="shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition;
  attribute vec2 aTextureCoord;

  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

  varying vec2 vTextureCoord;

  void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vTextureCoord = aTextureCoord;
  }
</script>

버퍼의 경우 :

initBuffers: function () {
  this.planePositionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, this.planePositionBuffer);

  var vertices = [
    1.0, 1.0, 0.0,
    -1.0, 1.0, 0.0,
    1.0, -1.0, 0.0,
    -1.0, -1.0, 0.0
  ];

  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  this.planePositionBuffer.itemSize = 3;
  this.planePositionBuffer.numItems = 4;

  this.textureBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer);
  var textureCoords = [
    0.0, 1.0,
    0.0, 0.0,
    1.0, 1.0,
    1.0, 0.0
  ];

  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
  this.textureBuffer.itemSize = 2;
  this.textureBuffer.numItems = 4;
}

셰이더 초기화 :

initShaders: function () {
  this.shader = new Shader("shader");
  var shaderProgram = this.shader.shaderProgram;
  shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
  gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

  shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
  gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);

  shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
  shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
  shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
}

그리고 드로우 콜.

draw: function () {
  this.resize();
  var delta = this.getDeltaTime();

  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  mat4.identity(this.mvMatrix);
  mat4.identity(this.pMatrix);

  mat4.perspective(this.pMatrix, 45 * Math.PI / 180, gl.canvas.clientWidth / gl.canvas.clientHeight, 0.1, 100.0);
  mat4.translate(this.pMatrix, this.pMatrix, [0.0, 0.0, -50.0]);

  var shaderProgram = this.shader.shaderProgram;

  for (var i = 0; i < this.objects.length; i++) {
    this.objects[i].update(delta, this.mvMatrix);
  }

  gl.bindBuffer(gl.ARRAY_BUFFER, this.planePositionBuffer);
  gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, this.planePositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

  gl.bindBuffer(gl.ARRAY_BUFFER, this.textureBuffer);
  gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, this.textureBuffer.itemSize, gl.FLOAT, false, 0, 0);

  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, me.loader.getImage('test'));
  gl.uniform1i(shaderProgram.samplerUniform, 0);

  this.setMatrixUniforms();
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, this.planePositionBuffer.numItems);
  requestAnimationFrame(this.draw.bind(this));
},

나는 안드로이드에서 그리는 opengles에서 찾은 기사에서 텍스처 좌표를 기반으로했습니다. 아이디어는 좌표가 왼쪽 하단-> 왼쪽 상단-> 오른쪽 하단-> 오른쪽 상단의 순서 여야한다는 것입니다.

깨진 상태에 대한 전체 소스 코드는 위의 스 니펫 외에도 여기에서 찾을 수 있습니다. https://github.com/agmcleod/webgl-2dexperiment/tree/13f31f70037fdd4515c1336423337a1e82ab4e89