Creado por DevWorm
Terminamos la trilogía de los Shaders con este video tutorial, donde
veremos otra tanda de sharders de ejemplos.
Entradas anteriores:
Página 157, Parte 1: Apuntes de "Cómo entender los shaders en Godot"
Página 158, Parte 2: Apuntes de "Cómo entender los shaders en Godot"
Ejercicio 1: Modificar la lectura de una textura usando las coordenadas X e Y del UV
En este ejercicio
no se está escalando la imagen, sino
que se está cambiando
el punto de la textura desde el que se lee el color (pixelColor).
Al multiplicar las coordenadas UV por
scale, el shader recibe el
color de otra posición de la textura,
no del píxel original.
Ejemplos:
Si scale vale
2 y la coordenada UV es
(0.4, 0.4), se leerá el color de la
posición (0.8, 0.8).
Si scale vale
0.2 y la coordenada UV es
(0.4, 0.4), se leerá el color de la
posición (0.08, 0.08).
Ejercicio 2: Modificar la lectura de una textura usando solo las coordenadas Y del UV
Este ejercicio hace lo mismo que el anterior, pero actuando únicamente sobre la coordenada Y.
Algo que quiero destacar de este código es el uso de
hint_range, que se utiliza para
limitar el valor del parámetro a un rango numérico concreto.
Ejercicio 3: Convertir la imagen a escala de grises y ajustar la intensidad
La imagen se vuelve gris porque se asigna el mismo valor a los canales R, G y
B.
El parámetro de brillo solo controla la intensidad de ese gris, no la conversión en sí.
brightness_value = 1
brightness_value = 5
brightness_value = 9
Ejercicio 4: Hacer transparente la imagen según el canal azul
Compara cada pixel en el canal Azul, si entra en el rango, pondra el canal alfa en 0, transparente.
Ejercicio 5: Haciendo la ola
Anteriormente mencioné que esas matemáticas que creíamos que no nos iban a servir nos estaban acechando. Y efectivamente, aquí nos han terminado asaltando: en este ejercicio se aplica la gráfica de la función seno. Adjunto un vídeo sobre el tema para entender el concepto.
Se genera un valor en función de la posición X y del tiempo, que posteriormente se utiliza para modificar o comparar la coordenada Y. Como este no es un blog de matemáticas, me voy a limitar a explicar qué hace cada parte de la operación.
uv.x + TIME * speed
Se encarga de desplazar la onda en el tiempo.
uv.x define la posición
horizontal y
TIME * speed controla la
velocidad a la que la onda se mueve.
(uv.x + TIME * speed) * freq
Controla la frecuencia de la onda, es decir, cuántas repeticiones o “olas”
aparecen a lo largo del eje X.
((uv.x + TIME * speed) * freq) * amp
Modifica la amplitud de la onda, es decir, su altura. Como se trabaja en
coordenadas UV (valores entre 0 y 1), es necesario usar números pequeños;
valores altos como 1 provocarían una ola excesivamente grande.
return waveColor * step(1.0 - sinus - progress, uv.y);
step devuelve 0 o 1 según si la
coordenada uv.y supera un
determinado umbral. De esta forma se comprueba si el píxel pertenece al fondo
o al interior de la ola, permitiendo dibujar únicamente la parte visible de
esta.
Ejercicio 6: Interactuando con el shader a través de GDScript
Este shader invierte el color del sprite, pero lo realmente importante en este ejercicio es el script adjunto al nodo que lo utiliza. En él se muestra cómo consultar y modificar los parámetros del shader desde GDScript.
No hay comentarios:
Publicar un comentario