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

[Nabroski]

@Raggar WHY you are not using Canvas2d?

You can Dump the FrameBuffer ->kind of make a Screenshot, please also look up for how to make a Screenshot @Wingnut -> possible without saving ?

This will return a base64 sting just overload the picture it to a div 

http://babylonjs-playground.com/#10OY8W#4

[Wingnut]

Do I LOOK LIKE the University of Screenshot, Nabsy? 

I'm busy here... I got snow ankle-deep and rising fast.  It's a BLIZZARD!  Although my snowblower is ready, my luge track and toboggan hill still need lots of work.  And all the playgrounds need holiday lighting, yet.  Busy busy busy. 

See here, and here.  (As Deltakosh often reminds, ANYTHING is possible with JS)

Oh, look at that.  One of the screen grab methods uses renderTargetTexture. 

Wow, that Wingnut guy was giving us great renderTargetTexture wisdom...  8 posts ago!   What a guy! 

6 hours ago, Nabroski said:

WHY you are not using Canvas2d?

Cuzzzzzz.... he's still in alpha.    Canvas2D and Shape2D will give him positional "representations" of the objects in the scene... but it's not a camera view.

With Canvas2D and this HTML stuff... you can't see if the enemy tank crews are outside their tanks... bar-b-q-ing hamburgers on the Hibachi grill.  A good spy satellite is suppose to get some details, ya know?  heh. 

And if there's battlefield prostitutes among the enemy troops, you don't want to attack at that time, right?  (Cuz those are the very same girls that visit OUR troops.)    We need details, and only a camera can get good details. Radar sucks.

Really, it depends upon the budget of the foes.  If you can "$$project your power$$", you can reach out and touch someone, like USA aircraft carriers do.  Then, get fresh satcom imagery, plan your "forward" spy tactics, and launch the drones.  Drones can look right up the enemy's nostrils and check for boogers.

Meantime, dress-up some of your black ops troops in enemy attire, and infiltrate them on the ground.  These black coverts can gather great info, and can also shoot laser designators at key targets during engagements.  Those laser designators are like a remote control and a NetFlix box (during engagement).  Coverts just "order" a bomb from the continuous-flying B2 Bomb Warehouse... and fly it directly to the laser-lit target (smart stand-off weaponry).  Dial-a-bomb! 

Ok, so, back to this overhead map... a modern version... needs it all.  View from the satellite, view from the drone, view from the forward air controller heli, view from battlefield weather center, view of General Mayhem speaking to the joint chiefs, video feeds from all of your forward bases, video chat with all of your commanders, on and on.  That little box in the corner of the screen... can get REAL BUSY... during modern warfare.  It is going to need 20 buttons on its border. 

But yeah, intervening (pre-save) in both screen-grab methods... is easy, I would say.  Anything is possible with JS.  I like to challenge myself by testing HOW MANY WAYS... I can do something incorrectly... with JS.    Almost always... 4-5 ways available... to do something wrong.  FUN!

[digitspro]

Hey @Wingnut I'm glad you came by my friend. Your playground of rendering camera views on plane is brilliant work! And it is the only solution for me to achieve minimap transparency. After playing in your playground I found out that by simply setting alpha on the plane material whose texture is the minimap camera view, then we achieve transparency. It was really smart how you then positioned that plane relative to the active camera by setting the parent of the plane to be the camera, then we always have minimap (plane) in relative position as if it is overlayed in the projection world! Ah so goooood! *claps*

Here is a solution from my first post's playground to see where the additional work fits. For our future readers pleasure:

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

 

Marking post as RESOLVED

Cheers!

[Wingnut]

Thanks, DP!  Nice of you to say... glad it works.  The only thing you lose (by using a camera-parented RTT-on-a-plane instead of a viewport)... is drag and drop on the mini-map.  I think drag and drop is available on a viewport-based cam, but not available on a renderTargetTexture.  I haven't tested any of that... but I suspect that is correct.

Anyway, again, thanks... very kind of you.  HUD's and reticles can be done with planes parented to cameras, too, but there is a device called a Babylon.Layer that has some potential too, I think.  I usually use a Layer as a static scene background image... but with proper image uOffset and vOffset on the layer texture... it can become a limited panorama, too.  (see line 122 to see camera.radius "bound" to layer.texture.uOffset.) 

Kind of fun, just like all of BJS/webGL.  It would have been better with a seamless pano image, though. 

Be well, party on!

[Raggar]

On 8/12/2016 at 6:39 AM, Nabroski said:

@Raggar WHY you are not using Canvas2d?

Because my knowledge of HTML/CSS is Less limited than my knowledge of Canvas2D.

If it's possible to 'relatively easy' get the same results as I got from my test, I'm sure it would be worth implementing it that way, but right now the map works exactly as I want it to.

[Nabroski]

maybe someone find it useful i leave it here
http://www.babylonjs-playground.com/#1VVORT#0

[JonathanRev]

i was testing this way to do a minimap , but i saw that when you intersect another object the minimap looks like this , any ideas how to fix that to avoid that ? or it is better using the viewport way :