Comment définir l'image d'arrière-plan à la toile

Question

Eh bien, je veux définir une profondeur background-image, au lieu de cet arrière-plan dégradé. J'ai essayé beaucoup de choses, j'ai essayé beaucoup de réponses de cette communauté, et pas moyen ... le résultat est jamais avec le background-image non visible ou au-dessus des particules. Je veux juste que le background-image remplace le background-color actuel.

Je souhaite que n'importe qui puisse m'aider avec le code correct, merci et désolé pour mon anglais.

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

<canvas> 

Answer 1

Je ne serai pas en mesure de répondre entièrement à votre question, car il y a beaucoup de code de shader à regarder. Ce que vous devez faire est de vous assurer que lorsqu'un fragment dessine quelque chose qui n'est pas une feuille (par exemple l'arrière-plan), il a une valeur alpha de 0.0. Le plus simple serait d'avoir gl_FragColor.a = 0.0; quelque part. Je suis nouveau sur OpenGL/WebGL donc je ne peux pas vous aider en trouvant les emplacements exacts ou les méthodes pour le faire.

Vous avez pas mal de fragment shaders et ils font chacun des choses différentes. Le shader <script id="bg_fsh" type="x-shader/x_fragment"> ne contrôle que l'arrière-plan, mais il ne suffit pas à lui seul. Une fois que vous avez réussi à rendre l'arrière-plan transparent dans les fragment shaders, vous pouvez définir une image d'arrière-plan d'une façon ou d'une autre, comme sur un <div> contenant le canevas et il doit apparaître.

Answer 2

Vous ne pouvez pas définir l'image d'arrière-plan de l'image toile directement. Ce lien de stackoverflow.com décrira plus sur la possibilité de définir l'image de fond Is it possible to set background image in canvas HTML5 and can do some paint functionality like Undo,Erase,Clear,Save that background image?