I have found a Picture in Picture example on internet, which has inspired me to use this
technic in my project. It was surprisingly simple simple to do that.
Although it works fine, I recorgnized that on some moments when booth viewports shows the floor, the floor textures seems to mix up. I think to add a small border to the small viewport will help, but I can’t find a proper method nor an example on google.
Because the project should work on devices with different display sizes, a solution via hud will mean a bit of work, I would prefer if somebody could tell me if there is a simple way (for example a border).
Im not sure what exactly you want to do, please provide some concept images.
if you want screen border, you can just add it via custom Filter or fullscreen quad with border shader or GUI element, or via changing viewPorts like you said. Most easy solution seems to be GUI.
the triangles. It affect Frame per second much, same Geometry amount(thats why devs do Batching to lower this amount)
So generally care about Render Calls(Geometry amount - objects field) + Triangles amount(that can be multiplied because of some filters), LOD is also helpfull here, that can lower it much.
sorry, I will try to explain it more exact: At first I created a simple Scene with the default camera and the default Viewport. The camera Node almost not moves/translate, but it gets frequently aligned to an object that moves through the scene. On Desktop its looking ok, but on an android device its far to tiny. So I cloned the camera and create a new viewpot for the cloned, which is positioned on the upper right corner and alway chase the objects. This works ok and works fine. Now every time the camera is headed to the ground and is in a certian distance, the repeated floor texture in booth viewports displays almost at the same size and thats why they look as if they werent seperated. Thats why I was asking if there is a simple solution as a border, otherwise I had to render alwayss something in Front of the second cam or displa some line pics on the hud or do think of some other solution. And I would like to take the simpliest way.
maybe you could provide some image dekstop vs android ?
I understand Android have much less resolution,
also understand you use 2 viewports with 2 cameras(second is cloned)
and that second vieport is in “upper right” corner.
but still i dont get general idea/problem and “border” thing.
Maybe what you need is viewPort.clearFlags() // false for color and make transparent background
Its better you provide more explanation using images or a video
ANYWAY:
This is the code for miniMap , i have just added some comments on it :
/**
* create a frame to hold the new ViewPort
*/
FrameBuffer offBuffer = new FrameBuffer(minimapSize, minimapSize, 1);
/**
* create a 2D texture that holds the ViewPort Renderer
*/
Texture2D offTex = new Texture2D(minimapSize, minimapSize, Image.Format.RGBA8);
offTex.setMinFilter(Texture.MinFilter.Trilinear);
offTex.setMagFilter(Texture.MagFilter.Bilinear);
/**
* use the offTex as a color Tex for framebuffer to display the viewPort render colors ..etc
*/
offBuffer.setDepthBuffer(Image.Format.Depth);
offBuffer.setColorTexture(offTex);
/**
* Create a Geometry Spatial that will hold the frameBuffer(frame of the second viewPort) in a quad shape
*/
Geometry secondViewPortSpatial = new Geometry("viewPort2", new Quad(minimapSize, minimapSize));
/**
* doing the tex & mat stuffs , evaluate the secondViewPortSpatial geom material(secondViewPortSpatial to use the offBuffer colorTex(Tex2d)
*/
secondViewPortSpatial.setMaterial(new Material(app.getAssetManager(), "MatDefs/MiniMap/MiniMap.j3md"));
secondViewPortSpatial.getMaterial().setTexture("ColorMap", offTex);
/**
* change the shape(Tex) of the secondViewPortSpatial object itself not the renderer ,
* its called the overlay(for the overall shape) & Mask or oeverlay skin for the color of the overlay
*/
secondViewPortSpatial.getMaterial().setTexture("Mask", app.getAssetManager().loadTexture("Textures/MiniMap/circle-mask.png"));
secondViewPortSpatial.getMaterial().setTexture("Overlay", app.getAssetManager().loadTexture("Textures/MiniMap/circle-overlay.png"));
secondViewPortSpatial.setLocalTranslation(
app.getCamera().getWidth() - minimapSize ,
0f,
1f
);
/**
* set the output of the produced secondViewPort to be in that seprate frameBuffer
*/
secondViewPort.setOutputFrameBuffer(offBuffer);
/**
* attach the scene(RootNode or Node you wanna get its view) to the viewPort
*/
secondViewPort.attachScene(rootNode);
As I started to my first try jme, I used JBullet and was impressed. thats why Im Setting off a simple scene, where you just throw a coin near to a wall. So I had to do not to much and can try a little further on the physicsengine. Then, as I mentioned above, I deployed it to my phone. There the display is much smaller and thats why I’d wanted to add a chase Cam for the coin.
@ [RiccardoBlb]: as I mentionend this should work on different display sizes and ratios. That would mean to ask the display settings and do some math. That is why I’m searching fo a simple solution.
@RiccardoBib
Because of the ratio varies (4:3, 16:9, 19:9 or other). I think have to request it from display settings, because the Viewport width an heights defined by floats between 0 an 1.
so the size of the object rendered has rhe same ratio. Another reasen may be, that I want to use this solotion in future. And both viewports renders the same scengraph. May be it then comes to the situation that I’m seeing the “background” object from the second viewport too.
i suggest you worry more about tris amount.
