Хобрук: Ваш путь к мастерству в программировании

WebGL: странное поведение при рендеринге пакета спрайтов в текстуру рендеринга

Технология: WebGL / GL

  1. Когда я рендерю 10k спрайтов (используя spritebatch) сразу в задний буфер, все в порядке.

10 КБ

хорошо

  1. Когда я рендерю его в текстуру рендеринга, у меня возникает странная проблема с альфа-смешиванием (я думаю ...). В местах, где текстура имеет прозрачные пиксели, альфа вычисляется неправильно (ИМО, она должна быть кумулятивной).

10 КБ

bad1

1k

bad2

200 на черном фоне

bad3

Конфигурация смеси:

gl.enable(gl.BLEND);
gl.blendEquation(gl.FUNC_ADD);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

Вот как я создаю буфер рендеринга:

this._texture = this.gl.createTexture();
this.gl.bindTexture(this.gl.TEXTURE_2D, this._texture);
this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.width, this.height, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, null);

this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);


this.renderBuffer = this.gl.createFramebuffer();

this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.renderBuffer);
this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, this.gl.TEXTURE_2D, this._texture, 0);
javascript webgl
03.08.2015

Ответы:


1

Я изменил режим наложения на:

gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

Это результат:

хорошо

Пояснение:

Когда вы выполняете рендеринг сразу в задний буфер, альфа-канал всегда устанавливается на 1.0 (кроме случаев, когда вы используете прозрачный холст) - поэтому не имеет значения, как вычисляется альфа.

Когда вы сначала выполняете рендеринг в буфер рендеринга (текстуру), а затем эта подготовленная текстура используется для рендеринга в задний буфер - вам необходимо использовать разные режимы наложения для альфа и RGB.

SRC_ALPHA и ONE_MINUS_SRC_ALPHA используются для смешивания (умножения) RGB в зависимости от альфа SRC и DESC.

Если бы альфа-канал также был умножен, он переопределил бы непрозрачные пиксели в местах, где текстура имеет прозрачные пиксели. Нам нужно суммировать альфа каждого пикселя, а не умножать.

Таким образом, альфа-функция должна быть установлена ​​на: ONE и ONE_MINUS_SRC_ALPHA, чтобы ALPHA накапливалась, а не умножалась.

Luk: Я плохо говорю по-английски (извините). Если бы кто-то так мило «перевел» это объяснение, я был бы признателен.

10.08.2015
  • Рад, что ты решил свою проблему! Если вы не возражаете, поделитесь, не могли бы вы объяснить, почему требуется разделение смешения цветов и альфа-смешения? 13.08.2015
  • @ WacławJasper Я добавил объяснение, но не уверен, что вы его прочитали :) 19.08.2015
  • Спасибо. Было полезно. Это совершенно понятно. Может избавить меня от нескольких часов головной боли, когда мне нужно реализовать точное альфа-смешивание для моего средства визуализации спрайтов. 19.08.2015
    • Новые материалы
    Что такое структура данных?
    Структура данных хранит и извлекает данные. Все, что обеспечивает эти две функции, является структурой данных . Период. Вы можете пропустить оставшуюся часть статьи, если ответ..
    мои январские чтения по программированию
    Эрик Эллиот Программирование приложения JavaScript Эл Свейгарт «Автоматизируйте скучные вещи с помощью Python» Прогрессивное веб-приложение Google..
    Создание ассоциаций секвелизации с помощью инструмента командной строки Sequelize
    Sequelize - популярный, простой в использовании инструмент объектно-реляционного сопоставления (ORM) JavaScript, который работает с базами данных SQL. Довольно просто начать новый проект с..
    Искусственный интеллект в юридической отрасли - пример прогнозирования судебных решений с помощью глубокого обучения
    На протяжении всей истории люди полагались на суды, присяжных, королей и королев в отправлении правосудия. Сегодня способность судов обеспечивать справедливое и быстрое правосудие для своих..
    Введение в машинное обучение для обнаружения аномалий (часть 1)
    Тщательно созданный, тщательно спроектированный ресурс для специалистов по данным. Часть 1 Главы 03 из Руководства по машинному обучению для обнаружения аномалий Внимание! Прежде чем вы..
    Начало работы с Pulumi в Digital Ocean
    Цифровой океан (ДО) — отличная альтернатива многим другим поставщикам облачных услуг. DO предоставляет простой и понятный пользовательский интерфейс, упрощающий управление инфраструктурой и..
    #Day68 из #100days_of_coding
    Вчера был мой 68-й день кодинга. я решил один вопрос Проблема: Разбить двоичную строку на подстроки с равным количеством нулей и единиц Дана двоичная строка str длины N . Задача состоит..