[Three.js]WebGL

WEBGL 이란?

WEB Graphics Libary의 약자인 WEBGL은 OpenGL ES를 웹에서 사용가능하도록 자바스트립트 언어 바인딩으로 만든 것입니다.

웹 상에서 2D나 3D 그래픽을 렌더링 하기 위해서 HTML5 Document에 Canvas를 만들고 Javasript에 랜더링을 위한 함 수를 나열합니다.

WEBGL은 three.js를 사용하여 3D그래픽을 만들어줍니다. 3차원이므로 x,y축 뿐만 아니라 깊이(depth)를 의미하는 z축도 이용을 하여 상하좌우앞뒤 모든곳으로 이동 이 가능합니다.

WEBGL에서 기본적으로 알아야 하는 용어

정점(vertex)	정점은 3차원 개체의 가장자리의 결합을 형성하는 점입니다. 자바스크 립트 배열을 사용하여 정점을 수동으로 저장하고 정점 버퍼를 사용하여 렌더링에 전달합니다.
인덱스(index)	정점을 식별하는 숫자값으로 메쉬를 그리는데 사용을 합니다.
버퍼(buffer)	데이터를 가지고 있는 WebGKL의 메모리 영역입니다
메쉬(mesh)	점,선,삼각형으로 하나이상의 다각형을 구성하고 이 다각형을 이용하여 메쉬를 형성합니다.
셰이더(shader)	정점,변형,재질,조명,카메라가 상호작용하여 특정 이미지를 만드는 방법 을 정의 합니다.

렌더링은 3차원 공간에 객체를 2차원 화면인 하나의 장면에 바꿔 표현합니다. 렌더링 과정은 변환과 색칠로 나눠집니다.

• CG 프로그램의 시야는 카메라에서 물체를 보는 것과 비슷합니다.
• 카메라는 만들어진 메쉬(물체)를 보고 시야 범위(각도)를 지정합니다. 기본값은 50 도이며 숫자가 작아질수록 카메라와 물체 사이가 가까워집니다.
• 너무 가까워지면 카메라가 보는 시야각 뒤로 물체가 이동하고 너무 멀어지면 물체가 시야에서 사라 지기 때문에 45~75도 사이의 값을 많이 지정합니다.

 

결과 보고서

과제를 수행하면서 컴퓨터 그래픽스를 THREE.JS로 이용하여 3차원 렌더링이 가능 하며 js를 이용하여 다각형을 만들고 다양한 각도로 장면을 이동하며 볼 수 있습니 다.
x축과 y축으로 이동 뿐만 아니라 z축으로 이동하여 모든 면으로 이동합니다. 물체 메쉬의 재질을 적용하고 색과 모형을 변경가능합니다. 또한 물체에 텍스쳐를 입힐 수 있습니다. 3D모델링을 적용하여 모델링을 360도로 돌려 볼 수 있게 제작할 수 있으며 게임 그래픽을 이용하여 간단한 게임을 만들 수 있습니다. 이외에도 화면에 서 부드럽게 움직이는 웹페이지를 제작할 수 있습니다.