정점 색

정점 색은 3차원 모형의 꼭짓점마다 색을 하나씩 정해 둡니다. 면은 그 색들로 칠합니다. 색을 그린 그림 파일을 따로 만들지 않아도 됩니다. 꼭짓점 사이의 색은 그릴 때 섞어서 만들어 냅니다.

쉽고 빠른 이해

색을 그림 파일에 그려 두는 대신, 모형의 꼭짓점에 색 값을 하나씩 매답니다. 세 꼭짓점을 빨강·초록·파랑으로 두면 그 삼각형은 가운데로 갈수록 세 색이 뒤섞인 무지개 면이 됩니다.

이게 없으면 색만 다른 물체마다 그림 파일을 따로 만들어야 합니다. 잔디 수천 포기의 색을 조금씩 달리하려면 그림 파일도 수천 장이 됩니다.

돌아가는 방식은 이렇습니다.

꼭짓점 데이터에 위치와 나란히 색 값을 하나 더 싣습니다
그 값은 손대지 않고 그리기 과정의 다음 단계로 넘어갑니다
화면의 점마다 세 꼭짓점 색을 거리 비율로 섞어 색을 냅니다

대가가 있습니다. 색이 꼭짓점에서만 정해지므로 잔무늬는 못 넣습니다. 무늬를 넣으려면 꼭짓점을 늘려야 합니다. 그만큼 그리는 일이 늘어납니다.

상세

방 세 귀퉁이에 놓인 스피커가 저마다 다른 소리를 냅니다. 한가운데 서면 세 소리가 고르게 섞여 들립니다. 한쪽으로 다가가면 그쪽 소리가 커집니다. 섞인 소리는 어디에도 담겨 있지 않습니다. 듣는 자리에서 그때그때 생깁니다.

정점 색은 정점 하나에 붙어 다니는 색 값입니다. 정점은 모형을 이루는 꼭짓점입니다. 꼭짓점마다 딸려 다니는 값을 정점 속성이라고 부릅니다.

정점 속성에는 위치 말고도 여러 가지가 실립니다. 법선은 그 꼭짓점에서 면이 어느 쪽을 보는지를 담습니다. 텍스처 좌표는 그림 파일의 어느 부분을 쓸지를 담습니다. 정점 색도 그중 하나입니다.

색을 그림 파일로만 입히면, 색조만 다른 물체마다 그림 파일이 한 장씩 더 필요합니다. 정점 색은 꼭짓점에 이미 실려 가는 데이터에 값을 몇 개 더하는 것이라, 파일을 늘리지 않고 색을 바꿉니다.

꼭짓점에 실리는 색 값

색 값은 대개 빨강·초록·파랑 세 성분으로 적습니다. 이 셋을 묶어 RGB(Red Green Blue, 빨강·초록·파랑)라고 부릅니다. 여기에 투명한 정도를 뜻하는 알파 성분을 더해 넷으로 적기도 합니다.

성분마다 0 에서 1 사이의 소수로 적는 것이 흔합니다. 0 은 그 색을 하나도 안 쓴다는 뜻입니다. 1 은 가득 쓴다는 뜻입니다.

메모리를 아끼려고 0 에서 255 까지의 정수 한 바이트로 담기도 합니다. 읽을 때 0 에서 1 사이로 환산합니다.

세 꼭짓점에 각각 다른 색을 주면 삼각형 한가운데 색은 이렇게 정해집니다.

flowchart TD
    subgraph T["삼각형 하나"]
        A["꼭짓점 · (1, 0, 0) · 빨강"]
        B["꼭짓점 · (0, 1, 0) · 초록"]
        C["꼭짓점 · (0, 0, 1) · 파랑"]
        M["한가운데 점 · (0.33, 0.33, 0.33)"]
    end
    A --> M
    B --> M
    C --> M

색 값은 세 꼭짓점에만 있습니다. 안쪽 점의 색은 그 세 값을 몫으로 섞은 결과입니다. 한가운데는 세 꼭짓점에서 똑같이 떨어져 있어 셋을 같은 몫으로 섞습니다. 어느 색으로도 안 기운 어두운 회색이 나옵니다.

사이를 채우는 보간

색 값은 꼭짓점에만 있는데, 화면에 칠할 점은 삼각형 안쪽을 가득 채웁니다. 이 빈틈을 보간이 메웁니다. 보간은 양 끝 값을 알 때 그 사이 값을 비율로 지어내는 계산입니다.

섞는 비율은 화면의 한 점이 세 꼭짓점에서 얼마나 떨어져 있는지로 정합니다. 어느 꼭짓점에 가까울수록 그 색의 몫이 커집니다. 삼각형 안에서 이 세 몫을 재는 좌표를 무게중심 좌표라고 부릅니다.

정점 색의 변화는 언제나 부드럽습니다. 경계를 날카롭게 끊고 싶으면 그 선을 따라 꼭짓점을 갈라 두 쪽에 다른 색을 줘야 합니다.

flowchart TD
    subgraph B1["가르기 전 · 꼭짓점 하나"]
        P1["꼭짓점 · 초록"]
    end
    subgraph B2["가른 뒤 · 같은 곳에 꼭짓점 둘"]
        P2["꼭짓점 · 초록"]
        P3["꼭짓점 · 빨강"]
    end
    B1 --> B2

가른 뒤에도 두 꼭짓점은 같은 곳에 서 있습니다. 다른 것은 색뿐입니다. 한 곳에 꼭짓점이 둘 서면 그 선에서 색이 끊깁니다.

색 값이 지나가는 길

색 값 하나가 꼭짓점을 떠나 화면에 찍히기까지 네 단계를 지납니다. 정점 버퍼에서 나와 정점 셰이더와 래스터화를 거쳐 프래그먼트 셰이더에 닿습니다.

flowchart TD
    A["정점 버퍼 · 꼭짓점마다 위치와 색을 담아 둔다"] --> B["정점 셰이더 · 색은 손대지 않고 넘긴다"]
    B --> C["래스터화 · 화면의 점마다 세 색을 비율로 섞는다"]
    C --> D["프래그먼트 셰이더 · 섞인 색을 받아 최종 색을 정한다"]
    D --> E["화면"]

색 값은 정점 버퍼에서 출발합니다. 정점 버퍼는 꼭짓점마다의 값을 줄줄이 담아 GPU(Graphics Processing Unit, 그래픽 처리 장치)에 넘기는 메모리 덩어리입니다.

정점 셰이더는 꼭짓점 하나마다 한 번씩 도는 작은 프로그램입니다. 위치는 화면에 맞는 좌표로 옮기지만, 색은 대개 손대지 않고 다음 단계로 내보냅니다.

섞기가 일어나는 단계는 래스터화입니다. 래스터화는 삼각형이 화면의 어느 점들을 덮는지 알아냅니다. 그 점마다 꼭짓점 값을 보간해 주는 것도 이 단계입니다.

보간된 색을 받는 쪽은 프래그먼트 셰이더입니다. 프래그먼트 셰이더는 화면의 점 하나마다 한 번씩 돌며 그 점의 최종 색을 정하는 프로그램입니다. 이 네 단계가 이어진 전체 그림은 그래픽스 파이프라인이 갖습니다.

다른 색과 합쳐지는 방식

정점 색 하나로 최종 색이 정해지는 일은 드뭅니다. 머티리얼이 정한 바탕색이나 텍스처에서 읽은 색과 함께 계산됩니다.

머티리얼은 표면이 빛에 어떻게 반응하는지를 적어 둔 설정 묶음입니다. 텍스처는 표면에 입히는 그림 파일입니다.

합치는 방법은 프래그먼트 셰이더가 정합니다. 세 갈래 색이 거기 한곳에서 만납니다.

flowchart TD
    V["보간된 정점 색"] --> F["프래그먼트 셰이더 · 성분마다 곱한다"]
    M["머티리얼 바탕색"] --> F
    T["텍스처에서 읽은 색"] --> F
    F --> O["최종 색"]

가장 흔한 합치기는 곱셈입니다. 성분마다 따로 곱합니다. 정점 색이 1 인 성분은 바탕색을 그대로 통과시킵니다. 0 에 가까운 성분은 어둡게 눌러 줍니다.

그래서 정점 색은 색을 새로 칠하기보다 바탕색을 얼마나 통과시킬지 조절하는 값으로 쓰이는 일이 많습니다. 모든 성분이 1 인 흰색을 넣으면 아무것도 안 한 것과 같습니다.

그림 파일과 갈리는 선

둘 중 무엇을 쓸지는 대개 네 가지를 견줘 정합니다.

	정점 색	텍스처
색이 정해지는 곳	꼭짓점	그림의 점 하나하나
촘촘하게 만드는 방법	꼭짓점을 늘린다	그림을 키운다
더 드는 비용	꼭짓점당 값 서넛	그림 파일과 그 메모리
잘 맞는 것	넓은 면의 부드러운 색 변화	글자·무늬처럼 또렷한 그림

표가 말하는 차이는 하나로 줄어듭니다. 정점 색이 표현할 수 있는 촘촘함은 모형의 꼭짓점 수가 정합니다. 꼭짓점 넷짜리 평면에는 글자를 쓸 수 없습니다. 색이 네 곳에서만 정해지고 나머지는 전부 그 사이를 이은 값이기 때문입니다.

꼭짓점을 늘리면 촘촘해지지만, 꼭짓점 수는 정점 셰이더가 도는 횟수와 메모리를 같이 끌어 올립니다. 잔무늬가 필요한 곳에는 텍스처를 씁니다. 정점 색은 넓은 면이 부드럽게 변하는 곳에 씁니다.

둘은 겨루기보다 같이 쓰입니다. 텍스처로 무늬를 깔고 정점 색으로 물체마다 색조를 조금씩 달리하는 식입니다.

색이 아닌 값을 실어 나르는 쓰임

정점 색이라는 이름은 색으로 쓰라고 붙은 것뿐입니다. 담기는 것은 꼭짓점마다 딸려 오는 숫자 서넛입니다. 그래서 색이 아닌 값을 여기 담아 두고 정점 셰이더나 프래그먼트 셰이더에서 꺼내 쓰는 방법이 흔합니다.

flowchart TD
    S["정점 색 · 꼭짓점마다 숫자 서넛"]
    S --> C1["색으로 쓸 때 · 래스터화가 보간한다"]
    S --> C2["색이 아닌 값으로 쓸 때 · 정점 셰이더가 읽는다"]
    C1 --> F["프래그먼트 셰이더 · 화면에 찍는다"]
    C2 --> P["꼭짓점을 민다"]

같은 값이 색으로 쓰이면 끝까지 흘러가 화면에 찍힙니다. 색이 아닌 값으로 쓰이면 중간에 꺼내져 꼭짓점을 미는 데 쓰입니다.

나무를 바람에 흔들 때 줄기는 덜 움직여야 합니다. 잎 끝은 많이 움직여야 합니다. 흔들림의 세기를 꼭짓점마다 정점 색의 한 성분에 적어 두면, 정점 셰이더가 그 값만큼 꼭짓점을 밀어 줍니다.

지형에서 흙과 풀 그림을 섞는 비율을 담는 데도 같은 방법을 씁니다. 꼭짓점마다 풀의 몫을 적어 두면 두 그림이 그 비율로 섞입니다.

미리 계산해 둔 그늘을 담기도 합니다. 물체가 서로 가려 빛이 덜 드는 정도를 그릴 때마다 계산하면 비쌉니다. 미리 한 번만 계산해 정점 색에 적어 두면, 그릴 때는 읽어 곱하기만 하면 됩니다. 이렇게 미리 계산해 담아 두는 것을 베이킹이라고 부릅니다.

상세

꼭짓점에 실리는 색 값

사이를 채우는 보간

색 값이 지나가는 길

다른 색과 합쳐지는 방식

그림 파일과 갈리는 선

색이 아닌 값을 실어 나르는 쓰임

관련 항목

정점 색과 나란히 꼭짓점에 실리는 값

정점 색이 거치는 처리 단계

정점 색을 담아 나르는 저장 구조

정점 색과 같은 역할을 두고 겨루는 색 입히기 수단

정점 색을 섞을 때 쓰는 계산

정점 색에 값을 미리 구워 담는 기법