본문 바로가기

WebGL6

WebGL - (6) 여러가지 Matrix 에 대한 설명 은.... OpenGL 강좌 사이트에 있는 아래 글이 설명이 잘 되어있는것 같습니다. 각 matrix 의 의미는 이해가 되더군요. WebGL 에서는 이 과정을 여러 함수들이 해주니까, 잘 숙지하고 사용을 하면 되겠습니다. http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/ 2013. 5. 25.
WebGL - (5) 사각형 그리기 앞서 삼각형을 그릴 때의 vertex 와 index 는 아래와 같았습니다. ------var vertices = [ -1.0, -1.0, 0, 1.0, -1.0, 0, 0, 1.0, 0 ]; var indices = [ 0, 1, 2 ];------ 삼각형의 3 꼭지점 좌표와 삼각형을 이루는 꼭지점 3개의 인덱스. -1.0, -1.0, 0 -> 0번 1.0, -1.0, 0 -> 1번 0, 1.0, 0 ->2번 삼각형은 0번, 1번, 2번으로 이루어 진다고 알려주는 index. var indices = [ 0, 1, 2 ]; 그릴때는 indices 에서 3개씩 꺼집어 내서 삼각형을 그리는 거죠. 그럼, 사각형은 어떻게 그릴 수 있을까요? 위의 4개의 점(0,1,2,3) 으로 이루어진 사각형은 (0,1,2).. 2013. 5. 23.
WebGL - (4) 삼각형 그려보기 WebGL 은 기본적으로 3D를 위해서 존재합니다. 가상의 공간에 물체를 놓고, 어느 한 시점에서 바라볼 때 눈에 보이는 장면을 2D 로 그려내는 것입니다. 3D Graphic 분야에서 사용되는, 익숙하지 않은 많은 용어들이 있습니다. 한꺼번에 다 설명할 수도 없고, 진행해 나가면서 필요할 때 하나씩 설명을 하겠습니다. 사실 저도 3D 전문가가 아니라, 잘 모릅니다. 단지 제가 이해하는 만큼 설명이 가능할 것입니다. 1. HTML 기본 태그를 작성합시다.----- -----가로/세로 500짜리 canvas 를 준비해두고, webgl_start() 함수내에서 작업해봅시다. 먼저 WebGLRenderingContext 를 가져옵시다.전역변수로 gl 을 만들어 두고, canvas 의 id 를 인자로 받아서 해.. 2013. 5. 22.
WebGL - (3) Context 가져오는 좀 더 나은 방법 canvas 로부터 WebGL Context 를 가져올 때, 아래와 같이 할 수도 있지만, var gl = canvas.getContext("experimental-webgl"); 브라우저별로 여러가지로 정해져 있는 값들을 체크해서 적절한 값으로 Context 를 가져올 수 있는 방법입니다. var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; for (var i = 0; i < names.length; ++i) { try { gl = canvas.getContext(names[i]); } catch(e) {} if (gl) { break; } // "experimental-webgl" // gl : object WebGLRende.. 2013. 5. 22.
WebGL - (2) 작업영역 지우기 webgl-start() 함수 내에서 작업을 합시다. 우선 WebGL 이 건드릴 영역! canvas 를 가져와서 webgl 노가다를 할 변수에다 연결을 해 줍니다. var canvas = document.getElementById("webgl-screen"); var gl = canvas.getContext("experimental-webgl"); canvas 로부터 Context 를 가져와 변수 gl 에 연결시킵니다. gl 은 WebGLRenderingContext 라는 object 입니다. Context 라는 것은 일종의 핸들로 생각합시다. 이 context 를 통해서 우리는 WebGL 함수, 변수 등에 접근할 수 있습니다. WebGL Context, 즉! gl 이녀석을 통해서 앞으로 canvas 영.. 2013. 5. 21.
WebGL - (1) WebGL 에 대한 설명은 길게 할 거 없고, 웹 브라우저에서 3D 를 구현할 수 있는 기능이라고 생각하시면 되겠습니다. HTML5 의 canvas 와 javascript 를 이용해서 구현할 수 있습니다. 하나씩 배워가며 여기 블로그에 정리하고자 합니다. 시작해봅시다. 일단 WebGL 을 지원하는 브라우저를 준비해야합니다. 최신의 크롬 브라우저를 추천합니다. 구글가서 다운받아 설치한 후 진행합시다. 작업 페이지를 하나 작성합시다. lec1.php 2013. 5. 21.

티스토리툴바