-3

Well, I want set a background-image depth, instead of that degraded background. I tried a lot of things, i tried a lot of answers from this community, and no way... the result is ever with the background-image not visible or above the particles. I just want that the background-image replaces the current background-color.

I wish that anyone be able to help me with correct code, thanks and sorry for my English.

https://codepen.io/at80/pen/tqdmv

<canvas>
Billy Brown
  • 2,272
  • 23
  • 25
Menzezzz
  • 11
  • 2
  • 8
  • Welcome to Stack Overflow. If you want debugging help you must create a a [minimum verifiable complete example](https://meta.stackoverflow.com/questions/349789/how-do-i-create-a-minimal-complete-verifiable-example) and put it **in the question itself**. Just posting a link to your code is unacceptable. – gman Jul 30 '17 at 03:02

2 Answers2

0

I won't be able to fully answer your question, as there is a lot of shader code to look through.

What you need to do is make sure that when a fragment draws something that is not a leaf (e.g. the background), it has an alpha value of 0.0. The easiest would be to have gl_FragColor.a = 0.0; somewhere. I'm new to OpenGL/WebGL so I can't help you by finding the exact locations or methods of doing it.

You have quite a lot of fragment shaders and they are each doing different things. The shader <script id="bg_fsh" type="x-shader/x_fragment"> controls just the background, but it is not enough on its own.

Once you have managed to make the background transparent in the fragment shaders, you can set a background image somehow, such as on a <div> containing the canvas and it should show through.

Billy Brown
  • 2,272
  • 23
  • 25
  • yeah i did that but i only achieved turn black the background, in my code i have it. – Menzezzz Jul 29 '17 at 16:54
  • @Menzezzz you can probably use a CSS blending mode (mix-blend-mode/background-blend-mode) with the DOM element itself such as "screen" to mix your final image with the black color. But webgl + blending can be somewhat costly performance wise. –  Jul 29 '17 at 18:34
  • 1
    i do it!!! just i tried before of change gl_FragColor.a value, but all screens turns black... without flowers but i think becuse when i changed it didnt had background-image. Rigth now after trying a lot of things i tryed again and i remember this atribute thanks to you. And just when i thought now or i left it, i chaneg this value and works!! ty – Menzezzz Jul 29 '17 at 18:49
-2

You can not set background image of canvas image directly. This link of stackoverflow.com will describe more about possibility to set background image Is it possible to set background image in canvas HTML5 and can do some paint functionality like Undo,Erase,Clear,Save that background image?

Avinash Mishra
  • 1