Applying Depth Map to DIVs in a Carousel

[Violin]

Hello, forum! I am currently struggling to rework my photography website after having purchased a template several months ago. I did not get the time to do much but now I am little free. In a nutshell, I have 5 Bootstrap-like carousel divs on the first page, representing different types of photography. Of course, each of them has a  background image. I would post the website but I do not want to risk "promoting" myself, so I will post (hopefully I get permission by the moderator) the original template: https://theme.madsparrow.me/emilynolan/ . I am not associated with their website. As you can see, the user can scroll through some divs, with its own images. I have managed to use Pixi.js to apply a DepthMap to one of the divs, but I have no idea how I can do for 4 other divs which are supposed to translate into view when the user scrolls, presses RIGHT key or presses next.

The code is:

<script> 
      let type = "WebGL"
       if(!PIXI.utils.isWebGLSupported()){
      type = "canvas"
    }

      PIXI.utils.sayHello(type);

      let app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight});
      document.body.appendChild(app.view);

      let img = new PIXI.Sprite.from("assets/images/albums/portraits/fatacucatel.jpg");
      img.width = window.innerWidth;
      img.height = window.innerHeight;
      app.stage.addChild(img);

      depthMap = new PIXI.Sprite.from("assets/images/albums/portraits/fatacucatel-map.jpg");
      app.stage.addChild(depthMap);


      displacementFilter = new PIXI.filters.DisplacementFilter(depthMap);
      app.stage.filters = [displacementFilter];

      app.renderer.view.style.position = "absolute";
      app.renderer.view.style.display = "block";
      app.renderer.autoResize = true;
      app.renderer.resize(window.innerWidth, window.innerHeight);

      window.onmousemove = function(e) {
        displacementFilter.scale.x = (window.innerWidth / 2 - e.clientX) / 40;
        displacementFilter.scale.x = (window.innerHeight / 2 - e.clientY) / 10;
      }; 

</script>  --> 

 

Needless to say, it is not perfect and has lots of issues, for example the window does NOT autoresize at all and also the animation is horrible, not smooth at all. But at least I would like to be able to append several images to multiple divs. Is this possible in any way, please? I did not work much with JS in my life and I am new to Pixi.

[ivan.popelyshev]

There are many details you have to know to achieve that task. When you move from general DOM to canvas, especially WebGL you just have to define many things you weren't thinking about. 

In this case its 

1. what is canvas resize , how "view.width" is different from "view.style.width" and what "autoResize=true" method does (it actually changes "view.style.width" the same way you can do that). How to position elements?

It takes time and experience to understand, Spend some hours on that. experiment with "scale" and "position" fields, maybe two containers instead of just "app.stage".

2. How to destroy the app or certain app components when you dont need them anymore

read https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop

3. How to stop the app from ticking, when your image is static and everything is calculated.

read https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop

4. How "from" works and when exactly will those images be ready

its spawning <img> and waits onload. Every time frame is drawn, it checks if texture is ready to be uploaded or not.

5. how to set up 5 canvases 

sorry , you can have only a few webgl contexts. Try use only one canvas?

6. What to do if webgl is not supported

it just wont work, canvas2d renderer has no displacement filter in pixi. Its possible through SVG filters but we didnt make that fallback yet, it would take our time and not many people need that.

7. What to do when something strange appears on the edge of image displacement

Artifacts are big topic. Ask when it happens.

8. how to make repeating displacement texture

Yes, you can do that, but it takes special size of texture (pow2) and "texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT" on displacement texture.

9. where to animate displacement

In ticker. dont forget to stop destroy or whatever ticker when you need to start/stop the app. I dont know , it should be done according to Application sources, not what I say. What I say is secondary to the source code.

[ivan.popelyshev]

In fact, there's a possibility that I'll have a talk in HolyJS Moscow conference , 2 hours about all the problems people encounter when they move from HTML to dangerous WebgGL forest because they see a pretty demo and they want to integrate it in the project.

Your case looks like you really need it , but first it will be on russian and its REALLY HUGE. I dont know how to compress it in one post  

There's a common strategy: you spend X hours, get questions, ask them, we answer. I hope first answers are good enough for your first post.

Welcome to the forums!

[Violin]

Thank you so much for your explanation, sir, it helped a lot! I have managed to do it! But using another library called twgl, and called the function for creating texture when the user presses a button, but I am missing the transitions now so I will have to add them. I will also try to learn from scratch as you have suggested. 

I am glad you are so dedicated to your work, I wish I could attend your webinar / conference, but my knowledge of Russian is minimal  

[ivan.popelyshev]

Yes, twgl is good for structuring webgl state and buffers. Its important to now whats happenning on low-level. Whatever you learn there you'll be able to use in other WebGL libraries when you need them. 

PixiJS has that level of API too, its inside Filters and Mesh/Shaders render() method. Pixi has big advantage when you have to juggle with tens of extra textures/framebuffers. We just dont have enough small demos of low-level API , so twgl is suited better for newbies in that case.