id. Hermet

/*
 * Point Sampling(Nearest Neighbor) 스케일링 구현
 * @p src: NativeBuffer
 * @p dst: NativeBuffer
*/
UIImageRenderer.nearestNeighborScale(src, dst):

    //가로, 세로 스케일 요소를 구한다.
    xScale = src.width / dst.width
    yScale = src.height / dst.height

    //버퍼 메모리 접근
    Pixel srcBitmap[] = src.map()
    Pixel dstBitmap[] = dst.map()

    /* 포인트 샘플링을 수행한다. 스케일된 픽셀 위치로부터 원본 이미지 픽셀 위치를 찾는다.
       접근하는 위치가 메모리 버퍼 영역을 벗어나는 검사는 생략한다. */
    for (y = 0; y < dst.height; ++y)
        for (x = 0; x < dst.width; ++x)
            sx = xScale * x
            sy = yScale * y
            destBitmap[y * dst.scanlineSize + x] = srcBitmap[sy * src.scanlineSize + sx]

/*
 * Super Sampling(Bilinear Interpolation Filter) 스케일링 구현
 * @p src: 원본 이미지 데이터
 * @p dst: 스케일을 적용한 결과 이미지 데이터
*/
UIImageRenderer.bilinearScale(src, dst):

    //가로, 세로 스케일 요소를 구한다.
    xScale = src.width / dst.width
    yScale = src.height / dst.height

    //버퍼 메모리 접근
    Pixel srcBitmap[] = src.map()
    Pixel destBitmap[] = dst.map()

    /* Bilinear Interpolation 샘플링을 수행한다. 스케일된 픽셀 위치로부터 원본 이미지
       픽셀을 찾은 후, 인접한 세 개의 픽셀과 색상을 혼합한다. */
    for (y = 0; y < dst.height; ++y)
        for (x = 0; x < dst.width; ++x)
            dx = xScale * x
            dy = yScale * y
            sx1 = round(dx)
            sy1 = round(dy)
            sx2 = sx + 1
            sy2 = sy + 1

            //Index Overflow에 주의
            if (sx2 == src.width) sx2 = sx1
            if (sy2 == src.height) sy2 = sy1

            //소수점 이하 값
            xFraction = dx - sx1
            yFraction = dy - sy1

            s1 = srcBitmap[sy1 * src.scanlineSize + sx1]
            s2 = srcBitmap[sy1 * src.scanlineSize + sx2]
            s3 = srcBitmap[sy2 * src.scanlineSize + sx1]
            s4 = srcBitmap[sy2 * src.scanlineSize + sx2]

            //D1 = ((xS2 - xD1) / (xS2 - xS1)) * S1 + ((xD1 - xS1) / (xS2 - xS1)) * S2
            t = ((sx2 - dx) / (sx2 - sx))
            t2 = ((dx - sx1) / (sx2 - sx))

            alpha = t * ((s1 >> 24) & 0xff) + t2 * ((s2 >> 24) & 0xff)
            red = t * ((s1 >> 16) & 0xff) + t2 * ((s2 >> 16) & 0xff)
            green = t * ((s1 >> 8) & 0xff) + t2 * ((s2 >> 8) & 0xff)
            blue = t * (s1 & 0xff) + t2 * (s2 & 0xff)

            d1 = (alpha << 24) | (red << 16) | (green << 8) | (blue)

            t = ((sx4 - dx) / (sx4 - sx3))
            t2 = ((dx - sx3) / (sx4 - sx3))

            //D2 = ((xS4 - xD2) / (xS4 - xS3)) * S3 + ((xD2 - xS3) / (xS4 - xS3)) * S4
            alpha = t * ((s3 >> 24) & 0xff) + t2 * ((s4 >> 24) & 0xff)
            red = t * ((s3 >> 16) & 0xff) + t2 * ((s4 >> 16) & 0xff)
            green = t * ((s3 >> 8) & 0xff) + t2 * ((s4 >> 8) & 0xff)
            blue = t * (s3 & 0xff) + t2 * (s4 & 0xff)

            d2 = (alpha << 24) | (red << 16) | (green << 8) | (blue)

            //D = ((yD2 - yD) / (yD2 - yD1)) * D1 + ((yD - yD1) / (yD2 - yD1)) * D2
            t = ((sy2 - dy) / (sy2 - sy1))
            t2 = ((dy - sy1) / (sy2 - sy1))

            alpha = t * ((d1 >> 24) & 0xff) + t2 * ((d2 >> 24) & 0xff)
            red = t * ((d1 >> 16) & 0xff) + t2 * ((d2 >> 16) & 0xff)
            green = t * ((d1 >> 8) & 0xff) + t2 * ((d2 >> 8) & 0xff)
            blue = t * (d1 & 0xff) + t2 * (d2 & 0xff)

            d = (alpha << 24) | (red << 16) | (green << 8) | (blue)

            destBitmap[y * dst.scanlineSize + x] = d

/* Quadron은 사각형 도형을 출력하기 위한 인터페이스이다. 
   Quadron의 정점(꼭짓점)은 시계 방향(Clock-Wise)으로 구성된다. */
quad = UIQuadron():

    //Quadron의 네 정점 좌표 {x, y, z}를 지정한다. 인덱스는 정점 순서를 가리킨다.
    .coord[0] = {200, 0, 0}
    .coord[1] = {400, 50, 0}
    .coord[2] = {400, 100, 0}
    .coord[3] = {200, 150, 0}

    //Quadron의 텍스처 좌표를 지정한다.
    .uv[0] = {0, 0}       //이미지 좌측 상단
    .uv[1] = {1, 0}       //이미지 우측 상단
    .uv[2] = {1, 1}       //이미지 우측 하단
    .uv[3] = {0, 1}       //이미지 좌측 하단

    //매핑할 텍스처 리소스
    .path = “texture.png”

//코드 8과 동일하게 Quadron의 정점과 텍스처 좌표를 설정한다.
quad = UIQuadron()
...
//매핑할 텍스처로 버튼 컨트롤을 준비한다.
button = UIButton()
...
//path보다는 source가 더 유연한 인터페이스로 보인다.
quad.source = button

/* rotate()는 x, y, z축 회전 각도를 파라미터로 정의한다. 
  예제의 경우 버튼을 z축 중심으로 45도 회전한다. */
button.rotate(0, 0, 45)

그림 24: 객체 간 독립적인 지역 공간을 보유한 경우

 

그림 25: depth-test 따른 출력 결과 (좌: depth-test on, 우: depth-test off)

그림 26: 소실점(Vanishing Point)

/* 투영 정보를 설정한다. 초점의 중심 위치와 소실점까지 거리를 지정 */
obj.perspect(focalX, focalY, distance)

코드 11: Perspective 설정 예
투영된 정점의 최종 위치는 원래 객체의 정점 위치로부터 소실점까지의 거리를 토대로 판단할 수 있다. 다시 말해서 초점 위치로부터 각 정점을 향하는 방향 벡터를 구하고 각 정점의 z 값을 distance로 나눈 값을 벡터 길이로써 활용한다.

그림 27: 정점의 투영 변환 수행식

5.3 매핑 알고리즘

그림 28: Span 기반 텍스처 매핑 도식화

그림 29: Span의 시작과 끝점 위치

그림 30: Span에 매핑할 픽셀값 찾기

코드 12는 그림 30의 핵심을 구현한다.

/* Span[8]의 px[5](여섯 번째 픽셀)를 구해보자.
   먼저 px[5]에 대응하는 vTex의 픽셀 위치를 찾기 위해 비율을 계산한다. */
pxPos = 6 / (spans[8].coord[1] - spans[8].coord[0])

/* Span[8]에 매핑할 텍스처 공간의 벡터를 구한다. */
vTex = spans[8].uv[1] - spans[8].uv[0]

/* vTex의 방향 벡터를 구한다. */
vTexNorm  = vTex.normalize()

/* 마지막으로 vTex에서 pxPos에 위치하는 텍스처 좌표를 찾는다. */
texCoord = vTexNorm * pxPos

코드 12: Span에 매핑할 텍스처 픽셀 결정부

5.4 앤티에일리어싱

Span 기반 매핑 알고리즘을 이용하여 폴리곤을 출력했다면 도형 외곽선의 품질을 고려해야 한다. 외곽선 품질은 앤티에일리어싱(Anti-Aliasing, 줄여서 AA) 기법을 통해 개선할 수 있으며 환경에 따라 여러 앤티에일리어싱 기법의 하나를 선택할 수 있다.

슈퍼샘플링 앤티에일리어싱 (SSAA, Super Sampling AA)

대표적인 슈퍼샘플링 AA는 방법은 단순하지만, 퀄리티 개선 효과는 탁월하다. 원리는 우리가 출력하고자 하는 이미지보다 N 배 큰 해상도의 이미지를 생성한 후 원래 해상도로 이미지를 축소하는 것이다. 이때 4.2절에서 기술한 보간법으로 다운 샘플링을 수행하여 도형 외곽라인의 계단 현상을 자연스럽게 완화할 수 있다. N은 샘플링 개수를 의미하며 네 개의 샘플링이면 품질을 충분히 개선할 수 있다. 구현 방법은 단순하지만, N 배 해상도의 이미지를 생성해야 하므로 메모리 및 프로세싱의 추가 부담이 존재한다.

슈퍼샘플링 AA는 화면 영역 전체를 대상으로 샘플링 작업을 수행하므로 외곽선의 계단 현상뿐만 아니라 다운 스케일링 시 발생하는 색상의 손실을 해소하고 텍스처 도트가 두드러지게 보이는 현상도 개선할 수 있다. 슈퍼샘플링 AA는 샘플링을 적용하지 않은 전체 화면을 대상으로 적용할 때 보다 효율적이다.

멀티샘플링 앤티에일리어싱 (MSAA, Multi Sampling AA)

슈퍼 샘플링 AA의 부하를 회피하는 방편으로 멀티샘플링 AA를 고려할 수 있다. 이미지 전 영역을 대상으로 수행하는 슈퍼샘플링 AA와 달리 멀티샘플링 AA는 도형의 외곽선만 샘플링을 수행한다. 이 경우 샘플링 수행 범위를 대폭 축소할 수 있음으로 프로세싱 부담도 그만큼 줄어든다. 다만 멀티샘플링 특성상 도형의 외곽선을 인지할 수 있는 전제 조건이 필요하다. OpenGL 및 Direct3D와 같은 전통 그래픽스 출력 시스템에서는 폴리곤 단위로 래스터 작업을 수행하므로 렌더링 파이프라인 과정에서 도형의 지오메트리 정보를 취급하는 것이 가능하다.

멀티샘플링 AA의 구현 시 한 픽셀의 색상을 결정하기 위해 샘플링 필터를 적용할 수 있다. 여기서 샘플링 필터는 샘플링할 픽셀의 개수 및 위치 정보를 구현한다. 네 점의 샘플링 필터라면 회전한 그리드 형태로 구성할 수 있으며 샘플링한 네 점 위치의 픽셀 값을 보간하여 최종 픽셀 색상을 결정할 수 있다. 샘플링 필터의 잘 분산된 샘플링 위치 정보는 하나의 픽셀을 지나는 도형의 외곽선으로부터 균형 있는 색상 보간이 가능하도록 도와준다. 

그림 31: 멀티샘플링 수행 영역과 네 점의 샘플링 필터

스팬 엣지 앤티에일리어싱 (SEAA Span Edge AA)

그림 32: SEAA 외곽선 진행 방향

그림 33: SEAA 외곽선 방향 패턴

그림 34: SEAA 외곽선 길이를 토대로 투명도 결정


6. 이미지 합성

렌더링 엔진에서는 생성한 개별 UI 이미지를 합성하는 작업을 수행해야 한다. 이를 이미지 합성 내지  컴퍼지션(Composition) 또는 블렌딩(Blending)이라고도 하는데 이는 두 장 이상의 이미지를 같은 영역에 출력하기 위한 작업의 일환이다. 이미지 합성의 핵심은 합성하는 두 이미지의 픽셀값과 합성식에 있다. 간단한 예로 알파 블랜딩에서 배경 이미지 위에 반투명한(Opacity=50%) 한 이미지를 출력한다면 두 이미지의 색상 농도를 반으로 감소한 후 이를 합산하여 그린다.

그림 35: 알파 블랜딩 계산

그림 36: 렌더링 엔진 이미지 합성 단계 수행

6.1 알파 블랜딩

그림 37: 알파 블렌딩 함수

/* 
 * 알파 블렌딩 구현
 * 블렌딩 식: (DstRGB * (1 - SrcA)) + (SrcRGB * SrcA)
 * @p src: Pixel
 * @p dst: Pixel
*/
blend(src, dst):
   out = Pixel():
       .r = dst.r * ((255 - src.a) / 255) + (src.r * (src.a/255))
       .g = dst.g * ((255 - src.a) / 255) + (src.g * (src.a/255))
       .b = dst.b * ((255 - src.b) / 255) + (src.b * (src.a/255))
       .a = (255 - src.a) + src.a
  
  return out

코드 13: 알파 블랜딩 함수

코드 13은 두 색상을 합성하는 알파 블랜딩 함수를 구현한다. 소스(src)와 대상(dst) 색상을 입력받고 지정된 수식에 의거 색상을 합성한다. 여기서 사용된 블렌딩 수식은 (Src Color / Src Alpha) + (Dst Color * (1 - Src Alpha))이다. 이때 수식에서 색상 범위는 0~1로 가정한다. 수식에서 소스 이미지의 투명도가 20%에 해당한다면 대상 이미지의 투명도는 80%를 적용하며 Out = Src * 0.2 + Dst * 0.8로 이해할 수 있다. 실제 채널당 색상 값은 0~255구간을 가지므로 0~1은 0~255로 매핑되어야 한다. 

코드 13 comp()는 렌더링 엔진에서 도형 또는 이미지를 그릴 때 호출할 수 있다. 다음 코드는 3.5.1절의 사각형 그리는 로직에 위 comp()를 적용한 주요 코드를 보여준다.

/*
 * 사각형 그리는 작업 수행
 * @p buffer: NativeBuffer
 * @p rect: Geometry
 * @p clipper: Geometry
 * @p fill: UIFill
 * @p comp: UICompositor
*/
UIVectorRenderer.drawRect(buffer, rect, clipper, fill, comp, ...):
    ...
    //src는 사각형 색상, dst는 사각형이 그려질 대상에 해당
    src = fill.color
    for (y = 0; y < rect.h; ++y)
        for (x = 0; x < rect.w; ++x)
            dst = bitmap[y * scanlineSize + x]
            /* comp()는 src와 dst에 알파블랜딩을 적용한 값을 반환한다. */
            bitmap[y * scanlineSize + x] = comp(src, dst)

코드 14: 블랜딩을 적용한 도형 드로잉
다음은 UI 객체에 블렌딩 옵션을 적용하기 위한 API 호출 예시이다.

//대상 객체
dst = UICircle():
    .position = 200, 100
    .radius = 100
    .fill = UIRGBA(233, 30, 99, 255)

//소스 객체
src = UIRect():
    .geometry = {100, 200, 200, 200}
    .fill = UIRGBA(33, 150, 243, 127)
    .compMethod = UIComposition.AlphaBlend     //알파 블렌딩 지정

코드 15: 블랜딩 옵션 호출

그림 38: 블랜딩 종류 및 수식 (Android PorterDuff Mode)

/* Compositor 인터페이스. 입력과 출력을 정의 */
Interface UICompositor:
    /* 
     * @p src: Pixel
     * @p dst: Pixel
    */
    Pixel comp(src, dst)

/* Compositor 인터페이스를 기반으로 AddBlend 구현 */
UIAddBlend implements UICompositor:
    override comp(src, dst):
        ...
        return out

/* Compositor 인터페이스를 기반으로 AlphaBlend 구현 */
UIAlphaBlend implements UICompositor:
    override comp(src, dst):
        ...
        return out

/* 그 외 브랜딩 옵션 구현 */
...

코드 16:  다형성을 통한 블랜딩 옵션 확장

/* UI 객체에 AlphaBlend 지정 */
src = UIRect():
    /* compMethod()에 익명(Anonymous)의 UIAlphaBlend 객체를 전달 */
    .compMethod = UIAlphaBlend
...

코드 17:  블랜딩 옵션 호출

/* UIObject는 블랜딩 옵션으로 UCompositor 객체를 전달받는다. 
 * @p comp: UICompositor
*/
UIObject.compMethod(comp):
    .comp = comp
    ...

/* 이후 객체가 render()를 수행할 시 comp를 래스터라이저로 전달한다.
   이 comp는 래스터 단계에서 호출된다. 이후 코드는 14와 동일하다. */
UIRect.render(...):
    ...
    UIVectorRenderer.drawRect(..., .comp, ...)

코드 18: 블랜딩 함수 호출 수행 과정

6.2 마스킹

그림 39: 마스킹 함수 수행
마스킹은 입력 데이터로서 소스(Source)와 마스킹(Masking) 두 개의 이미지를 요구하며 마스킹 이미지의 픽셀 데이터는 소스 이미지 픽셀 데이터와 함께 마스킹 함수로 전달되어 합성된다. 일반적으로 마스킹 이미지가 지닌 데이터를 알파 값으로 간주하는데 달리 말하면 마스킹 이미지의 픽셀 데이터는 알파 값으로서 소스 이미지에 적용할 수 있다. 이때 두 데이터 간 동일 위치에 있는 픽셀끼리 마스킹 연산을 수행하고 그 결과(Output)를 저장한다.

그림 40: 마스킹 적용 예 (Tizen)

그림 41: 마스킹 + 블랜딩 수행
디자인 관점과 달리 마스킹 동작은 비용이 다소 비싼 작업에 해당한다. 원형 아이콘을 예로 들자면 하나의 아이콘을 위해 마스킹 이미지를 별도로 준비해야 한다. 만약 마스킹 이미지가 따로 구비되어 있지 않다면 렌더링 과정을 거쳐 마스킹 이미지를 동적으로 생성해야 한다. 이후 준비된 마스크 이미지는 소스 이미지와 마스킹 합성 작업을 거치고 최종 아이콘을 생성할 수 있다. 최악의 경우 마스킹이 필요 없는 아이콘 대비 두 배 이상의 메모리 사용과 데이터 처리 비용이 든다. 만약 디자인 단계에서 미리 마스킹 작업을 처리할 수 있다면 보다 최적화된 UI 앱 개발에 도움이 된다.


6.3 필터

그림 42: 이미지 필터 효과

일반적인 필터 방안은 출력 준비가 끝난 비트맵을 입력값으로 받아 필터 함수를 통해 비트맵을 변조한 후 출력될 수 있도록 한다. 이때 필터 함수는 내장 함수 또는 사용자 커스텀 함수일 수 있으며 요청으로  복수의 필터가 연속으로 수행될 수도 있다. 더 나은 성능을 위해서는 필터 입력으로 사용할 비트맵을 생성함과 동시에 필터를 적용하고 렌더링 단계를 최소화할 수 있다.

그림 43: 이미지 필터 수행 과정

/* UserCustomFilter는 UIFilter 인터페이스를 구현한다.*/
UserCustomFilter implements UIFilter:
    /*
     * 필터 수행 함수
     * @p in: Pixel
     * @p coord: Point
    */
    override func(in, coord, ...):
        Pixel out
        /* 여기서 필터 동작을 수행하는 로직을 작성한다. in으로 받은 픽셀 데이터를 변조하여 out에 기록한다.
           구체적인 로직은 애니메이션 & 이펙트에서 다룬다. */
        ...
        return out

코드 19: 사용자 정의 필터 구현

content = UIImage():
    /* UI객체에 사용자 정의 필터를 추가하는 것은 물론 내장 필터를 추가할 수도 있다. */
    .filters += UserCustomFilter
    .filters += UIBlurFilter

코드 20: 필터 기능 사용 예시

/* UIImage는 이미지를 출력하는 UIObject의 파생 타입이다.
 * @p buffer: nativeBuffer
*/
UIImage.render(buffer, ...):
    ...

    /* 필터를 적용한 중간 결과물을 저장할 버퍼 생성 */
    tmp = NativeBuffer(...)

    /* 출력할 이미지 데이터를 대상 버퍼(buffer)가 아닌 임시 버퍼(tmp)에 그린다. */
    UIVectorRenderer.drawImage(temp, ...)

    /* 객체에 지정된 필터 목록(.filters())을 참조하여 필터 프로세싱을 수행한다.
       UIFilterProcess.proc()은 filters()에 지정된 필터 목록을 순차적으로 수행해 주는 역할을 한다고 가정하며
       입력 데이터 tmp으로부터 결과물을 buffer에 기록한다. */
    UIFilterProcessor.proc(tmp, .filters, ..., buffer)
    ...

코드 21: 필터 수행 엔진 구현부

그림 44: 셰이더 기반 필터 수행

필터 스크립트

참고로 안드로이드의 렌더스크립트는 범용 계산을 위해 설계된 메커니즘이다. 렌더스크립트는 CPU는 물론 GPGPU(General Purpose GPU)를 활용하여 헤테로지니어스(Heterogeneous) 컴퓨팅을 통한 고성능 프로세싱을 목표로 한다. 사용자가 작성한 스크립트 코드는 컴파일 시 비트코드로 변환되고 런타임 시점에 가용한 프로세싱 유닛으로 전달되어 수행된다. 작업 스케줄링은 렌더스크립트 런타임 엔진이 담당하므로 확장성은 물론 사용자가 병렬처리의 개념에 익숙하지 않아도 이를 알아서 수행해주는 장점을 제공한다. 그뿐만 아니라 셰이더보다 더 유연한 구조를 갖추므로 필터 기능을 수행할 수 있는 유연성도 갖출 수 있다.

그림 45: 헤테로지니어스 기반 필터 스크립트 동작
이를 토대로 안드로이드는 렌더스크립트 개념을 확장한 필터스크립트 기능을 제공한다. 이는 필터 기능에 집중한 인터페이스와 기능을 제공함으로써 사용자가 필터 함수를 더욱더 쉽게 구현할 수 있도록 도와준다. 

#pragma version(1)
#pragma rs java_package_name(com.example.rssample)
#pragma rs_fp_relaxed

/* 필터 함수. 23번 줄의 forEach_invert()에 의해 호출 */
uchar4 __attribute__((kernel)) invert(uchar4 in, uint32_t x, uint32_t y) {
    uchar4 out = in;
    out.r = 255 - in.r;
    out.g = 255 - in.g;
    out.b = 255 - in.b;
    return out;
}

//렌더스크립트 초기화
mRS = RenderScript.create(this);
mInAllocation = Allocation.createFromBitmap(mRS, bm, Allocation.MipmapControl.MIPMAP_NONE, Allocation.USAGE_SCRIPT);
mOutAllocation = Allocation.createFromBitmap(mRS, bm, Allocation.MipmapControl.MIPMAP_NONE, Allocation.USAGE_SCRIPT);
mScript = new ScriptC_mono(mRS, getResource(), R.raw.mono);

//렌더스크립트 실행
mScript.forEach_invert(mInAllocation, mOutAllocation);

코드 22: 안드로이드 필터스크립트 예시

7. 최적화 전략

7.1 이미지 캐싱

UI 렌더링 엔진에서 이미지 프로세싱은 기능상 많은 비중을 차지한다. 만약 벡터 래스터라이징을 통해 생성한 이미지나 이미지 스케일링을 통해 가공한 다른 해상도 이미지를 캐싱을 통해 재사용할 수 있다면 보다 성능 효율을 높일 수 있다. 여기서 이미지 캐싱(Caching)은 이미지만 전담한 캐싱 기능을 말하는데 렌더링 엔진 내부에서는 이미지 캐시 관리자(Image Cache Manager)를 구현하여 비트맵 데이터를 관리하고 엔진 정책에 따라 비트맵 데이터를 재사용하거나 폐기할 수 있다.

그림 46: 이미지 캐시 관리자 운용

첫 번째 고려사항으로 이미지 캐시 관리자가 캐싱할 이미지 대상은 다음 목록과 같이 간추려 볼 수 있다.

소스로부터 불러온 원본 이미지

크기가 변경된 이미지

폰트 글리프 이미지

벡터 래스터를 통해 생성한 도형 이미지

마스킹 적용 이미지

필터 적용 이미지

//해당 프로세스에서 사용할 이미지 캐시 최대 크기 지정 (예시: 50MB) 
UICanvas.cacheSize(50000000)

코드 23: 프로그램에서 이미지 캐시 크기 지정 예

그림 47: LRU 기반의 이미지 캐싱 동작

/* 
 * UIImage.render() 전 수행되는 이미지 준비 단계
*/
UIImage.prepare(...)
    ...
    //Cache ID 생성. 이미지 경로와 출력할 이미지 가로, 세로 크기 조합
    key = .path + .width.toString + "x" + .height.toString

    //기존에 캐싱된 데이터인지 확인
    dstBuffer = ImageCacheMgr.get(key)

    /* 캐싱되어 있지 않으므로 이미지 데이터를 새로 만들어서 추가한다. 만약 dstBuffer가
       존재한다면 데이터를 새로 만들지 않고 재활용한다. */
    if (!dstBuffer)
        dstBuffer = NativeBuffer(UICanvas.getSurface, .width, .height, RGBA32, IO_WRITE + IO_READ)

        //srcBuffer로부터 dstBuffer에 이미지 스케일링 수행
        UIImageRenderer.bilinearScale(.srcBuffer, dstBuffer)

        //재사용을 위해 dstBuffer를 캐싱
        ImageCacheMgr.add(key, dstBuffer)
    ...

/* 
 * 새 캐시 데이터 추가
 * @p key: String
 * @p data: NativeBuffer 
*/
UIImageCacheMgr.add(key, data)

    size = data.size             //새로 캐싱할 이미지 크기

    //캐시 크기 초과
    if (size > .maxCacheSize) return false

    .cacheSize += size             //누적 캐시 크기 갱신

    //초과한 캐시 크기만큼 캐시 메모리 확보
    while(.cacheSize - .maxCacheSize > 0)
        /* 캐시 목록에서 첫 번째 (가장 오래된) 데이터를 가져와서 삭제한다.
           Pair는 키와 데이터 쌍을 담는 자료구조이다. */
        Pair it  = .cacheList.get(0)
        NativeBuffer tmp = it.data
        .cacheSize -= tmp.size
        .cacheList.remove(0)

    //캐시 공간이 확보되었으므로 cacheHash에 새 데이터 추가
    Pair it(key, data)
    .cacheList.append(it)

/* 
 * 기존 캐시 데이터 반환
 * @p key: String
*/
UIImageCacheMgr.get(key)

    Pair it
    found = false

    //캐시 목록에서 현재 키와 일치하는 데이터를 찾는다.
    for (i = 0; i < .cacheList.length; i++)
        it = .cacheList.get(i)
        //데이터를 찾은 경우 캐시 목록에서 제거
        if (it.key == key)
            .cacheList.remove(i)
            found = true
            break

    if (!found) return     //존재하지 않는 캐시 데이터

    //데이터를 리스트의 최상단으로 옮긴 후 캐시 데이터 반환
    .cacheList.append(it)
    return it.data

코드 24: LRU 기반 이미지 캐싱 메커니즘

8. 정리하기

이미지 프로세싱은 UI 렌더링 엔진의 핵심 기능으로서 이미지 가공을 수행한다. 이번 장에서 우리는 렌더링 엔진이 이미지를 출력하기 위해 파일로부터 이미지 데이터를 불러오는 과정을 확인하였다. JPEG, PNG, WEBP, GIF 등 포맷별 특징을 살펴보았고 이들의 데이터 구조 및 인코딩 방식이 다르기 때문에 렌더링 엔진이 전달받은 이미지 데이터를 특수 알고리즘을 이용하여 디코딩하고 이를 출력 가능한 형태로 변형함을 확인할 수 있었다.

추가로 렌더링 엔진은 이미지 파일 뿐만 아니라 벡터 래스터를 통해 완성된 도형 내지 폰트 글리프 역시 비트맵 형태로서 이미지 데이터를 가공한다는 사실을 알 수 있었다. 그리고 이미지 프로세싱을 통해  이미지 데이터의 해상도를 변경하거나 색상 합성, 필요에 따라 이미지를 후처리하여 필터 효과 등을 적용하는 방법도 살펴보았다.

나아가 3차원 변환 효과를 위해 원근법 구현 및 텍스처 매핑 기술을 확인해 보았고 이미지 프로세싱 과정에서 발생하는 이미지 품질 손실을 보완하기 위해 앤티에일리어싱 및 샘플링 보간 등 이미지 품질 개선 기법도 함께 살펴보았다.

마지막으로 이미지 캐싱 관리자를 통해 이미지 데이터를 재사용하는 방법을 이용하고 이미지 프로세싱의 작업 부담을 해소할 방법을 살펴보았다.