Search the Community

Hi everybody, so i'm trying to create an online game using Babylon.js but have run into a problem thats got me a little stumped so hoping someone here would be willing to help me out. Please bear with me on this one, i'm a complete newbie with babylon as i've only every worked with THREE.js. Right now my game consists of a scene compromising of multiple meshes with multiple users represented as avatars (created from basic circle geometry for the moment) loaded into an environment. What I want to do is highlight the outline of these avatars ONLY when they are occluded by any other object, meaning that when they are not occluded they look normal with no highlight but when behind an object their highlighted silhouette can be seen by others (including yourself as you can see your own avatar). This is very akin to effects used in many other video games (see example below). ) Thus far, based on some googling and forum browsing (https://stackoverflow.com/questions/59807160/babylonjs-outline-through-walls & https://forum.babylonjs.com/t/highlight-through-objects/8002/4) I've figured out how to highlight the outline of objects using Babylon.HighlighLayer and I know that i can render objects above others via RenderingGroups but I can't seem to figure out how to use them in conjunction to create the effect I want. The best i've managed to do is get the highlighted avatar render above everything but I need just the silhouette not the entire mesh. I'm also constrained by the fact that my scene has many meshes in it that are loaded dynamically and i'm also trying to keep things as optimal as possible. Can't afford to use very computationally expensive procedures. Anybody know of the best way to approach this? Would greatly appreciate any advice or assistance you can provide.Thanks!

Hi to all.. I hopefully everybody is fine.. I'm tryed to do create highlight effect and i've done it easly, it was very quick; and i know this effect not apply to the transparent meshes (i've read HL part so many time). But my issue is that... I've some pictures designed like buttons, and those pictures atteched to each other while designing. (Seems like one mesh) I was created some invisible boxes on front of all those button pictures and i given action them, they are all together clickable and working fine. No problem in there.. But i want to create highlight effect for them, i haven't got any idea about this. As i said, highlight layer unusuable for invisible meshes, i know that. How can solve this case? I'm here for all suggestions. Thanks in advance.

Hi, I tried to make glow outline for plane , similar to HighlightLayer but I have texture that have transparent pixels so HighlightLayer wound work. Tried to make shader that draws outline, was ok with rectangle but have 1 texture that is not rectangle. Anyone have some suggestions how to draw glow outline around texture? As i found most of solutions have multi pass render. Thanks

Hello everybody, I'm currently trying to get a mesh by clicking on the canvas. So far, it works really great but I still have a problem: On click, the mesh gets highlighted. Fine but when I drag the mouse on the canvas in order to move the cam, when I release the button of the mouse, a click event is triggered and the mesh beneath it get selected. I tried to add an event listener on 'mouseup' to stop propagation to the click event but it seems BJS already "intercepts" this event so it is never triggered. I created a codepen to illustrate : https://codepen.io/3dos/pen/mLEEdq On the left is an empty canvas on which the mouse events are triggered. On the right is a babylon canvas on which the mouseup event is not triggered. Is there a simple way to avoid selecting meshes on drag ? (also tried the dragend event with no success either) Thanks to everybody who already helped me PS: I joined a screenshot of the console illustrating what I'm telling (did the exact same actions on the 2 canvas)

Hi everybody: When I use a highlight-layer based effect (fade in-out as Wingnut suggested me here) I obtain the following warnings in the web console: .Offscreen-For-WebGL-00000233101348E0]GL ERROR :GL_INVALID_FRAMEBUFFER_OPERATION : glClear: framebuffer incomplete .Offscreen-For-WebGL-00000233101348E0]GL ERROR :GL_INVALID_FRAMEBUFFER_OPERATION : glDrawElements: framebuffer incomplete .Offscreen-For-WebGL-00000233101348E0]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering The case is that all my textures are power-of-2 (512x512 px indeed) so I'm very lost here. Sadly I can't reproduce this behavior on PG, so I only ask for a clue on where to start to find for solving this bug. Best regards. P.S. I have running OK other apps using highlight layers. Only for your information, the offending code is using PBR materials.

Hi everybody: I wonder whether a direct-way of change the highlight-layer intensity exist, in order to progressively fade it in and out. I can't find info in the docs. Best regards. P.S. Of course it could be always done following a not-so-direct-way, tweaking the color values under a harmonic (sinusoidal) basis.

Hello, As it seems there were quite a few discussion around highlighting meshes you can find below the solution integrated in standard in bjs: var hl = new BABYLON.HighlightLayer("hg", scene); hl.pushMesh(box, BABYLON.Color3.Green()); Please be aware, the stencil needs to be able in your canvas: var engine = new BABYLON.Engine(canvas, true, { stencil: true }); You can take a look at the result here: http://www.babylonjs-playground.com/#E3D3Y#2 Best Regards,

https://www.babylonjs-playground.com/#X2F6KI#2 can any one help to find how can I get the intersected area of cubes. actually, I want to highlight the intersected area in between these two cubes. also, want to print into console how much points are intersected.

Hi ! I noticed a bug with the hightlight layer and the sprite transparency, if the sprite overlapse the highlight object, the sprite take the color of the layer. I tried to add the sprite to another renderingId but it was the same ! I attach a screen and a playground ( http://www.babylonjs-playground.com/#1UJAM6 ) to test ! Thanks for the answers !