Learn OpenGL

Vertex Input

• y축이 위쪽을 향함
  • 그래픽스에서는 전통적으로 화면 왼쪽 위 모서리가 (0,0)
  • x축은 오른쪽으로 증가, y축은 아래쪽으로 증가
  • CRT 모니터 시대의 전자총 방향에서 유래됨
  • windows api, 웹 브라우저 등 대부분의 UI 시스템이 이 방식 사용

Vertex Buffer Object(VBO)

• vertex data를 GPU 메모리에 저장하는 OpenGL 객체
• CPU에서 전송한 데이터를 GPU에서 가지고 있기 위해 필요, 없으면 매 프레임마다 CPU에 요청해야함
• VBO는 GPU 메모리에 있는 버퍼 데이터를 가리키는 id
  • OpenGL에서 객체는 GPU 자원에 대한 ID를 의미함
• 생성 과정: VBO 생성 -> VBO 바인딩 -> 데이터 복사
• OpenGL의 상태를 슬롯 같은 것임, 이 슬롯에 바인딩하는 과정 필요함
• 바인딩은 데이터 없이 연결만함
• 데이터 복사해서 실제 데이터를 CPU 메모리에서 GPU 메모리로 복사
• 사용 패턴
  • GL_STATIC_DRAW: 한 번 설정, 많이 사용 (삼각형 같은 고정 데이터)
  • GL_DYNAMIC_DRAW: 자주 변경, 많이 사용 (애니메이션 데이터)
  • GL_STREAM_DRAW: 한 번 설정, 몇 번만 사용

Vertex Shader

• 각 vertex 마다 한번씩 실행됨
• 다음 단계로 데이터 전달

Compiling a shader

• 작성한 shader 코드를 실제로 사용하기 위해 컴파일
  • shader 소스코드를 문자열로 저장
  • shader 객체 생성
  • 소스코드 연결 및 컴파일
  • 컴파일 성공 여부 확인
• 확인할 에러: GLSL 문법 오류, 타이핑 실수, 버전 호환상 문제 등등

Fragment Shader

• Red, Green, Blue, Alpha 성분을 0.0과 1.0 사이의 값으로 표현

Shader Program

• 여러 셰이더들을 연결한 최종 버전
• vertex shader의 출력이 fragment shader의 입력과 매칭됨
  • 일치하는 변수명이 있는지 홧인
• 생성 과정
  • 프로그램 객체 생성
  • shader들을 프로그램에 attach
  • shader들을 프로그램에 link
  • linking 성공 여부 확인
  • 프로그램 사용

Linking Vertex Attributes

• 여기까지 상황: VBO에서 정점 데이터 저장, shader program 준비됨, OpenGL은 아직 데이터 형식 모름
• glVertexAttributePointer로 설정
• glEnableVertexAttribArray으로 location 정점 속성 활성화 -> 이 호출이 있어야 데이터가 shader로 전달됨

Vertex Array Object (VAO)

• 매번 정점 속성을 설정하는 것이 번거로우니, 이 설정을 저장하는 객체
• 정점 속성 설정의 스냅샷을 저장함

Skia vs OpenGL

브라우저가 Skia를 사용하는 이유

• 텍스트 렌더링 품질
• 벡터 그래픽 지원
• 크로스플랫폼 일관성 -> 가장 큰 이유

브라우저가 OpenGL을 쓰지 않는 이유

• 호환성 문제
  • OpenGL을 지원하지 않는 오래된 사용자 환경
• 정밀도 문제
  • CSS는 정수 픽셀 단위 요구
  • 서브 픽셀 텍스트 렌더링 어려움
• 복잡한 상태 관리

실제 Chromium 아키텍처

HTML/CSS → Layout Engine → Compositor → GPU Process
                                   ↓
                              Skia (CPU/GPU)

Skia GPU 선택

• 적응적으로 CPU/GPU 선택, 자동으로 전환
• 명시적으로 GPU 사용 요청 가능

/* CSS로 GPU 레이어 유도 */
.element {
    transform: translateZ(0);  /* GPU 레이어 생성 */
    will-change: transform;    /* 브라우저에게 미리 알림 */
}

Element Buffer Objects(EBO)

• 정점을 재사용해서 메모리를 절약하는 방법
• 생성 과정
  • EBO 생성
  • EBO 바인딩 및 데이터 복사
  • 그리기 함수 변경
• 3D 도구에서 작업시 indices를 만들어 줌. 라이브러리도 있음
• 대부분 자동으로 해줌