How to make picture textures clearly visible

As shown in the playground, I used a picture as the material of the ground, but as the distance of the camera changes, the detailed texture of the picture disappears. I would like to consult how to keep the texture of the ground clearly visible.Looking forward to your reply!

May be that?


And a little bit better with anisotropic level increased.


This is exactly what I was looking for, thanks a lot for your replies, I already have a direction to fix this! @mawa @Cedric :heart:


I found a new problem, I want to add a highlightLayer to the ground, there is a strange performance, how can I solve this problem? @Cedric @mawa

This is expected. Texels are discarded depending on alpha value. Then, the highlight layer, get that rendering and render highlight in discontinuities. Basically, on pixel where there is no rendering, next to pixel where there is rendering. Highlight layer is more suitable for meshes, not for alpha blended rendering.

What do you want to achieve? can this be done with another texture? or by modifying current texture?


As far as I know, the hl uses the emissive and stating that the diffuse makes for the alpha, the highlight cannot be seen through the transparency set by the diffuseTexture.
I believe there’s a work-around. I would need to check on it. Can’t remember just now.
May be @cedric can remember. Else, I could browse through my files…

1 Like

My goal is to use this picture as a ground texture and make it highlight, but this picture has transparency, so I have to use this method, do you have a better way to achieve this goal?

Yes. That sounds like the most obvious and most simple. Create a pseudo-highlight on the texture itself. It’s a trick that also helps when creating neon-type signage because eventually the hl doesn’t show enough when the cam is in the distance. Simple but efficient.

This link might be of interest to you:

1 Like

Nop, I don’t remember.
I tried a few things with transparency mode, alpha test…without success

Doesn’t matter. May be it’s also just me :grin: :sleeping: dreaming

I am a beginner of babylonjs, I don’t quite understand the method you mentioned, could you give me an example to achieve my goal, thank you very much
Maybe this kind of texture method can’t make it highlight, then I may need to consider other ways to achieve it.

What do you want your scene to look like?

Like my code in the playground, I need a grid ground, I now have some image resources with transparency, I want this ground to be like the grid of the picture, and in some cases can be highlighted.

Did you check out the link I gave you above? You could check out my PG from this post

In the inspector, unfold the ‘Materials’ section and check on the material named “Mat_Neon_Atlas_1”
You’ll find that.

  1. It’s a PBR Material
  2. It has an emissiveTexture
  3. the emissiveTexture.level is pushed far beyond the standard value

4) We use the glowLayer instead of the highlightLayer.

Not shown in the PG, but can download the file mentionned in my post.

  1. The emissiveTexture is an alternate version of the diffuse/albedo texture to which I have added a blur to simulate a diffuse light effect. This blur together with a high emissiveLevel will show even when in the distance from the camera.

May be I’ll let you first discover a bit about this solution. And then, there are also other solutions. As cedric says, it kind of depends on your use case.
If I manage to free some time later today, I’ll try to illustrate the solution mentionned above (not a promise but I’ll try).

1 Like

Thank you very much for your detailed reply, I will seriously consider every point to achieve my effect, maybe I need a little time to read the relevant documents.