정점

정점은 도형을 이루는 점 하나입니다. 그 점에는 위치뿐 아니라 그 자리의 다른 값도 함께 붙습니다. 정점 하나만으로는 아무 모양도 되지 않습니다. 여럿이 정해진 순서로 묶여야 선이나 삼각형이 됩니다.

상세

일기예보 지도에는 관측 지점이 군데군데 찍혀 있습니다. 지점 하나에는 그곳이 어디인지뿐 아니라 기온과 습도, 바람이 부는 방향까지 함께 적혀 있습니다. 지점 사이의 날씨는 양옆 지점에 적힌 값을 섞어 짐작합니다.

정점은 기하 대상을 이루는 점 하나입니다. 그 점이 어디에 있는지를 나타내는 좌표가 붙고, 그 자리의 색이나 표면이 향한 방향처럼 위치가 아닌 값도 같은 점에 함께 붙어 다닙니다. 값이 몇 개 붙는지, 무엇이 붙는지는 그리려는 대상에 따라 달라집니다.

정점 하나만 놓고 보면 아무것도 아닙니다. 여럿을 정해진 순서로 묶어야 선이 되고 삼각형이 됩니다. 같은 점 묶음이라도 몇 개씩 어떤 순서로 묶느냐에 따라 다른 모양이 나옵니다.

수학의 그래프에서도 간선으로 이어지는 원소 하나를 정점이라고 부릅니다. 점 하나가 구조의 최소 단위라는 뼈대는 같고, 그 점에 무엇이 매달리느냐가 다릅니다.

배경

화면에 물체를 그리려면 그 모양을 숫자로 적어 두어야 합니다. 그런데 곡면이든 각진 물체든 표면은 끊김 없이 이어져 있습니다. 이어진 면을 그대로 적으려면 적을 것이 끝없이 많아집니다. 컴퓨터가 다루려면 유한한 개수의 숫자로 줄여야 합니다.

그래서 면을 통째로 적는 대신 점을 몇 개 찍어 두고 그 점들을 이어 면을 만드는 방식으로 굳었습니다. 모양을 얼마나 촘촘하게 흉내 낼지는 점을 몇 개 찍느냐로 조절합니다. 색이나 표면이 향한 방향 같은 값도 마찬가지입니다. 면의 모든 자리에 값을 적어 두는 대신 점에만 적어 두고, 점과 점 사이는 양쪽 값을 섞어 메웁니다. 그러면 적어 두는 값의 개수가 점의 개수만큼으로 줄어듭니다.

이렇게 찍어 두는 점을 부를 이름은 기하학에서 그대로 가져왔습니다. 도형의 꼭짓점을 부르던 말이 그 자리에 들어왔습니다.

형태

정점 하나는 값 여러 개의 묶음입니다. 위치 좌표는 그중 하나일 뿐입니다.

glTF(GL Transmission Format) 2.0 명세는 정점에 붙는 값들의 이름과 자료형을 표로 규정합니다. 명세는 이 이름들을 속성 시맨틱이라고 부릅니다.

값에 붙는 조건도 명세가 못 박습니다. POSITION 접근자는 min 과 max 속성을 반드시 정의해야 합니다. TANGENT 접근자의 각 원소의 w 성분은 1.0 또는 -1.0 이어야 합니다. COLOR_n 이 VEC3 타입 접근자를 쓰면 알파 성분은 1.0 으로 간주합니다. 응용 프로그램이 자기 속성을 더할 때는 이름을 밑줄로 시작해야 하고, 그런 속성에는 UNSIGNED_INT 성분 타입을 쓸 수 없습니다.

OpenGL(Open Graphics Library)은 같은 것을 일반 정점 속성이라고 부릅니다. glVertexAttribPointer 는 그 속성 배열의 위치와 데이터 형식을 정합니다. size 는 속성 하나가 성분을 몇 개 갖는지를 정하고 1·2·3·4 중 하나여야 합니다. 다만 GL_BGRA 라는 상수도 받습니다. type 은 각 성분의 자료형을 정합니다. stride 는 한 속성에서 다음 속성까지의 바이트 간격이라, 정점과 속성을 한 배열에 몰아 담을 수도 있고 배열을 따로 둘 수도 있습니다.

정점은 하나씩 따로 놓이지 않고 배열에 담깁니다. glTF 명세는 한 메시 프리미티브의 모든 속성 접근자가 같은 count 를 가져야 한다고 규정합니다. indices 속성이 없으면 그 count 가 그릴 정점의 개수입니다. indices 속성이 있으면 count 는 인덱스 값의 상한이 되고, 모든 인덱스 값은 그보다 작아야 합니다.

flowchart TD
    A["위치 접근자 · count = N"] --> V["정점 N개"]
    B["법선 접근자 · count = N"] --> V
    C["텍스처 좌표 접근자 · count = N"] --> V
    D["인덱스 접근자"] -->|"값은 N보다 작아야 한다"| V

값들을 한 배열에 몰아 담든 배열을 따로 두든, 같은 번호 자리의 값들이 모여 정점 하나가 됩니다. 인덱스 배열은 그 번호를 가리켜 정점을 골라 옵니다.

예시

glTF 2.0 메시 프리미티브

glTF 2.0 명세가 싣고 있는 메시 프리미티브의 JSON(JavaScript Object Notation) 한 덩이입니다.

"meshes": [
  {
    "primitives": [
      {
        "attributes": {
          "NORMAL": 23,
          "POSITION": 22,
          "TANGENT": 24,
          "TEXCOORD_0": 25
        },
        "indices": 21,
        "material": 3,
        "mode": 4
      }
    ]
  }
]

속성 이름마다 붙은 숫자는 좌표 값이 아니라 접근자 번호입니다. 실제 값 배열은 다른 자리에 있고 여기서는 번호로만 가리킵니다. 명세는 각 속성이 attributes 객체의 속성으로 정의된다고 적습니다. 이 프리미티브의 정점 하나에는 법선·위치·탄젠트·텍스처 좌표 네 값이 붙습니다.

WebGL 정점 좌표 배열

MDN 의 WebGL(Web Graphics Library) 튜토리얼이 정점 좌표 배열을 만들어 버퍼에 넣는 코드입니다.

function initPositionBuffer(gl) {
  // Create a buffer for the square's positions.
  const positionBuffer = gl.createBuffer();

  // Select the positionBuffer as the one to apply buffer
  // operations to from here out.
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  // Now create an array of positions for the square.
  const positions = [1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0];

  // Now pass the list of positions into WebGL to build the
  // shape. We do this by creating a Float32Array from the
  // JavaScript array, then use it to fill the current buffer.
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

  return positionBuffer;
}

튜토리얼은 사각 평면의 정점마다 위치를 담은 배열을 만든다고 적습니다. positions 에 적힌 값 여덟 개가 그 위치들입니다. 이 배열은 실수 배열로 변환되어 bufferData() 로 넘어가고, 그 호출이 대상의 정점 위치를 정합니다.

관련 항목

정점에 함께 붙는 속성값

정점 속성 · 법선 · 탄젠트 · 텍스처 좌표 · 정점 색 · 스킨드 메시 · 속성 · 시맨틱 · 정규화

정점 데이터를 담아 옮기는 자료구조

정점 버퍼 · 액세서 · 접근자 · 인덱스 · 배열 · 버퍼 · 변환

정점이 거치는 처리 단계

정점 셰이더 · 보간 · 래스터화 · 프래그먼트

정점이 모여 이루는 기하 대상

대상 · 도형 · 메시 · 프리미티브 · 삼각형 · 삼각형 집합 · 감김 순서

정점을 정의하는 표준·문서

glTF · OpenGL · WebGL · MDN

정점 예시가 쓰인 언어와 형식

JSON · JavaScript

정점이라는 이름과 얽히는 다른 낱말

꼭짓점 · 그래프 · 단위