Background Image Manipulation

I’m trying to get a background that looks like this. Basically the background is blended between two images, one image is smaller than the other one and the bigger one is basically blended with the smaller one, the bigger one is also distorted in a certain way, the background of the video that I linked is the visual example of how I want it to look like, the images in question are in this dropbox folder.

Do you mean the bacground and the silhouetto of the person?

And what do you mean by blend? It has some technical meaning I think. Do you mean just shadow person stays on background as in the video?

Just the background, I don’t want the shadow person, but that’s really as easy as adding an image layer on top of the background.

Yes it is. I will check bg more carefully.

This looks like about the canvas blend modes

Can I do it with WebGL?

Just checked docs, nevermind you can’t.

I guess phaser has a way to do it as well using canvas blend mode under the hood.

Yes you can do this with webgl. Answering with a video: https://youtu.be/0Td1ei3U8-A

Can you at least give that docs reference that says you can’t?

https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Components.BlendMode.html

Just to know it. What blend mode do you need?

I have no idea, I haven’t looked at the game in detail.

Ok. Just for your info I think this is a complete list: https://photonstorm.github.io/phaser3-docs/Phaser.BlendModes.html

Also canvas and webgl differs in available blendmodes the page you have sent says.

Here is a table for visually seeing blend modes.
And other resources for 2d and webgl canvas contexts on the subject:

  1. for canvas: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
  2. for webgl: https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFunc
  3. also for css: https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode

Thanks, I’ll keep this open though, because I still need code examples.

You should since we have not reached a solution yet.