This is the testing Godot forums! All forum posts unique to this forum will be deleted! Please use the main forums here for any posts you want to keep. All forum rules still apply.

Trying to fix scale of a circle?

DismantledDismantled Posts: 24Member

Just need to find out how to scale the circle on the UV.x so it is not an ellipse?

Trying to follow this tutorial using shadertoy which uses slightly different language.
https://youtube.com/watch?v=u5HAYVHsasc

shader_type canvas_item;

void fragment(){
float d = length(UV-.5);
float c = d;
if(d<.3) c=1.0 ; else c = 0.0;
COLOR = vec4(vec3(c),1.0);

}

Best Answer

  • SIsilicon28SIsilicon28 Posts: 693
    Accepted Answer

    Well first off a uniform variable is a way of passing data from the main program to the shader. Once you have a uniform defined like what I did, it will show up in ShaderMaterials that use that shader. This how you will change the aspect ratio from outside the shader to anywhere else, like gdscript.

    tool # Without this keyword, the script cannot run in the editor.
    extends Sprite
    
    # This function gets called whenever the node, and all of its children get added to the scene tree.
    func _ready():
        # This method allows a notification for when the object moves, rotates or scales to be sent.
        set_transform_notification(true)
    
    # This function gets called whenever a notification is sent
    # In this case, we're only concerned about the transform notification 
    func _notification(what):
        if what == NOTIFICATION_TRANSFORM_CHANGED:
            # set_shader_param allows us to pass a value to the material's shader uniform.
            material.set_shader_param("aspect_ratio", scale.x / scale.y)
    

    You can learn more about gdscript here, and learn more about shaders here.

Answers

  • SIsilicon28SIsilicon28 Posts: 693Moderator

    What you can do is scale the x component of UV; you can't just multiply it by a number though. To make sure that the UV coordinates stay centered, you can use the mix operator and mix between 0.5 and said x component. The variable to mix will be called aspect_ratio. The value of the aspect ratio will be the size of your Sprite or whatever along x, divided by its size along y.

    shader_type canvas_item;
    
    uniform float aspect_ratio = 1.0;
    
    void fragment () {
        vec2 uv_mod = UV;
        uv_mod.x = mix(0.5, uv_mod.x, aspect_ratio);
    
        float d = length(uv_mod - 0.5);
        float c = d < 0.3 ? 1.0 : 0.0; // You can use a ternary operator here. :)
        COLOR = vec4(vec3(c), 1.0);
    }
    
  • DismantledDismantled Posts: 24Member

    Thank you Slisilicon for the response! its taking me a while to digest it.. I am very much a noob in shader programming. How do I get the size of the sprite to divide/change the aspect ratio in code? any better tutorials you used to learn shader coding in godot. I am finding using other software as reference is confusing me, even the ones on shadertoy.

  • SIsilicon28SIsilicon28 Posts: 693Moderator
    Accepted Answer

    Well first off a uniform variable is a way of passing data from the main program to the shader. Once you have a uniform defined like what I did, it will show up in ShaderMaterials that use that shader. This how you will change the aspect ratio from outside the shader to anywhere else, like gdscript.

    tool # Without this keyword, the script cannot run in the editor.
    extends Sprite
    
    # This function gets called whenever the node, and all of its children get added to the scene tree.
    func _ready():
        # This method allows a notification for when the object moves, rotates or scales to be sent.
        set_transform_notification(true)
    
    # This function gets called whenever a notification is sent
    # In this case, we're only concerned about the transform notification 
    func _notification(what):
        if what == NOTIFICATION_TRANSFORM_CHANGED:
            # set_shader_param allows us to pass a value to the material's shader uniform.
            material.set_shader_param("aspect_ratio", scale.x / scale.y)
    

    You can learn more about gdscript here, and learn more about shaders here.

  • DismantledDismantled Posts: 24Member

    Thanks SIsilicon28! I forgot that i could just use Gd script for that. I was trying to do it in shader code lol!

Leave a Comment

Rich Text Editor. To edit a paragraph's style, hit tab to get to the paragraph menu. From there you will be able to pick one style. Nothing defaults to paragraph. An inline formatting menu will show up when you select text. Hit tab to get into that menu. Some elements, such as rich link embeds, images, loading indicators, and error messages may get inserted into the editor. You may navigate to these using the arrow keys inside of the editor and delete them with the delete or backspace key.