[RESOLVED] Transparent mini-map (camera with viewport)

[digitspro]

Hi,

 

I've successfully created a mini map. Now I'm trying to give it a custom opacity value to make it a littler transparent. I did not find any way to do this. Any help would be appreciated.

Here is a good starting point for your kind help:

http://www.babylonjs-playground.com/#RE9QZ#3

[aWeirdo]

Hi @digitspro

This is (to my knowledge) not possible at this moment.

You would have to custom make it, or plead and beg that @Deltakosh (or someone else all-knowning?) is willing and have time to add it :-) 

[Nabroski]

@digitspro
I also have no quick solution for you, you can experiment with canvas2d. 
http://www.babylonjs-playground.com/#RE9QZ#4

they did it here

You can also create a Post process, and render an alpha channel. 

 

[Raggar]

Would it be possiblle to map 3D coordinates to 2D (XY), so you could create your own minimap and style it using normal Javascript and CSS?

Shouldn't this be doable by using the positions you already have, and plot them on a <div> with the map image being the background source.

In that case, you could say that any 3D (-/+) X coordinate corresponds to some amount of the maps X coordinates, whereas Z coordinates corresponds to the maps Y coordinates.

If level and maps sizes are consistent, I suppose you only have to find this magic value once (the unit conversion between the scene and the minimap div containing the map image).

 

Or maybe this isn't as easy as I make it out to be. I haven't tried it after all.

[Nabroski]

Hello @Raggar

 programming made to make things possible.Using normal Javascript and CSS ? You have to get some Context like a Picture of the WebGl Contex and than create a Div or something.
https://doc.babylonjs.com/tutorials/Render_Scene_on_a_PNG

Their is also a new feature without saving it to local drive. Try to search in this forum. 

If you have a basic understanding of shaders:
i would to go and render a projection matrix on a shape or something. and then go further. 

http://www.babylonjs.com/cyos/#2KFSW5

https://gamedevelopment.tutsplus.com/tutorials/building-shaders-with-babylonjs-and-webgl-theory-and-examples--cms-24146

[digitspro]

thanks @Nabroski. I'm experimenting with ideas from what you pointed out. With LOTS to learn

[Raggar]

@Nabroski

I was actually thinking about some kind of unit conversion between 3D space and a fixed size div, in which you could plug the map.

This would allow you to create and style your own map in any image-editing package like Photoshop or GiMP, and then "simply" update the minimap-player's position when needed (Doing movement etc).

I made a dirty example: https://jsfiddle.net/0von8sxs/2/

Try moving the sphere around using the WASD keys, and see how the dot on the minimap responds to that.

A better way would be to use the actual position of the sphere/player, and then find a way to convert these coordinates to your 2D map. What I've done (Nothing more than a test), might produce issues when using velocity instead of units, but I guess the following would work:

Get the center of the map, and link this offset to the zero position of the player mesh

Get the outer bounds of the map, and link this offset to the outer bounds of the scene/level.

With a few more points, you should be able to automatically calculate any new map positions, I think

[digitspro]

I notice that all the stuff covered in https://doc.babylonjs.com/tutorials/Using_the_Canvas2D are gone in the current preview version 2.5-beta. I am worried to go the direction of using Canvas2D stuff if it is deprecated, as it will hinder me from future upgrading to the latest of babylonjs  

False info. It was an issue with Visual Studio that made me think all these classes are gone. I had to open the d.ts files for V.S. to know these definitions exist

[Nabroski]

@Raggar I think this is pretty awesome what you are doing. Keep on posting! I would love to contribute, but unfortunately i'm out of time. 

@digitspro we already in 2.6-alpha

[digitspro]

@Nabroski that's awesome. I just git-pulled

[Nabroski]

<--Still using Notepad++

[Wingnut]

Hi guys.  Has anyone mentioned the renderTargetTexture method of overhead map view?  It is almost the same as extra cam/extra viewport method, except no drag'n'drop allowed on overhead map.  http://www.babylonjs-playground.com/#1WROZH#14

In the PG above, camera 3 and tv/monitor #3 (third camera-parented plane at the bottom of the canvas)... is working as an overhead map view. 

Well, it's not really a map view.  It is a camera #3 view.  This method avoids the hassles of placing extra viewports, and instead... just allows you to place a plane... to display the RTT upon. 

As another feature... a person MIGHT be able to place (and parent) an "overlay" transparency atop camera 3, too (such as a road map that ONLY shows in THAT view).  There is some versatility to the RTT (renderTargetTexture).

Camera 3 has its .beta set to zero, so it aims straight down (line 11), and of course, that camera can be position-scrolled in all directions.  It is simply a camera.

The layerMask work in there... was done by Deltakosh.  It was done to prevent the 4 monitors being viewed in monitor #1 view... as seen here.

One other note.  RenderTargetTextures use views from cameras... and not view from final render.  So, downstream/postprocess things such as edgesRendering and fog... might not be seen in a RTT view.  The sampling used for RTT's happens before (upstream-of) post-process effects.  But still... when it comes to putting a camera view on a plane, there's nothing easier than an RTT.  Party on!

[Nabroski]

@Wingnut i think wingnut is totally the right person for such games. this is something for his Chronicles 

http://babylonjs-playground.com/#2KGC7U#1

[Raggar]

This test uses a custom map and updates the position of the minimap dot, based on the position of the sphere. This is all done in the renderloop, instead of based on input.

https://jsfiddle.net/0von8sxs/5/

 

Next step will be to find a way to follow the dot around and automatically move the map so the dot stays centered. This will be helpful when using bigger maps, that might require some zooming to be useful at all.

I thought about using some javascript to crop the image, or maybe some tile-based action. However, I think this should be easily achievable by using the same technique I use above, by using some CSS to move a bigger image around, and scale and crop it to only fit the sphere's position + some view distance. We'll see.

 

@Wingnut

Is it possible to then set visibility to false on some meshes, and let that change only be affected by the third camera? I'm thinking about a minimap for a multiplayer game, and in that case you won't always prefer seeing your enemies' positions.

[Raggar]

5 minutes ago, Nabroski said:

@Wingnut i think wingnut is totally the right person for such games. this is something for his Chronicles 

http://babylonjs-playground.com/#2KGC7U#1

The problem with adding rules is you have to clear the cache, otherwise they'll stack. I learned that the hard way. Lol.

[Nabroski]

1 minute ago, Raggar said:

The problem with adding rules is you have to clear the cache, otherwise they'll stack. I learned that the hard way. Lol.

What do you mean with rules and stack ?

[Raggar]

1 minute ago, Nabroski said:

What do you mean with rules ?

Oh. You use innerHTML. I used insertRule when applying CSS using Javascript. My mistake.

Try pressing Run a few times, the HTML/CSS will overlay the previously added HTML/CSS. Same thing happens when you use insertRule.

[Nabroski]

fixed: i dont what to spend to much time on this, but its is possible

http://babylonjs-playground.com/#2KGC7U#7

[Nabroski]

its only an interesting thing to hack, nothing serious.

you can search for chrome caching result. its a big playground thing.

that i can do it this way, also resulting in some "playground" bugs.

it would be kind of cool to implement this in in the future , to save only the editor text and recompile everything. currently still somewhere few bits left from the previous result. 

[Wingnut]

@Raggar  Get to know the "layerMask" stuff.  I THINK... by setting enemy mesh layerMask different than home-team mesh layerMask... that RTT camera can be selective in what it renders.  A bit over my head.

Speaking of over my head, @Nabroski, are you saying that the Wingnut Chronicles does simple demos and kiddy-level experiments? 

Yeah, that's somewhat correct.  I'm not a very "technical" person.  But kids love me, and that's all that is important.  heh.

[Nabroski]

wingnut is the best

http://www.babylonjs-playground.com/#1BDA0J#0

 

@adam you had a nice playground i remember to hack isInFrustum behind a plane. if you know what i mean. useful for enemies behind walls

[adam]

Sorry, I can't remember that PG.

edit:

Oh, I think I might member.  I probably won't be able to find it though.  If it's the one I'm thinking of, it just used the dot product of the plane normal and the normal of the camera direction.

[Wingnut]

http://doc.babylonjs.com/playground?q=isInFrustum

Only 21 results!  No sweat. 

[Nabroski]

Console Application3

 

I feel like a Monkey typing Shakespeare, if you know this story.

 

[Raggar]

Okay, I managed to progress a little with the above example.
 But there really Must be some smarter way of doing this, as it feels very hacky

https://jsfiddle.net/0von8sxs/9/

Move around using WASD, and see how the minimap follows the dot around my manipulating the margins.

Now press and hold M to get a map twice as big, this time not following the dot, but simply showing the dot's position on the map.

Beside the map creation itself, I'm not sure how to cut the work load, but I'm starting to be satisfied with the result.