WebGL + node.js + CUDA를 이용한 서버사이드 렌더링
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 4,178 views

 

Statistics

Views

Total Views
4,178
Views on SlideShare
4,161
Embed Views
17

Actions

Likes
11
Downloads
24
Comments
0

3 Embeds 17

https://twitter.com 14
http://nodeslide.herokuapp.com 2
https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • WEBGL + NODE.JS + CUDA를 이용한 서버사이드 렌더링 Kasa Study (2012/10/25) 김혁Tuesday, October 30, 12
  • 목적 설치 없는 클라이언트 3D 툴 클라우드 기반 렌더링 서버(Render Farm)Tuesday, October 30, 12
  • 현실 타협 (개인 프로젝트입니다... -ㅅ-;; )Tuesday, October 30, 12
  • 목적 WebGL 을 이용한 3D 모델 뷰어! (카메라 조작, 조명 조작) node.js 를 이용한 서버 + CUDA를 이용한 렌더링 엔진 프로토타입 버전은 일단 1서버 1 client.Tuesday, October 30, 12
  • Tuesday, October 30, 12
  • Cl ickTuesday, October 30, 12
  • Cl ickTuesday, October 30, 12
  • Cl ickTuesday, October 30, 12
  • Cl ickTuesday, October 30, 12
  • Cl ickTuesday, October 30, 12
  • Cl ickTuesday, October 30, 12
  • 발표 내용 사용한 기술들에 대한 간략한 소개 구현 과정 차후 기술 발전 동향에 관한 논의Tuesday, October 30, 12
  • 필요한 기술들 웹 3D 웹 기반 텍스트 & 바이너리 데이터 전송 웹 서버에서 CUDA 사용Tuesday, October 30, 12
  • 구현 Overview Client Web Server (Internet Browser) (node.js)Tuesday, October 30, 12
  • 구현 Overview Client Web Server (Internet Browser) (node.js) WebGL (Three.js)Tuesday, October 30, 12
  • 구현 Overview Client Web Server (Internet Browser) (node.js) WebGL (Three.js) BinaryJS BinaryJS + + BinaryImageJS BinaryImageJSTuesday, October 30, 12
  • 구현 Overview Client Web Server (Internet Browser) AJAX (node.js) WebGL (Three.js) BinaryJS BinaryJS + + BinaryImageJS BinaryImageJSTuesday, October 30, 12
  • 구현 Overview Client Web Server (Internet Browser) AJAX (node.js) WebGL (Three.js) BinaryJS 바이너리 데이터 BinaryJS + + BinaryImageJS BinaryImageJSTuesday, October 30, 12
  • 구현 Overview Web Server node C++ addon (node.js) for Hyper3D-GI Hyper3D-GI (CUDA Rendering Engine)Tuesday, October 30, 12
  • 구현 Overview 명령 (Load Scene, Render) Web Server node C++ addon (node.js) for Hyper3D-GI Hyper3D-GI (CUDA Rendering Engine)Tuesday, October 30, 12
  • 구현 Overview 명령 (Load Scene, Render) Web Server node C++ addon (node.js) for Hyper3D-GI Hyper3D-GI (CUDA Rendering Engine)Tuesday, October 30, 12
  • 구현 Overview 명령 (Load Scene, Render) Web Server node C++ addon (node.js) for Hyper3D-GI Hyper3D-GI (CUDA Rendering Engine)Tuesday, October 30, 12
  • 구현 Overview 명령 (Load Scene, Render) Web Server node C++ addon (node.js) for Hyper3D-GI Hyper3D-GI (CUDA Rendering Engine)Tuesday, October 30, 12
  • 구현 Overview 명령 (Load Scene, Render) Web Server node C++ addon (node.js) for Hyper3D-GI Hyper3D-GI (CUDA Rendering Engine)Tuesday, October 30, 12
  • 구현 Overview 명령 (Load Scene, Render) Web Server node C++ addon (node.js) for Hyper3D-GI 데이터 (Scene, 이미지) Hyper3D-GI (CUDA Rendering Engine)Tuesday, October 30, 12
  • 사용한 기술들 WebGL ( Three.js ) - 3D Viewer + Postprocessing node.js node.js C++ 모듈 CUDA 엔진 AJAX (Asynchronous Javascript and XML) socket.io (BinaryJS)Tuesday, October 30, 12
  • WebGL 웹에서 돌아가는 OpenGL ES 2.0 Javascript API Internet Explorer 는 지원 안함 버전 1.0 스펙은 2011년 2월 만들어짐. 아직 발전 중Tuesday, October 30, 12
  • Three.js WebGL을 쉽게 사용할 수 있도록 도와주는 Javascript 라이브러리 귀찮은 작업들이 모두 감춰져있어서 작업하기 용이함 많은 프로젝트에서 사용 생각보다 많은 기능들을 지원하고 있음Tuesday, October 30, 12
  • Three.js 예제 Featured Projects: http://mrdoob.github.com/three.js/ Car Visualizer: http://carvisualizer.plus360degrees.com/threejs/Tuesday, October 30, 12
  • 그 외 클라이언트 라이브러리 jQuery jQuery UI dat-gui: HTML & Javascript UI 컨트롤러 라이브러리Tuesday, October 30, 12
  • Tuesday, October 30, 12
  • jQuery UITuesday, October 30, 12
  • dat-guiTuesday, October 30, 12
  • node.js 구글의 V8 엔진을 기반으로한 네트워크 어플리케이션 이벤트 기반, 넌블러킹 I/O 싱글 쓰레드 기반, 가볍고 빠름 전반적으로 비동기 처리 다양한 모듈을 사용 많은 기능들을 사용할 수 있음 (eg. BinaryJS)Tuesday, October 30, 12
  • 싱글 쓰레드, 비동기 처리 Hyper3D-Web - server/web.js https://github.com/Hybrid0/Hyper3D-Web/blob/master/server/web.js sendImageFile function (참고: web.js는 차후 server.js로 파일 이름이 변경 될 예정)Tuesday, October 30, 12
  • node C++ addon 윈도우에서는 node 를 빌드해야함 (리눅스, 맥에서는 node-waf로 매우 간단하게 가능) 빌드한 node.lib를 이용해서 C++ 함수를 호출해주는 것이 목적 비동기 처리의 장점을 그대로 얻어올 수 있음 내부의 블러킹 처리는 자동으로 별도의 쓰레드로 관리 됨Tuesday, October 30, 12
  • node C++ addon Hyper3D-Web - server/Hyper3D-GI.node/Hyper3D-GI.Addon.cpp https://github.com/Hybrid0/Hyper3D-Web/blob/master/server/Hyper3D- GI.node/Hyper3D-GI_Addon.cppTuesday, October 30, 12
  • Hyper3D-GI 오프라인 렌더링용 엔진 현재 CUDA 위주로 작업 중 현재 소스 상태는 .... &@*!)@#&)!@!)(!_&!@#(!@^ github에 올라가 있는 소스는 상당히 예전 소스Tuesday, October 30, 12
  • BinaryJS socket.io (web socket)를 이용하여 바이너리 데이터를 주고 받을 수 있도 록 하는 node 모듈 BinaryJS를 이용하여 이미지를 편리하게 주고 받을 수 있도록 하는 BinaryImageJS 를 추가로 제작하였음 (Three.js 텍스쳐로 변환) 데이터 전송시 meta 데이터로 JSON 정보를 함께 보낼 수 있음Tuesday, October 30, 12
  • 데이터 전송의 예 - 렌더링 요청 { 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 }Tuesday, October 30, 12
  • 데이터 전송의 예 - 렌더링 요청 BinaryJS로는 JSON을 그대로 보낼 수 있음 (바이너리 데이터는 빈 배열) AJAX로 요청하는 것도 좋음Tuesday, October 30, 12
  • 데이터 전송의 예 - 이미지 데이터 전송은 바이너리 데이터와 meta (JSON) 데이터로 이루어짐 meta 데이터를 통해서 어떤 데이터인지를 판별함Tuesday, October 30, 12
  • 데이터 전송의 예 - 이미지 데이터 meta = { imageInfo: { width: 800, height: 400, dataFormat: BinaryImageJS.BinaryDataFormat.UINT8, targetDataType: BinaryImageJS.TargetDataType.THREE_JS_TEXTURE } }Tuesday, October 30, 12
  • 간단한 시연 (을 통한 동작 과정 설명) http://youtu.be/ww79ewuQjd8Tuesday, October 30, 12
  • Psudo-서버를 이용한 데모Tuesday, October 30, 12
  • 데모 이미지Tuesday, October 30, 12
  • 데모 이미지Tuesday, October 30, 12
  • 데모 이미지Tuesday, October 30, 12
  • 데모 이미지Tuesday, October 30, 12
  • 데모 이미지Tuesday, October 30, 12
  • 데모 이미지Tuesday, October 30, 12
  • 포스트프로세싱Tuesday, October 30, 12
  • 포스트프로세싱Tuesday, October 30, 12
  • 포스트프로세싱Tuesday, October 30, 12
  • 포스트프로세싱Tuesday, October 30, 12
  • 포스트프로세싱Tuesday, October 30, 12
  • 차후 계획 MLT/PPM 렌더링 지원 포스트프로세싱 강화 Scene 업로드 처리 조명 컨트롤, 재질 수정 Multiple-client (세션과 리소스 관리) 등등...Tuesday, October 30, 12
  • 외부 라이브러리 node (js) BinaryJS: Three.js NVIDIA CUDATuesday, October 30, 12
  • 소스는 작업하면서 올리는 중 (언젠가는 올라가...겠죠 -ㅅ-;; ) BinaryImageJS: https://github.com/Hybrid0/BinaryImageJS BinaryJS를 이용해서 이미지를 전송하는 용도의 간단한 모듈 Hyper3D-GI: https://github.com/Hybrid0/Hyper3D-GI 렌더링 엔진 (현재 소스 코드는 로컬에서만 작업중) Hyper3D-Web: https://github.com/Hybrid0/Hyper3D-Web node.js 관련 코드들Tuesday, October 30, 12
  • 감사합니다 (Q&A)Tuesday, October 30, 12