Make a background with BaseTexture

Questions
1

I’m trying to make a background GIF texture using class AnimatedGifTexture extends BaseTexture

  1. Layer looks like a good choice but it only accepts Textures so it wont work.

  2. I’m also trying ImageFilter but it will only overlay and not operate as a background.

 const engine = scene.getEngine()

            const gifTexture = new AnimatedGifTexture("gif/cyberpunk_city.gif", scene.getEngine(), () => {
                console.log("Loaded gif")
            });
            const customFilter = new ImageFilter(engine);

            // Create a pass through post process
            const passPostProcess = new PassPostProcess("bw", 1, undefined, undefined, engine);

            return {

                onRender: () => {
                    customFilter.render(gifTexture, passPostProcess)
                }
            }
  1. I don’t think drawing to a plane is a good solution and it gets transformed by the camera positioning.

Question: How can I get AnimatedGifTexture to run as a full screen background?

https://www.babylonjs.com/demos/animatedgif/

2

Do you need it to be an AnimatedGIFTexture? Because an alternative solution would be to set the scene’s clear color to transparent and set a background for the canvas using plain css: Babylon.js Playground

1 Like
3

Yup layer should use baseTexture and not texture, I guess it would make more sense. Would you want to create a PR for it ?

4

Oh no you didn’t just rick roll me! :heart:
That is a really good idea to get me started. I’ll also look at @sebavan 's suggestion to see if I can perform a “native” Babylon solution.

2 Likes
5

I’ll look into it. I have to check that BaseTexture would suffice and no more specialized Texture methods were used.

Cheers for the insight however.
Love BabylonJS!

2 Likes
6
1 Like
7

I simply couldn’t resist! :rofl:

8

Merged!

1 Like