Jump to content

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


digitspro
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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

Shaders-6.png

Link to comment
Share on other sites

@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 :P

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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 :D

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...