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.

발표 내용

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

구현 과정

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

필요한 기술들

웹 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

(Internet Browser)

WebGL (Three.js)

Web Server(node.js)

BinaryJS+

BinaryImageJS

BinaryJS+

BinaryImageJS

바이너리 데이터

구현 Overview

Hyper3D-GI(CUDA Rendering Engine)

node C++ addonfor Hyper3D-GI

Web Server(node.js)

구현 Overview명령

(Load Scene, Render)

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)

웹에서 돌아가는 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/

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

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로 파일 이름이 변경 될 예정)

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

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 관련 코드들

감사합니다( Q & A )

webgl + node.js + cuda를 이용한 서버사이드 렌더링

Technology

hello, node.js

빠르고 편리한 렌더링 :: 정우근 :: aws summit...

hyper render - 차상훈, 원동연 (메가존) :: aws...

canvas, svg, webgl, css3, webevent

webgl für geospatial

html 5 & webgl (spanish version)

게임 개발을 위한 렌더링 기법 한성환

렌더링 가속화 기술 동향 - github...

palestra node.js

렌더링 #7 (따라하기 #4) - t1.daumcdn.net

hpc visualization with webgl

글꼴 렌더링 이야기

webgl tutorijal

datenvisualisierung mit webgl (three.js)

learning webglで学ぶwebgl入門

integrare webgl in dezvoltarea web

webgl 20150428

webgl 기술동향 2011.8

ndc2016 프로젝트 a1의 aaa급 캐릭터 렌더링 기술

Практическое применение webgl