Proposal of InsightGL: An Educational Software Renderer for Graphics Pipeline Visualization

2025-06-24
9-minute read

주석: 2025-2학기 자기설계학기제에서 수행할 예정이었던 9학점짜리 1인 프로젝트의 제안서(proposal)입니다. 어쩌다보니 주제가 변경되어 버려서 이 프로젝트는 폐기되었습니다…만, 아까워서 방학 중 개인 프로젝트로 수행할까 합니다. ‘최대한 외부 라이브러리를 배제함’은 9학점을 인정 받기 위한 요소였던지라 실제 개발에서는 OpenGL이나 DirectX를 활용하게 될지도 모르겠네요.

InsightGL

: An Educational Software Renderer for Graphics Pipeline Visualization

Overview
Key Implementation Features
Contribution
System Architecture & Rendering Pipeline
Input & Output Specifications
Development Timeline
Evaluation & Final Deliverables
Project References

1. Overview

본 프로젝트 ‘InsightGL’의 목표는 OpenGL 3.x Core Profile의 핵심 렌더링 파이프라인을 C/C++ 기반 software renderer로 저수준(low-level)부터 직접 구현하여, 그래픽스 파이프라인의 내부 구조와 동작 원리를 보다 명확히 시각화하고 교육적으로 활용할 수 있는 도구를 제공하는 것이다.

GPU 없이 CPU만으로 메모리 관리, 행렬 연산, 버퍼 처리, 조명 계산, 텍스처 매핑 등 주요 그래픽스 연산을 수행하며, 외부 라이브러리는 SDL2(윈도우 출력 및 입력 처리), JSON 파싱 라이브러리, 그리고 인터랙티브 GUI 구현을 위한 Dear ImGui만을 사용한다. 또한, GLSL 외부 셰이더 파일 등 외부 입력 기능을 제공하지 않고, 모든 shading 및 lighting model은 미리 정의된 C/C++ 코드로 구현하여 그래픽스 파이프라인의 핵심 원리를 직접적으로 이해할 수 있도록 한다.

특히 본 프로젝트는 단순히 기존 software renderer를 답습하는 것을 넘어 각 파이프라인 단계(Vertex, Primitive Assembly, Rasterization, Fragment Processing 등)의 중간 결과를 실시간으로 시각화하고 분석 가능한 인터랙티브 HUD(Heads-Up Display)를 제공함으로써 교육적 활용도를 극대화한다. 사용자는 실시간으로 각 단계의 프레임버퍼 상태(Depth buffer, Normal buffer, Wireframe, 최종 렌더링 결과)를 전환하며 확인할 수 있으며, 이를 통해 그래픽스 이론과 렌더링 과정에 대한 깊은 직관적 이해가 가능하다.

또한 여러 객체가 포함된 씬에서 마우스로 원하는 객체를 선택하는 Object Picking 기능을 제공한다. 이 기능은 Color Picking(ID Rendering) 방식을 활용한 Pick Buffer를 통해 구현되어 클릭한 객체를 선택하고 속성을 조작할 수 있게 한다.

최종적으로 InsightGL은 그래픽스 강의·연구·실습 환경에서 실질적인 교육적 가치와 분석 능력을 제공하는 인터랙티브 CPU 기반 software renderer 플랫폼이 되는 것을 목표로 한다.

지원 입력 파일 형식은 3D 모델(.obj), 텍스처(.png, .jpg), 씬 설정 파일(.json, .txt)이며, 렌더링 결과는 SDL2를 통해 실시간으로 출력된다. 또한, 최종 렌더링 결과 및 중간 버퍼(Depth, Normal, Wireframe 등)는 .png, .bmp 등 다양한 이미지 파일로 저장할 수 있다. 실시간 옵션 조정, 파이프라인 단계 전환, 렌더링 파라미터 변경 등은 Dear ImGui 기반 GUI 패널을 통해 직관적으로 제어할 수 있다.

프로젝트 결과물 시안

2. Key Implementation Features

Low-level C/C++ Implementation

그래픽스 파이프라인의 메모리 관리, 행렬 및 벡터 연산, 버퍼 구조 등 모든 핵심 로직을 C/C++로 저수준부터 직접 구현한다.
외부 의존성은 SDL2, JSON 파서, 그리고 Dear ImGui(Open Source Immediate-mode GUI)로 한정한다.

Pipeline Insight HUD

Vertex Processing, Primitive Assembly, Rasterization, Fragment Processing, Blending 등 렌더링 파이프라인 각 단계의 중간 버퍼를 실시간으로 시각화한다.
버튼 및 단축키를 통해 Depth Buffer, Normal Buffer, Wireframe, Final Result 등 다양한 프레임버퍼 결과를 자유롭게 전환하여 관찰할 수 있다.
단계별 스텝-스루(Step-through) 및 각 단계 결과물 이미지 캡처가 가능하다.
FPS, 삼각형 개수, 픽셀 처리량 등 성능 통계 실시간 표시를 지원한다.

Core Pipeline & Buffer Management

Vertex, Primitive, Fragment 단계의 파이프라인을 직접 구현한다.
Color/Depth/Stencil FrameBuffer를 직접 관리하고, 각 버퍼의 내용을 시각화한다.

Depth Test & Alpha Blending

Z-buffer 기반의 깊이 테스트와 알파 블렌딩(투명/반투명 처리)을 구현한다.

Shading & Lighting Models (C/C++ Pre-defined)

Shading Models:
- Flat Shading
- Gouraud Shading
- Phong Shading
- Toon Shading (Cartoon)
Lighting Models:
- Lambertian Diffuse
- Blinn-Phong
- Physically Based Rendering (PBR)

Texture Mapping

Diffuse(Albedo), Normal, Specular, Light Map 등 다양한 텍스처를 지원한다.
Perspective-correct interpolation(원근 보정 보간법)을 통해 정확한 텍스처 매핑을 구현한다.
Cubemap Mapping 및 Skybox를 지원한다.

Culling, Clipping & Wireframe Rendering

Back-face Culling, Clipping, Viewport Transform, Wireframe Rendering을 지원한다.

Camera & Animation

View/Projection Matrix를 활용한 카메라 이동 및 제어 기능을 제공한다.
Keyframe 기반의 애니메이션 및 객체 변환 기능을 지원한다.

Object Picking & Pick Buffer

Pick Buffer를 별도로 생성하여 각 Object를 고유 색상(ID)으로 렌더링
Color Picking(ID Rendering) 기법을 이용하여 마우스 클릭 위치에서 Object를 선택/감지
선택된 Object에 대한 속성 확인, 변환 등 인터랙티브 조작 지원

Post-processing & Anti-aliasing

SSAA, MSAA, FXAA 등 다양한 Anti-aliasing 옵션을 제공한다.
Blur, Sharpen, Edge Detection, Tone Mapping 등 후처리(Post-processing) 효과를 구현한다.
Offscreen Rendering을 통해 후처리 결과를 별도의 버퍼로 저장할 수 있다.

Display & User Interaction

SDL2 기반 실시간 화면 출력 및 마우스/키보드 입력 이벤트를 지원한다.
Dear ImGui 기반의 GUI 패널을 통해 카메라, 조명, 애니메이션, 오브젝트 조작, 각종 렌더링 옵션(예: Anti-aliasing, Post-processing 등) 및 파이프라인 단계 전환 등 다양한 사용자 인터랙션을 직관적으로 제공한다

Image & Animation Output

최종 렌더링 결과 및 중간 버퍼(Depth, Normal, Wireframe 등)를 .png, .bmp 등 이미지 파일 포맷으로 저장할 수 있다.

3. Contribution

3.1. 기존 기술의 한계 및 문제점

OpenGL 등 하드웨어 가속 그래픽스 API는 파이프라인 내부 데이터 흐름이 블랙박스로 감춰져 있어, 그래픽스 이론이나 렌더링 과정, 버퍼와 좌표계 변환을 직접적으로 관찰하거나 분석, 실험하기 어렵다.
이러한 구조적 한계로 인해, 교육이나 연구 목적으로 단계별 내부 버퍼를 시각화하거나 파이프라인 각 과정을 세밀하게 디버깅하는 것이 어렵다.
기존의 오픈소스 software renderer는 기본적인 렌더링 파이프라인 재현에 집중되어 있으며, 중간 단계(Depth, Normal, Wireframe 등) 내부 상태를 실시간으로 시각화하거나, 사용자 인터랙션(HUD 패널, 단계별 step-through, Object picking 등) 기능이 미흡하다.
이로 인해 교육, 연구, 분석 도구로 바로 활용하기에는 UI, 확장성, 분석 기능 등이 부족하다는 단점이 있다.

3.2. 본 프로젝트의 차별화된 기여

본 프로젝트는 OpenGL 3.x Core 파이프라인을 C/C++ 기반 software renderer로 저수준부터 직접 구현함과 동시에,
교육형 파이프라인 인사이트 HUD를 도입하여, Graphics pipeline의 Vertex → Primitive → → Fragment → Blending 각 단계별 내부 버퍼(Depth, Normal, Wireframe)를 실시간으로 시각화, 토글, 캡처할 수 있도록 지원한다.
단계별 step-through, 오브젝트 피킹, 실시간 조작, HUD 기반 디버깅 등 기존 software renderer에서는 제공하지 않는 interactive 환경을 제공한다.
이를 통해 사용자는 파이프라인 내부를 직접적으로 관찰, 분석, 실험할 수 있으며, 그래픽스 이론 실습, 렌더링 구조 강의, 알고리즘 비교 연구, 블로그 및 보고서 시각 자료 제작 등 교육적·연구적 활용성을 높일 수 있다.
동일 입력(Scene, 모델, 텍스처 등) 기준으로 OpenGL(하드웨어 가속) 및 기존 software renderer와 최종 결과물, 성능, 단계별 버퍼 품질, 유용성 등을 정량적으로 비교 및 분석할 수 있다.

3.3. 기대 효과

본 프로젝트는 그래픽스 파이프라인 내부를 누구나 쉽게 들여다보고 분석 및 실험할 수 있도록 하는 교육, 연구, 분석적 특화 software renderer로서 기존 기술과 차별화된다.
이를 통해 그래픽스 분야의 학습, 연구, 실험 환경을 한층 더 풍부하게 만들 수 있다.

4. System Architecture & Rendering Pipeline

4.1 Main Modules

GlobalState: 파이프라인 상태 및 전역 설정 관리
VertexProcessor: Vertex/Buffer 처리, Model/View/Projection 변환
Rasterizer: Primitive 조립, Rasterization(Perspective-correct Interpolation, Clipping, Culling)
Shader & Lighting Modules: pre-defined 함수로 구현된 shading/lighting model
TextureManager: Texture, Sampler 객체 관리
FrameBuffer: Color/Depth/Stencil Buffer 관리
PickBuffer: 각 Object에 고유 색상(ID)로 렌더링하여 Object Picking 기능 지원
Camera/Transform: View, Projection, Animation 처리
Post-processing: Anti-aliasing 및 기타 후처리 효과
Display (SDL2): SDL2 기반 실시간 출력 및 입력 처리
GUI Panel (Dear ImGui): 실시간 렌더링 옵션, 파이프라인 단계, 카메라·조명·애니메이션 파라미터 등을 직관적으로 조작할 수 있는 인터랙티브 GUI 제공

4.2 Pipeline & Data Flow

Input Read: 3D 모델(.obj), 텍스처(.png, .jpg), 씬 설정(.json, .txt)
Vertex Processing: 각종 변환(Model/View/Projection)
Primitive Assembly: 삼각형/선/점 등 도형 조립
Rasterization: Perspective-correct Interpolation, Clipping, Culling
Fragment Processing: 미리 정의된 shading/lighting C/C++ 코드 호출
Output Merger: 깊이/알파 블렌딩, FrameBuffer 및 Pick Buffer 기록, 후처리
Display & Output: SDL2로 실시간 화면 출력 및 파일 저장, Pick Buffer를 활용한 Object Picking
GUI Interaction: Dear ImGui 기반의 인터랙티브 GUI 패널을 통해, 파이프라인 단계, 렌더링 옵션, 카메라·조명 파라미터 등을 실시간으로 조작 및 시각적 피드백 제공

5. Input & Output Specifications

5.1 Input Files

Scene/Camera/Render Config

Format: .json
Structure: 카메라, 조명, 출력 옵션에 더불어 “objects” 리스트에 3D 모델 및 텍스처, Transform(위치/회전/스케일) 파라미터 정의
Example:

{
"camera_position": [0, 2, 5],
"camera_target": [0, 0, 0],
"projection": "perspective",
"output": {
    "type": "image", 
    "format": "png",
    "filename": "result.png",
    "resolution": [800, 600],
    "frame_start": 1,
    "frame_end": 60
},
"light": [
    {"type": "directional", "direction": [1, -1, 0], "intensity": 1.0}
],
"objects": [
    {
    "name": "bunny",
    "model": "bunny.obj",
    "albedo": "bunny_albedo.png",
    "normal": "bunny_normal.png",
    "specular": "bunny_specular.png",
    "transform": {
        "position": [0, 0, 0],
        "rotation": [0, 0, 0],
        "scale": [1, 1, 1]
    }
    },
    {
    "name": "cube",
    "model": "cube.obj",
    "albedo": "cube_albedo.png",
    "normal": "cube_normal.png",
    "specular": "cube_specular.png",
    "transform": {
        "position": [2, 0, 0],
        "rotation": [0, 45, 0],
        "scale": [0.5, 0.5, 0.5]
    }
    }
]
}

3D Model

Format: .obj (Wavefront OBJ)
Example:

v 1.000000 1.000000 -1.000000
vt 0.748573 0.750412
vn 0.0000 1.0000 0.0000
f 1/1/1 2/2/1 3/3/1

Texture

Format: .png, .jpg

5.2 Output Files

Rendered Image

Format: .png, .bmp

Real-time Display

SDL2 창에 FrameBuffer를 직접 렌더링하여 즉각 시각화

6. Development Timeline

총 기간: 2025년 9월 ~ 12월 (16주)

6.1 1-2주차 (09/01-09/14)

SDL2 윈도우, 이벤트 루프, 입력 처리 뼈대
벡터, 행렬, 변환 연산 수학 라이브러리
JSON 설정 파일, OBJ 모델 FileLoader 모듈 골격
HUD 기본 프레임, FPS 텍스트 오버레이

6.2 3-4주차 (09/15-09/28)

단색 삼각형 렌더링
VertexProcessor, 기본 래스터라이저(뷰포트, 바리센트릭, 원근 보정)
컬러 프레임버퍼, PNG 이미지 저장
HUD Depth/Final 전환 버튼, 단축키 등록

6.3 5-6주차 (09/29-10/12)

Z-buffer 기반 Depth Test, Alpha Blending
Flat, Gouraud, Lambertian Diffuse 라이팅, 셰이딩
Depth Buffer 시각화 버튼
Pixel Inspector 1차(화면 좌표, Depth 값)

6.4 7-8주차 (10/13-10/26)

Phong, Blinn-Phong 라이팅, Normal Interpolation
TextureManager, Diffuse Map, 텍스처 매핑
Normal Buffer 시각화 버튼
Pixel Inspector 확장(노말 벡터, RGB, 최종 컬러)

6.5 9-10주차 (10/27-11/09)

파이프라인 단계별 Step-through 컨트롤
Wireframe 렌더링, HUD 전환 버튼
HUD 패널 Hide/Show, 삼각형 개수, FPS 실시간 통계
Pixel Inspector UV, World 좌표, 추가 정보

6.6 11-12주차 (11/10-11/23)

Pick Buffer 및 Color-ID Rendering을 이용한 Object Picking 기능 구현
Post-processing(SSAA, MSAA, FXAA, Tone Mapping, Blur, Sharpen, Edge Detection)
Off-screen FBO, 비교 이미지 저장, FX on/off 토글
HUD 비교 스크린샷, Cubemap Skybox, 텍스처 맵 테스트

6.7 13-14주차 (11/24-12/07)

코드 리팩터링, 버그 수정, 품질 관리
OpenGL 비교 테스트 스크립트, 평가 도구
정확도, 성능, 기능 비교 표 준비

6.8 15-16주차 (12/08-12/21)

최종 릴리스 패키지
테스트 케이스, 사용자 매뉴얼, README, 강의 자료
데모 씬, 비교 스크린샷, 결과 보고서 제출

7. Evaluation Criteria & Assessment Plan

본 프로젝트의 완성도 및 성과는 아래와 같은 다각적인 기준에 따라 평가한다.

7.1 Accuracy

구현한 software renderer(InsightGL)와 하드웨어 OpenGL(GPU)에서 동일한 씬과 설정으로 렌더링한 결과 이미지를 픽셀 단위로 비교하여,
- PSNR(Peak Signal-to-Noise Ratio)
- SSIM(Structural Similarity Index)
- MSE(Mean Squared Error) 수치를 산출한다.
Heatmap(차이 맵) 시각화를 통해 어느 부분에서 오차가 발생하는지 직관적으로 분석한다.
대표 테스트 씬(bunny, sponza, cornell box)에서 각각 측정하여 표로 정리한다.

7.2 Feature Completeness

OpenGL 3.x Core Profile에 해당하는 파이프라인 단계가 체크리스트 기반으로 실제 동작하는지 예제 씬을 통해 확인한다.
각 렌더링 기능별 동작 스크린샷 및 테스트 결과를 첨부한다.

7.3 Performance

해상도별(예: 800×600, 1920×1080)로 프레임당 렌더 시간(ms), FPS를 측정하여 성능 최적화 효과를 정량적으로 평가한다.
주요 씬에서 기본/최적화 적용 전후의 속도 차이도 함께 비교한다.

7.4 Usability & Analysis

입력 파일(.json, .obj)을 직접 수정하거나 교체하여 다양한 씬을 구성하고, 별도의 복잡한 절차 없이 즉시 적용할 수 있는지 평가한다.
카메라 이동, 회전, 확대/축소 등 실시간 조작, 파이프라인 단계(HUD) 전환, Pixel Inspector 등 UI 기능의 직관성 및 사용 편의성 평가
각 파이프라인 단계(Depth, Normal, Wireframe, Final 등)의 중간 버퍼(HUD) 시각화 기능, Pixel Picking을 통한 버퍼 값 확인 등 분석 도구의 지원 여부와 실제 활용 사례 제시

7.5 Reproducibility

README, 빌드 및 실행법, 테스트 씬, 예제 입력파일 등 부가 문서의 충실도를 평가하며 제3자가 동일 결과를 재현할 수 있도록 설계되어 있는지 확인한다.

8. Project References

OpenGL Official Docs

OpenGL 3.3 Core Profile Specification https://registry.khronos.org/OpenGL/specs/gl/glspec33.core.pdf
Khronos OpenGL Documentation https://www.khronos.org/registry/OpenGL/

Open Source Projects

KhronosGroup/opengl-api code https://github.com/KhronosGroup/OpenGL-API
PortableGL https://github.com/rswinkle/PortableGL
TinyRenderer https://github.com/ssloy/tinyrenderer
renderer https://github.com/zauonlok/renderer/tree/master

CG Graphics