WebGL ru

25 May 2024 06:28

Так как PMA строго заставляет все умножать на A

WebGL ru

25 May 2024 00:56

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

this.gl.blendFuncSeparate(
 this.gl.SRC_ALPHA,
 this.gl.ONE_MINUS_SRC_ALPHA,
 this.gl.ONE,
 this.gl.ONE_MINUS_SRC_ALPHA,
);

WebGL ru

25 May 2024 00:47

то есть каким-то образом альфа с текстуры просачивается в альфу фреймбуффера. но почему-то не вся, а именно > 0 && < 1

WebGL ru

25 May 2024 00:28

а вы точно пишете про ситуацию рендеринга во фреймбуффер?

WebGL ru

24 May 2024 22:21

Было такое, нужна настройка webgl контекста - premultiplied alpha = true, (возможно еще alpha = true), текстура должна грузиться из png, в шейдере нужна строчка colorV3 /= textureColorV4.a; в настройках блендинга gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA); Это все для webgl 1.0 формата канваса. Сам шейдер для примера (не ржать, я новичок)

#include chunks/precision.glsl;

uniform sampler2D u_textureS2D;

...
varying vec2 v_uvV2;
...

void main() {
    ...

    vec4 textureColorV4 = texture2D(u_textureS2D, v_uvV2);
    float alpha = textureColorV4.a * u_alpha;// alpha
    if (alpha <= 0.01) {
        discard;
    }
    vec3 colorV3;
    ... тут эффекты всякие
        colorV3 = textureColorV4.rgb;
    ... тут эффекты всякие
    colorV3 /= textureColorV4.a;// fix premultiplied alpha
    gl_FragColor = vec4(colorV3, alpha);
}

WebGL ru

24 May 2024 17:22

как будто alpha ресетится а не складывается

WebGL ru

24 May 2024 17:21

а если на бежевый - то бежевые

WebGL ru

24 May 2024 17:20

о, зато кое что другое влияет, как интересно

WebGL ru

24 May 2024 16:03

а если сменить бэкграундцвет, артефакт поменяется?

WebGL ru

24 May 2024 15:58

а во фреймбуфер только эту тему рендеришь или всю картинку ?

WebGL ru

24 May 2024 15:56

ага( и с премультипликацией, и без, и как угодно

WebGL ru

24 May 2024 15:53

если что, экстеншены тоже включены:

  this.gl.getExtension('EXT_color_buffer_float');
  this.gl.getExtension('EXT_float_blend');
  this.gl.getExtension('OES_texture_float_linear');

WebGL ru

24 May 2024 15:53

на всякий случай, ещё раз - когда рендерю на канвас - проблем 0, проблема точно не в картинке самой

WebGL ru

24 May 2024 15:52

не, это просто скрин

WebGL ru

24 May 2024 15:51

растушеваный край видимо серым растушеван?

WebGL ru

25 May 2024 06:27

Ты не можешь сделать канвас красным непрозрачным

WebGL ru

25 May 2024 00:48

вообще у меня кода кот наплакал, сейчас уже спать хочу, но завтра могу прям собрать минимальный пример строк на 20, который эту ошибку воспроизводит

WebGL ru

25 May 2024 00:46

упростил пример до предела

1. делаю clear канвасу красным непрозрачным цветом
2. делаю clear фреймбуфферу черным непрозрачным цветом
3. рисую png картинку во фреймбуффер элементарнейшим шейдером вида gl_FragColor = texture(image, v_texCoord)
4. рисую фреймбуффер на канвас тем же самым шейдером

результат:

WebGL ru

24 May 2024 23:09

с прозрачностью заморочек много
https://webglfundamentals.org/webgl/lessons/ru/webgl-and-alpha.html

WebGL ru

24 May 2024 17:22

ага, вот такое же ощущение

WebGL ru

24 May 2024 17:21

то есть оно как будто проедает фреймбуффер насквозь

WebGL ru

24 May 2024 17:21

если я рендерю этот фреймбуффер на черный канвас - то артефакты черные

WebGL ru

24 May 2024 16:43

чей именно бекграунд?

WebGL ru

24 May 2024 16:00

там 3 части - подложка, картинка, и вот этот вот растушеванный край. он используется для плавного перехода между подложкой и картинкой - то есть рендерится последним из трех

WebGL ru

24 May 2024 15:56

внешний вид артефактов меняется, но сами артефакты остаются

WebGL ru

24 May 2024 15:55

и бленд функции пробовал разные?

WebGL ru

24 May 2024 15:53

что-то идёт не так именно в композиции при рендеринге во фреймбуффер

WebGL ru

24 May 2024 15:52

фак, сорри, телега странно обрабатывает webp

WebGL ru

24 May 2024 15:52

есть картинка на серо белой сетке шахматной?

WebGL ru

24 May 2024 15:51

color attachment у фреймбуффера вот такой: this.gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, width, height, 0, gl.RGBA, gl.FLOAT, null);