Today, I’d like to introduce you to the Texture Inspector.
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.
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
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’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?
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
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?
