2012-01-25 16 views
6

Estoy trabajando en un juego para iOS 2D con OpenGL 2.0 y me pregunto si es posible escribir un sombreador que contornee las imágenes con un resplandor. Todas las imágenes son sprites 2D. Los ejemplos de sombreado que he visto para delinear son para objetos en 3D, por lo que no estoy seguro si es posible para imágenes 2D.OpenGL ES Shader para delinear imágenes en 2D

+0

por lo que el resplandor que desea agregar es como una sombra paralela? –

+0

Más de un trazo alrededor de la imagen que tendría bordes suaves. –

Respuesta

7

¿Aceptaría un filtro de detección de bordes (como Sobel), produciendo una imagen como la que se muestra en the Wikipedia article, seguido de un desenfoque gaussiano en los resultados para suavizar los bordes y darle más brillo, luego compuesto esa imagen en tu escena?

En la práctica, probablemente podría reutilizar los sombreadores de trazado 3d que ha visto, aunque en teoría podría inspeccionar las cantidades de profundidad (con un esfuerzo prolongado en ES), cada uno que he visto era solo un efecto 2d la imagen renderizada

EDITAR: en consideración adicional, el Laplaciano puede ser un poco más fácil de aplicar que el Sobel porque se puede hacer como sombreadores de convolución simples (como se describe en los lugares like this). Sin embargo, para estar seguro en el móvil, es posible que prefiera usar núcleos de 3x3 como máximo y escriba un sombreador diferente para cada efecto en lugar de hacerlo con datos. Por ejemplo, un desenfoque gaussiano en bruto, en escrito extensamente:

void main() 
{ 
    mediump vec4 total = vec4(0.0); 
    mediump vec4 grabPixel; 

    total +=  texture2D(tex2D, texCoordVarying + vec2(-1.0/width, -1.0/height)); 
    total +=  texture2D(tex2D, texCoordVarying + vec2(1.0/width, -1.0/height)); 
    total +=  texture2D(tex2D, texCoordVarying + vec2(1.0/width, 1.0/height)); 
    total +=  texture2D(tex2D, texCoordVarying + vec2(-1.0/width, 1.0/height)); 

    grabPixel =  texture2D(tex2D, texCoordVarying + vec2(0.0, -1.0/height)); 
    total += grabPixel * 2.0; 

    grabPixel =  texture2D(tex2D, texCoordVarying + vec2(0.0, 1.0/height)); 
    total += grabPixel * 2.0; 

    grabPixel =  texture2D(tex2D, texCoordVarying + vec2(-1.0/width, 0.0)); 
    total += grabPixel * 2.0; 

    grabPixel =  texture2D(tex2D, texCoordVarying + vec2(1.0/width, 0.0)); 
    total += grabPixel * 2.0; 

    grabPixel = texture2D(tex2D, texCoordVarying); 
    total += grabPixel * 4.0; 

    total *= 1.0/16.0; 

    gl_FragColor = total; 
} 

y un borde de Laplace detectar termina buscando constantes similares, pero con diferentes.

Como optimización, debe calcular sus puntos de muestreo relativos en el sombreado de vértices en lugar de en el sombreador de fragmentos en la medida de lo posible, dado el límite de variaciones, ya que esto evitará las lecturas de textura dependientes.

+0

Tal vez no estoy mirando los 3D correctos, pero los que he visto parecen funcionar en cierta medida con la fuente de luz, lo que no le he dado es 2D. Tengo muy nuevos sombreadores, así que probablemente paso por alto lo obvio aquí. –

+0

Muchos sombreadores de celdas posteriores a Jet Set Radio usan la posición de la cámara para detectar bordes definiendo un borde para ser la unión entre un borde orientado hacia adelante y un borde orientado hacia atrás. Obviamente no podrás usar uno de esos. Pero enfoques como Sobel y Laplacian buscan discontinuidades en el color en una imagen en 2D para detectar bordes, por lo que son totalmente apropiados. Probablemente sea inteligente leer los filtros de convolución, si aún no lo has hecho, entonces investiga el desenfoque laplaciano y gaussiano. He agregado un código de muestra ensamblado apresuradamente para este último. – Tommy

Cuestiones relacionadas