JBNU WebGL Computer Graphics Lecture Material

전북대학교 컴퓨터공학부 "컴퓨터 그래픽스"강의를 위한 Repository입니다. WebGL을 기반으로 합니다.

WebGL 구현을 위해 JS(자바스크립트)와 GLSL을 사용합니다. HTML과 CSS도 밀접하게 관련되어 있으나 이 강의에서는 단순 사용만 할 뿐, 내용을 다루지 않습니다.

Why WebGL?

이전 강의에서는 C++과 OpenGL을 사용하여 컴퓨터 그래픽스 강의에 대한 실습을 진행하였습니다. 물론 큰 문제는 없었지만 아래와 같은 이유로 인해 WebGL을 사용하는 것으로 실습 환경을 바꾸는 것이 좋겠다고 생각하여 이 Repository를 만들었습니다.

OpenGL은 플랫폼 독립적이지만, 함께 사용하는 GLFW, GLEW의 경우 Windows/Mac에서 사용 방법에 차이가 있어서 Mac을 사용하는 학생이 어려움을 겪는 경우가 있습니다.
향후 여러분이 직접 OpenGL 프로그래밍을 할 일은 거의 없으실겁니다. (Direct3D라면 조금 가능성이 있겠지만요.) 따라서 굳이 OpenGL Specific한 내용을 배운다고 미래에 도움이 되지는 않을겁니다. 오히려 WebGL은 실무에서 약간 사용할 수도 있을 것 같습니다.
이 수업은 WebGL(또는 OpenGL) 프로그래밍을 가르치는 수업이 아니고 컴퓨터 그래픽스 동작 방식을 배우는 수업이며, WebGL은 직접 이를 눈으로 확인하기 위한 수단일 뿐입니다. 따라서 이 수업의 목적을 위해서는 둘 중 어느 환경에서 실습해도 우열은 없습니다.
WebGL이든 OpenGL이든 여러분이 API를 통해 해야 할 일은 동일합니다. WebGL을 사용할 줄 알면, OpenGL은 손쉽게 사용 가능하고 그 반대도 마찬가지입니다.

그래도 여전히 OpenGL로 내용을 보고 싶으신 분들은 이 Repository와 거의 동일한 구성으로 만들어진 OpenGL 강의 코드를 보시면 됩니다.

이 Repository를 학습을 위해 사용하려면, /lessons/ 하위 각 챕터의 README.md 파일을 차례대로 읽으며 해당하는 파일을 보시면 됩니다.
강의의 중후반부부터는 추가 또는 수정한 모든 내역을 설명하고 있지는 않습니다. 직접 코드를 살펴보시거나, 해당하는 커밋 히스토리를 직접 참고 하시길 바랍니다.
실제 이 사이트 코드를 사용해 웹브라우저로 WebGL 화면을 보는 방법은 /lessons/0_Setup/을 참고하세요.

Mozilla의 WebGL Reference: WebGL 코드의 정의를 찾아볼 때는 이 링크를 사용하세요.
WebGL2 Fundamental: 추가적인 설명이 보고싶거나, WebGL 관련한 보다 상세한 내용이 궁금할 때는 이 링크를 참고하세요.
OpenGL Lecture Series: "The Cherno"라는 개발자의 C++ OpenGL 강의 영상입니다. 제 OpenGL 강의 코드가 이 스타일을 따랐고, 이 Reposiroty의 코드도 이 스타일을 따르고 있습니다.
Serves: 이 Repository의 결과물을 정상적으로 보려면 웹서버가 필요합니다. 간단하게 설치할 수 있는 웹서버입니다. (/lessons/0_Setup/에서 설치, 사용 방법 설명)

다른 카테고리의 렌더링 방법으로 광선 추적(Ray Tracing)이 있습니다. 광선 추적 또한 이번 학기 강의 후반부에 다룰 예정입니다.
가장 좋은 공부 방법은 TinyRaytracer 또는 Ray Tracing in one weekend와 같은 자료를 참고하여 직접 구현해 보는 것입니다.
해당 자료들을 기반으로 제가 구현한 코드는 링크에 있으니 참고 하시기 바랍니다.