Why image with alpha bg transform to black

Phaser 3
1

on labs.phaser.io has example with shader blur.

https://labs.phaser.io/edit.html?src=src/camera\camera%20blur%20shader.js

When i apply shis hader to hotdog his bg transform from alpha to black

var volcano = this.add.image(400, 300, 'volcano').setAlpha(0.5);
var hotdog = this.add.image(400, 300, 'hotdog').setScrollFactor(0);
hotdog.setPipeline('Custom')
this.cameras.main.setRenderToTexture(customPipeline);

var extracam = this.cameras.add();

this.cameras.main.ignore(hotdog);
extracam.ignore(volcano);
2

The shader isn’t written to work with transparent images, alpha, or tint. If you want to preserve the alpha channel, the laziest fix would be to change gl_FragColor = vec4(sum.rgb, 1.0); to gl_FragColor = vec4(sum.rgb, texture2D(u_texture, tc).a);, keeping in mind it’s a bit inefficient. You could also do gl_FragColor = sum; I’m not sure which will look better.

Note that this won’t respect the alpha or the tint of the game object, only the alpha channel of the original image.

1 Like
3

It works, thx!

1 Like