Как правильно включить WebGL DEPTH_TEST? - PullRequest
Новая
       12

Как правильно включить WebGL DEPTH_TEST?

1 голос
/ 02 декабря 2011

Я не могу понять, почему желтый квадрат (z = 0) появляется перед красным квадратом (z = 0.5). Как будто я не включил DEPTH_TEST, но я определенно включил. Если блоки с надписью «нарисовать красный» и «нарисовать желтый» поменялись местами, красный квадрат будет показан впереди, как и должно быть. Но я не понимаю, зачем это нужно, если включен DEPTH_TEST. Вот соответствующий код: 

  ...
  gl.enable(gl.DEPTH_TEST);
  gl.depthFunc(gl.LEQUAL);
  ...
  vertices = [  // red square
                0.0,  0.0,  0.5,    1.0, 0.2, 0.1, 1.0,
               -1.0,  0.0,  0.5,    1.0, 0.2, 0.1, 1.0,
                0.0, -1.0,  0.5,    1.0, 0.2, 0.1, 1.0,
               -1.0, -1.0,  0.5,    1.0, 0.2, 0.1, 1.0,

                // yellow square
                0.5,  0.5,  0.0,    1.0, 0.9, 0.2, 1.0,
               -0.5,  0.5,  0.0,    1.0, 0.9, 0.2, 1.0,
                0.5, -0.5,  0.0,    1.0, 0.9, 0.2, 1.0,
               -0.5, -0.5,  0.0,    1.0, 0.9, 0.2, 1.0 ];

  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
  gl.bufferData(
      gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  // draw red
  gl.vertexAttribPointer(
      vertexPositionAttribute, 3, gl.FLOAT, false, 28, 0);
  gl.vertexAttribPointer(
      vertexColorAttribute, 4, gl.FLOAT, false, 28, 12);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

  // draw yellow
  gl.vertexAttribPointer(
      vertexPositionAttribute, 3, gl.FLOAT, false, 28, 112);
  gl.vertexAttribPointer(
      vertexColorAttribute, 4, gl.FLOAT, false, 28, 124);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

1 Ответ

3 голосов
/ 07 декабря 2011

К вашему сведению, моя матрица была плохой. Я смотрел на книгу, у которой точка обзора смотрела в противоположном направлении по оси z и неправильно проецировала часть вычисления. (Спасибо Chiguireitor за помощь в этом.)

...