Как нарисовать две текстуры с альфа в webgl - PullRequest
Новая
       49

Как нарисовать две текстуры с альфа в webgl

0 голосов
/ 08 марта 2020

Я хочу нарисовать текстуру и нарисовать другую с прозрачным фоном сверху. Таким образом, прозрачные части показывают первую текстуру.

Я называю gl.clear один раз, а затем gl.drawElements для каждой текстуры при рендеринге. Но вывод, прозрачная текстура с прозрачными частями черного цвета, который является чистым цветом. Как будто первая текстура никогда не рисовалась, а вторая текстура рисуется только с прозрачным фоном. Как это исправить? 

  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
  gl.enable(gl.BLEND);
  gl.enable(gl.DEPTH_TEST);


gl.clear()

for each texture:

  gl.drawElements();

Другая проблема рендеринга для текстур A и BI вызывает gl.drawElements для текстуры A, а затем B. Но A выходит на верх B при выводе.

Так что проблема была в gl.enable (DEPTH_TEST);

Я удалил ее, и теперь она работает нормально. Интересно почему.

1 Ответ

0 голосов
/ 08 марта 2020

Итак, проблема была gl.enable(DEPTH_TEST); Я удалил его, и теперь он работает нормально. Интересно, почему.

Я бы из этого заключил, что вы рисуете оба текстурированных объекта на одинаковом расстоянии от камеры. Значение по умолчанию для glDepthFunc равно GL_LESS, поэтому фрагмент будет проходить проверку глубины только в том случае, если он имеет более низкое значение окна z z ie, чем то, что уже находится в буфере глубины. Когда вы рисуете первый текстурированный квад, буфер глубины будет установлен на эти значения, и вам нужно переместить второй объект ближе, чтобы он прошел тест глубины, или установите glDepthFunc в GL_LEQUEAL, что означает меньше или равно . Однако, поскольку в вашем сценарии тест глубины вообще не требуется, его отключение в любом случае будет наиболее эффективным с точки зрения производительности.

...