My goal is to show the result of an external canvas over the BABYLON scene. To simplify, the external canvas and BABYLON canvas has the same size. I’ve been trying 2 approaches:
Custom post processing with a fragment shader
GUI in full screen
The post processing doesn’t work because I think BABYLON doesn’t accept external textures and they default to the canvas the scene is using (engine.externalTexture.ts line 28). This is a example I set up where I can use the canvas 2 as material, but not as post processing: https://playground.babylonjs.com/#DAC1WM#45
I am not at my computer at the moment (just on my phone) but i have done something like this by overlaying the non-BJS canvas on top (higher z-order) of the BJS canvas using css.
You can get the bounding box of a gui rectangle and even scale and position your non-BJS canvas accordingly. But i don’t know if that will suit your use case.
I need to merge them into a single canvas. I understand what you say but is not a solution for my case. The examples I prepared are not what I’m working at, just proofs of concept.
What about using canvas context drawImage HTML canvas drawImage() Method
I have used this approach as well. Once you get the context of the target canvas you can use another canvas as a source.
It is late here and i am just siting on my deck with a few wines throwing out ideas - i will look at your PG tomorrow.
No worries. If it is what you want then you were oh so close. All I really did was change the [“canvas2”] parameter to be the forth, rather than third, parameter. The third is for non-samplers while the forth is for samplers. Then you don’t need the callback as it is all set.
