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, 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. I have a kayak model in my scene and I would like the renderOutline to show around the model like in the playground examples below: http://www.babylonjs-playground.com/#18ZFZ9 http://www.babylonjs-playground.com/#18ZFZ9#2 Here is code importing the kayak: BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes) { }); ----------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------- I first tested out this code below. I checked index numbers 0-12 and newMeshes[6] is the only one that shows the outline around the model. Another problem is this changes my kayak hull texture as well: BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes) { newMeshes[6].renderOutline = true; newMeshes[6].outlineWidth = 0.01; newMeshes[6].outlineColor = new BABYLON.Color4( 255, 200, 0, 1); }); ----------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------- Next, I tried the loop like in this playground: http://www.babylonjs-playground.com/#18ZFZ9#2 . The outline shows around the model but is outlining the other meshes on the model as well. BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes) { for (var i = 0, max = newMeshes.length; i < max; i += 1){ newMeshes.renderOutline = true; newMeshes.outlineWidth = 0.01; newMeshes.outlineColor = new BABYLON.Color4( 255, 200, 0, 1); } }); ----------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------- This image below is exactly what I'm looking for. What would be the best way to achieve this? Thank you.

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,

Is there any ways to draw outline for them? I know I can have multiple Text2D beneath it and act like "border". I'm just wondering if there's any better way of doing that.

Is there a method that works even after scaling and changing screen size? I am using the "drawRect" method in Phaser.graphics but I don't know how to get the bounds of the shape.

I'm trying to outline my objects here: www.punkoffice.com/webiverse If you walk around (or fly around) and double-click the objects you'll see the render outline that I'm using. I set render outline to true, width to 0.1 and colour to red. However, it looks funny at certain angles, like its not completely hugging the mesh. Also won't show up properly if the mesh is sitting on top of another mesh. Is there a better way of doing this? Have I done something wrong here?

Hello everyone, i'm trying to use mesh.renderOutline = true to get an outline on an object which has been scaled in one direction. But instead i get a floating plane in this direction. I guess the outline is made by inserting planes under the faces of the mesh and letting the edges "stick out" and there is some problem with scaling of the target mesh. Here an example in pg: http://www.babylonjs-playground.com/#1KJG6O#1 I hope someone can help me. A workaround would be to create every time i want to scale my box a new box with the right dimensions. But as the scaling may happen every frame i suppose this would not be good idea. Thanks and Greetings, moreAPI

Hey folks, I was playing around with a custom version of a mesh outline that (so I hoped) would work a bit better as the normal mesh.renderOutline. It all looked pretty good until I tried it with a cylinder: http://www.babylonjs-playground.com/#E51MJ#8 It seems that the sideOrientation is not applied correctly for the cylinder. Or am I doing something wrong here? Bonus question: could I somehow just clone the original mesh and set the sideOrientation for the cloned version or is it only possible to set that in the constructor? It didn't seem to work when I tired setting it after the mesh is created.

I want to know how to add the effect of the black outline around a 3d morph targets animation implemented with THREE.MorphAnimMesh. Could you possibily send me the solution starting from the very famous example http://threejs.org/examples/webgl_morphtargets_horse.html ? Thank you very much in advance for your help .... i'm a beginner with the three.js library and I would not know how to do!

Hello, I'm pretty new to Babylon.js (almost a week for now), it was okay until I started to ask more and more of it. I searched for answers a lot, in Google and here, on forums, but no success. So, here's some questions of mine that I can't deal with: [1] How can I set up 32x32 pixels image to stay sharp on some pretty big cube mesh? I found 'noMipmap' parameter for 'BABYLON.Texture', but I don't understand how to use it, what's 'type' thing? I need something like nearest neighbour thing. Any thoughts? [EDIT]: So, 'noMipmap' and 'invertY' both use 'true' or 'false', right? I found Babylon.js documentation here and it says 'type', not 'boolean', I'm confused (maybe I just don't know some simple things). 'noMipmap' works if things getting smaller, but not bigger or it works both ways, but uses exactly 'smooth' thing? [EDIT2]: I've set texture to 512x512 and I feel fine about it for now. "I'm a blurryful!" .[-^o ^ - . .], [2] How to apply texture to chosen side (polygon) of mesh (box) only? As far as I know I can use Blender for that, but is there a thing that I can use while using code only? [EDIT]: I found out that I can use that one (not tried yet though): materialName.reflectionTexture = new BABYLON.CubeTexture("folder/filename", scene);materialName.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;// filename_nx.png, filename_ny.png, filename_nz.png, filename_px.png, filename_py.png, filename_pz.png[3] How to get 'lookAt' method be instant instead of slowly rotate meshes to target? [EDIT]: I stopped pulling my hair off and just placed piggy sprite inside of mesh (just copied its position), also applied 1x1 alpha texture to the mesh, at least I've got almost the same result I wanted (mesh has physics). [EDIT2]: Just found .isVisible and set it to false instead of adding materials and set transparent texture for them. Removed '.setPhysicsState' for mesh and calculate stuff like some simple platformer now. Sprite checks its position through '.runRenderLoop' function. "Dusk is getting closer, oink!" [4] Is there any function or method I can use to calculate shadow using texture instead of mesh itself (shadow of sprite)? [5] How can I get rid of white outline around texture which has 'hasAlpha' set to 'true'? [6] Sometimes it takes too long to load textures (about 15s or more), any idea why? [7] How to send physics to sleep when its not used and if it stays calm and touches nothing except floor where it lays for a few? [8] How to tell mesh that has '.setPhysicsState' to check collision with mesh that doesn't has it (not .intersectsMesh though, but to react if first mesh has '.setPhysicsState' as well, while it doesn't)?