Computer/WebGL16 008. WebGL - Prac07 - JavaScript 파일 WebGL을 위한 JavaScript의 코드가 조금씩 길어짐에 따라, 소스 코드의 관리 및 가독성이 점점 떨어 지고 있다. 따라서 이번 문서에서는 WebGL을 위해 JavaScript 코드를 어떻게 사용할 것인가에 대한 내용을 살펴볼 것이다. 지금 까지는 하나의 *.html 파일에 모든 코드가 들어가 있는데, 이후 부터는 *.html파일과 *.js파일(JavaScript code file)을 구분하여 프로그램을 작성할 것이며, 자주 사용되거나 반복적으로 사용되는 JavaScript 구문들을 따로 묶어내어 코드의 Line 수를 줄임과 동시에, 유지 보수 및 가독성 향상을 용이하게 해 보도록 하겠다. 다음과 같은 방법으로 JavaScript코드와 Html코드를 분리해 낼 수 있다. 또한 각 기능에 따라 Ja.. 2010. 4. 7. 007. WebGL - Prac06 - Animation 이번에는 WebGL을 이용한 Animation을 표현해 보도록하겠다. OpenGL이든 Direct3D이든 Geometry에 대한 연산을 행렬 형태로 표현하고 있음을 잘 알고 있을 것이다. 이동/회전/크기변환 등을 행렬로 표현하면 여러가지 장점이 있어 사용할 뿐, 필수 사항은 아닐 것이다. 이번장에서는 행렬을 사용하지 않고 아주 간단한 Animation을 표현할 것인데, 그 이유는, 행렬을 표현함에 있어 javascript를 이용해야 하기 때문이다. 본 문서들은 javascript에 익숙하지 않다는 가정을 하고 있으므로, javascript로 행렬을 표현하는 방법은 차후 다루기로 하겠다. WebGL에서 Animation을 표현하는 방법은 GLSL을 이용한 방법외에는 존재하지 않다라고 해도 무방할 것이다. .. 2010. 4. 7. 006. WebGL - Prac05 - DrawTriangleWithColor 이전의 예제 004. WebGL - Prac03 - DrawPoints, DrawLines, DrawTriangles. 에서 단색의 삼각형을 렌더링하여 보았다. 이는 아래와 같이 Fragment Shader에서 붉은색으로만 색상값을 지정하고 있기 때문이다. 이제부터 단색이 아닌, 사용자가 직접 각 Vertex 마다 다른 색상을 지정해 보도록 하겠다. 우선 위와같이 작성되어 있던 Fragment Shader 코드를 아래와 같이 수정한다. 위의 코드에 사용된, 변수명 vColor의 값은 Vertex에서 지정할것이다. 두번째로, Vertex Shader 코드를 아래와 같이 수정한다. 이전에 작성했던 코드에 4~5라인 정도가 추가되었다. 위의 Vertex Shader 코드를 보면, Fragment Shader코.. 2010. 4. 6. 005. WebGL - Prac04 - Shader를 위한 Script 구문 이전 글에서 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); }"; 와 같은 방식으로 사용해도 코딩에 큰 어려움이 없었다. 하지만, 복잡한 렌더링 기능을 구현함에 따라 Shader 코드가 길어진다면 위와 같은 방식은 가독성에 악영향을 미칠 것이다. 또한 Shader 코드를 다른 파일로 구현해 두고자 한다면 이번에 소개할 방식을.. 2010. 4. 6. 이전 1 2 3 4 다음
