Артефакт границы SSAO с несколькими проходами

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

Я тестирую две текстуры (взято отсюда: Продолжение обработки изображений WebGL), и это в основном мой рабочий процесс:

  1. нарисовать геометрию и сохранить значения глубины в буфере текстуры
  2. примените проход SSAO (на основе этой скрипты из Rabbid76)
  3. в конце я выношу текстуру на экран

Теперь я не могу понять, почему вокруг некоторых частей окончательного изображения есть черная рамка. Я попытался точно настроить некоторые параметры SSAO, но мне не удалось избавиться от этого артефакта, поэтому, просто предполагая, что теперь я считаю, что эта черная рамка связана с неправильной настройкой смешивания моих текстурных буферов.

На самом деле это код в проходе глубины:

gl.disable(gl.BLEND);
gl.enable(gl.DEPTH_TEST);
gl.depthMask(true);
... drawings

Я пробовал еще так:

gl.enable(gl.BLEND);
gl.blendEquation(gl.FUNC_ADD);
gl.blendFunc(gl.GL_SRC_ALPHA, gl.GL_ONE_MINUS_SRC_ALPHA);

...но не приводит меня ни к какому результату.

На изображении ниже этот артефакт отчетливо виден в виде тонкой черной линии вокруг стэнфордского дракона:

SSAO

Поскольку я полностью потерялся в этой проблеме, может ли кто-нибудь указать мне правильное направление?

Мой вопрос: мне нужно нарисовать геометрию с прозрачным фоном - какой правильный режим наложения для этого при рендеринге в задний буфер и пинг-понге двух текстур для применения нескольких эффектов?


webgl blending ssao
person deblocker    schedule 01.01.2018    source источник
comment
Столько всего может пойти не так. Во-первых, поймите, для чего нужен SSAO: Модуляция окружающего света. Если граница находится на фоне, который не затеняется, это не имеет значения. Может быть, ваш фон слишком далеко?   -  person starmole    schedule 01.01.2018
comment
@starmole: большое спасибо за ваше время, я еще не знаю, буду ли я смешивать текстуру ssao с окончательным изображением или применять SSAO к окружающему свету, поэтому я на самом деле экспериментирую. Я теряюсь, потому что мне нужны высокочастотные детали, и я не могу добиться хороших результатов в проходе размытия. Что касается проблемы в вопросе, на самом деле я закончил тем, что смешал альфа-канал во фрагментном шейдере.   -  person deblocker    schedule 03.01.2018
comment
SSAO низкочастотный по своей природе. Многие люди добавляют дополнительные карты AO к моделям для более точной детализации.   -  person starmole    schedule 09.01.2018

Ответы (1)


arrow_upward
1
arrow_downward

Для потомков я использовал:

gl.clearColor(0, 0, 0, 1);

поэтому я изменил функции упаковки/распаковки следующим образом:

vec4 PackDepth32_0(float depth) {
    const vec4 bit_shift = vec4(255.0 * 255.0 * 255.0, 255.0 * 255.0, 255.0, 1.0);
    const vec4 bit_mask = vec4(0.0, 1.0 / 255.0, 1.0 / 255.0, 1.0 / 255.0);
    vec4 res = fract(depth * bit_shift);
    res -= res.xxyz * bit_mask;
    return res;
}
float UnpackDepth32_0(vec4 color) {
    const vec4 bit_shift = vec4(1.0 / (255.0 * 255.0 * 255.0), 1.0 / (255.0 * 255.0), 1.0 / 255.0, 1.0);
    return dot(color, bit_shift);
}

который решает мою проблему.

person deblocker    schedule 18.01.2018