-
Introducción
- El renderizado de contornos en juegos se usa con frecuencia por razones estéticas o para apoyar la jugabilidad. Por ejemplo, en Sable se usa para lograr un estilo de cómic, y en The Last of Us para resaltar a los enemigos.
-
Efecto rim
-
Técnica
- Puedes renderizar un contorno en los bordes del objeto usando el efecto Fresnel. Este efecto se intensifica en los bordes del objeto.
-
Implementación
- Se usa un shader personalizado con efecto Fresnel para renderizar el contorno del objeto. Es adecuado para objetos suaves como esferas o cápsulas, pero no para objetos afilados como cubos.
-
Extrusión de vértices
-
Técnica
- Se forma un contorno usando una copia del objeto original. La malla duplicada se expande para que sea más grande que el original.
-
Dirección de extrusión
- Se ajusta el tamaño del objeto eligiendo la dirección en la que mover los vértices. Al moverlos en espacio de objeto se forma el contorno.
-
Espacio de extrusión
- Puedes mover los vértices en espacio de objeto o en espacio clip. El movimiento en espacio clip proporciona un contorno uniforme.
-
Enmascaramiento
- Se elimina la cara frontal de la malla duplicada para mostrar solo el contorno.
-
Búfer de desenfoque
-
Técnica
- Se renderiza la silueta del objeto en un búfer y luego se desenfoca para formar el contorno.
-
Búfer de silueta
- Se renderiza el objeto con un solo color para generar el búfer de silueta.
-
Pase de blur
- Se usa un pase de blur para expandir el búfer de silueta. Se usan desenfoques de caja o gaussiano para mejorar el rendimiento.
-
Pase de contorno
- Se combina la silueta desenfocada con la escena original para formar el contorno.
-
Algoritmo Jump Flood
- Se usa el algoritmo Jump Flood para renderizar contornos. Permite renderizar contornos anchos con un bajo costo de rendimiento.
-
Detección de bordes
-
Técnica
- Se usa un pase de pantalla completa para detectar discontinuidades en la escena y renderizar bordes.
-
Detección de discontinuidades
- Se detectan discontinuidades usando operadores Roberts Cross o Sobel.
-
Origen de la discontinuidad
- Se detectan discontinuidades para formar el contorno usando texturas de profundidad, normal y color.
-
Ajuste de detección de bordes
- Se ajusta el umbral usado para la detección de discontinuidades para eliminar artefactos.
-
Origen de discontinuidad personalizado
- Se puede ofrecer un origen de discontinuidad personalizado para controlar el contorno.
-
Conclusión
- Hay cinco métodos para dibujar contornos, que ofrecen un equilibrio entre rendimiento, fidelidad visual y configuración manual.
1 comentarios
Opinión de Hacker News
Leí con mucho interés el artículo sobre el Jump Flood Algorithm. Me parece divertido pensar en distintos enfoques a nivel de píxel.
Propuso una manera de obtener contornos detectando bordes después de renderizar el modelo en un solo color. Requiere un pase de render adicional.
Me interesa el proyecto de I+D de gráficos 3D estilizados, y hay varias preguntas sin resolver:
En el juego Astral Divide desarrollaron una técnica parecida al blur buffer. Generan bordes usando antialiasing. Es económica en rendimiento y fácil de implementar.
Tengo mucha pasión por el arte técnico y espero mejoras en el pipeline de compute shaders de Godot; la configuración actual de los plugins de compositores se siente un poco complicada.
Me pregunto si después de la controversia de precios de Unity los desarrolladores se habrán mudado a Unreal y Godot.
Pasé de desarrollar apps de VR a desarrollo web, pero extraño la magia de trabajar con gráficos 3D, colisiones y shaders.
El resultado del render con detección de bordes se ve muy bien. Parece una escena de la novela gráfica neerlandesa Franka.
Encontré una buena nota sobre el método de detección de bordes que propuso el desarrollador de Mars First Logistics.
Propuesta de una técnica simple para dibujar contornos