CODEWITHSUNDEEP
canvaspixi.js
Ivan Oleg Saklov
Ivan Oleg Saklov

Reputation: 31

Canvas, PIXI.js - background transparent?

I can't anymore, please help me. It's been a week that I try to find a trick for my little personal project but without result. I sincerely studied everything I could find on this subject but I still do not understand in which direction to dig. It's hopeless.

In fact, I would like to ask you how it is possible to make the background of this example transparent:

https://codepen.io/osublake/pen/pqNXoq

Is it doable in itself?

I experimented a lot with these three lines of code

// colors
          vec4 col = mix(vec4(1.0, 1.0, 0.0, 1.0), vec4(1.0, 1.0, .6, 1.0), flame);
          col = mix(vec4(1.0, 0.0, 0.0, 1.0), col, smoothstep(0.0, 1.6, flame));
          gl_FragColor = col

but without success. I still can't understand how mix colors work in glsl.

Same for PIXI.js. I manage to give a color to background but it doesn't work for the alpha channel.

I am grateful in advance to anyone who can provide clues.

Sincerely

Upvotes: 3

Views: 5710

Answers (1)

ragan
ragan

Reputation: 233

Yes, it is possible.

You need to make some changes. First of all, you need to set a transparent background for the Pixi.js app using transparent: true inside super(). Note that this option is valid for Pixi.js v4.x.x only. For recent versions you must use BackgroundAlpha: 0 instead.

Additionally, you could remove the Background halo used in the filter, so try commenting this section:

float haloSize = 0.5;
float centerL = 1.0 - (length(centerUV + vec2(0.0, 0.1)) / haloSize);
vec4 halo = vec4(0.8, 0.3, 0.3, 0.0) * 1.0 * fbm(vec2(time * 0.035)) * centerL + 0.02;
vec4 finalCol = mix(halo, gl_FragColor, gl_FragColor.a);
gl_FragColor = finalCol;

And you will get something like this (I added a bg image for test):

()

Check a live version forked from your original pen: https://codepen.io/ggojedap/pen/ZErJRXJ

Upvotes: 5

Related Questions