GLSL Shaders para Minecraft

Crea efectos de texto animados con ItemsAdder

ItemsAdder Compatible

¿Qué son los Shaders GLSL?

Los shaders GLSL (OpenGL Shading Language) son programas que se ejecutan en la GPU para procesar gráficos. En Minecraft con ItemsAdder, se utilizan para crear efectos visuales personalizados en el texto del chat, nombres de rangos, y otros elementos de UI mediante códigos de color especiales.

🎯 ¿Cómo se usan?

Los efectos se activan usando códigos de color hexadecimales especiales. Por ejemplo:

#F0F008 + texto → Activa el efecto arcoíris fractal
#F0F01C + texto → Activa el efecto arcoíris
#F0F02C + texto → Activa el efecto de fuego

El sistema convierte estos códigos RGB a efectos shader automáticamente.

Estos shaders permiten crear efectos como:

🌈 Gradientes de color animados (arcoíris)
✨ Efectos de brillo y pulsación
🔥 Animaciones de fuego y agua
⚡ Transiciones de color personalizadas
🎨 Fractales y efectos complejos

💡 Nota Importante: Los shaders funcionan detectando códigos de color RGB específicos y aplicando efectos píxel por píxel. Esto significa que puedes crear efectos imposibles con el sistema de colores estándar de Minecraft.

Requisitos Previos

Software Necesario

Minecraft Java Edition (1.19 o superior recomendado)
ItemsAdder plugin instalado en el servidor
Editor de texto (VS Code, Sublime Text, Notepad++)
Conocimientos básicos de YAML y estructura de carpetas

Conocimientos Opcionales

Programación básica (variables, funciones)
Matemáticas (operaciones, trigonometría básica)
Conceptos de colores RGB

Estructura del Resource Pack

Un resource pack con shaders para ItemsAdder debe seguir esta estructura. Los shaders se colocan en assets/minecraft/shaders/ y los archivos de configuración de efectos en include/:

File Structure

tu_resourcepack/

pack.mcmeta

assets/

minecraft/

shaders/

core/

rendertype_text.json

rendertype_text.fsh

rendertype_text.vsh

include/

text_effects_config.glsl

text_effects.glsl

spheya_packs_impl.glsl

spheya_utils.glsl

Archivos Esenciales

1. pack.mcmeta

Define la versión del resource pack:

json

{
  "pack": {
    "pack_format": 15,
    "description": "Mi Resource Pack con Shaders"
  }
}

Pack Format: 15 para Minecraft 1.20.x, 9 para 1.19.x, 8 para 1.18.x

2. rendertype_text.json

Este archivo conecta los shaders con el texto de Minecraft y define las variables uniformes necesarias:

json

{
  "blend": {
    "func": "add",
    "srcrgb": "srcalpha",
    "dstrgb": "1-srcalpha"
  },
  "vertex": "rendertype_text",
  "fragment": "rendertype_text",
  "attributes": ["Position", "Color", "UV0", "UV2"],
  "samplers": [
    { "name": "Sampler0" },
    { "name": "Sampler2" }
  ],
  "uniforms": [
    {
      "name": "ModelViewMat",
      "type": "matrix4x4",
      "count": 16,
      "values": [1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0]
    },
    {
      "name": "ProjMat",
      "type": "matrix4x4",
      "count": 16,
      "values": [1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0]
    },
    {
      "name": "ColorModulator",
      "type": "float",
      "count": 4,
      "values": [1.0, 1.0, 1.0, 1.0]
    },
    { "name": "FogStart", "type": "float", "count": 1, "values": [0.0] },
    { "name": "FogEnd", "type": "float", "count": 1, "values": [1.0] },
    {
      "name": "FogColor",
      "type": "float",
      "count": 4,
      "values": [0.0, 0.0, 0.0, 0.0]
    },
    { "name": "GameTime", "type": "float", "count": 1, "values": [0.0] },
    { "name": "ScreenSize", "type": "float", "count": 2, "values": [1.0, 1.0] }
  ]
}

Creando Shaders GLSL

Anatomía de un Shader Fragment (.fsh)

Los shaders fragment procesan cada píxel individualmente. Aquí está la estructura básica:

glsl

// Version de GLSL que usaremos
#version 150

// Variables de entrada
uniform sampler2D Sampler0;
uniform float GameTime;

// Coordenadas de textura del fragmento actual
in vec2 texCoord0;
in vec4 vertexColor;

// Color de salida del píxel
out vec4 fragColor;

void main() {
    // Obtener el color del texto original
    vec4 color = texture(Sampler0, texCoord0);
    
    // Aquí va tu efecto personalizado
    
    // Asignar el color final
    fragColor = color;
}

Variables Disponibles

GameTime - Tiempo de juego (incrementa continuamente, perfecto para animaciones)
texCoord0 - Coordenadas UV del píxel actual (0.0 a 1.0)
vertexColor - Color del texto original
Sampler0 - Textura del texto

Ejemplo 1: Efecto Arcoíris

Este shader crea un efecto de arcoíris que se mueve horizontalmente:

glsl

#version 150

uniform sampler2D Sampler0;
uniform float GameTime;

in vec2 texCoord0;
in vec4 vertexColor;
out vec4 fragColor;

// Función para convertir HSV a RGB
vec3 hsv2rgb(vec3 c) {
    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}

void main() {
    vec4 color = texture(Sampler0, texCoord0);
    
    // Calcular el tono basado en posición y tiempo
    float hue = fract(texCoord0.x + GameTime * 0.5);
    
    // Convertir a RGB (saturación: 1.0, valor: 1.0)
    vec3 rainbow = hsv2rgb(vec3(hue, 1.0, 1.0));
    
    // Aplicar el color arcoíris al texto
    fragColor = vec4(rainbow * color.rgb, color.a);
}

Explicación del código:

texCoord0.x - Posición horizontal del píxel (0 = izquierda, 1 = derecha)
GameTime * 0.5 - Velocidad de animación (ajusta el 0.5 para más rápido/lento)
fract() - Obtiene solo la parte decimal, creando el ciclo continuo
hsv2rgb() - Convierte el tono (hue) a colores RGB visibles

Ejemplo 2: Efecto de Onda

Shader que crea un efecto ondulante con cambios de color:

glsl

#version 150

uniform sampler2D Sampler0;
uniform float GameTime;

in vec2 texCoord0;
in vec4 vertexColor;
out vec4 fragColor;

void main() {
    vec4 color = texture(Sampler0, texCoord0);
    
    // Crear efecto de onda usando seno
    float wave = sin(texCoord0.x * 10.0 + GameTime * 3.0) * 0.5 + 0.5;
    
    // Colores para interpolar
    vec3 color1 = vec3(0.0, 1.0, 1.0); // Cyan
    vec3 color2 = vec3(1.0, 0.0, 1.0); // Magenta
    
    // Mezclar colores según la onda
    vec3 finalColor = mix(color1, color2, wave);
    
    fragColor = vec4(finalColor * color.rgb, color.a);
}

Ejemplo 3: Efecto de Brillo (Glow)

Shader que hace que el texto brille y pulse:

glsl

#version 150

uniform sampler2D Sampler0;
uniform float GameTime;

in vec2 texCoord0;
in vec4 vertexColor;
out vec4 fragColor;

void main() {
    vec4 color = texture(Sampler0, texCoord0);
    
    // Crear pulsación usando seno
    float pulse = sin(GameTime * 2.0) * 0.3 + 1.0;
    
    // Color base brillante (verde neón)
    vec3 glowColor = vec3(0.0, 1.0, 0.5);
    
    // Aplicar brillo y pulsación
    vec3 finalColor = glowColor * pulse;
    
    fragColor = vec4(finalColor * color.rgb, color.a);
}

Ejemplo 4: Gradiente Personalizado

Crear un gradiente de dos colores específicos:

glsl

#version 150

uniform sampler2D Sampler0;
uniform float GameTime;

in vec2 texCoord0;
in vec4 vertexColor;
out vec4 fragColor;

void main() {
    vec4 color = texture(Sampler0, texCoord0);
    
    // Define tus colores (RGB de 0.0 a 1.0)
    vec3 colorInicio = vec3(1.0, 0.0, 0.0); // Rojo
    vec3 colorFin = vec3(0.0, 0.0, 1.0);    // Azul
    
    // Interpolar según posición horizontal
    vec3 gradient = mix(colorInicio, colorFin, texCoord0.x);
    
    fragColor = vec4(gradient * color.rgb, color.a);
}

Convertir colores hexadecimales a RGB:
Divide cada componente por 255:
#FF5500 → R: 255/255 = 1.0, G: 85/255 ≈ 0.33, B: 0/255 = 0.0
Resultado: vec3(1.0, 0.33, 0.0)

Configurando Efectos de Texto

Sistema TEXT_EFFECT

Los efectos se configuran en el archivo text_effects_config.glsl usando la macro TEXT_EFFECT(R, G, B). Cada combinación RGB activa un efecto específico:

glsl

// Example: Rainbow fractal effect
TEXT_EFFECT(240, 240, 8) {
    apply_iterating_movement(2.5, 1.0); // 2x faster
    apply_rainbow_fractal();
    apply_rainbow_abberation(0.42, 0.84);  // speed and intensity
    apply_shimmer(0.6, 0.45);	
    textData.shouldScale = true;
}

// Example: Simple rainbow effect
TEXT_EFFECT(240, 240, 28) {
    apply_rainbow();
}

// Example: Fire effect
TEXT_EFFECT(240, 240, 44) {
    apply_fire();
    apply_fade(rgb(238, 121, 12));
    textData.shouldScale = true;
}

Cómo Usar los Efectos

Para aplicar un efecto, usa el código hexadecimal que corresponde al RGB definido:

💡 Conversión RGB → Hexadecimal:

TEXT_EFFECT(240, 240, 8) → #F0F008
TEXT_EFFECT(240, 240, 28) → #F0F01C
TEXT_EFFECT(240, 240, 44) → #F0F02C

Cada componente RGB se convierte a hexadecimal: 240 = F0, 8 = 08, 28 = 1C, 44 = 2C

yaml

# Example in LuckPerms or chat plugin
prefix: "#F0F008[VIP]"  # Rainbow fractal effect
suffix: "#F0F02C✨"    # Fire effect

# Complete message format
format: "{prefix} {username}: #F0F01C{message}"  # Rainbow text

⚠️ Importante: Los códigos de color se colocan ANTES del texto que quieres afectar. El efecto se aplica a todo el texto que sigue hasta encontrar otro código de color.

Uso en ItemsAdder

Para aplicar efectos en items de ItemsAdder, usa el parámetro color:

yaml

info:
  namespace: myitems

font_images:
  rank_vip:
    permission: "myserver.rank.vip"
    show_in_gui: false
    suggest_in_command: true
    path: "vip.png"
    scale_ratio: 9
    y_position: 8
    color: "#F0F02C"  # Fire effect

Tabla de Efectos Disponibles

Efectos Básicos

Código Hex	RGB	Efecto	Descripción
`#F0F008`	`240,240,8`	Arcoíris Fractal	Efecto arcoíris con movimiento y brillo
`#F0F01C`	`240,240,28`	Arcoíris Simple	Efecto arcoíris básico
`#F0F02C`	`240,240,44`	Fuego	Efecto de fuego con desvanecimiento
`#F0F040`	`240,240,64`	Brillo (Shimmer)	Efecto de brillo pulsante
`#F0F014`	`240,240,20`	Contorno Rojo	Texto rojo con contorno morado
`#F0F018`	`240,240,24`	Gradiente Amarillo-Rojo	Gradiente suave de amarillo a rojo

Efectos de Gradiente Animado

Código Hex	Nombre	Colores
`#F0F064`	Verde	Verde neón → Verde claro
`#F0F068`	Azul	Azul oscuro → Azul cielo
`#F0F06C`	Amarillo	Naranja → Amarillo brillante
`#F0F070`	Púrpura	Púrpura oscuro → Rosa violeta
`#F0F074`	Rosa	Rosa intenso → Rosa claro
`#F0F078`	Rojo	Rojo sangre → Rojo coral

RAINBOW

#F0F01C

Arcoíris simple

FIRE

#F0F02C

Efecto de fuego

SHIMMER

#F0F040

Brillo animado

Paso a Paso: Crear Tu Primer Efecto

1
Elige un código RGB único
Selecciona valores RGB que no estén en uso. Recomendado: usar 240,240,X donde X es un número par entre 0-255.

Añade el efecto a text_effects_config.glsl

Abre el archivo assets/minecraft/shaders/include/text_effects_config.glsl y añade tu efecto:

glsl

TEXT_EFFECT(240, 240, 200) {
    apply_animated_gradient_3(
        rgb(255, 0, 0),     // Red
        rgb(0, 255, 0),     // Green
        rgb(0, 0, 255)      // Blue
    );
    textData.shouldScale = true;
}

3
Convierte RGB a Hexadecimal
240,240,200 → #F0F0C8 (F0 = 240, C8 = 200)
4
Empaqueta el Resource Pack
Ejecuta /iazip en el servidor para empaquetar el resource pack.
5
Prueba tu efecto
Usa el código en el chat: #F0F0C8Mi texto con efecto

Tips y Trucos Avanzados

🎨 Combinar Múltiples Efectos

Puedes combinar efectos creando shaders más complejos:

glsl

// Arcoíris + Pulsación
float pulse = sin(GameTime * 2.0) * 0.2 + 1.0;
float hue = fract(texCoord0.x + GameTime * 0.5);
vec3 rainbow = hsv2rgb(vec3(hue, 1.0, 1.0)) * pulse;

⚡ Optimización de Performance

Evita cálculos complejos innecesarios en cada píxel
Usa const para valores que no cambian
Simplifica las funciones matemáticas cuando sea posible
Prueba el rendimiento con texto largo

🔧 Debugging de Shaders

Si tu shader no funciona:

Revisa la consola de Minecraft (F3 + L para logs)
Verifica que el nombre en rendertype_text.json coincida con tu .fsh
Asegúrate de usar #version 150
Comprueba que todas las variables estén declaradas
Usa un shader simple primero y añade complejidad gradualmente

📚 Recursos Adicionales:

OpenGL Shading Language Reference
ItemsAdder Wiki - Documentación oficial

¿Listo para Crear Efectos Increíbles?

Empieza con un shader simple y experimenta con diferentes valores.
La creatividad es el límite.