CODEWITHSUNDEEP
javascriptcanvasshaderwebgl
Eli-ott
Eli-ott

Reputation: 366

make webgl canvas transparent

I want to make my webgl canvas transparent but the thing is that I pick the code on codepen: here and saw the same on a forum and they were also debating on how to change the color, but there wasn't any answers.

The only things that I said is that writing canvas.fillStyle = "#ffffffff" didn't work, as gl.clearColor(0, 0, 0, 0). They said that the color comes from the shaders but I'm quite new to webgl and I don't really understand how shaders works for now.

I also looked at this question: How to make Webgl canvas transparent and it didn't help me.

Upvotes: 0

Views: 288

Answers (1)

antokhio
antokhio

Reputation: 1944

gl_FragColor = texture2D(uTexture, vUv);

This line is states that fragColor witch is vec4 gonna be colored by sampled texture.

Basically you can think about vec4 in this case as an RGBA vector, so if you do something like:

gl_FragColor = vec4(0.0f, 0.0f, 0.0f, 1.0f);

at this pixel color gonna be black but not transparent

gl_FragColor = vec4(1.0f, 1.0f, 1.0f, 0.0f);

Would be a white but transparent pixel

So by doing this:

 gl_FragColor = dissipation * texture2D(uSource, coord);
        gl_FragColor.a = 1.0;

You are basically removing transparency information

To make this transparent you have to keep and maintain alpha between passes. The easy fix would be to set

gl_FragColor.a = gl_FragColor.r

Otherwise you can also for instance calculate luminance from rgb and use that as alpha.

So then gl.clearColor(0, 0, 0, 0) would work

P.s. few words how shader works: you can imagine there are two types of effects one are called screen space (thouse are post processing) and the 3d ones. So for screen space effects you apply plane to your view and uv cords of that plane are cords of your screen, the gpu interpolates uv by amount of pixels and calculates in parallel 2d array of pixels, so then by uv coords or masks and so on… you calculate color of every pixel on screen 60 times per second… Dunno if it makes sense but the simplest way to think about it that your vUv is a grid of pixels and you have to find color by checking or moving vUv

Upvotes: 1

Related Questions