Shader or Image editing situation

HaledireHaledire Posts: 34Member
edited July 2020 in GUI

I'm trying to set up a TextureRect in such a way that I can either put in images in a tall rectangular shape or a square shape. I'm trying to figure out which method would be best to use here.

I assume the solution is a shader, but I need to figure out the proper way to have the shader work between a square image and the skinnier rectangular image. These are a 256x256 square vs 179x256 rectangle. I want to be able to cut the rectangular image down to a 179x179 image that will simply scale up to the 256x256 with the shader active, but I'm not sure how i can achieve this with my low knowledge of shaders. The best I can do is create a masking visual shader with the appropriate mask I have for this object, but I don't know how I can properly set it up for the situation at hand.

This is with the circular texture - obviously there is the issue that I have to re-adjust the UV for the rectangle to get the appropriate area, but I also need this shader to be applicable to the square image as well.

Using an AtlasTexture to reshape the image doesn't work as the shader will work on the original texture and not the region.

Another option is to determine if the texture should load the Square StreamTexture and apply the shader, or use an ImageTexture and blit_rect_mask out from the Rectangular Image into a new image for the Texture (as shaders are wholly incompatible with Image files from what the engine was telling me).

This is part of a UI object that would be constantly changing at runtime, so I'm not sure what the best course of action or (in terms of the shader) how to set up the shader appropriately to make this work.


  • HaledireHaledire Posts: 34Member

    I think this works, but I'm curious if I'm doing something silly here (aside using VisualShader as I still haven't bothered to properly learn shader language).
    With this code, if I feed the shader param uniform square the value of texture.get_height() != texture.get_width():

    If the texture is the 179x256 size, it offsets to the proper part of the image and scales the uv so that when the image stretches to the square shape, the 179x179 space of the image is shown properly.

    If the texture is the 256x256 size, the offsets evaluate to 0 shift and a scale of 1 and displays the regular square image properly.

Leave a Comment

BoldItalicStrikethroughOrdered listUnordered list
Align leftAlign centerAlign rightToggle HTML viewToggle full pageToggle lights
Drop image/file