WebGL tutorial
WebGL 은 WebGL을 지원하는 브라우져에서 plugin을 사용하지 않고도, 웹 콘텐츠가 OpenGL ES 2.0 기반의 API를 이용하여 HTML <canvas>
에서 3D 랜더링을 할 수 있도록 해 줍니다. WebGL 프로그램은 JavaScripts로 작성 된 제어 코드와 컴퓨터의 Graphics Processing Unit (GPU)에서 실행되는 특수한 효과를 내는 코드(Shader code)로 구성 됩니다. WebGL 요소들은 다른 HTML요소들과 섞어서 함께 사용 할 수 있으며 페이지의 다른 부분이나 페이지 배경과 함께 사용 할 수 있습니다.
이 튜토리얼은 WebGL 그래픽을 그리기 위해 <canvas>요소를 어떻게 사용하는지에 관해 기본부터 기술합니다. 제공된 예제들은 여러분이 WebGL로 무엇을 할 수 있는지를 명확히하고, 여러분 소유의 콘텐츠를 제작할 수 있도록 작은 코드들을 제공 할 것입니다.
시작하기 전에
<canvas>
요소를 사용하는 것은 크게 어렵진 않지만, 여러분은 HTML 과 JavaScript에 대하여 기본적인 이해가 꼭 필요합니다. <canvas>
요소와 WebGL은 일부 오래된 브라우저에서 지원되지 않으나, 최근 버전의 모든 주요 브라우저에서 지원됩니다. 우리는 canvas에 그림을 그리기 위해 그림을 신속하게 생성하는 JavaScript 콘텍스트 객체를 사용합니다.
In this tutorial
- Getting started with WebGL
-
How to set up a WebGL context.
- Adding 2D content to a WebGL context
-
How to render simple flat shapes using WebGL.
- Using shaders to apply color in WebGL
-
Demonstrates how to add color to shapes using shaders.
- Animating objects with WebGL
-
Shows how to rotate and translate objects to create simple animations.
- Creating 3D objects using WebGL
-
Shows how to create and animate a 3D object (in this case, a cube).
- Using textures in WebGL
-
Demonstrates how to map textures onto the faces of an object.
- Lighting in WebGL
-
How to simulate lighting effects in your WebGL context.
- Animating textures in WebGL
-
Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.