Los sombreadores son herramientas poderosas que permiten a los desarrolladores personalizar la apariencia de sus juegos de infinitas maneras. Este artículo repasará los conceptos básicos de la escritura de sombreadores de fragmentos y vértices en Godot 4. Aprenderá técnicas para crear sus propios efectos visuales. Desde manipular colores de textura hasta animar sprites, descubrirás todos los componentes básicos que necesitas para empezar a experimentar con sombreadores en tus propios proyectos. Nota: este artículo asume que estás familiarizado con el editor de Godot. Puedes mejorar tus habilidades leyendo Godot 4: Primeros pasos. También se recomiendan conocimientos básicos de programación y matemáticas, aunque no son obligatorios. Primeros pasos Para seguir este tutorial, descargue los materiales del proyecto a través del enlace Descargar materiales en la parte superior o inferior de la página. Dentro del archivo ZIP, encontrará una carpeta inicial y una final, ambas con una carpeta de proyecto llamada ShaderIntroduction. Comience abriendo el proyecto inicial en Godot. Deberías ver una escena principal vacía con un nodo Node2D llamado Main en su raíz. Aquí es donde agregarás sprites para experimentar con sombreadores. El proyecto inicial viene con un conjunto de recursos en forma de sprites. Puede encontrarlos en la carpeta de texturas, junto con el ícono predeterminado de Godot y una imagen simple y colorida en la raíz del sistema de archivos. Como puedes ver, no hay mucho que hacer todavía, ¡pero lo harás pronto! ¿Qué es un sombreador? Antes de escribir sombreadores, es importante comprender qué son. Un sombreador es un conjunto de instrucciones que se ejecuta en su tarjeta gráfica y define la apariencia de objetos renderizados como sprites y objetos 3D. Los canales de renderizado modernos hacen un uso intensivo de sombreadores para crear efectos como iluminación especular, niebla volumétrica y efectos de posprocesamiento. Además de crear efectos visuales impresionantes, también puedes usar sombreadores para manipular la apariencia de tu juego. Puedes hacer que los árboles se balanceen con el viento o que los duendes parpadeen cuando los golpeen, por ejemplo. Estos pequeños programas pueden añadir mucha vida a tus proyectos. Una de las características que hace que los sombreadores sean especiales es su capacidad de ejecutarse en paralelo. En lugar de un programa clásico que se ejecuta en la CPU y tiene que finalizar sus tareas una tras otra, un sombreador puede realizar muchas tareas al mismo tiempo. Esto es crucial, ya que los sombreadores a menudo manipulan cada píxel de la pantalla o cada vértice de un objeto 3D complejo muchas veces por segundo. ¡Con una resolución de 4K, un solo sombreador podría estar trabajando en más de 8 millones de píxeles a la vez! Cuando escribes un sombreador, trabajarás en un lenguaje especializado llamado Shading Language. Algunos de los lenguajes más populares incluyen OpenGL Shading Language (GLSL) y High Level Shading Language (HLSL). Para ejecutar el sombreador, su CPU traduce el código en instrucciones que la GPU puede entender. Esto se conoce como compilación. La CPU realiza el proceso de compilación mientras se inicializa un juego y, a veces, mientras se ejecuta el juego, ya que los sombreadores pueden cambiar dinámicamente durante el juego. Los sombreadores compilados luego se almacenan en caché en el disco para uso futuro. Para títulos modernos con miles de sombreadores, este proceso puede llevar un tiempo, razón por la cual a menudo verás pantallas de carga que dicen «Compilando sombreadores». Tipos de sombreadores Como se mencionó anteriormente, los sombreadores son versátiles. Godot admite la creación de los siguientes tipos de sombreadores: Espacial: manipula la representación de objetos 3D. Elemento de lienzo: cambie la apariencia de los objetos 2D, como sprites y elementos de la interfaz de usuario. Partículas: manipula la forma en que se comporta un sistema de partículas. Cielo: renderiza fondos de cielo y mapas de cubos. Niebla: sombreadores especializados utilizados para efectos de niebla volumétrica. Los sombreadores de elementos espaciales y de lienzo son los tipos más comunes de sombreadores porque casi todos los juegos utilizan objetos o sprites 3D. Los demás están reservados para casos específicos. Para desarrollar una comprensión básica, creará sombreadores de elementos de lienzo a lo largo de este tutorial. Conceptos básicos de la manipulación de texturas Muy bien, ¡suficiente teoría por ahora! Es hora de escribir tu primer sombreador, un sombreador de fragmentos. Los sombreadores de fragmentos pueden alterar el color de una superficie, ya sea un objeto o un objeto 3D. Los sombreadores son un tipo de recurso en Godot, por lo que su creación es igual que la de cualquier otro recurso. Cree una nueva carpeta en la carpeta de sombreadores llamada fragmento. Haga clic derecho en la carpeta del fragmento y seleccione Crear nuevo ▸ Recurso…. Busque «shader» y haga doble clic en la primera coincidencia seleccionada: Shader. Ahora verá un cuadro de diálogo Crear sombreador con algunas opciones. Cambie el modo a elemento de lienzo. A continuación, asigne a este nuevo sombreador el nombre UV_to_color.gdshader y haga clic en el botón Crear. Haga doble clic en el sombreador que creó para abrirlo en el editor de sombreadores. Este editor es similar al editor de guiones de Godot, pero más minimalista. Admite el autocompletado y el resaltado de sintaxis, pero no podrá depurar sombreadores ni buscar ayuda sobre funciones. Sombreadores de fragmentos El código que estás viendo aquí es el mínimo necesario para crear un sombreador de fragmentos. Está escrito en el lenguaje de sombreado propio de Godot llamado GDShader, que es similar a GLSL pero simplificado. Es un lenguaje de alto nivel con una sintaxis basada en el lenguaje de programación C. Este sombreador consta de dos partes: sombreador_tipo y tres funciones: vértice, fragmento y luz. El shader_type le dice a Godot con qué tipo de sombreador estás trabajando. En este caso, es un sombreador de elementos de lienzo destinado a cambiar el color y/o la textura de un elemento de lienzo, la clase de la que derivan todos los sprites y elementos de la interfaz de usuario. Las funciones son el corazón del sombreador, se denominan funciones del procesador y son los puntos de entrada del sombreador. Por ejemplo, la GPU llamará a la función de fragmento para cada píxel del elemento del lienzo al que lo adjunte, junto con cierta información sobre ese píxel. Para aplicar este sombreador a un objeto, primero arrastre icon.svg desde el sistema de archivos a la ventana gráfica 2D. Esto agregará un nodo Sprite2D con el ícono como textura a la escena. Nombra este nodo UV. Seleccione el nodo UV y expanda su categoría Material en el Inspector. Ahora deberías ver la propiedad Material con un menú desplegable al lado. Una forma de aplicar el sombreador es crear un nuevo ShaderMaterial aquí y seleccionar el archivo del sombreador como entrada, ¡pero compartiré una forma mucho más rápida! Simplemente arrastre UV_to_color.gdshader desde FileSystem a la propiedad Material. Esto creará el ShaderMaterial por usted. Haga clic en el nuevo recurso ShaderMaterial para mostrar sus propiedades y notará que el sombreador ya está configurado. Bonito y fácil. Ahora echa un vistazo al objeto nuevamente y verás que nada ha cambiado. Esto se debe a que su sombreador aún no está haciendo nada. Es hora de cambiar eso con algo de código. Edite la función de fragmento del sombreador UV_to_color como se muestra a continuación y presione CTRL/CMD-S para guardarlo: void fragment() { COLOR = vec4(UV.x, UV.y, 0.0, 1.0); } Godot actualiza los sombreadores de inmediato en su editor, por lo que ahora hay un cambio dramático en el sprite. Parece un rectángulo colorido de degradados. Para explicar por qué sucedió esto, analizaré el código que agregaste: todo lo que está dentro de las llaves de la función fragment() se ejecuta en cada píxel del sprite. Puede comparar esto con un bucle for de GDScript: for pixel en canvas_item.pixels: fragment(pixel) COLOR es una variable incorporada que representa el color del píxel actual. Es un vec4, un vector con 4 componentes de punto flotante: r, g, b y a, que representan los componentes rojo, verde, azul y alfa del color. Al cambiar el valor de COLOR, cambia el color del píxel. = vec4(UV.x, UV.y, 0.0, 1.0) es una expresión que devuelve un vec4 con los valores de UV.x, UV.y, 0.0 y 1.0 para el nuevo color de píxel en orden RGBA. En este caso, el componente azul está ausente al configurarlo en 0,0, mientras que el componente alfa se establece en 1,0 para una opacidad total. UV es una variable incorporada que representa la posición normalizada del píxel actual. Es un vec2, un vector con 2 componentes de punto flotante que van de 0,0 a 1,0. Un píxel en la esquina superior izquierda tiene un valor de (X: 0, Y: 0) y un píxel en la esquina inferior derecha tiene un valor de (X: 1, Y: 1). El valor X de UV se asigna al componente rojo del color, mientras que el valor Y se asigna al componente verde. El color amarillo en la parte inferior derecha se debe a la mezcla de los componentes rojo y verde. En resumen, el sombreador UV_to_color que escribiste asigna la variable UV a la variable COLOR. Esto crea un degradado colorido que representa la variable UV. Es importante saber que la variable UV representa la posición normalizada de un píxel, ya que la usarás mucho en los siguientes sombreadores. Nota: Las coordenadas UV son exactamente iguales a las coordenadas XY, pero se usan para ubicar puntos en una textura, no en el espacio. Las letras U y V se utilizan a menudo en matemáticas, geometría y física para representar valores arbitrarios. Son muy parecidos a cómo se usan foo y bar en programación como marcadores de posición. ¡Felicidades, creaste tu primer sombreador!

Source link