'Computer' 카테고리의 글 목록 (3 Page)

010. WebGL - Prac09 - Text Rendering

WebGL을 이용하여, Text Rendering을 하는 것은 JavaScript의 지식을 비교적 많이 필요로 한다. 그 외에는 WebGL의 사각형에, JavaScript로 렌더링된 Text 이미지를 텍스쳐링하는 것만 수행하면 된다. Windows platform에서 OpenGL의 wgl을 이용하여 text를 렌더링해본 경험이 있다면, 혹은 glut를 이용하여 text를 렌더링해본 경험이 있다면, WebGL에서의 방법은 비교적..

Computer/WebGL 2010.04.19 10:14

009. WebGL - Prac08 - Texture

이번에는 WebGL에서 Geometry에 Texture를 입혀보는 예제를 소개하도록 하겠다. Local System에서 작동되는 OpenGL 프로그램에서의 Texture로딩은 Local Disk에 저장되어 있는 Image 파일을 읽어들여 사용함을 잘 알고 있을 것이다. 그렇다면, Web상에서 작동하는 WebGL은 어떻게 Texture를 로딩할 것인가? 답은 Local System에서의 방법과 큰 차이가 없다는 것이다. Local Syst..

Computer/WebGL 2010.04.10 22:43

008. WebGL - Prac07 - JavaScript 파일

WebGL을 위한 JavaScript의 코드가 조금씩 길어짐에 따라, 소스 코드의 관리 및 가독성이 점점 떨어 지고 있다. 따라서 이번 문서에서는 WebGL을 위해 JavaScript 코드를 어떻게 사용할 것인가에 대한 내용을 살펴볼 것이다. 지금 까지는 하나의 *.html 파일에 모든 코드가 들어가 있는데, 이후 부터는 *.html파일과 *.js파일(JavaScript code file)을 구분하여 프로그램을 작성..

Computer/WebGL 2010.04.07 16:04

007. WebGL - Prac06 - Animation

이번에는 WebGL을 이용한 Animation을 표현해 보도록하겠다. OpenGL이든 Direct3D이든 Geometry에 대한 연산을 행렬 형태로 표현하고 있음을 잘 알고 있을 것이다. 이동/회전/크기변환 등을 행렬로 표현하면 여러가지 장점이 있어 사용할 뿐, 필수 사항은 아닐 것이다. 이번장에서는 행렬을 사용하지 않고 아주 간단한 Animation을 표현할 것인데, 그 이유는, 행렬을 표현함에 있어 javascript를 이..

Computer/WebGL 2010.04.07 05:33

006. WebGL - Prac05 - DrawTriangleWithColor

이전의 예제 004. WebGL - Prac03 - DrawPoints, DrawLines, DrawTriangles. 에서 단색의 삼각형을 렌더링하여 보았다. 이는 아래와 같이 Fragment Shader에서 붉은색으로만 색상값을 지정하고 있기 때문이다.<script id="FragmentShader" type="x-shader/x-vertex"> void main(){ &nbs..

Computer/WebGL 2010.04.06 09:16

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); ..

Computer/WebGL 2010.04.06 04:10

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를..

Computer/WebGL 2010.04.05 18:23

003. WebGL - Prac01 - Graphics의 HelloWorld인 ClearColor

Graphics의 "Hello World"라고 생각되는 ClearColor(BackBuffer Clearing)를 통해 WebGL의 첫번째 예제를 작성해 보도록 하겠다. WebGL을 작성하기 위해서는 약간의 JavaScript와 OpenGL의 몇몇 API 정도만 알고 있으면 된다.<html> <head> <title>WebGL - Prac01 - clearColor</title>..

Computer/WebGL 2010.04.05 04:47

002. WebGL - Environment Setting

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. 주소창에..

Computer/WebGL 2010.04.05 04:46

001. About WebGL

http://www.khronos.org/webgl/에서, WebGL에 대한 정보를 얻을 수 있다. WebGL은, HTML5를 기반으로하는 OpenGL ES 2.0의 JavaScript바인딩이다. OpenGL ES 2.0 기반답게, Vertex Shader / Pixel Shader(or Fragment Shader)를 통한 GPU 가속이 가능하다는 것이 특징인데, 가장 중요한 것은 별도의 플러그인 없이도(Adobe Flash ..

Computer/WebGL 2010.04.05 04:21

dogbull

티스토리 툴바