웹지엘(WebGL)을 이용한 하드웨어 가속 3D 그래픽 개발에 필요한 모든 것을 담고 있다. 웹지엘은 웹개발자에게 놀라운 3D 그래픽을 제작하는 방법을 제공한다. 이 책은 웹지엘을 사용해서 3D 크로스 플랫폼 앱을 만드는 과정을 코드와 주석을 통해 방법과 원리에 대해 자세히 설명하고 있다. 웹지엘 그래픽 파이프라인, 3D 변환, 텍스처링과 광원 등의 중요한 기술들을 다루고 있으며, 버텍스 셰이더와 프래그먼트 셰이더의 작성법에 대해 알려준다. 또한 웹지엘 성능 최적화에 필요한 다양한 가이드와 팁을 제시하고 있다.

웹지엘 기초

웹지엘과 다른 그래픽 기술 비교

선형대수학

트러블슈팅과 디버깅 테크닉

웹지엘 API를 사용한 그리기

자바스크립트 라이브러리와 3D 변환

버텍스 셰이더와 프래그먼트 셰이더 작성

텍스처링과 조명

애니메이션과 사용자 입력

오픈지엘(OpenGL) ES 셰이딩 언어

웹지엘 성능 최적화

이 책의 주 독자층은 웹 제작의 기본적인 지식을 갖추고 있으며, 웹지엘을 이용해 2D와 3D 그래픽을 적용한 웹 애플리케이션이나 웹 페이지를 만들고자 하는 웹 개발자다. 그리고 이전에 3D 그래픽 API(오픈지엘이나 Direct3D)를 이용한 경험을 바탕으로, 웹 제작에 웹지엘을 이용하고자 하는 개발자를 대상으로 한다.
또한, 웹지엘을 3D 그래픽 수업에 활용하거나 프로토타입 제작과 테스트에 사용하고자 하는 학생에게도 유용할 것이다. 애플리케이션 제작에 웹지엘을 지원하는 브라우저와 텍스트 에디터만 있으면 되기 때문에 완벽한 툴 체인 설정이 필요한 다른 3D 그래픽 API에 비해 접근성이 높은 편이다.

이 책을 처음부터 끝까지 차례로 읽었을 때 가장 학습 효과가 크도록 준비했다. 그러나 독자마다 배경지식이 다르므로, 자신에게 맞는 방법으로 읽어도 상관없다. 다음의 전체적인 개요가 책을 읽는 데 도움이 될 것이다.
1장은 웹지엘의 배경지식과 다른 그래픽 기술과의 차이점에 대해 설명한다. 웹지엘의 그래픽 파이프라인과 그래픽 하드웨어의 전체적인 내용과 3D 그래픽과 웹지엘의 이해를 돕기 위해 선형 대수학의 내용을 일부 다룬다. 1장에서 다루는 내용의 사전 지식이 충분하다면, 생략하고 2장으로 건너가자.
2장에서는 좀 더 실용적인 지식을 배워보자. 첫 번째 웹지엘 애플리케이션을 만들고 버텍스 셰이더와 프래그먼트 셰이더를 어떻게 작성하는지 알아본다. 웹지엘의 학습효과를 높이기 위한 유용한 기법과 디버깅 툴도 소개한다. 또한 웹지엘 애플리케이션 제작시 발생하는 문제를 해결하기 위한 방법도 살펴본다.
3장에서는 웹지엘에서 그리기(drawing)를 사용하기 위한 여러 가지 옵션과 메소드, 프리미티브(primitives)를 배운다.
4장에서는 웹지엘 애플리케이션에서 쓰이는 벡터와 행렬 연산 시에 유용한 3개의 간단한 자바스크립트 라이브러리를 소개한다. 또한 3D 세계(world)의 오브젝트 방향과 위치 변환에 대해서도 배운다. 4장은 매우 중요하므로 3D 그래픽에 대한 사전 지식이 없다면 충분한 시간을 들여 읽자. 5장은 웹지엘의 텍스처링 구현에 대해 알아본다. 텍스처링은 3D 오브젝트를 실감나게 보이기 위해 매우 중요한 단계다. 그리고 웹지엘에서 컨텍스트 상실을 처리해 견고한 애플리케이션을 만드는 방법을 알아본다. 실제 애플리케이션을 만들기 전에 5장을 꼭 읽어서 견고한 애플리케이션을 만드는 데 참고하자.
6장에서는 웹지엘 장면에서 애니메이션을 사용해 움직임을 만드는 방법에 대해 알아본다. 그리고 자바스크립트에서 이벤트 핸들링에 대해 자세히 알아보고 키 입력과 마우스 입력이 웹지엘 장면에 미치는 영향에 대해 알아본다.
7장에서는 웹지엘의 흥미 있는 분야인 조명에 대해 알아본다. 다양한 조명 모델에 대해 알아보고 조명 모델을 구현하는 버텍스 셰이더와 프래그먼트 셰이더를 작성해본다. 조명은 웹지엘 장면을 사실적으로 만드는 데 매우 중요한 재료가 된다.
8장에서는 웹지엘 애플리케이션의 성능을 최상의 상태로 만드는 여러 가지 가이드라인과, 팁, 트릭에 대해 알아본다. 웹지엘의 성능 문제를 측정하고, 병목 지점을 찾아 제거하는 방법에 대해 알아볼 것이다. 8장은 실제 모바일 산업의 사례를 바탕으로 웹지엘의 하부에서 동작하는 주요 소프트웨어와 하드웨어를 살펴보고, 어떤 일이 일어나는지에 대해서도 다룬다.

오늘날 많은 사용자가 웹 브라우저가 있는 컴퓨터, 태블릿, 스마트폰을 이용해 문서를 작성하고, 이메일, 채팅, 뉴스 읽기, 영상 시청, 음악 듣기, 게임, 쇼핑 등을 하며 시간을 보낸다. 웹 브라우저는 대부분의 기기에서 가장 중요한 애플리케이션이 되었다. 결과적으로, 웹 기술은 매우 빠른 속도로 가히 혁신적일 정도로 변화 중이다. 더불어 웹 브라우저는 이전보다 더 빠르고 안정적이며, 더 높은 보안을 자랑함과 동시에 매일같이 쏟아지는 신기술을 다루는 데 적합한 방향으로 진화 중이다.
웹 기술의 진보는 웹 개발자에게는 희소식이다. 가능한 한 많은 사람에게 배포할 수 있는 애플리케이션을 만들고 싶다면, 웹은 이를 위한 최적의 플랫폼이다. 하지만 근래에 일어난 웹 애플리케이션의 엄청난 발전에도 불구하고, 네이티브 애플리케이션에 비해 게임이나 기타 다른 애플리케이션에서 필요한 실시간 3D 그래픽은 제대로 발전하지 못했다. 바로 여기에 웹지엘이 등장하며 새로운 바람을 일으켰다.
웹지엘은 이전의 웹에서 불가능했던 2차원과 3D 그래픽을 가능케 한다. 그래픽 하드웨어가 지닌 강력한 GPU와 함께 HTML, CSS, 자바스크립트를 이용해 웹 애플리케이션을 만들 수 있다. 웹지엘에 기반한 2차원과 3D 그래픽 애플리케이션을 만드는 모든 과정을 기초부터 차근차근 함께 알아보자.

안드레아스 안유루(ANDREAS ANYURU)

웹지엘을 포함한 다양한 웹 기술 분야에 능통한 전문가다. 웹 브라우저 통합과 모바일기기의 최적화와 관련해 다년간의 경험이 있다. 데스크톱과 안드로이드에서 사용되고 있는 구글 크롬엔진의 V8 자바스크립트 엔진 개발에 기여했으며, 룬드(Lund) 대학의 정보 통신 공학부에서 새로운 수업을 개발하고 가르쳤다.

ST 에릭슨(ST Ericsson)의 시니어 멤버로서, 주 업무 영역은 웹 기술이다. 현재는 ST 에릭슨의 리눅스 기반 모바일 플랫폼에 적용하는 웹 기술 최적화에 대한 책임을 맡고 있으며, 스웨덴의 룬드 대학 공학부에서 전기 공학 석사를 취득했다.

3D란 용어는 듣는 순간 사람을 설레게 하는 힘이 있는 것 같습니다. 개발자라면 누구나 한 번쯤 자신의 결과물을 멋진 그래픽으로 표현해서 사람들에게 보여주고 싶은 맘이 생기기 마련입니다. 웹지엘은 개발자의 그러한 열망을 쉽고 빠르게 브라우저를 통해서 3D로 표현할 수 있게 해주는 멋진 도구입니다.
이 책은 다양한 예제와 친절한 설명을 통해 웹지엘을 처음 접하는 사람에게 적합하도록 구성됐습니다. 특히 3D 그래픽 이해에 필수적인 지식인 선형대수학에 대해서도 따로 지면을 할애해 초보자들도 알 수 있게 친절히 설명합니다. 두꺼운 오픈지엘 책과 수학 책 없이 이 책만 가지고도 한걸음씩 차분히 읽어나가면 멋진 3D 그래픽 개발자로서의 첫걸음을 디딜 수 있다고 생각합니다. 또한, 저자의 경험에서 우러나는 웹지엘의 성능 향상에 관해서도 다양한 각도로 설명하며, 실무 적용에 유용한 지식도 알려줍니다.

윤영민

대학원에서 그래픽 분야 석사를 전공했으며, 현재는 국내의 포털 회사에 근무하며 영상처리에 관한 연구 개발을 하고 있다. 다양한 컴퓨터 사이언스 분야에 대해 호기심이 많으며, 특히 컴퓨터 그래픽 & 비전, 영상처리 분야에 관심이 많다. 오픈지엘(OpenGL) 등을 이용한 3D 그래픽뿐만 CUDA 등의 GPGPU 분야에도 흥미가 있다.