Estaba viendo algunos Rocket League y noté que había calcomanías y ruedas animadas.
.
Me gustaría implementar algo similar a los efectos en la imagen de arriba.
¿Cómo haría para escribir un Unity Shader para hacer el efecto de rueda?
No sé mucho sobre Shaders, pero ¿puedo editar el Unity Shader estándar para hacer el efecto de animación?
_Time
variable incorporada que puede agregar a sus coordenadas de textura en el sombreador (vértice) para obtener un efecto de desplazamiento muy barato. El efecto del hexágono también sería bastante sencillo. Si edita su pregunta para resaltar solo un efecto y pregunta "cómo implementaría esto en un sombreador de Unity", probablemente podamos ayudarlo. Asegúrese de especificar si el sombreador necesita responder a la iluminación / sombreado, ya que eso tiene un impacto en cómo se escribiría.Respuestas:
Construiré esto en unas pocas capas para que pueda ver cómo se combina.
Comience creando un nuevo sombreador en Unity eligiendo
Create --> Shader --> Unlit
en el menú Activos o en el menú contextual del botón derecho en la ventana Proyecto.En el bloque superior agregaremos un
_ScrollSpeeds
parámetro para controlar qué tan rápido se mueve la textura en cada dirección:Esto expone una nueva propiedad flotante de 4 componentes en el inspector de materiales, con el nombre descriptivo "Velocidades de desplazamiento" (similar a agregar una
public
oSerialized
variable a unMonoBehaviour
script)A continuación, utilizaremos esta variable en el sombreador Vertex para cambiar las coordenadas de textura (
o.uv
), agregando solo dos líneas al sombreador predeterminado:Déle una palmada en un quad (con una hermosa textura de jirafa libre de Kenney ) y obtendrá:
Para que la textura se desplace hacia afuera en un anillo, podríamos usar una malla subdividida como una telaraña, con la coordenada uv v aumentando desde el centro hacia afuera. Pero eso dará algunos artefactos en forma de hoja de sierra por sí solo. En cambio, mostraré cómo podemos calcular nuestros UV por fragmento.
Esto es un poco más costoso, tanto por las operaciones trigonométricas y de longitud (que son más costosas que las matemáticas básicas) como porque no es tan eficiente predecir y almacenar en caché los datos de textura en el hardware al calcular texcoords por fragmento, en comparación con solo interpolarlos entre vértices Pero para un pequeño efecto especial como este, no es excesivo.
Eso nos da algo como esto (aquí aumenté los parámetros de mosaico en el material para que sea más claro lo que está sucediendo: envolver solo una sola repetición del mosaico alrededor del círculo parece distorsionado y extraño)
Por último, para teñir la textura con un gradiente de desplazamiento, podemos agregar el gradiente como una segunda textura y multiplicarlos.
Primero agregamos el nuevo parámetro de textura en la parte superior:
Y declararlo en nuestro bloque CGPROGRAM para que el sombreador CG pueda verlo:
Luego actualiza nuestro sombreador de fragmentos para usar ambas texturas:
Y ahora nuestra jirafa se pone realmente loca:
Con una selección ligeramente más artística de texturas y velocidades de desplazamiento, esto puede crear un efecto bastante similar al que se muestra en la pregunta.
Puede notar dos pequeños artefactos con la versión que he mostrado arriba:
Las caras cerca del centro del círculo se estiran / flacas / puntiagudas, luego, cuando se mueven hacia el exterior, se aplastan / ensanchan.
Esta distorsión ocurre porque tenemos un número fijo de caras alrededor del perímetro, pero la circunferencia que abarcan se ensancha a medida que aumenta el radio, mientras que su altura se mantiene igual.
Podemos arreglar esto reasignando el componente vertical de la muestra de textura para seguir una curva logarítmica, de modo que las repeticiones de la textura estén más separadas a medida que aumenta el radio, y más juntas hacia el centro. (De hecho, esto nos da una regresión infinita de jirafas cada vez más pequeñas ...)
Hay una fila de uno o dos píxeles borrosos a lo largo del centro-izquierda del quad.
Esto sucede porque la GPU mira dos coordenadas de muestra de textura adyacentes para descubrir qué filtro usar. Cuando las muestras están juntas, calcula que la textura se muestra grande / cerrada y muestra el nivel de detalle más detallado. Cuando las muestras están muy separadas, adivina que debemos mostrar la textura con un pequeño zoom o muy lejos, y toma muestras de un mapa MIP más pequeño / borroso para garantizar que no se produzcan artefactos de alias brillantes.
El problema está aquí, estamos en el punto de ajuste en coordenadas polares, de -180 a 180 grados. Por lo tanto, en realidad estamos tomando muestras de puntos muy similares en nuestro espacio de textura repetitivo, incluso si sus coordenadas numéricas hacen que parezcan muy distantes. Por lo tanto, podemos proporcionar nuestros propios vectores de gradiente de muestreo para corregir esto.
Aquí hay una versión con estas correcciones:
fuente
tex2Dgrad
arregla el artefacto de filtrado donde el ángulo se envuelve de -pi a + pi (esa es la delgada línea de píxeles borrosos en el lado izquierdo). Aquí está el resultado retocado con más azul