[SOLVED] Render Camera to UI Texture: Minimap

Help & Support
1

Hi,

I am trying to make a Minimap for my environment, but I am facing some issues,
I did checkout the tutorial: Render to texture and I have done the same in my project,

In my RenderLayerToTexture.js:

// Create a 512x512x24-bit render target with a depth buffer
var colorBuffer = new pc.Texture(this.app.graphicsDevice, {
    width: 512,
    height: 512,
    format: pc.PIXELFORMAT_R8_G8_B8_A8,
    autoMipmap: true
});
colorBuffer.minFilter = pc.FILTER_LINEAR;
colorBuffer.magFilter = pc.FILTER_LINEAR;
var renderTarget = new pc.RenderTarget(this.app.graphicsDevice, colorBuffer, {
    depth: true
}); 
var layer = this.app.scene.layers.getLayerByName(this.layerName);
layer.renderTarget = renderTarget;

and in my ApplyTexture.js

   var material = this.entity.element.material;
material.diffuseMap = layer.renderTarget.colorBuffer;

material.update();

Result:
So the map which is displayed is very dark(no lightning)
For the original grass texture I am using diffuse as well as emissive map, as I am doing image based lightning and I did place a camera above the map in orthographic mode which displays the below grass map.

RenderToTexture.PNG
RenderToTexture.PNG1070×425 216 KB

1 Like
2

Is the layer that the lighting is on included on the mini camera of layers to render?

3

Hi,

I have solved it.
Solution:
Instead of assigning material to the element component, I assigned a texture.
Works perfectly!

Thanks.

1 Like
4

How did you solve it?
Could you give an example in code I can’t find anything else on this topic.

5

You can assign the colorBuffer to a element of type Image.

this.entity.element.texture = layer.renderTarget.colorBuffer;
2 Likes
6

thank you!
this will be so helpful!