OpenGL ES Shader로 2D 이미지 개요

Question

OpenGL 2.0을 사용하는 2D iOS 게임에서 작업 중입니다. 이미지가 빛나는 윤곽선을 그리는 셰이더를 작성할 수 있는지 궁금합니다. 모든 이미지는 2D 스프라이트입니다. 윤곽선으로 본 셰이더 예제는 3D 오브젝트 용이므로 2D 이미지가 가능한지 확실하지 않습니다.

Answer 1

가장자리 감지 필터 (예 : Sobel)를 사용하여 the Wikipedia article에 표시된 이미지를 생성 한 다음 그 결과에 가우시안 흐림 효과를 적용하여 가장자리를 부드럽게하고 더 빛나게 한 다음 합성합니다 너의 장면에 그 이미지?

현실적으로 보았던 3D 개요 쉐이더를 재사용 할 수 있습니다. 이론상 깊이 수량을 검사 할 수 있지만 (ES에서 확장 된 노력을 통해), 내가 본 모든 것은 단지 2 차원 효과에 불과합니다. 렌더링 된 이미지

EDIT : Laplacian은 간단한 회선 쉐이더 (장소 : like this에서 설명)로 수행 할 수 있기 때문에 Sobel보다 조금 더 쉽게 적용 할 수 있습니다. 모바일에서 안전하기는하지만 대부분의 경우 3x3 커널을 고수하고 데이터로 수행하는 대신 각 효과에 대해 다른 쉐이더를 작성하려고합니다. 그래서 예. 길이에 기입 거친 가우시안 블러 :

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; 
} 

그리고 라플라스 가장자리 감지는 비슷하지만 서로 다른 상수를 찾고 끝납니다.

최적화로, 가변 텍스처에 대한 읽기를 피할 수 있으므로 가변성에 대한 한계를 고려하여 가능한 한 프래그먼트 셰이더가 아닌 버텍스 셰이더에서 상대 샘플링 포인트를 찾아야합니다.