Блог

Главная - Вопросы по программированию - Смешивание предыдущего кадра при рендеринге в WebGL

Смешивание предыдущего кадра при рендеринге в WebGL

#opengl-es #canvas #webgl

#opengl-es #холст #webgl

Вопрос:

Используя обычный 2d-холст, можно получить несколько интересных эффектов, заполнив весь холст прозрачной версией цвета фона при рисовании другой графики. Что-то вроде: 

 ctx.fillStyle = "rgba(0,0,0,0.1)"; 
ctx.fillRect(0, 0, canvas.width, canvas.height);

Как можно получить аналогичный эффект ореола / наложения с использованием WebGL?

Я попытался установить glClearColor со значением transparent, но это не сработало. Возможно, это можно сделать с помощью blendFunc? Если да, то какие аргументы я должен передать blendFunc?

Ответ №1:

То, что вы ищете, — это рендеринг в текстуру и отображение ее на экране в полноэкранном режиме.

Посмотрите на урок 16 в learningwebgl и на раздел 9.090 OpenGL FAQ (обратите внимание на ортогональный вид). Целевая текстура может быть такой же большой, как ваш видовой экран, но тогда вы должны следовать правилам для текстур NPOT.

Для достижения действительно привлекательных эффектов вам, вероятно, понадобятся два пользовательских фреймбуфера. Подробное объяснение можно найти в главе 21 GPU Gems (онлайн).

Ответ №2:

glClearColor со значением transparent у меня тоже не сработал. Но многократное рисование прозрачного прямоугольника, покрывающего всю область вывода с включенным смешиванием, в некоторых случаях дало эффект, который вы искали. Я использовал gl.blendFunc (gl.SRC_ALPHA_SATURATE, gl.ONE_MINUS_SRC_ALPHA). Пожалуйста, посмотрите на http://db.tt/6QpXqzx для простого примера. Код доступен в разделе «Просмотр исходного кода страницы». Код структурирован так же, как в руководствах на сайте learningwebgl.