ПРЕДУПРЕЖДЕНИЕ О РЕНДЕРЕ: текстура, привязанная к текстурному блоку 0, не рендерится. Это может быть не степень двойки или несовместимая фильтрация текстур (возможно)? - PullRequest
Новая
       29

ПРЕДУПРЕЖДЕНИЕ О РЕНДЕРЕ: текстура, привязанная к текстурному блоку 0, не рендерится. Это может быть не степень двойки или несовместимая фильтрация текстур (возможно)?

0 голосов
/ 16 июня 2020

Я пытаюсь визуализировать 2d-изображение в WebGL без анимации. У меня проблема. Поскольку я передал правильные данные изображения. Вот код. Что мне не хватает? Или как визуализировать текст или изображение.

Без матрицы мы не можем визуализировать изображение или текст? Когда я говорю изображение или текст, это означает, что это просто 2d, а не 3d. 

const vsSource = `
attribute vec4 a_position;
attribute vec2 a_texcoord;

uniform mat4 u_matrix;

varying vec2 v_texcoord;

void main() {
  gl_Position = u_matrix * a_position;
  v_texcoord = a_texcoord;
}
`;

// Fragment shader program

const fsSource = `
precision mediump float;

varying vec2 v_texcoord;

uniform sampler2D u_texture;

void main() {
  gl_FragColor = texture2D(u_texture, v_texcoord);
}
`;


function loadTexture(gl, url) {
  var texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);


  var textureInfo = {
    width: 1, // we don't know the size until it loads
    height: 1,
    texture: texture,
  };
  var img = new Image();
  img.src = url;
  //img.crossOrigin="*"
  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);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    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);
  });

  return textureInfo;
}


drawImage(texture);

function drawImage(tex) {
  // gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

  gl.clear(gl.COLOR_BUFFER_BIT);

  gl.clearColor(1, 1, 0.0, 1.0); // Clear to black, fully opaque
  //  gl.clearDepth(1.0);                 // Clear everything
  // gl.enable(gl.DEPTH_TEST);           // Enable depth testing
  //  gl.depthFunc(gl.LEQUAL);  
  var positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  // Put a unit quad in the buffer
  var positions = [
    0, 0,
    0, 1,
    1, 0,
    1, 0,
    0, 1,
    1, 1,
  ];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

  var texcoordBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);

  // Put texcoords in the buffer
  var texcoords = [
    0, 0,
    0, 1,
    1, 0,
    1, 0,
    0, 1,
    1, 1,
  ];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texcoords), gl.STATIC_DRAW);

  gl.bindTexture(gl.TEXTURE_2D, tex.texture);

  // Tell WebGL to use our shader program pair
  gl.useProgram(programInfo.program);

  // Setup the attributes to pull data from our buffers
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);

  gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, 2, gl.FLOAT, false, 0, 0);
  gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);

  gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord);
  gl.vertexAttribPointer(programInfo.attribLocations.textureCoord, 2, gl.FLOAT, false, 0, 0);

  gl.uniform1i(programInfo.uniformLocations.textureLocation, 0);

  >
  Here getting issue


  gl.drawArrays(gl.TRIANGLES, 0, 6);
}

1 Ответ

0 голосов
/ 16 июня 2020

Ваш код никогда не создает текстуры. Он никогда не вызывает loadImage. Если бы он вызвал loadImage, код не отрисовывается после загрузки изображения.

Я бы посоветовал вам вызвать loadImage и внутри обработчика load вы вызываете drawImage.

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

...