WebGL Fluid animation

Questions
1

Hey mates !

I have been trying to make a fluid animation like on this example and its working properly but on a black background.
I am trying everything to make the background transparent, so that the effect occurs above the page’s background.
I am trying to achieve it like so:

gl.clearColor(0.0, 0.0, 0.0, 0.0); 
gl.clear(gl.COLOR_BUFFER_BIT);

and applying alpha true :

`const params = {`
`alpha: true,`
`depth: false,`
`stencil: false,`
`antialias: false,`
`};`

`let gl = canvas.getContext("webgl2", params);`
`const isWebGL2 = !!gl;`
`if (!isWebGL2) {`
`gl =`
`canvas.getContext("webgl", params) ||`
`canvas.getContext("experimental-webgl", params);`
`}`

Could you please help me ?

I dont know what else to try.

Thank you very much !

2

In addition to ‘alpha: true’. I have the following in my .css:

canvas {
    display: block;
    background: url(./copyright_background.jpg) repeat 0 0;
    background-size: auto;
}

I’m displaying my 3D graphics against a copyright background screen. You may be able to use the url of your background webpage instead.

1 Like
3

Hi @vielzutun.ch !
I could do it, but then I would have to turn my bg in an image and I cannot because the background colors are generated dynamically.

4

{
alpha:true,
preserveDrawingBuffer:true
}

on the renderer, and make sure any background on the canvas itself, is NOT set. In the past, I’ve seen background set on the canvas, actually break the transparency in the renderer. Instead put any background you need on a div behind the canvas.

5

Hi @manthrax , thank you for your answer.

Its still not working, unfortunatelly.
I have added the preserveDrawingBuffer option to params object on get-gl-context file
On line 27 of that file I replaced gl.clearColor(0.0, 0.0, 0.0, 1.0) with:

gl.clearColor(0.0, 0.0, 0.0, 0.0);
  gl.clear(gl.COLOR_BUFFER_BIT);

I removed the background css code of canvas as well, and added it to its parent.

Do you have another suggestion for me ?

Thank you very much for your help !

6

I think we might need a small reproduction in a codepen or jsfiddle, and we’ll be able to sort it out pretty quick. (because to be clear, your use case should work.)

1 Like
7

@manthrax , I am facing some issues uploading my code but you can check it here
I dont know how to place the shaders, since there is a class (GLProgram) to import it dynamically.
Locally I have a shader folder, like in the source project.

Sorry for the inconvenience

Thanks a lot

8

I have read this comment in the internet

“… background is probably being set with gl_fragColor in one of the shaders, but I have no idea which one. It would probably be best to ask to the original author of the code.”

I noticed that all my fragments have that property set… perharps its the answer for my problem

9

I got it working! I was a shader issue,

But now, I asked a colleage (that uses mac) to check the effect and he cant see it on chrome, but sees it on firefox. That colleague tested out on windows chrome and its working.
I asked another colleague, and he cant see it on chrome either.
We already tried to enable hardware acceleration, check chrome gpu issues, etc and nothing worked.

Could you please help me ?