Babylonjs outline through walls - babylonjs

I'm trying to make a FPS game using babylon.js as a framework. I want the player to be able to see an outline of their allies through walls (so they can know where they are and what they are doing). As a reference, here is an example I found on google from the game Paladins:
The best thing I could find on the babylon.js website (and on google) is how to do the outline:
(https://doc.babylonjs.com/how_to/highlight_layer)
var hl = new BABYLON.HighlightLayer("hl1", scene);
hl.addMesh(sphere, BABYLON.Color3.Green());
While an effect like this is pretty much what I want, it isn't visible though walls. Is anything like this possible in babylon.js? Thanks in advance!

To render something "on top" of something else you can use rendering groups.
The short documentation can be found here - https://doc.babylonjs.com/resources/transparency_and_how_meshes_are_rendered#rendering-groups , but the basic concept is - the higher the rendering group, the later it renders.
You can see it here in action - https://www.babylonjs-playground.com/#2338DN#3
There was an active conversation about the same subject in the forum, which can be found here - https://forum.babylonjs.com/t/highlight-through-objects/8002/3 , credit goes to sebvan

Related

How to add buttons on top of an image, like waypoints on a map [WORDPRESS]

I’m new to wordpress therefore I’m not aware of all the capabilities of this tool, but I wanted to know how do I add buttons on top of an image, much like the waypoints you normally see in maps in museums or even video-games. It is something that I am having trouble recreating and I would need some help with that.
Here is an example but of course, with less buttons than what it is actually shown here.
Also, before I forget to mention, thank you to all those who try to help me.
(This is a repost from my original topic in the wordpress forums, you can find it here.)

HERE Map not rendering

I'm not sure what's wrong, but after setting up the map, all I get is a light blue screen. Changing schemes seems to not affect it either. Neither does changing the geoCenter (currently testing with: 37.73088189776775 -122.14045649405767) which is in the SF bay area.
Also, when I check usage on the project via my account, it is 0 despite me testing all day.
My delegate is called when I try to scroll the map, so I know that part is hooked up and I'm actually rendering the map. It's just a light blue screen...like I'm stuck in the ocean...
Any ideas? Any low hanging fruit I can check? Thanks.
Update: I'm using the iOS Starter SDK. Please let me know what additional information would help. Thanks.
I was able to get it working by not embedding the map inside another view. By bringing it to the top level, and then subclassing it I was able to get it to work. Thanks.

Hiding objects in unity without changing their state

I have a vague memory of a Unity video tutorial where the guy hid some objets while building a scene. The thing is that he dind't use the usual 'disable/enable the object via the inspector checkbox' and so he didn't have to worry to enable them later... moreover, as the objects were 'invisible but enabled', all attached behaviours were working.
As far as I remember the effect was pretty similar to moving the object into a hidden layer (but not changing the object layer but using a different Unity built-in action so he actually dind't change anything in the object).
I've been trying to remember how he did such a thing and looking around the editor to find the specific option but with no luck. Honestly, I'm beginnig to think that I might not be remembering correctly. Do anyone know about this 'hide objects without changing them' command?
Regards!
Sounds like he might have just turned the object's renderer off. Each GaneObject is going to have some kind of renderer as a property in the inspector (sprite renderer if its 2D, ect). He probably just disabled that as opposed to disabling the entire GameObject. Let me know if that helps!
I've just received by chance a link to a video on twitter (I think it's the very same I was trying to remember but I'm not 100% sure). Anyway it seems that my current Unity version 2018.3.3) doesn't include that 'Scene visibility' toggle; it seems to be available for 2019 Beta. . I didn't test it yet but it seems pretty straightforward, just click on a gray bar in the hierarchy bar, to the left of the object you want to 'hide'; the bar seems to work as a an visible/not visible toggle. Here a link to de video where you can see the thing working!
I hope it helps!!

How to prevent users from passing through objects in a webvr application?

am new to webvr and need a little bit of help, so i built a virtual reality room, with little interior details, now i want a user to only move to specific points, for example say a user hovers over a window, than a the camera/view should jump to that window/point not necessary viewing outside just a little bit, this is to avoid users going through walls and objects. So how can one solve this? Thanks in advance.
Managed to get it right, thanks to JavaScript, so the camera now change position to that specific point you point on with cursor and than rotates.function windowCameraChange(){var curt = document.getElementById("MainCamera");curt.setAttribute('camera', 'zoom', '1.450');curt.setAttribute('rotation','0 -90 0');}

Creating an interactive map with CSS

Based on the design below, is it possible to create the map just using CSS? If so, how?
So as you can see, when you hover over a state the name will appear and change the color of the state. On clicking it will info below the map per state.
UPDATE 1:
Can it be done using absolute positioning, z-index and hover states on a button?
UPDATE 2:
With a slight tweak to the design, would it be possible to have a flat image for the map and plotting dot's on it for each state that would include a hover (using the same tab style as the image example)? Each dot being an image. Am I right in saying that the complication of the design is to highlight the right area when hovered? Therefore, just having a dot would solve it right?
I was interested in this too and found this example (USA) MAP if you look into the source code there is area for each state that look like <area onmouseover="show(this)" onmouseout="hide()" onclick="fform.tg.checked=false;togl()" shape="poly" coords="179,33,174,66,230,67,225,35,179,33,179,33" href="us-nd.html">. You can read more about and tags in W3C link. I think its the only way how to do this without flash or something... But it cant be done without a little JS. To get the coords, I would asume you just open your image in some editor that shows coords(gimp or something) and manually find them out...
No. If it had rectangular shapes yes but with a lot of work.
You really need javascript on this one.
You might want to try a Javascript mapping library - www.openlayers.org is the market leader (and free and open source).
You get your US state map in the right format (GML for example) then you can pretty much cut n paste from one of the openlayers examples. Hovering and clicking are handled by event functions. They can then do things like updating your info box below the map.
Note that if you want Alaska and Hawaii as in the picture and all you can find is a geographic state map, you might have to use a GIS to shift the features around. Quantum GIS is a free and open-source GIS that can do this for you. Help for that can be found on gis.stackexchange.com!
If you're willing to use javascript, jQuery more specifically, here is a nice plug-in/tutorial on how to do what it seems like you'd like to. http://playground.mobily.pl/jquery/mobily-map.html. It won't do the states exactly, but it will allow you to drop pins and such.
Update: This seems to be exactly what you're looking for: http://playground.mobily.pl/tutorials/building-an-interactive-map-with-raphael.html. It includes a rather indepth tutorial as well.
Here is another interactive US map I found myself: http://www.fla-shop.com/products/html5/united-states/us/ It is purely javascript with customizable popups.

Resources