WebGL - (1)

WebGL 에 대한 설명은 길게 할 거 없고, 웹 브라우저에서 3D 를 구현할 수 있는 기능이라고 생각하시면 되겠습니다.

HTML5 의 canvas 와 javascript 를 이용해서 구현할 수 있습니다.

하나씩 배워가며 여기 블로그에 정리하고자 합니다.

시작해봅시다.

일단 WebGL 을 지원하는 브라우저를 준비해야합니다.

최신의 크롬 브라우저를 추천합니다. 구글가서 다운받아 설치한 후 진행합시다.

작업 페이지를 하나 작성합시다.

lec1.php <--- 확장자는 htm 으로 해도 됩니다.

lec1.php

-----

<!DOCTYPE html>
<html>

<head>

<title>WebGL</title>
<meta charset="UTF-8">

</head>

<body>

</body>

</html>

-----

브라우저에서 보면 당연 암것도 안 보이죠.

WebGL 을 이용해서 3D 작업내용이 보일 영역을 준비를 해 줍시다.

<body> 태그 다음 줄에 아래 canvas 태그를 입력합시다.

브라우저로 확인하면 아직 암것도 안 보입니다. 어디가 canvas 인지...

그래서, canvas 영역이 눈에 보이도록 style 을 지정해줍시다.

<head> 와 </head> 사이에 style 태그를 아래와 같이 입력합시다.

-------------------------

이제 브라우저로 확인하면 어디가 webgl 작업 내용이 출력될 canvas 인지가 구분이 됩니다.

저 영역 내부에, 앞으로 javascript 로 작성하는 내용이 나타나게 될 겁니다.

그럼, 자바스크립트를 작성할 부분을 head 태그 내에 또 준비를 합시다.

-----

<body> 태그는 다음과 같이 수정해줍시다.

소스코드 찍어주는 플러그인이 생각대로 동작하지 않네요. 그래서 이미지로 캡쳐합니다.ㅡ.ㅡ

여기까지 작성한 내용이 진짜 lec1.php 이 되겠습니다. 나중에 또 쓰일 수 있으니까, template1.php 로 따로 저장해놓읍시다.

이렇게 해 놓고, webgl-start() 함수 내에서 작업을 하는겁니다.

궁극의 잡 블로그