Kinesis´s Open Document

Three.js 를 이용한 WebGL 살펴보기. 무려 "Getting Started"으로만 3일째 정리 글이다. 회사를 퇴근하고나서 실험해보고 연습하다 정리를 하려니 진도가 많이 나가지는 못한다. 태풍 볼라벤이 수도권에 영향을 직접적으로 끼치고 간 날이기도 한 오늘 "Getting Started" 에 사용된 자바스크립트 함수나 변수를 간단히 살펴보고 마무리 지어보도록 하자. 비쥬얼 스튜디오와 IE9 (Internet Explorer 9) 를 이용해 디버깅을 시도해 보았다가 재대로 지원하지 못해 오류를 띄우는 관계로 다소 생소한 크롬 개발자도구를 이용해 분석 및 살펴보기에 들어갔다. 먼저 『 THREE.WebGLRenderer() 』 함수를 살펴보았다. 최소화 되어 있는 min.js 이다보니 암호화 및 모..

Three.JS 를 이용하여 큐브 모양세를 만들어내는 것까지는 확인 했다. Getting Started 내용을 정리하면 장면을 렌더링하기 위해서는 "첫째, 장면을 준비해야하고, 둘째 카메라를 준비하고, 셋째 개체를 생성하고, 넷째 빛을 준비하여야 한다." 라는 내용으로 정리가 된다. 그럼 실질적으로 어떤 변화가 있을까? 크롬브라우저의 Console 을 이용해 스크립트를 크게 장면초기화, 객체 생성, 렌더링의 3단계로 나누어 확인을 해보기로 했다. 우선 빈 페이지를 준비해서 장면을 초기화 하는 소스를 입력할 준비를 했다. 장면을 초기화 시키는 스크립트를 실행하고 나니 body 안에 canvas 요소가 생성이 된 것을 확인 할 수 있었다. 별도의 하위 엘리먼트 같은거는 존재하지 않는다. 카메라, 객체(오브젝..

웹 영역이 점점 넓어져 이제는 3D 영역 까지 삼켜가고 있다. 아직까지는 소프트웨어와 웹 영역이 구분이 되어 있지만 이것도 조만간 10년 이내에 웹 영역으로 많은 부분 흡수되어 트렌드의 전환이 이루어질 것 같다. 물론 이러한 것은 HTML5 과 함께 모습을 드러내기 시작한 WebGL 및 웹 소켓등과 같은 신기술의 등장이 있었기 때문이다. 그러나 사실상 현재로서는 이 WebGL 과 웹 소켓 및 HTML5 등이 완벽하지는 않다. 웹브라우저의 호환성등의 이유로 인해 발목잡혀 있기 때문이다. 더욱이 브라우저 사용율 90% 가량이 인터넷 익스플로러로 웹 호환성에서 가장 취약한 브라우저를 이용하는 우리나라는 더욱 말할 것도 없다. 인터넷 익스플로러에서 고수하는 고집이 얼마나 갈지는 장담할 수 없다. 우리나라에서 I..