WebGL

WebGL 은 GPU 를 사용하여 웹 브라우저에서 물체를 그리는 기술입니다. 

WebGL renders objects using GPU on web browser.

WebGL 은 GPU 를 사용하기 때문에 HTML5 Canvas 나 SVG 에 비해 빠르게 물체를 그릴 수 있습니다.

Because WebGL uses GPU, WebGL can render objects faster than HTML5 Canvas or SVG.

모질라 파이어폭스, 구글 크롬, 사파리, 오페라에서 WebGL 을 지원하고 있고, 인터넷 익스플로러에서는 플러그인을 통해 WebGL 을 사용할 수 있습니다.

Mozilla Firefox, Google Chrome, Safari, and Opera already support WebGL.

You can use WebGL via third-party plugin on Internet Explorer.(http://en.wikipedia.org/wiki/WebGL)

Windows 에서는 WebGL 이 DirectX 를 통해 GPU 를 사용하기 때문에, 윈도우 환경에는 DirectX 를 설치해야 합니다.

Because WebGL uses GPU via DirectX on Windows, you should install DirectX on Windows.

(http://learningwebgl.com/blog/?p=11)

WebGL 에서 GPU 를 사용하는 부분은 버텍스 쉐이더와 프라그먼트 쉐이더 입니다.

In WebGL program, vertex shader and fragment shader uses GPU.

버텍스 쉐이더는 물체의 위치와 형태를, 프라그먼트 쉐이더는 물체의 색을 담당합니다.

Vertex shader decides the positon of objects and renders the shape of the objects. Fragment shader renders the color of the objects.

alpha 를 사용하여 색이 겹치는 효과가 보고 싶다면 blend 를 설정해야 한다.

Set up blend if you want to get blend effect using alpha.

아래의 주소에서 다양한 blend 효과에 대해 테스트 할 수 있습니다.

You can test various blend effect following url.

http://mrdoob.github.com/webgl-blendfunctions/blendfunc.html

WebGL 로 텍스트를 표현하려면 1 HTML5 Canvas 에 텍스트를 쓰고 텍스처로 사용하거나 2 THREE.textgeometry를 사용해야 합니다.

To render text, 1 fill text on canvas and use it as texture or 2 use THREE.textgeometry.

(https://github.com/mrdoob/three.js/wiki/Text-in-Three.js)

알려진 문제들

There are some known bugs

- 크롬에서는 line width 가 적용되지 않는다.
   lineWidth() does not work in chrome.

WebGL 을 사용했는데도 기대한 만큼 성능이 좋지 않다면 아래의 발표를 참고하시길 바랍니다.

Plz take a look following presentation if the performance of WebGL-based web application is not good enough.

http://www.google.com/events/io/2011/sessions/webgl-techniques-and-performance.html

http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en//events/io/2011/static/notesfiles/WebGLTechniquesandPerformancenotes.pdf