jbnu-vclab / jbnu-webgl-computer-graphics-lecture Goto Github PK

View Code? Open in Web Editor NEW

85.0 2.0 26.0 15.79 MB

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

HTML 5.11% JavaScript 94.66% CSS 0.24%

jbnu-webgl-computer-graphics-lecture's Introduction

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 강의 코드를 보시면 됩니다.

How to use

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

Folder Structure

주요 폴더들과 그 설명은 아래와 같습니다.
- /resources/: HTML 페이지에 사용할 CSS, 렌더링에 사용할 모델(*.obj) 및 텍스처 이미지, 외부 라이브러리 코드가 포함되어 있습니다. (출처: WebGL2 Fundamental Repository)
- /lessons/_classes/: 진행 도중 작성할 클래스 구현 코드들이 들어있는 폴더입니다. (주의: 이 사이트의 코드는 제가 이전에 OpenGL 강의에 사용한 코드와 통일성을 주기 위해 JS 스타일이 아닌 C++ 스타일을 모사하여 작성되었습니다. 실제 WebGL App을 작성하기 위해서는 JS 스타일에 맞게 구현하시는 것이 좋습니다.)
- /lessons/_shaders/: 진행 도중 작성할 GLSL 셰이더 코드들이 있는 폴더입니다.
- /lessons/_current/: 현재 커밋의 가장 최신 HTML을 담고있는 코드입니다. "How to use"의 2번 방법을 따라가시는 분들은 이 폴더내 HTML코드의 변화에 주목하시면 됩니다.
- lessons/#_XXX/: 각 강의내용의 완성된 HTML을 개별적으로 분리하여 저장해 둔 폴더입니다.

Important Links for Starting

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

Ray Tracing

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

jbnu-webgl-computer-graphics-lecture's People

Contributors

Stargazers

Watchers

jbnu-webgl-computer-graphics-lecture's Issues

GitHub Pages 를 이용한 미리보기?

WebGL은 웹페이지에서 렌더링 할 수 있고,
GitHub 에서 GitHub Pages 라는 간단한 정적 웹페이지 호스팅 서비스를 제공하니,
GitHub Pages 에서 간단하게 미리보기 할 수 있도록 세팅하는 건 어떨까요?

테스트로 제가 포크한 저장소에서 GitHub Pages 를 활성화 시켜봤습니다. (원본 레포 링크로 수정됨)
https://jbnu-vclab.github.io/jbnu-webgl-computer-graphics-lecture/lessons/18_light_abstraction/contents.html

언더스코어_ 가 들어간 폴더 내 파일을 포함하기 위해, 프로젝트 상단에 .nojekyll 파일을 추가하고
GitHub 레포지토리의 Settings > Pages 에서 활성화만 하면 됩니다.

만일 이렇게 한다면 README.md 에 contents.html 로 향하는 링크도 추가하면 좋을 것 같네요

[질문] `gl` 컨텍스트를 멤버로 저장하면 안되는 이유?

질문

7. Buffer Abstraction 챕터의 아래 설명에 대해 의문이 생겼습니다.

Advanced

클래스 메소드에 첫 번째 인자로 gl 컨텍스트를 계속 참조하도록 하고 있습니다. 꼭 이렇게 귀찮게 해야하나, 그냥 전역변수로 두거나 멤버로 저장해 두면 안되나 하는 의문이 떠오르셨을 겁니다. (떠오르셨길 바랍니다.) 지금은 컨텍스트(캔버스)가 하나지만 이것이 꼭 하나라는 법은 없습니다. 동일한 데이터를 여러 캔버스에 그릴 수도 있겠죠. 그러한 경우를 생각하면 전역변수로 두는것, 멤버로 저장해 두는 것 모두 설계 관점에서 좋은 선택이 아닙니다.

현재 VertexBuffer, IndexBuffer와 VertexArray 클래스의 구현을 보면,
생성자에서 특정한 gl 컨텍스트에 버퍼를 만들고, 그 버퍼의 id를 저장하고 있습니다.

그런데 이 id는 생성자에 들어왔던 gl 컨텍스트에 대해서만 의미가 있지, 또 다른 gl 컨텍스트에 대해서는 의미가 없습니다.
(생성자에 들어왔던 gl 컨텍스트에서만 버퍼가 생성된 것이지, 다른 gl 컨텍스트에서는 버퍼가 생성된 적이 없습니다.)

현재 구현대로라면 특정 gl 컨텍스트에서만 의미 있는 VertexArray 객체가 생성되므로,
오히려 gl 컨텍스트를 멤버로 저장하여, 실수로 다른 gl 컨텍스트에서 사용하는 것을 막는 게 합당해 보입니다.

테스트 코드

코드

2개의 glContext* 에 대해 VertexArray 객체를 재사용 할 수 없음을 보이는 예제 코드입니다.

test.html

<html>
<head>
  <link type="text/css" href="../../resources/webgl-tutorials.css" rel="stylesheet" />
</head>
<body>
  <!-- 캔버스를 2개 생성 -->
  <div>Canvas #1</div>
  <canvas id="c1"></canvas>
  <div>Canvas #2</div>
  <canvas id="c2"></canvas>
</body>
</html>

<script src="../../resources/webgl-utils.js"></script>
<script src="../../resources/webgl-lessons-ui.js"></script>
<script type="module" src="test.js"></script>

test.js

"use strict";

import VertexBuffer from '../_classes/VertexBuffer.js';
import IndexBuffer from '../_classes/IndexBuffer.js';
import VertexArray  from '../_classes/VertexArray.js';

const vertexShaderSource = `#version 300 es
in vec4 a_position;

void main() {
  gl_Position = a_position;
}
`;

const fragmentShaderSource = `#version 300 es
precision highp float;
out vec4 outColor;

void main() {
  outColor = vec4(0.0,0.0,1.0,1.0);
}  
`;

function main() {
  // 1번 캔버스에 대한 `glContext1`
  const canvas1 = document.querySelector("#c1");
  const glContext1 = canvas1.getContext("webgl2");
  if (!glContext1) {
    return;
  }
  // 2번 캔버스에 대한 `glContext2`
  const canvas2 = document.querySelector("#c2");
  const glContext2 = canvas2.getContext("webgl2");
  if (!glContext2) {
    return;
  }

  const positions = [
      -1.0, 1.0,   // 0 vert
      -1.0, 0.75,  // 1
      -0.75, 1.0   // 2
  ];

  // `glContext1`에 대한 `triVA` 생성
  const triVA = new VertexArray(glContext1);
  const triVB = new VertexBuffer(glContext1, positions);
  triVA.AddBuffer(glContext1, triVB, [2], [false])

  const program = webglUtils.createProgramFromSources(glContext1, [vertexShaderSource, fragmentShaderSource]);
  glContext1.useProgram(program);

  // [OK] `glContext1`에 대해 정상 작동
  glContext1.drawArrays(glContext1.TRIANGLES, 0, 3);

  // [ERROR] `glContext2`는 buffer 생성된 적이 없으므로, 오류 발생.
  triVA.Bind(glContext2);
  triVB.Bind(glContext2);
  glContext2.useProgram(program);
  glContext2.drawArrays(glContext2.TRIANGLES, 0, 3);
}

main();

실행 결과

Canvas #1에는 삼각형이 정상적으로 그려지나,
Canvas #2에는 object does not belong to this context 라는 오류가 나면서 삼각형이 그려지지 않습니다.