Introducing the Texture Inspector

Hi all!

Today, I’d like to introduce you to the Texture Inspector.

image

I’m an intern on the Babylon.js team and I’ve been building this tool for the past 10 weeks. It’s been live in Babylon for over a month now, and it’s reaching a stage where we (the Babylon team) would love to hear the community’s thoughts.

The Texture Inspector is designed to enable you to debug your textures inside of Babylon. Users often load in textures and find that they do not appear as expected. Unexpected results can be related to transparency, UVs, or unique texture types such as cubemaps. The Texture Inspector allows you to investigate all those issues and even fix some of them in-engine. You can access it by opening the inspector and selecting a texture:

The properties bar on the top gives you control over the size of the texture, and allows you to peek at pixels to see their RGBA values. It also allows you to step through mipmap levels, and upload or download the texture.
image
The toolbar on the left unlocks the ability to edit your texture. You can paint directly on to it, you can flood fill regions, and you can adjust the contrast/exposure of your texture. You can control the color and alpha you’re painting with there as well.

The channels list on the right allows you to manipulate RGBA channels. You can click on the eye icon to hide a channel if you don’t care about the information contained there. You can also click on the channel icon itself to “lock” it, meaning edits will not affect that channel.

There are also several keyboard and mouse controls available:

  • Mousewheel or +/- allow you to zoom in or out
  • The middle mouse button allows you to pan across the texture
  • Control+A selects the entire texture
  • Escape deselects everything
  • Control+S saves the texture to your local machine
  • Control+R resets the texture to it’s original state

Let me know your thoughts! Both bug reports and feature requests are welcome. If you have a usecase for this tool, post it here :slight_smile:

Thanks everyone!

16 Likes

Welcome to the forum and to the Babylon team

It’s cool as a tool. Thank you.

Seems pretty comprehensive, maybe it would be missing some information on the texture like the weight it does (Ko, Mo…).

We can reset the changes to the starting state, but can we just undo the previous action too? That could be good.

So much for my ideas for improvement. Otherwise cool tool.

1 Like

Hi David! Thanks for giving the tool a try!

We thought about adding this feature, but the memory cost is pretty high. An undo/redo stack would require keeping track of the previous states of the texture, which would quickly get out of hand after several edits. Ultimately we thought that a reset button would be a good compromise.

Not sure what you mean by the weight of the texture. Could you clarify this?

I mean the size/weight of the texture in KB, MB.

For example : 1,33 MB

I’m not talking about the dimention (1024*1024) of the textures, but the compression size of the texture
I don’t know if it’s clear enough. I use a translator to write in English and the translation may be inaccurate.

And for restoration if you only kept one preceding being each time.

If you made 10 changes and we got it wrong on the 11th change, we could revert to state 10 rather than revert to state 0. What do you think?

1 Like

Looks cool! :slight_smile:

1 Like

Ah, for this you can use the memory profiler available in your favorite browser. The size of the texture in memory is determined by WebGL and the browser, so it’s a bit outside the scope of Babylon.js.

That would be a doable solution, but we felt it was better to allow the user to restore the texture to its original state. We think that most users will probably want to undo all of their changes, rather than undoing a single change. However, we will definitely keep this request in mind. It may be worth implementing in the future.

By the way, your meaning is pretty clear! I really appreciate you making the effort to write in English :slightly_smiling_face:

Thanks! Glad you liked it!

Hi, there. This is an old PG: https://www.babylonjs-playground.com/#UXCB15#5

In the inspector, I’m seeing multiple copies of texture passed into the custom material. WAI or bug ?

Hi,

Looks like the issue here is that you’re creating a new texture every time the material binds, which leads to an infinite loop of new texture objects. If you don’t want to create a new texture object each time, you can simply instantiate the texture in createScene(), which is only called once: https://www.babylonjs-playground.com/#UXCB15#119

However, your onBind observer (and thus material.getEffect().setTexture) is still being called every frame. I’m not sure why you would want to do this, can you explain what the playground is supposed to do?

1 Like

The PG is a demo from custom material: CustomMaterial Samples

I understand now, so the best practice is not to pass a new texture in the material binds. Thanks for the heads-up!