WebGL + node.js + CUDA를 이용한 서버사이드 렌더링

WEBGL + NODE.JS + CUDA를이용한

서버사이드 렌더링

Kasa Study (2012/10/25)김혁

Tuesday, October 30, 12

목적

설치 없는 클라이언트 3D 툴

클라우드 기반 렌더링 서버(Render Farm)


현실 타협(개인 프로젝트입니다... -ㅅ-;; )


목적

WebGL 을 이용한 3D 모델 뷰어! (카메라 조작, 조명 조작)

node.js 를 이용한 서버 + CUDA를 이용한 렌더링 엔진

프로토타입 버전은 일단 1서버 1 client.



Click


Click


Click


Click


Click


Click


발표 내용

사용한 기술들에 대한 간략한 소개

구현 과정

차후 기술 발전 동향에 관한 논의


필요한 기술들

웹 3D

웹 기반 텍스트 & 바이너리 데이터 전송

웹 서버에서 CUDA 사용


구현 OverviewClient

(Internet Browser)Web Server(node.js)



(Internet Browser)

WebGL (Three.js)

Web Server(node.js)



(Internet Browser)

WebGL (Three.js)

Web Server(node.js)

BinaryJS+

BinaryImageJS

BinaryJS+

BinaryImageJS



(Internet Browser)

WebGL (Three.js)

Web Server(node.js)

BinaryJS+

BinaryImageJS

BinaryJS+

BinaryImageJS

AJAX



(Internet Browser)

WebGL (Three.js)

Web Server(node.js)

BinaryJS+

BinaryImageJS

BinaryJS+

BinaryImageJS

AJAX

바이너리 데이터


구현 Overview

Hyper3D-GI(CUDA Rendering Engine)

node C++ addonfor Hyper3D-GI

Web Server(node.js)


구현 Overview명령

(Load Scene, Render)



Web Server(node.js)






Web Server(node.js)






Web Server(node.js)






Web Server(node.js)






Web Server(node.js)






Web Server(node.js)

데이터(Scene, 이미지)


사용한 기술들

WebGL ( Three.js ) - 3D Viewer + Postprocessing

node.js

node.js C++ 모듈

CUDA 엔진

AJAX (Asynchronous Javascript and XML)

socket.io (BinaryJS)


WebGL

웹에서 돌아가는 OpenGL ES 2.0

Javascript API

Internet Explorer 는 지원 안함

버전 1.0 스펙은 2011년 2월 만들어짐. 아직 발전 중


Three.js

WebGL을 쉽게 사용할 수 있도록 도와주는 Javascript 라이브러리

귀찮은 작업들이 모두 감춰져있어서 작업하기 용이함

많은 프로젝트에서 사용

생각보다 많은 기능들을 지원하고 있음


Three.js 예제

Featured Projects: http://mrdoob.github.com/three.js/

Car Visualizer: http://carvisualizer.plus360degrees.com/threejs/


http://mrdoob.github.com/three.js/

http://mrdoob.github.com/three.js/

http://carvisualizer.plus360degrees.com/threejs/

http://carvisualizer.plus360degrees.com/threejs/

그 외 클라이언트 라이브러리

jQuery

jQuery UI

dat-gui: HTML & Javascript UI 컨트롤러 라이브러리



jQuery UI


dat-gui


node.js

구글의 V8 엔진을 기반으로한 네트워크 어플리케이션

이벤트 기반, 넌블러킹 I/O

싱글 쓰레드 기반, 가볍고 빠름

전반적으로 비동기 처리

다양한 모듈을 사용 많은 기능들을 사용할 수 있음 (eg. BinaryJS)


싱글 쓰레드, 비동기 처리

Hyper3D-Web - server/web.jshttps://github.com/Hybrid0/Hyper3D-Web/blob/master/server/web.js

sendImageFile function

(참고: web.js는 차후 server.js로 파일 이름이 변경 될 예정)


http://web.js

http://web.js

https://github.com/Hybrid0/Hyper3D-Web/blob/master/server/web.js

https://github.com/Hybrid0/Hyper3D-Web/blob/master/server/web.js

http://web.js

http://web.js

node C++ addon

윈도우에서는 node 를 빌드해야함(리눅스, 맥에서는 node-waf로 매우 간단하게 가능)

빌드한 node.lib를 이용해서 C++ 함수를 호출해주는 것이 목적

비동기 처리의 장점을 그대로 얻어올 수 있음

내부의 블러킹 처리는 자동으로 별도의 쓰레드로 관리 됨


node C++ addon

Hyper3D-Web - server/Hyper3D-GI.node/Hyper3D-GI.Addon.cpphttps://github.com/Hybrid0/Hyper3D-Web/blob/master/server/Hyper3D-GI.node/Hyper3D-GI_Addon.cpp


https://github.com/Hybrid0/Hyper3D-Web/blob/master/server/Hyper3D-GI.node/Hyper3D-GI_Addon.cpp




Hyper3D-GI

오프라인 렌더링용 엔진

현재 CUDA 위주로 작업 중

현재 소스 상태는 .... &@*!)@#&)!@!)(!_&!@#(!@^

github에 올라가 있는 소스는 상당히 예전 소스


BinaryJS

socket.io (web socket)를 이용하여 바이너리 데이터를 주고 받을 수 있도록 하는 node 모듈

BinaryJS를 이용하여 이미지를 편리하게 주고 받을 수 있도록 하는 BinaryImageJS 를 추가로 제작하였음 (Three.js 텍스쳐로 변환)

데이터 전송시 meta 데이터로 JSON 정보를 함께 보낼 수 있음


데이터 전송의 예 - 렌더링 요청{ command: 'render', renderMethod: 'raytracing', camera: { position: [ 297.0508766427297, 163.66725462109272, 175.97522643426097 ], direction: [ -0.4801681339740753, -0.11271892488002777, -0.8699040412902832 ], upDirection: [ -0.1005520448088646, 0.9922450184822083, -0.07306887209415436 ], aspectRatio: 2, fov: 45 }, screenWidth: 800, screenHeight: 400 }


데이터 전송의 예 - 렌더링 요청

BinaryJS로는 JSON을 그대로 보낼 수 있음(바이너리 데이터는 빈 배열)

AJAX로 요청하는 것도 좋음


데이터 전송의 예 - 이미지 데이터

전송은 바이너리 데이터와 meta (JSON) 데이터로 이루어짐

meta 데이터를 통해서 어떤 데이터인지를 판별함


데이터 전송의 예 - 이미지 데이터

meta = { imageInfo: { width: 800, height: 400, dataFormat: BinaryImageJS.BinaryDataFormat.UINT8, targetDataType: BinaryImageJS.TargetDataType.THREE_JS_TEXTURE }}


간단한 시연(을 통한 동작 과정 설명)

http://youtu.be/ww79ewuQjd8




Psudo-서버를 이용한 데모


데모 이미지


데모 이미지


데모 이미지


데모 이미지


데모 이미지


데모 이미지


포스트프로세싱










차후 계획MLT/PPM 렌더링 지원

포스트프로세싱 강화

Scene 업로드 처리

조명 컨트롤, 재질 수정

Multiple-client (세션과 리소스 관리)

등등...


외부 라이브러리

node (js)

BinaryJS:

Three.js

NVIDIA CUDA


소스는 작업하면서 올리는 중(언젠가는 올라가...겠죠 -ㅅ-;; )

BinaryImageJS: https://github.com/Hybrid0/BinaryImageJS BinaryJS를 이용해서 이미지를 전송하는 용도의 간단한 모듈

Hyper3D-GI: https://github.com/Hybrid0/Hyper3D-GI렌더링 엔진 (현재 소스 코드는 로컬에서만 작업중)

Hyper3D-Web: https://github.com/Hybrid0/Hyper3D-Webnode.js 관련 코드들


https://github.com/Hybrid0/BinaryImageJS

https://github.com/Hybrid0/BinaryImageJS

https://github.com/Hybrid0/Hyper3D-GI

https://github.com/Hybrid0/Hyper3D-GI

https://github.com/Hybrid0/Hyper3D-Web

https://github.com/Hybrid0/Hyper3D-Web

감사합니다( Q & A )


Technology

WebGL + node.js + CUDA를 이용한 서버사이드 렌더링