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

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

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