개인적으로 그래픽 처리에 대한 지식이 전혀 없습니다. 학습하면서 포스팅 하는 내용이니 오류가 있을 수 있습니다.
WebGL스터디는 공식사이트 보다 유명한 Learning WebGL.com의 Tutorial을 보고 하고 있습니다.
번역보다도... Tutorial lesson을 학습해보고 정리하는 식으로 포스팅할 생각입니다.
이 포스트는 WebGL관련 용어 설명합니다. 그리고 LearningWebGL의 Lesson source는 Github에서 받을 수 있습니다.
WebGL이란?
가장 정확한 정의는 'OpenGL ES 2.0의 Javascript 바인딩 버전' 인거 같습니다. 좀더 쉽게 말하면 '브라우저에서 Javascript로 컨트롤 할 수 있는 OpenGL ES 2.0의 웹 최적화버전' 이 되겠습니다. 사용자(개발자)측면에선 Ajax를 사용하기위해 XMLHttpRequest를 사용하는것과 같습니다. (조금 더 복잡하지만)
OpenGL의 Embedded System용 스펙인 OpenGL ES를 기반으로 하기때문에 OpenGL에서 무겁고 불필요한 부분은 제거되었고, HTML Canvas element에 랜더링 결과를 뿌려주도록 만들어져 있습니다.
저를 포함한 일반 웹개발자들은 3D, OpenGL을 완전 모르기 때문에 살짝 진입장벽이 느껴집니다. (수학 정석책이 필요합니다. ㅡㅡ;)
어디서 작동시켜 볼 수 있나?
얼마전까지만 해도 주류 브라우저들의 개발버전에서나 볼 수 있었으나 현재는 Chrome10, Firefox 4 정식버전에서 지원하고 있습니다.
그럼 용어 정리입니다.
-----------------------------------------------------------------
04-12 : 오타수정. shader script를 GLSL로 변경. 정의 변경.
04-09 : projection matrix 정의 변경. Perspective projection 추가.
-----------------------------------------------------------------
vertex::
다각형 도형의 꼭지점을 말한다. vertex가 3개면 3각형. vertex는 3차원 좌표값 3개와 색상을 값으로 가진다.
shader::
도형으로 이해하면 무리가 없을듯. vertex로 구성된 OpenGL의 object이다. 이 shader가 '면'이 되고, 색상과 텍스처가 입혀진다.
vertex-shader::
vertex( 꼭지점)으로만 이루어진 shader. 면이 없고 좌표계에 점만 찍혀있는 것으로 이해하면 될거 같다. 각각의 위치값과 색상을 가지고 있는 vertex들의 집합.
fragment-shader::
vertex-shader가 vertex사이의 면(픽셀)이 채워진 shader를 말한다. vertex들은 각각 고유의 색을 가질 수 있으므로 vertex-shader를 fragment-shader로 변환하는 과정에 중간 픽셀들은 모두 채워지며, 색상차이는 자동으로 그라데이션이 된다.
shading language (GLSL ES)::
OpenGL ES's Shading Language. shader를 정의하는 스크맄트. GLSL소스는 반드시 String형태로 읽혀서 컴파일 후 program에 추가 된다. 해당 튜토리얼에서는 javascript에서 스트링으로 처리하면 가독성에 문제가 있으므로 type을 x-shader로 정의한 <script> 를 별도로 분리해서 사용한다.
attribute::
shader의 vertex마다 변하는 값들. verax의 좌표값, 색상이 이에 해당한다. shader를 만들때 vertax단위로 shader script에 넘기는 '인자'
uniform::
shader단위로 변하는 값들. shade의 (바라 볼)위치값인 model-view matrix 가 이에 해당한다. 삼각형인 shader가 있다면, vertex는 3개, 그 삼각형의 바라볼 위치가 1개. 전자의 정보가 attribute고 후자의 정보가 uniform이다.
선형보간::
vertex-shader가 fragment-shader로 바뀔때 빈 픽셀들이 채워지는 작업.
matrix::
행열. javascript에서 표현될때는 그냥 1차원 배열이지만, 적절한 라이브럴리로 행열로 다루어진다. 예를 들어 length가 9이고 어떤 값이 3개의 값으로 이루어졌다면(3차원 좌표값처럼) 3x3 배열의 값이 된다. vertex들이 위치할 좌표를 지정할때 사용된다. 또한 shade의 이동, 회전, 깊이 등을 표현할때 사용한다.
matrix multiplication::
행열 곱. 행열을 곱을 통해 좌표계의 도형을 이동시킬 수 있다. WebGL에서도 행열곱을 통해, vertex들(shader) 최초 위치에서 이동시킬 수 있다. (관련 수학지식이 부족해서 불명확함)
model-view matrix::
WebGL에서 shader가 처음에 위치하는 최초의 위치를 말한다. shader의 위치가 변하면 그 바뀐 위치도 상대좌표로 반영 가능하다. 혹은 shader 를 바라보는 관점(카메라, 눈, 모니터)의 위치이기도 하다.
projection matrix::
3d인 물체들을 우리는 2D인 스크린(webgl에선 Canvas)를 통해 본다. 그럴려면 3D 피사체가 2D 스크린에 투영(projection)되어야 한다. 이렇게 3D를 2D로 투영변환시킬 때 model-vie matrix와 행열곱을 할 matrix가 projection matrix이다. 쉽게 말하면 피사체를 바라보고 싶은 각도에 스크린을 놓았는데, 거기에 투영되도록 하는 계산할때 사용되는 행열이다.
Perspective projection::
원극법. 3D를 2D오 옮길때 원근법과 정사영(正射影 Orthographic Projection) 이 있다. 해당 Lesson에는 원근법이 사용된다. 소스 설명할때도 나오겠지만, shader들을 위치와는 별개로 '어떻게, 어디서'볼것인지를 정한다. 이때 원근법으로 보기를 원하면 적절한 인자를 넘겨 세팅해야 한다.
-----------------------------------------------------------------
학습용 링크들
WebGL공식사이트 KHRONOS
WebGL Specification
Learning WebGL의 Lessons
Javascript 3D Engine three.js
Learning WegGL lesson 번역, lesson0, lesson1, lesson2
WebGL inspector
04-09 : projection matrix 정의 변경. Perspective projection 추가.
-----------------------------------------------------------------
vertex::
다각형 도형의 꼭지점을 말한다. vertex가 3개면 3각형. vertex는 3차원 좌표값 3개와 색상을 값으로 가진다.
shader::
도형으로 이해하면 무리가 없을듯. vertex로 구성된 OpenGL의 object이다. 이 shader가 '면'이 되고, 색상과 텍스처가 입혀진다.
vertex-shader::
vertex( 꼭지점)으로만 이루어진 shader. 면이 없고 좌표계에 점만 찍혀있는 것으로 이해하면 될거 같다. 각각의 위치값과 색상을 가지고 있는 vertex들의 집합.
fragment-shader::
vertex-shader가 vertex사이의 면(픽셀)이 채워진 shader를 말한다. vertex들은 각각 고유의 색을 가질 수 있으므로 vertex-shader를 fragment-shader로 변환하는 과정에 중간 픽셀들은 모두 채워지며, 색상차이는 자동으로 그라데이션이 된다.
shading language (GLSL ES)::
OpenGL ES's Shading Language. shader를 정의하는 스크맄트. GLSL소스는 반드시 String형태로 읽혀서 컴파일 후 program에 추가 된다. 해당 튜토리얼에서는 javascript에서 스트링으로 처리하면 가독성에 문제가 있으므로 type을 x-shader로 정의한 <script> 를 별도로 분리해서 사용한다.
attribute::
shader의 vertex마다 변하는 값들. verax의 좌표값, 색상이 이에 해당한다. shader를 만들때 vertax단위로 shader script에 넘기는 '인자'
uniform::
shader단위로 변하는 값들. shade의 (바라 볼)위치값인 model-view matrix 가 이에 해당한다. 삼각형인 shader가 있다면, vertex는 3개, 그 삼각형의 바라볼 위치가 1개. 전자의 정보가 attribute고 후자의 정보가 uniform이다.
선형보간::
vertex-shader가 fragment-shader로 바뀔때 빈 픽셀들이 채워지는 작업.
matrix::
행열. javascript에서 표현될때는 그냥 1차원 배열이지만, 적절한 라이브럴리로 행열로 다루어진다. 예를 들어 length가 9이고 어떤 값이 3개의 값으로 이루어졌다면(3차원 좌표값처럼) 3x3 배열의 값이 된다. vertex들이 위치할 좌표를 지정할때 사용된다. 또한 shade의 이동, 회전, 깊이 등을 표현할때 사용한다.
matrix multiplication::
행열 곱. 행열을 곱을 통해 좌표계의 도형을 이동시킬 수 있다. WebGL에서도 행열곱을 통해, vertex들(shader) 최초 위치에서 이동시킬 수 있다. (관련 수학지식이 부족해서 불명확함)
model-view matrix::
WebGL에서 shader가 처음에 위치하는 최초의 위치를 말한다. shader의 위치가 변하면 그 바뀐 위치도 상대좌표로 반영 가능하다. 혹은 shader 를 바라보는 관점(카메라, 눈, 모니터)의 위치이기도 하다.
projection matrix::
3d인 물체들을 우리는 2D인 스크린(webgl에선 Canvas)를 통해 본다. 그럴려면 3D 피사체가 2D 스크린에 투영(projection)되어야 한다. 이렇게 3D를 2D로 투영변환시킬 때 model-vie matrix와 행열곱을 할 matrix가 projection matrix이다. 쉽게 말하면 피사체를 바라보고 싶은 각도에 스크린을 놓았는데, 거기에 투영되도록 하는 계산할때 사용되는 행열이다.
Perspective projection::
원극법. 3D를 2D오 옮길때 원근법과 정사영(正射影 Orthographic Projection) 이 있다. 해당 Lesson에는 원근법이 사용된다. 소스 설명할때도 나오겠지만, shader들을 위치와는 별개로 '어떻게, 어디서'볼것인지를 정한다. 이때 원근법으로 보기를 원하면 적절한 인자를 넘겨 세팅해야 한다.
-----------------------------------------------------------------
학습용 링크들
WebGL공식사이트 KHRONOS
WebGL Specification
Learning WebGL의 Lessons
Javascript 3D Engine three.js
Learning WegGL lesson 번역, lesson0, lesson1, lesson2
WebGL inspector
http://www.songho.ca/opengl/gl_projectionmatrix.html
-----------------------------------------------------------------
WebGL의 놀라운 데모들.
HelloEnjoy의 HelloRacer
Chris Milk의 The wilderness DownTown
WebGL 퀘이크 Q3Tourney2
Mr.doob 의 WebGL Clouds
출처 : http://zziuni.pe.kr/zziuni/559 에서 복사해왔음;
-----------------------------------------------------------------
WebGL의 놀라운 데모들.
HelloEnjoy의 HelloRacer
Chris Milk의 The wilderness DownTown
WebGL 퀘이크 Q3Tourney2
Mr.doob 의 WebGL Clouds
출처 : http://zziuni.pe.kr/zziuni/559 에서 복사해왔음;