tutorials/shaders/your_first_shader/your_first_2d_shader

[giscus[bot]]

tutorials/shaders/your_first_shader/your_first_2d_shader

Introduction: Shaders are special programs that execute on the GPU and are used for rendering graphics. All modern rendering is done with shaders. For a more detailed description of what shaders ar...

https://docs.godotengine.org/en/stable/tutorials/shaders/your_first_shader/your_first_2d_shader.html

[vanBerloDevelopments]

Here are some things I struggled with when learning shaders and how to approach them. Hope it helps someone!

1. The outer bounds of the shader
   The vertex shader controls the area which you can manipulate using the vertices. Everything outside of the vertices will not be drawn on screen.

2. The texture(TEXTURE, UV) function does not 'create' a texture.
   This is a common misconception when starting out. The texture function samples the texture data from the texture that you specify in the first parameter, in this case TEXTURE (which is its original texture). And then returns the color data and alpha channel as a vector 4 datatype.

Example:

vec4 fragment_color_data = texture(TEXTURE, UV).rgba;

3. Scaling a texture using UV mapping:

   • To scale 'up', multiply UV coordinates by a value lower than 1.
   • To scale 'down', multiply UV coordinates by a value higher than 1.

   Example:

   vec4 scaled_up_sample = texture(TEXTURE, vec2(UV.x * 0.9, UV.y));

   For visual examples, see this video tutorial.

4. Moving (translating) a texture using UV mapping:

   • To translate left: Add a positive value to UV.x
   • To translate right: Subtract a positive value from UV.x
   • To translate up: Add a positive value to UV.y
   • To translate down: Subtract a positive value from UV.y

   Example:

   vec4 sampled_to_left = texture(TEXTURE, vec2(UV.x + 0.1, UV.y));

   For visual examples, see this video tutorial.

Happy shading!
Kind regards Sam,
Author of godot2dshaders.com

[acloudmovingby]

Hi Sam,

Totally new to shaders here. I don't understand this sentence you wrote: "The vertex shader controls the area which you can manipulate using the vertices. Everything outside of the vertices will not be drawn on screen".

I thought vertices are just used in 3D meshes. Where / what are the vertices in these 2D sprites? Is it the 4 corners of the sprite's image?

Thanks,

Chris

[Calinou]

I thought vertices are just used in 3D meshes. Where / what are the vertices in these 2D sprites? Is it the 4 corners of the sprite's image?

Vertices are also used in 2D. Most 2D elements are rects (including sprites), so they have 4 vertices, one in each corner of the rectangle. Control nodes are also mostly rects, with text using a rect per glyph (character).

Polygons can have more than 4 vertices in 2D still, which includes lines drawn using the Line2D node (these are actually polygons).

[ParisMars]

To understand why scaling and translating require the opposite operation to the one you might assume (multiplying to scale down, adding to the x to move left, etc.), here's a Better Explained article and some short Khan Academy videos that explain it:
https://betterexplained.com/articles/intuition-for-graphed-functions/
https://youtu.be/RttvubuBhAE?si=4zFABZnkLq3Tml8u&t=114
https://youtu.be/1lt6a77OmLU?si=cIWLftqepic9WuiY&t=232
The UVs are the inputs (x) to the fragment function (f(x)).

[Calinou]

I accidentally posted the other comment and don't think I can edit it so that's why there are two...

You can edit comments by browsing to GitHub (click the "1 comment" text at the top of the comments box), then use the ... button at the top-right corner of a comment to edit it.