WebGL을 위한 JavaScript의 코드가 조금씩 길어짐에 따라, 소스 코드의 관리 및 가독성이 점점 떨어 지고 있다. 따라서 이번 문서에서는 WebGL을 위해 JavaScript 코드를 어떻게 사용할 것인가에 대한 내용을 살펴볼 것이다. 지금 까지는 하나의 *.html 파일에 모든 코드가 들어가 있는데, 이후 부터는 *.html파일과 *.js파일(JavaScript code file)을 구분하여 프로그램을 작성..
007. WebGL - Prac06 - Animation
이번에는 WebGL을 이용한 Animation을 표현해 보도록하겠다. OpenGL이든 Direct3D이든 Geometry에 대한 연산을 행렬 형태로 표현하고 있음을 잘 알고 있을 것이다. 이동/회전/크기변환 등을 행렬로 표현하면 여러가지 장점이 있어 사용할 뿐, 필수 사항은 아닐 것이다. 이번장에서는 행렬을 사용하지 않고 아주 간단한 Animation을 표현할 것인데, 그 이유는, 행렬을 표현함에 있어 javascript를 이..
이전 글에서 Vertex/Fragment Sahder를 이용하여 렌더링하는 방법에 대해 알아 보았다. 이 글에서 사용된 GLSL은 매우 짧아서, var vertexShaderDesc= "attribute vec3 aPos; void main(){ gl_Position=vec4(aPos, 1.0); }"; var fragmentShaderDesc= "void main(){ gl_FragColor= vec4(1.0, 0.0, 0.0, 1.0); ..
004. WebGL - Prac03 - DrawPoints, DrawLines, DrawTriangles.
이번에는 WebGL에서 기본적인 primitives(Point, Line, Triangle, Rectangle, Polygon etc)를 그리는 방법에 대해 알아보도록 하겠다. About WebGL에서 설명한 바와 같이 WebGL은 OpenGL ES 2.0을 기반으로 한다. 이는 이전 버전의 OpenGL API를 다루어본 사람에게는 중요한 사항인데, 그 이유는 OpenGL ES 2.0이 Programmable Pipeline를..
003. WebGL - Prac01 - Graphics의 HelloWorld인 ClearColor
Graphics의 "Hello World"라고 생각되는 ClearColor(BackBuffer Clearing)를 통해 WebGL의 첫번째 예제를 작성해 보도록 하겠다. WebGL을 작성하기 위해서는 약간의 JavaScript와 OpenGL의 몇몇 API 정도만 알고 있으면 된다.<html> <head> <title>WebGL - Prac01 - clearColor</title>..
WebGL을 실행하기 위해서는, 1. WebGL대응 Web browser설치, 2. WebGL을 수행하기 위한 옵션설정 을 해 주어야 한다.(아직까지 MS InternetExplorer는 WebGL을 지원에대한 움직임을 보이지 않는다고 함.)FireFox1. 다음의 링크에서 OS에 맞는 FireFox를 받아 설치한다.http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/2. 주소창에..
- Total
- 157,692
- Today
- 13
- Yesterday
- 95