[SOLVED] Render Camera to UI Texture: Minimap


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;


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.

1 Like

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


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


1 Like

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

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

this.entity.element.texture = layer.renderTarget.colorBuffer;

thank you!
this will be so helpful!