Blend Mode of None for Mixed HTML Content

Hi all, just picking up Babylon and loving it so far! I’m trying to blend some HTML into a 3D scene and have successfully gotten native html content behind and in front of BJS content, but not in a way that’s smart about real Z order. I came across this article about Three.js and I think it’s exactly what I want to do, except in Babylon: http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/

I’m having trouble figuring out if there’s an equivalent to this:

var material   = new THREE.MeshBasicMaterial();
material.color.set('black')
material.opacity   = 0;
material.blending  = THREE.NoBlending; 

Sorry if this is obvious, just didn’t see it in the docs or a quick forum search.
Thanks!

Hello and welcome in the family :smiley:

Not sure if the code your pointed out though is the root of your problem.
You need to make sure that the canvas is transparent and thus you need to set scene.clearColor = new BABYLON.Color4(0, 0, 0, 0)

That should be enough.

Thanks Deltakosh, appreciate the welcome!

The scene was already transparent so I can see the html behind it, but what I’m really trying to do is cut a particular plane out of the scene, with appropriate Z ordering with other objects. Then use css to position the “behind” html so it appears in the right spot. That way, if an object correctly floats in front of the html, it appears over it, while some other object can be behind it, peeking out, all in accordance with the Babylon graph. The only way to turn a plane into a hole in the entire scene that I’ve been able to find is with the material blending mode.

As a quick update, I’m not there yet but discovered I gave access to the the gl context through engine._gl. It looks like that’s meant to be private, so not sure if there’s a better way to get at it, but what I’m hoping is I can use the gl context directly on the material’s blending mode since Babylon doesn’t seem to support that mode through the library itself. It may be tomorrow before I can test this theory but I’ll post back the results.

We support it :slight_smile:
I’m just trying to see what you need :slight_smile:

Just set your material.opacityTexture to the texture you want for the hole

Like here:
https://doc.babylonjs.com/how_to/more_materials#applying-opacity

Thanks again, I figured out the blend mode I was looking for was available without using a gl constant, it was actually an obvious one I just looked over, BABYLON.Engine.ALPHA_DISABLE

As for opacityTexture, that may be what I need next to fix the artifacts I see, but you can get a feel for what I’m trying to do with this playground: https://playground.babylonjs.com/#8NGJT7#3 Hopefully seeing it makes it more clear what I’m trying to do than my poor explanations.

Getting really, really close now, thanks for the support.

Actually, figured out the artifacts! I needed to disable lighting. The Inspector is amazing, really made this so much easier to explore.

https://playground.babylonjs.com/#8NGJT7#4

Question solved, thanks again!

Thank you for the Inspector. I love it too :smiley: