id. Hermet

3. SVG (Scalable Vector Graphics)

3.1 SVG 개요

SVG는 기본적으로 벡터를 표현하기 위한 도형 및 속성을 정의한다. 기술 가능한 도형으로는 사각형, 원, 선, 폴리곤 그리고 경로(Path)가 있으며 그 외로 이미지와 텍스트도 기술할 수 있다. 또한 SVG는 도형 효과를 위한 여러 속성을 정의하며 이러한 속성으로는 스트로크(Stroke), 필터(Filter), 그림자, 단색 및 그래디언트(Gradient) 채우기 등이 있다. 기본적으로 SVG는 출력 요소와 속성을 같이 기술함으로써 원하는 이미지를 표현한다. 

SVG는 벡터 요소를 기술하는 방법을 정의할 뿐 실제 벡터 요소를 출력하는 기능을 제공하지 않는다. 대신 SVG 파일로부터 실제 렌더링 결과물 출력해주는 여러 오픈소스 프로젝트가 있으며 그 중 대표적인 프로젝트로 librsvg가 있다. 따라서 플랫폼 독자적인 SVG 출력 기능을 제공하지 않다면 librsvg 라이브러리를 활용할 수 있다. 그리고 SVG 보다 범용적인 목적의 벡터 드로잉 엔진으로 카이로(Cairo) 오픈소스 프로젝트가 있으니 참고하길 바란다. SVG에 대해 더욱 자세한 기능과 명세서를 살펴보고 싶다면 SVG 공식 튜토리얼 사이트( www.w3schools.com/graphics/svg_intro.asp)를 참고한다.

• 그래디언트 채우기와 텍스트

<!-- svg 선언, 기본 사이즈 세로:150, 가로:400 -->
<svg height="150" width="400">
  <defs>
    <!-- 선형 그래디언트, 좌측에서 우측 방향 -->
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <!-- 그래디언트 지점 및 색상. 좌측 끝:노란색 -->
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <!-- 그래디언트 지점 및 색상. 우측 끝:빨간색 -->
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <!-- 타원, 중심 좌표:(200, 80), 가로 반지름:85, 세로 반지름:55. 색상:grad1 참조 -->
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <!-- 텍스트 SVG, 색상:흰색, 폰트 크기:45, 폰트명: Verdana, 위치 좌표:(150, 86) -->
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
</svg>

• 스트로크

<svg height="80" width="300">
  <!-- 이하 스트로크 동일 적용. 색상:검정, 스트로크 넓이:6 -->
  <g fill="none" stroke="black" stroke-width="6">
    <!-- 경로, 시작점:(5,20), 이동 거리:(215, 0), 스트로크 라인캡 스타일:butt -->
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <!-- 경로, 시작점:(5,40), 이동 거리:(215, 0), 스트로크 라인캡 스타일:round -->
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <!-- 경로, 시작점:(5,60), 이동 거리:(215, 0), 스트로크 라인캡 스타일:square -->
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

<svg height="210" width="500">
  <!-- 폴리곤, 정점 목록 (100,10), (40,198), (190,78), (10,78), (160,198)
       채우기 색상:라임, 스트로크 색상:보라, 스트로크 넓이:5  -->
  <polygon points="100,10 40,198 190,78 10,78 160,198"         
           style="fill:lime;stroke:purple;stroke-width:5;" />
</svg>

<svg height="400" width="450">
  <!-- 경로 (A-B), 시작점:(100,350), 이동 거리:(150, -300), 
       스트로크 색상:빨강, 스트로크 넓이:3  -->
  <path d="M 100 350 l 150 -300" stroke="red" stroke-width="3" />
  <path d="M 250 50 l 150 300" stroke="red" stroke-width="3" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" />
  <!-- 경로, 시작점:(100,350), 2차 베지어 곡선 P1:(150, -300), P2(300, 0)
       스트로크 색상:파랑, 스트로크 넓이:5  -->
  <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" />
  <!-- 이하 스트로크 동일 적용. 색상:검정, 스트로크 넓이:3 -->
  <g stroke="black" stroke-width="3" fill="black">
    <!-- 원(A): 중심 좌표:(100, 350), 반지름:3 -->
    <circle cx="100" cy="350" r="3" />
    <circle cx="250" cy="50" r="3" />
    <circle cx="400" cy="350" r="3" />
  </g>
  <!-- 이하 텍스트 동일 적용. 폰트 크기:30, 폰트명: sans-serif, 색상:검정, 
       정렬:가운데 -->
  <g font-size="30" font-family="sans-serif" fill="black" text-anchor="middle">
    <!-- 텍스트:A, 좌표:(100 - 30, 350) -->
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
</svg>

그림 16: UIShape을 확장한 도형 클래스

UIShape는 UIFill과 UIStroke로부터 정보를 전달받고 이와 관련된 작업을 수행한다. 벡터 그래픽스 사양에 따라 채우기와 스트로크는 기능을 독립적으로 행사할 수 없으며 반드시 UIShape을 통해 동작한다. 채우기는 단일 및 선형, 원형 그래디언트 색상 채우기로 세분화하므로  UIFill은 인터페이스로서 연결고리 역할만 수행하고 실제 구현은 이를 확장한 파생 클래스에서 수행한다. 그래디언트의 복수 색상을 지정하기 위해 UIFillColor를 도입한다.

5. 도형 그리기

도형 그리기에 앞서 미리 언급하자면, 실용 엔진에서는 고성능 벡터 래스터 작업을 위해 도형 수식 연산 과정을 프로그래밍적 기교, 알고리즘 트릭으로 단순화하여 이를 최적화한다. 그뿐만 아니라 병렬화 및 하드웨어 가속을 활용하기 위해 렌더링 알고리즘을 설계한다. 일반적으로 고급 벡터 래스터라이저는 GPU 가속을 활용하지만, CPU 연산에서는 SIMD(Single Instruction Multiple Data) 벡터 연산을 활용할 수도 있다. 하지만 여기서는 여러분의 이해를 돕기 위해 기본 정석을 토대로 도형 그리기를 완성한다. 어렵고 난해한 대수학이 아닌 고등 수준의 수학 지식으로도 잘 동작하는 도형 드로잉 알고리즘을 완성할 수 있다.

우선 4절에서 살펴본 벡터 기능을 토대로 벡터 렌더러(Vector Renderer) 구현부를 살펴본다. 벡터 렌더러는 캔버스에 추가된 도형 객체로부터 채우기 및 스트로크 정보를 전달받고 래스터 작업을 수행한다. 캔버스 엔진은 객체 렌더링 시 캔버스 버퍼인 NativeBuffer를 전달하고 벡터 오브젝트는 이를 벡터 렌더러에게 전달하여 정보를 공유한다. 벡터 렌더러는 NativeBuffer를 대상으로 실제 픽셀 데이터를 기록하는 래스터 작업을 수행할 수 있다. 

UICanvas.render():
    if(.dirty == false) return

    /* 활성 객체를 대상으로 출력 버퍼에 UI를 그리는 작업을 수행. 이 때 각 개체가 그릴
       대상 버퍼와 필요 정보를 인자로 전달한다. .buffer는 코드 2.7 참고 */
    foreach(.activeObjs, obj)
        obj.render(.buffer, ...)
    ...

/* UIObject의 파생 클래스인 UIRect는 UIVectorRenderer로 NativeBuffer를 전달하고
   UIVectorRenderer는 NativeBuffer를 대상으로 래스터 작업을 수행하여 벡터 이미지를
   완성한다. */
UIRect.render(buffer, ...):
    ...
    UIVectorRenderer.drawRect(buffer, ...)
    ...

/*
 * 사각형 그리는 작업 수행
 * @p buffer: NativeBuffer
 * @p rect: Geometry
*/
UIVectorRenderer.drawRect(buffer, rect, ...):
    Pixel bitmap[] = buffer.map()                //버퍼 메모리 접근
    scanLineSize = buffer.scanlineSize           //bitmap 버퍼 가로 길이

    //bitmap에서 사각형을 그릴 시작 위치
    bitmap += (rect.y * scanLineSize) + rect.x

    //사각형 그리는 실제 로직! 색상은 임의로 흰색으로 지정
    for(y = 0; y < rect.h; ++y)
        for(x = 0; x < rect.w; ++x)
            bitmap[y * scanLineSize + x] = 0xffffffff

/*
 * 두 사각 영역의 교집합 영역 계산
 * @p rect1: Geometry
 * @p rect2: Geometry
*/
clipRects(rect1, rect2):
    result = Geometry():
        .x = max(rect1.x, rect2.x)
        .y = max(rect1.y, rect2.y)
        .w = min(rect1.x + rect1.w, rect2.x + rect2.w)
        .h = min(rect1.y + rect1.h, rect2.y + rect2.h)

    return result       //교집합 영역 반환

UIVectorRenderer.drawRect(buffer, rect, ...):
    ...
    //클리핑을 수행하여 사각 영역을 새로 구하고 rect 대신 clipped를 이용한다.
    clipped = clipRects(rect, Geometry(0, 0, buffer.width, buffer.height))
    ...

/*
 * 사각형 그리는 작업 수행
 * @p buffer: NativeBuffer
 * @p rect: Geometry
 * @p clipper: Geometry 
*/
UIVectorRenderer.drawRect(buffer, rect, clipper, ...):
    ...
    //버퍼 영역을 벗어나지 않도록 클리핑 수행 
    clipped = clipRects(rect, Geometry(0, 0, buffer.width, buffer.height))

    //제시된 clipper를 대상으로 추가 클리핑 수행
    clipped = clipRects(clipped, clipper)  
    ...

UIRect.render(buffer, ...):
    ...
    /* 사각 영역과 오브젝트 영역 모두 벡터 렌더러에 전달. 
       오브젝트 영역은 클립 영역으로 활용된다. */
    UIVectorRenderer.drawRect(buffer, .rect, .geometry, ...)
    ...

직선 드로잉을 구현하기 위해 x1 ~ x2 사이의 x 값을 1씩 증가하면서 직선 방정식에 대입한다. 그러면 x에 해당하는 y 값을 구할 수 있다. 이 때의 x, y의 값은 선을 구성하는 픽셀 위치에 해당한다.

/*
 * 직선 그리는 작업 수행
 * @p buffer: NativeBuffer
 * @p pt1: Point 직선 시작점
 * @p pt2: Point 직선 끝점
 * @p clipper: Geometry
*/
UIVectorRenderer.drawLine(buffer, pt1, pt2, Geometry clipper, ...):
    ...
    m = (pt2.y - pt1.y) / (pt2.x - pt1.x)         //기울기 값

    /* 직선의 x축 클리핑. 여기서는 pt1은 pt2보다 값이 작다고 가정한다. */    
    sx = pt1.x < clipped.x ? clipped.x : pt1.x
    ex = pt2.x > (clipped.x + clipped.w - 1) ? (clipped.x + clipped.w - 1) : pt2.x

    /* x 값을 인자로 y 값을 도출. 직선 기울기가 y축에 더 가깝다면 x 값을 도출한다. */
    for(x = sx; x < ex; x++)
        /* 정수형 경우 반올림(rounding) 처리에 주의 */
        y = m * (x - pt1.x) + pt1.y 
        /* 직선의 y축 클리핑 */
        if(y < clipped.y || y >= (clipped.y + clipped.h)) continue

        bitmap[y * scanLineSize + x] = 0xffffffff

/*
 * 원 그리는 작업 수행
 * @p buffer: NativeBuffer
 * @p center: Point 원 중점
 * @p radius: Var 원 반지름
*/
UIVectorRenderer.drawCircle(buffer, center, radius, ...):
    ...    
    //1사분면에 한하여 수행
    for(y = center.y - radius; y <= center.y; y++)
        x = sqrt(pow(radius * 2) - pow(y - center.y, 2)) + center.x
        sx = x + (center.x - x) * 2      //x 값 대칭
        sy = y + (center.y - y) * 2      //y 값 대칭

        bitmap[sy * scanLineSize + x] = 0xffffffff         //1사분면
        bitmap[sy * scanLineSize + sx] = 0xffffffff        //2사분면
        bitmap[y * scanLineSize + x] = 0xffffffff          //3사분면
        bitmap[y * scanLineSize + sx] = 0xffffffff         //4사분면

/*
 * 원 그리는 작업 수행
 * @p buffer: NativeBuffer
 * @p center: Point 원 중점
 * @p radius: Var 원 반지름
*/
UIVectorRenderer.drawCircle(buffer, center, radius, ...):
    ...    
     //1사분면에 한하여 수행
    for(y = center.y - radius; y <= center.y; y++)
        x = sqrt(pow(radius, 2) - pow(y - center.y, 2)) + center.x
        sx = x + (center.x - x) * 2       //x 값 대칭
        sy = y + (center.y - y) * 2       //y 값 대칭

        bitmap[sy * scanLineSize + x] = 0xffffffff          //1사분면
        bitmap[sy * scanLineSize + sx] = 0xffffffff         //2사분면
        bitmap[y * scanLineSize + x] = 0xffffffff           //3사분면
        bitmap[y * scanLineSize + sx] = 0xffffffff          //4사분면

/*
 * 2D 벡터 회전
 * @p angle: Var
*/
Vector2.rotate(angle):
    radian = degreeToRadian(angle)
    .x = cos(radian) * .x - sin(radian) * .y
    .y = sin(radian) * .x + cos(radian) * .y         

/*
 * 부채꼴 그리는 작업 수행
 * @p buffer: NativeBuffer
 * @p center: Point 원 중점
 * @p radius: Var 원 반지름
 * @p angle1: Var 부채꼴 시작점 각도
 * @p angle2: Var 부채꼴 끝점 각도
*/
UIVectorRenderer.drawArc(buffer, center, radius, angle1, angle2, ...):
    ...
    //시작, 끝 각도 차가 360 이상이면 원과 동일
    if(abs(angle2 - angle1) >= 360)
        return UIVectorRenderer.drawCircle(buffer, center, radius, ...)
    
    /* angle1과 angle2가 가리키는 벡터 */
    vStart = Vector2(0, -center.y)
    vStart.rotate(angle1)
    vEnd = Vector2(0, -center.y)
    vEnd.rotate(angle2)

    /* 계산할 y 값 범위를 결정. 만약 부채꼴이 1, 2 사분면에 걸쳐 있다면 원의 상단,
       3, 4 사분면에 걸쳐있다면 원의 하단을 y 범위에 포함한다. */         
    yStart = center.y, yEnd = center.y

    if((270 <= angle1 < 360) || (0 <= angle1 < 90) ||
       (270 <= angle2 < 360) || (0 <= angle2 < 90))
        yStart = center.y - radius

    if((90 <= angle1 < 270) || (90 <= angle2 < 270))
        yEnd = center.y + radius

    vZero = Vector2(0, -radius)   //0도를 가리키는 벡터

    /* 드로잉 시작 */
    for(y = yStart; y < yEnd; y++)
        sx[0] = sqrt((radius * radius) - pow(y - center.y, 2)) + cx
        sx[1] = x + (center.x - x) * 2      //x 값 대칭

        foreach(sx, x)
            //중점으로부터 (x,y) 벡터를 구하고
            vDir = Vector2(x - center.x, y - center.y)
            //vZero와 내적을 유도하여 사잇각을 구한다. (그림 3.24)
            cos = vZero.dotProduct(vDir) / (vZero.length * vDir.length)
            theta = acos(cos)
            angle = radianToDegree(theta)
            //내적 방향 고려
            if(vZero.crossProduct(vDir) < 0) angle = 360 - angle

            //시작 각과 끝 각 사이에 존재하면 해당 위치는 부채꼴 둘레에 포함된다.
            if(angle1 <= angle < angle2) 
                bitmap[y * scanLineSize + x] = 0xffffffff

    //마지막으로 원의 중점과 둘레의 두 끝점을 직선으로 연결한다.
    UIVectorRenderer.drawLine(buffer, center, Point(vStart.x, vStart.y), ...)
    UIVectorRenderer.drawLine(buffer, center, Point(vEnd.x, vEnd.y), ...)

/*
 * 2D 벡터 내적
 * @p v: Vector2
*/
Vector2.dotProduct(v):
    return (.x * v.x) + (.y + v.y)

/*
 * 2D 벡터 외적
 * @p v: Vector2
*/
Vector2.crossProduct(v):
    return (.x * v.y) - (v.x * .y)

/*
 * 2D 벡터 길이
*/
Vector2.length():
    return sqrt((.x * .x) + (.y * .y))

5.6 둥근 사각형

둥근 사각형은 사각형과 원의 각 사분면을 그리는 로직을 그대로 활용할 수 있다. 다만 사각형 모서리에 위치할 원의 반지름을 사용자가 결정할 수 있도록 인터페이스만 고려하면 된다.

/*
 * 둥근 사각형 그리는 작업 수행
 * @p buffer: NativeBuffer
 * @p rect: Geometry
 * @p cornerRadius: Var 모서리에 위치한 원의 반지름 비율 [0 ~ 1]
*/
UIVectorRenderer.drawRoundRect(buffer, rect, cornerRadius, ...)

구현 핵심은 각 모서리에 원을 사각형 내에 같은 크기로 배치한다. 따라서 둥근 사각형은 네 모서리의 부채꼴과 사각형 두 부분으로 나눠서 드로잉을 수행할 수 있다. 특히 모서리에 있는 네 부채꼴의 합은 하나의 완전한 원과 같다. 그러므로 원을 사분면으로 나눠서 그리되 중심 위치만 바꿔주면 된다. 이는 앞서 배웠던 원 드로잉 로직과 완전히 같다. 한편 사각형은 모서리를 제외한 영역에 해당하며 사각형을 세 부분으로 나눈다면 매우 쉽게 사각 영역을 완성할 수 있다. 그림 3.26은 이를 도식화한다.

만약 사각형 넓이 또는 높이 대비 원의 반지름이 커서 원이 서로 교차한다면 둥근 사각형의 외양은 훼손될 수 있다. 따라서 원의 반지름 크기에 제약이 필요하다. 사각형의 짧은 면의 길이가 두 원의 반지름 합보다 짧은 경우 원의 반지름은 사각형의 길이가 짧은 면을 기준으로 크기가 0.5배로 재조정되어야 한다. 


5.7 곡선

곡선을 구하는 방식은 여럿 있다. 제약은 있지만 앞서 배운 타원의 구간을 응용하면 곡선을 구할 수 있고 사인, 코사인 수식을 응용해도 곡선을 표현할 수 있다. 만약 일정 구간별로 위치 정보를 가지고 있다면 구간별 다항식 보간(Interpolation)을 이용하여 스플라인 곡선을 구할 수 있는데 B-스플라인, Nurbs(Non-Uniform Rational B-Spline), 에르미트(Hermite), 큐빅(Cubic) 스플라인 보간법 등이 주로 활용된다. 추가로 시작과 끝점 그리고 두 개의 제어점을 이용하는 베지어(Bezier) 곡선 역시 널리 알려진 곡선 표현법 중 하나다. 특히 베지어 곡선은 트루타입(Truetype) 폰트 및 김프(Gimp) 이미지 에디터 등 컴퓨터 그래픽스에서 대중적으로 활용되는 곡선 표현법에 해당한다.

• 스플라인 곡선
  

• 베지어 곡선
  

/*
 * 곡선을 그리는 작업 수행
 * @p buffer: NativeBuffer
 * @p start: Point
 * @p end: Point
 * @p control1: Point
 * @p control2: Point
*/
UIVectorRenderer.drawCurve(buffer, start, end, control1, control2, ...):

    //긴 축을 찾아 그 길이만큼 반복문을 수행한다.
    sx = abs(end.x - start.x)
    sy = abs(end.y - start.y)
    segment = sx > sy ? sx : sy

    prev = start         //이전 좌표값

    for(t = 1; t < segment; t++)
        //계수 구하기
        a = pow((1 - t), 3)
        b = 3 * pow((1 - t), 2) * t
        c = 3 * pow((1 - t), 2) * pow(t, 2)
        d = pow(t, 3)

        Point cur     //현재 좌표값
        cur.x = a * start.x + b * control1.x + c * control2.x + d * end.x
        cur.y = a * start.y + b * control1.y + c * control2.y + d * end.y

        UIVectorRenderer.drawLine(buffer, prev, cur, ...)

        prev = cur

/* 일반적으로 경로는 이전 명령어의 끝점에 새로운 경로를 추가한다.
   여기서 moveTo()는 다음 명령어의 시작 위치를 변경한다. */

path = UIPath():                          //패스 객체
    .moveTo(x, y)                         //시작점을 x, y로 이동
    .lineTo(x2, y2)                       //x2, y2까지 직선 그리기
    .curveTo(ctrlPt1, ctrlPt2, endPt)     //x2, y2에서 endPt까지 곡선 그리기
    /* close()를 호출하면 마지막 점에서 시작점까지 선을 연결하여 닫힌 도형을 완성한다.
       close()를 호출하지 않으면 마지막 점을 끝으로 경로를 완성한다. */
    .close()

• 경로

/*
 * UIPath는 도형의 외곽선을 명령어로 전달받고 이들을 그리는 작업을 수행한다.
 * 폴리곤을 완성하기 위해서는 경로의 시작점과 끝을 정확히 연결하면 된다.
 * close()는 끝점과 시작점을 연결해주는 기능을 제공한다.
*/
UIPath implements UIShape:
    UIPathCommand cmds[]          //명령어 목록
    ...
    /* 이하 명령어 추가 메서드. 각 명령어는 UIPathCommand 인터페이스를 확장하여
       데이터를 정의하고 이를 cmds 목록에 추가한다. */

    moveTo(x, y):
        .cmds.push(UIPathCommandMoveTo(x, y))

    lineTo(x, y):
        .cmds.push(UIPathCommandLineTo(x, y))

    curveTo(control1, control2, end):
        .cmds.push(UIPathCommandCurveTo(ctrl1, ctrl2, end))

    close():
        .cmds.push(UIPathCommandClose())
    ...

    /*
     * 큐잉(queueing)된 명령어를 하나씩 꺼내어 드로잉 수행
    */
    override render(...):
        ...
        Point begin = cur = (0,0)

        foreach(.cmds + offset, cmd)
            switch(cmd.type)
                UIPathCommandMoveTo:
                    begin = cur = cmd.get()
                UIPathCommandLineTo:
                    to = cmd.get()
                    UIVectorRenderer.drawLine(buffer, cur, to, ...)
                    cur = to
                UIPathCommandCurveTo:
                    ctrl1, ctrl2, end = cmd.get()
                    UIVectorRenderer.drawCurve(buffer, cur, end, ctrl1, ctrl2, ...)
                    cur = end
                UIPathCommandClose:
                    UIVectorRenderer.drawLine(buffer, cur, begin, ...)
            ...

/*
 * 곡선 경로 명령어를 구축하고 get() 호출 시 디스패치(dispatch)할 곡선 데이터를 제공
 * UIPathCommand 인터페이스를 구현하여 UIPath의 명령어 목록에 추가 가능하다. 
*/
UIPathCommandCurveTo implements UIPathCommand:
    Point ctrl1, ctrl2, end    // CurveTo 데이터

    constructor(ctrl1, ctrl2, end):
        .ctrl1 = ctrl1
        .ctrl2 = ctrl2
        .end = end
 
    /* CurveTo 데이터 반환 */
    override get():
        return .ctrl1, .ctrl2, .end

그림 32: UIPath를 통한 SVG 벡터 드로잉 수행

• 폴리곤

/*
 * 폴리곤을 그리는 작업 수행
 * @p buffer: NativeBuffer
 * @p commands: UIPathCommand
*/
UIVectorRenderer.drawPolygon(buffer, commands, ...):
    ...
    //경로 명령어로부터 y의 min, max 값을 찾아 yBegin, yEnd에 기록
    foreach(commands. cmd)
        ...

    for(y = yBegin; y < yEnd; y++)
        //a. 경로로부터 y 위치에서 충돌하는 점들을 찾고 이들의 x 좌표 목록 반환
        xList = findIntersectsAtY(commands, y)

        //b. x 값 오름차순 정렬
        sortAscending(xList)

        //c. 준비한 x 값을 이용하여 드로잉 수행
        for(i = 0; i < xList.size - 1; i+=2)
            xBegin = xList[i]
            xEnd = xList[i+1]

            //(x, y)에 해당하는 픽셀 그리기
            for(x = xBegin; x < xEnd; x++)
                 bitmap[y * scanLineSize + x] = 0xffffffff

6. 채우기

6.1 단색

색상을 채우는 방법은 크게 단색과 그래디언트 두 개로 구분할 수 있다. 여기서 단색은 하나의 색상을 도형 전체에 적용하기 때문에 특별히 어려운 구현을 요구하지 않는다. 사용자가 설정한 색상을 전달받고 드로잉 단계에서 이를 적용하면 된다. 사용자가 색상을 지정하기 위해 단일 색상 정보를 가진 UIFilllSolidColor 같은 클래스를 제공할 수 있다. UIFillSolidColor 객체를 UIShape에 전달한다면 UIShape는 드로잉 시점에서 UIFillSingleColor로부터 색상 정보를 전달받을 수 있을 것이다.

//사각형 생성
shape = UIRect():
    .geometry = {100, 100, 200, 200}

//도형을 채울 색상 지정
fill = UIFillSolidColor():
    .color = UIRGBA(100, 100, 255, 255)

//채우기 적용
shape.fill = fill

UIRect.render(buffer, ...):
    ...
    /* UIRect는 사용자가 지정한 색상을 채우기 위해 UIVectorRenderer로 색상 정보(fill)를
       추가로 전달한다. */
    UIVectorRenderer.drawRect(buffer, .rect, .geometry, .fill, ...)

/*
 * 사각형 그리는 작업 수행
 * @p buffer: NativeBuffer
 * @p rect: Geometry
 * @p clipper: Geometry
 * @p fill: UIFill
*/
UIVectorRenderer.drawRect(buffer, rect, clipper, fill, ...):
    ...
    //사각형을 그리는 로직
    for(y = 0; y < rect.h; ++y)
        for(x = 0; x < rect.w; ++x)
            //색상 정보는 fill로부터 얻어온다.
            bitmap[y * scanLineSize + x] = fill.color

6.2 선형 그래디언트

선형 그래디언트(Linear Gradient 또는 Axial Gradient)를 표현하기 위해서는 그래디언트 효과가 펼쳐질 공간을 잇는 두 점 그리고 이 두 점 사이를 보간할 색상 정보가 필요하다. 쉬운 이해를 위해 우측을 향하는 두 색상을 보간하는 그래디언트를 생각해 보자. 이 경우 그래디언트의 시작점과 끝점(p1, p2) 그리고 두 색상 정보 (C1, C2)가 주어지는 데 두 색상을 선형 보간하기 위해서는 시작점으로부터 끝점 사이의 특정 위치(p3)의 정규값(p)을 구한 후 이 값을 이용하여 색상을 보간한다(C3).

세 개의 색상을 조합하기 위해서는 앞서 두 색상을 보간하는 작업을 반복 수행하면 된다. 이 경우 그래디언트를 채울 공간은 동일하게 하나지만 개입하는 색상의 정보가 늘어나기 때문에 각 색상이 개입할 위치 정보 역시 추가로 필요하다. 이때 개입하는 색상 위치는 좌푯값으로 지정할 수도 있고 정규값으로 지정하는 것도 가능하다. 이론상 개입할 수 있는 색상의 개수에는 제약이 없다.

//둥근 사각형
shape = UIRoundRect():
    .geometry = {0, 0, 200, 150}
    .radius = 0.1

//선형 그래디언트
fill = UIFillLinearGradient():

    //선형 그래디언트 영역 지정 (시작점, 끝점)
    .region(0, 0, 200, 150)

    //선형 그래디언트 색상 지정 (위치, RGBA 색상). 색상 위치는 0 ~ 1 범위로 제한
    .color = {0.0, UIRGBA(100, 100, 255, 255)}
    .color = {0.5, UIRGBA(255, 255, 255, 255)}
    .color = {1.0, UIRGBA(255, 255, 0, 255)}

//채우기 적용
shape.fill = fill

세 개 이상 색상이 그래디언트에 개입하는 경우 인접한 두 색상끼리만 색상 보간을 수행한다. 그림 3.39 경우에는 [Stop1, Stop2]와 [Stop2, Stop3] 두 쌍의 선형 보간이 발생한다. 이때 그래디언트 방향 벡터는 공유하되 정규값 범주는 그래디언트 전체가 아닌 두 점 사이로 결정한다. 결과적으로 복수 색상의 선형 그래디언트에서 한 점의 색상을 구하기 위해서는 앞선 배운 로직을 구간별로 적용한다.

UIVectorRenderer.drawRect(buffer, rect, clipper, fill, ...):
    ...
    //사각형을 그리는 로직
    for(y = 0; y < rect.h; ++y)
        for(x = 0; x < rect.w; ++x)
            //색상 정보를 구하기 위해 color()에 좌표를 추가로 전달한다.
            bitmap[y * lineLength + x] = fill.color(x, y)

/*
 * 선형 그래디언트 색상 정보 반환
 * @p x: Var
 * @p y: Var
*/
UIFillLinearGradient.color(x, y):
    //개입하는 색상이 한 개이면 단일 색상과 동일
    if(.colors.count == 1) return .colors[0].color

    /* 그래디언트 방향 벡터 (V). 
       start와 end는 fill.region()에서 전달받은 시작과 끝점 */
    vDir = Vector2(.end - .start)
    vDir.normalize()
    
    //현재 구하고자 하는 픽셀 위치를 가리키는 벡터 (V1)
    vCur = Vector2(x - .begin.x, y - .begin.y)

    //그림 3.37 선형 그래디언트 구현식을 이용하여 V2 벡터 계산
    cosA = vDir.dotProduct(vCur) / (vDir.length * vCur.length)
    vCur = (vDir / vDir.length) * (vCur.length * cosA)

    //전체 구간
    progress = vCur.length / Vector2(.end - .start).length

    //반복문을 수행하며 vCur가 속한 구간을 찾아서 최종 색상 계산
    for(i = 0; i  < .colors.count - 1; ++i)

        //UIFillColor는 색상(color)와 위치(pos) 정보를 가짐
        UIFillColor color1 = .colors[i]
        UIFillColor color2 = .colors[i + 1]

        //vCur가 속한 구간인지 판단
        if(progress < color1.pos || progress >= color2.pos) continue

        //p 값 계산
        vSegment = vDir * (color2.pos - color1.pos);
        vCur -= (vDir * color1.pos)
        p = vCur.length / vSegment.length

        //두 색상을 보간한 데이터 반환
        return {color1.color.r * p + color2.color.r * (1 - p),
                color1.color.g * p + color2.color.g * (1 - p),
                color1.color.b * p + color2.color.b * (1 - p),
                color1.color.a * p + color2.color.a * (1 - p)}

코드 24는 앞서 살펴본 수학적 풀이를 그대로 코드로 옮겨놓은 것에 불과하므로 이해하기 그리 어렵지 않다. 다만 픽셀마다 UIFillLinearGradient.color()를 수행하기 부담스러울 수 있음으로 가능한 작업은 사전에 처리하는 것도 고려해볼 만하다. 특히 그래디언트 색상 테이블을 미리 구축한다면 단순 테이블 인덱싱 수준으로 계산 로직을 단순화할 수 있다. 이때 테이블의 크기가 너무 크다면 이를 미니맵(minimap)처럼 크기를 축소하여 메모리를 절약하는 것도 하나의 방법이다. 

6.3 원형 그래디언트

선형 그래디언트를 이해하면 원형 그래디언트는 어려운 문제가 아니다. 원형 그래디언트 역시 선형과 마찬가지로 그래디언트 방향과 임의의 색상 위치를 가리키는 정규값을 계산하면 된다. 다만 선형과 달리 원형은 초점(focal)을 중심으로 전방위로 그래디언트가 펼쳐지는 차이가 있다. 따라서 원형 그래디언트의 방향 벡터는 초점으로부터 현재 그리고자 하는 색상 위치의 차(difference)를 통해 계산하면 된다. 다만 이 경우 픽셀마다 독립적인 방향 벡터를 구해야 하므로 초점으로부터 현재 색상 위치를 가리키는 벡터를 구한 뒤, 이 위치가 어느 색상 구간에 속한지 확인해야 한다. 이후 선형 그래디언트와 동일하게 해당 구간을 연결하는 두 색상을 보간하여 최종 색상을 결정한다.

//원 도형 생성
shape = UICircle():
    .position = {200, 200}
    .radius = 100

//원형 그래디언트
fill = UIFillRadialGradient():
    //원형 그래디언트의 반경
    .radius = 100
    //원형 그래디언트의 초점 위치. 그래디언트 범위(0 ~ 1) 내로 제한
    .focal = {0.5, 0.5}
    /* 원형 그래디언트 색상 지정 (위치, RGBA 색상). 
       색상 위치는 0 ~ 1 범위로 제한 0은 초점, 1은 원형 외곽 경계점 */   
    .color = {0.0, UIRGBA(100, 100, 255, 255)}
    .color = {0.5, UIRGBA(255, 255, 255, 255)}
    .color = {1.0, UIRGBA(100, 100, 255, 255)}

//채우기 적용
shape.fill = fill

/*
 * 원형 그래디언트 색상 정보 반환
 * @p x: Var
 * @p y: Var
*/
UIFillRadialGradient.color(x, y):
    //개입하는 색상이 한 개이면 단일 색상과 동일
    if(.colors.count == 1) return .colors[0].color

    //현재 구하고자 하는 픽셀 위치를 가리키는 벡터 
    vCur = Vector2(x - .focal.x, y - .focal.y)

    //방향 벡터
    vDir = vCur.Normalize()

    //전체 구간에서 현재 픽셀의 위치 비율
    progress = vCur.length / .radius

    //반복문을 수행하며 vCur가 속한 구간을 찾아서 최종 색상을 계산
    for(i = 0; idx  < .colors.count - 1; ++i)

        //UIFillColor는 색상(color)와 위치(pos) 정보를 가짐
        UIFillColor color1 = .colors[i]
        UIFillColor color2 = .colors[idx + 1]

        //vCur가 속한 구간인지 판단
        if(progress < color1.pos || progress >= color2.pos) continue

        //p 값 계산
        Vector2 vSegment = vDir * (color2.pos - color1.pos)
        vecCur -= (vDir * color1.pos)
        p = vCur.length / vSegment.length

        //두 색상을 보간한 데이터 반환
        return {color1.color.r * p + color2.color.r * (1 - p),
                color1.color.g * p + color2.color.g * (1 - p),
                color1.color.b * p + color2.color.b * (1 - p),
                color1.color.a * p + color2.color.a * (1 - p)}

7. 스트로크

line = UILine():                          //선 생성
    .from = {100, 100}                    //시작점
    .to = {150, 150}                      //끝점

stroke = UIStroke():                      //스트로크 객체 생성
    .width = 10                           //스트로크 넓이
    .join = UIStroke.JoinMiter            //스트로크 연결 부위 스타일 (그림 3.14 참조)
    .lineCap = UIStroke.LineCapButt       //스트로크 끝 부위 스타일 (그림 3.15 참조)
    .color = UIColor.Black                //스트로크 색상

line.stroke = stroke                      //스트로크를 도형에 적용

line = UILine():
    .from = {100, 100}
    .to = {150, 150}
    .strokeWidth = 10
    .strokeJoin = UIStroke.JoinMiter
    .strokeCap = UIStroke.LineCapButt
    .strokeColor = UIColor.Black

그림 46을 보면 알겠지만, 곡선의 경우 단순 위치 변경은 결코 깔끔하게 마무리되기 어렵다. 심지어 이러한 접근법은 때에 따라 로직이 더욱 복잡해진다. 물론 경우의 수를 모두 보완한다면 기능적으로 완성은 가능하지만 대쉬 속성을 결합한다면 선은 오히려 연속된 도형 집합에 가까워진다는 점에서 생각을 다르게 할 필요가 있다. 여기서 짚어볼 핵심은 넓이가 존재하는 선을 선이 아닌 다각형으로 간주할 수 있다는 점이다.

그림 47은 점선의 한 조각을 확대해서 보여준다. 조각의 외곽 정보를 추출할 수 있다면 네 개의 직선으로 구성된 UIPath를 만들고 이로써 도형을 완성할 수 있다. 만약 이러한 직선이 대각선이 아니라 수직 또는 수평선이라면 점선 조각은 정확히 사각형과 일치하기 때문에 사각형의 네 꼭짓점을 찾는 작업은 매우 간단하다. 그리고 직사각형(또는 정사각형)을 중심으로 회전 각도를 구할 수 있다면 대각선의 경우도 계산할 수 있다.

이를 확인하기 위해 대쉬 스타일은 배제한 채 하나의 직선을 구현해 보자. 코드 27은 넓이 10, 길이가 70.71 (정확히는 70.710678. 두 점의 사이의 거리를 구하는 식을 통해 계산)인 사각형에 해당한다. 이때 사각형 중심을 원점으로 각 꼭짓점의 상대 위치를 구한다. 이후 실제 그리고자 하는 대각선과 하나의 축(x 또는 y축)과의 사잇각 A를 구하는데 사잇각을 구하면 회전 행렬을 이용하여 각 꼭짓점의 회전 위치 좌표를 구할 수 있다.

//곡선의 정확한 표현을 위해서는 interval을 더 낮게 설정할 수 있다. 여기서는 0.01로 가정
for(i = interval; i < 1; i += interval)
    /* 베지어 곡선 공식(그림 3.30 참조)을 이용하여 곡선의 전체 구간(0 - 1) 중 
       인자(i)에 해당하는 좌표를 반환 */
    Vector2 p1 = bezierCurvePos(i)
    Vector2 p2 = bezierCurvePos(i - interval)

    //두 점으로부터 방향 벡터 계산
    v = p2 - p1
    v.normalize()

    //90도 회전한 법선 벡터
    v.rotate(mRotate)

    /* 법선 벡터를 선 넓이의 절반만큼 증가시키면 변에 위치한 점을 구할 수 있다. 
       이 벡터를 뒤집으면 정확히 반대편 변을 가리킨다. */
    v *= (lineWidth * 0.5)

    /* v1, v2는 현재 곡선 위치에서의 양변을 가리키는 점. 
       반복문 이전 주기에서 계산한 v1, v2와 연결해가면 넓이가 있는 곡선 완성 */
    v1 = p1 + v   
    v2 = p1 - v

/* 대쉬 패턴은 배열을 통해 사용자가 직접 지정 */
dashPattern = {50.0,   //선 구간
               10.0,   //생략 구간
               10.0,   //선 구간
               10.0}   //생략 구간            

/* 스트로크에 적용. 4는 dashPattern 갯수 */
stroke.dash = {dashPattern, 4}

UIPath.update():
    /* 도형(UIPath)을 업데이트하는 시점에 stroke로부터 그려야 할 스트로크 경로 
       명령어를 추가로 구축한다. render() 시점에 이 명령어를 UIVectorRenderer로
       전달하여 도형과 함께 드로잉을 수행한다. 전 프레임과 비교하여 stroke의 정보가
       변경되지 않았다면 strokeCmds를 다시 갱신할 필요 없다. */
    .strokeCmds = .stroke.update(self)

UIStroke.update(UIShape shape):
    /* stroke를 적용한 도형의 타입(사각형, 원, 곡선, 경로 등)을 토대로 UIPathCommand를
       구축한다. 이때 앞에서 살펴본 개념을 기반으로 대쉬, 조인, 라인캡 등 
       스트로크 특성을 추가로 반영한다. */
    UIPathCommand cmds[]
    ...

    return cmds

UIPath.render(...):
   //닫힌 도형이며 채우기 존재, 즉 폴리곤
    if(.closed && .fill)
        //폴리곤을 먼저 그린다. drawPolygon()은 코드 3.20 참고
        UIVectorRenderer.drawPolygon(buffer, .commands, clipper, fill, ...)

    /* strokesCmds로부터 스트로크를 그리기 위한 벡터 커맨드 리스트를 얻어와 드로잉을 
       수행하며 drawPolygon() 메서드를 그대로 이용 */
    .drawPolygon(buffer, .strokeCmds, clipper, .stroke.fill, ...)

8. 최적화 전략

RLESpan 기반으로 도형의 이미지 정보를 데이터화하면 도형의 지오메트리 정보만을 기록하기 때문에 일반 이미지와 달리 불필요한 여백 정보(그림 3.54의 회색 영역)를 따로 할당할 필요가 없다. 또한 이해를 위해 단순화했지만 한 줄에 기록해야 할 도형이 하나라고 가정할 수 없기 때문에 RLESpan은 가변 개수의 도형 영역을 기록할 수도 있어야 한다.

그럼 RLE를 벡터 렌더링 엔진에 적용하기 위해 데이터를 인코딩하고 디코딩하는 핵심 로직을 살펴본다.

/*
 * 기존 폴리곤 메서드를 수정하고 RLE를 적용한다.
 * RLEData를 구축하는 것이 핵심이다.
*/
UIPath.update():
    /* 1. UIPath 도형 */

    //UIPathCommand로부터 y의 min, max 값을 찾아 yBegin, yEnd에 기록
    foreach(.cmds, cmd)        
        ...

    //RLEData 구축
    rleData = RLEData():
        .y = yBegin
        .length = yEnd - yBegin

    //RLESpan 구축
    for(y = yBegin, i = 0; y < yEnd; y++, i++)
        //a. 경로로부터 y 위치에서 충돌하는 점들을 찾고 이들의 x 좌표 목록 반환
        xList = findIntersectsAtY(.cmds, y)

        //b. x 값 오름차순 정렬
        sortAscending(xList)

        //c. 준비한 x 값을 이용하여 RLESpan 구축
        for(x = 0; x < xList.size - 1; x+=2)
            RLESpan span
            span.x = xList[x]
            span.length = xList[x + 1] - xList[x]

            rleData.spans[i].append(span)

    .rleData = rleData

    /* 2. 스트로크 커맨드 */
    .strokeCmds = .stroke.update(self)
    
    //위와 동일한 방법으로 스트로크를 위한 RLE 데이터를 구축
    ...
    .stroke.rleData = rleData

/*
 * update()에서 구축한 RleData를 UIVectorRenderer로 전달
*/
UIPath.render(...):
    //폴리곤을 먼저 그린다.
    if(.closed && .fill)
        UIVectorRenderer.drawRLE(buffer, .rleData, clipper, fill, ...)

    //다음으로 스트로크를 그린다.
    if(.stroke)
        UIVectorRenderer.drawRLE(buffer, .stroke.rleData, clipper ...)

/*
 * RLE 데이터를 이용하여 폴리곤을 그리는 작업 수행
 * @p buffer: NativeBuffer
 * @p rleData: RLEData
 * @p clipper: Geometry
 * @p fill: UIFill
*/
UIVectorRenderer.drawRLE(buffer, rleData, clipper, fill, ...):
    yBegin = rleData.y
    yEnd = yBegin + rleData.length

    //y 영역 클리핑 수행
    ...

    for(y = yBegin; y < yEnd; y++)
        //Span을 가져와 드로잉을 수행한다.
        foreach(rleData.spans[y - rleData.y], span)
            xBegin = span.x
            xEnd = xBegin + span.length

            //x 영역 클리핑 수행
            ...

            //(x, y)에 해당하는 픽셀 그리기
            for(x = xBegin; x < xEnd; x++)
                bitmap[y * scaneLineSize + x] = fill.color(x, y)

/* AVX (Advanced Vector Extension) intrinsic 명령어 사용을 위한 헤더 선언
 * gcc 컴파일러의 경우 -mavx 옵션을 지정해야 한다. */
#include <immintrin.h>

/* 코드 16을 벡터 프로세싱을 적용한 사각형 그리는 작업으로 변경
 * 본 구현에서는 32바이트 데이터를 동시 처리
 * @p buffer: NativeBuffer
 * @p rect: Geometry
*/
UIVectorRenderer.drawRect(buffer, rect, ...):
    Pixel bitmap[] = buffer.map()

    //AVX 요구에 맞춰 32바이트 메모리 정렬 수행
    align = (8 - (rect.x % 8)) % 8

    //벡터 프로세싱 메인 구현부
    __m256i* avxDst = bitmap + rect.x + align
    i = rect.w - align

    for(; i > 7; i -= 8; ++avxDst)
        *avxDst = _mm256_set1_epi32(0xffffffff)

    //32바이트 메모리 정렬로 인해 건너뛴 사각 영역
    if(align > 0)
        if(align > rect.w) align -= (align - rect.w)
        tmp = bitmap + rect.x
        for (; align > 0; --align, ++tmp) *tmp = 0xffffffff

    //32바이트 메모리 정렬로 인해 남은 사각 영역
    bitmap += rect.x + (rect.w - i)
    while (i-- > 0) (*bitmap++) = 0xffffffff

9. 정리하기