SlideShare a Scribd company logo
아꿈사 오전반 스터디
자유발표 : WebGL




                      2011. 10. 29.
                      2012. 10. 23.
                            전효성
               itmentor@gmail.com
이번 발표에서 다루는 것들
• WebGL 등장 배경
• WebGL로 할 수 있는 것들
• WebGL에 대한 소개




                     2
WebGL 등장 배경
• 컴퓨팅 파워의 증가, GPU의 활용
• 웹 상에서 3D 요구




                        3
Web 3D의 역사
• VRML / X3D
  – 뷰어마다 보이는게 다름
  – 망했어요
• Collada
  – 최근 표준처럼 통용되는 3D모델 교환 형식
  – XML기반, 느리다
• WebGL
  – 최근 Khronos group에서 제정한 Web 3D를 지원
    하기 위한 API
  – 일부 웹 브라우저에서 사용이 가능하다.
                                        4
Web 3D로 어떤 일들을 할 수 있나?




                         5
6
Google Maps – MapsGL




                       7
Google:
WebGL Bookcase




                 8
PDF Viewer – CubicVR demo




                            9
Shader Toy




             10
Google I/O 2011: Building Game Development
  Tools with App Engine, GWT, and WebGL




                                             11
Firefox plugin - Tilt




                        12
Google chrome web store




                          13
WebGL, 실체는 무엇인가?




                   14
OpenGL related eco-system


     OpenGL
                     OpenCL
    OpenGL ES

      WebGL           WebCL
  (OpenGL ES 2.0)




  Visualization     Computation



                                  15
간단하게 말하면…



Web browser에서 javascript로 OpenGL
ES 2.0 API를 쓰게 하는 것




                                   16
WebGL에 없는 것
• Math library
• High level graphics API
• Immediate mode
 glBegin( GL_TRIANGLES );
 glVertex3f( 0.0f, 0.0f, 0.0f );
 glVertex3f( 1.0f, 0.0f, 0.0f );
 glVertex3f( 1.0f, 1.0f, 1.0f );
 glEnd();




                                   17
개발환경(IDE)
• 웹페이지 개발하는 IDE면 모든 OK
 – Eclipse
 – Titanium studio




                         18
코드를 구경해 봅시다.

• WebGL 사이트
  – http://learningwebgl.com/blog/?page_id=1217
• 한글 번역 사이트 :
  – http://firejune.com/1669/




                                                  19
웹에서 3D를 보여준다는 것은?
• 장점
 – 새로운 사용자 경험 제공
 – 빠른 성능


• 단점
 – 컨텐츠 비용 증가
 – 전력 소모 증가
 – 웹개발 + 3D 개발 지식 필요

• 이슈사항
 – 컨텐츠의 로딩 시간이 길다

                       20
진입장벽을 낮추기 위한 노력들

• 라이브러리
 – Three.js
 – GLGE
 – J3D
   • Unity exporter
 – 수 많은 WebGL기반 렌더링 라이브러리
 – 심지어 물리 엔진도 JS기반으로 있음(JigLibJS)
   • http://glge.org/demos/cardemo/


                                      21
WebGL의 문제점
•   초기 로딩 속도 문제
•   보안 문제
•   IE 미지원
•   안정성
•   완전하지 않은 모바일 브라우저 지원
    – iOS 5.0부터 지원 (iAd에서만 지원)
    – Android( 기본 브라우저에서 미지원 )


                                 22
Web 3D를 위한 다른 기술
• Flash 11
• Silverlight / ActiveX
• PC시장 게임 엔진에서 export
  – Unity Engine
  – Cry engine
  – Unreal engine
• Hybrid app
  – Titanium opengl module

                             23
결론
• 시간이 지나면 대부분에 웹브라우저에 장착 될 확률이 높
  다.
• Apple iOS는 정책적으로 막아놓음.
• MS는 지원 계획 없음. 답이 없다.
• 당장은 사용하기 제한적이지만, 눈여겨보면 좋은 기술.




                               24

More Related Content

What's hot

[22]Efficient and Testable MVVM pattern
[22]Efficient and Testable MVVM pattern[22]Efficient and Testable MVVM pattern
[22]Efficient and Testable MVVM pattern
NAVER Engineering
 
ネットワークの切り替えを感知する方法
ネットワークの切り替えを感知する方法ネットワークの切り替えを感知する方法
ネットワークの切り替えを感知する方法
Keisuke Yamaguchi
 
OpenStack Osloを使おう - cliff編
OpenStack Osloを使おう - cliff編OpenStack Osloを使おう - cliff編
OpenStack Osloを使おう - cliff編
Hideki Saito
 
[CB16] WireGuard:次世代耐乱用性カーネルネットワークトンネル by Jason Donenfeld
[CB16] WireGuard:次世代耐乱用性カーネルネットワークトンネル by Jason Donenfeld[CB16] WireGuard:次世代耐乱用性カーネルネットワークトンネル by Jason Donenfeld
[CB16] WireGuard:次世代耐乱用性カーネルネットワークトンネル by Jason Donenfeld
CODE BLUE
 
NVIDIA OpenGL in 2016
NVIDIA OpenGL in 2016NVIDIA OpenGL in 2016
NVIDIA OpenGL in 2016
Mark Kilgard
 
Reactを使ったYahoo!地図の技術刷新への挑戦 #yjbonfire
Reactを使ったYahoo!地図の技術刷新への挑戦 #yjbonfireReactを使ったYahoo!地図の技術刷新への挑戦 #yjbonfire
Reactを使ったYahoo!地図の技術刷新への挑戦 #yjbonfire
Yahoo!デベロッパーネットワーク
 
SIGGRAPH Asia 2008 Modern OpenGL
SIGGRAPH Asia 2008 Modern OpenGLSIGGRAPH Asia 2008 Modern OpenGL
SIGGRAPH Asia 2008 Modern OpenGL
Mark Kilgard
 
How the Universal Render Pipeline unlocks games for you - Unite Copenhagen 2019
How the Universal Render Pipeline unlocks games for you - Unite Copenhagen 2019How the Universal Render Pipeline unlocks games for you - Unite Copenhagen 2019
How the Universal Render Pipeline unlocks games for you - Unite Copenhagen 2019
Unity Technologies
 
.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素
Akira Inoue
 
오픈 소스 GIS와 OSGeo
오픈 소스 GIS와 OSGeo오픈 소스 GIS와 OSGeo
오픈 소스 GIS와 OSGeo
SANGHEE SHIN
 
GPU Container as a Serviceを実現するための最新OSS徹底比較 - OpenStack最新情報セミナー 2017年7月
GPU Container as a Serviceを実現するための最新OSS徹底比較 - OpenStack最新情報セミナー 2017年7月GPU Container as a Serviceを実現するための最新OSS徹底比較 - OpenStack最新情報セミナー 2017年7月
GPU Container as a Serviceを実現するための最新OSS徹底比較 - OpenStack最新情報セミナー 2017年7月
VirtualTech Japan Inc.
 
Deferred shading
Deferred shadingDeferred shading
Deferred shadingFrank Chao
 
이승재, 실시간 HTTP 양방향 통신, NDC2012
이승재, 실시간 HTTP 양방향 통신, NDC2012이승재, 실시간 HTTP 양방향 통신, NDC2012
이승재, 실시간 HTTP 양방향 통신, NDC2012devCAT Studio, NEXON
 
OpenGL 4.5 Update for NVIDIA GPUs
OpenGL 4.5 Update for NVIDIA GPUsOpenGL 4.5 Update for NVIDIA GPUs
OpenGL 4.5 Update for NVIDIA GPUs
Mark Kilgard
 
C# 継承フォームの作成
C# 継承フォームの作成C# 継承フォームの作成
C# 継承フォームの作成
Hiroki Takahashi
 
OpenGL ES EGL Spec&APIs
OpenGL ES EGL Spec&APIsOpenGL ES EGL Spec&APIs
OpenGL ES EGL Spec&APIs
Jungsoo Nam
 
Optimizing the Graphics Pipeline with Compute, GDC 2016
Optimizing the Graphics Pipeline with Compute, GDC 2016Optimizing the Graphics Pipeline with Compute, GDC 2016
Optimizing the Graphics Pipeline with Compute, GDC 2016
Graham Wihlidal
 
[Node-RED] ファンクションノードのデバッグどうしてる?
[Node-RED] ファンクションノードのデバッグどうしてる?[Node-RED] ファンクションノードのデバッグどうしてる?
[Node-RED] ファンクションノードのデバッグどうしてる?
Makoto SAKAI
 
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
Takashi Yoshinaga
 

What's hot (20)

[22]Efficient and Testable MVVM pattern
[22]Efficient and Testable MVVM pattern[22]Efficient and Testable MVVM pattern
[22]Efficient and Testable MVVM pattern
 
ネットワークの切り替えを感知する方法
ネットワークの切り替えを感知する方法ネットワークの切り替えを感知する方法
ネットワークの切り替えを感知する方法
 
OpenStack Osloを使おう - cliff編
OpenStack Osloを使おう - cliff編OpenStack Osloを使おう - cliff編
OpenStack Osloを使おう - cliff編
 
[CB16] WireGuard:次世代耐乱用性カーネルネットワークトンネル by Jason Donenfeld
[CB16] WireGuard:次世代耐乱用性カーネルネットワークトンネル by Jason Donenfeld[CB16] WireGuard:次世代耐乱用性カーネルネットワークトンネル by Jason Donenfeld
[CB16] WireGuard:次世代耐乱用性カーネルネットワークトンネル by Jason Donenfeld
 
NVIDIA OpenGL in 2016
NVIDIA OpenGL in 2016NVIDIA OpenGL in 2016
NVIDIA OpenGL in 2016
 
Reactを使ったYahoo!地図の技術刷新への挑戦 #yjbonfire
Reactを使ったYahoo!地図の技術刷新への挑戦 #yjbonfireReactを使ったYahoo!地図の技術刷新への挑戦 #yjbonfire
Reactを使ったYahoo!地図の技術刷新への挑戦 #yjbonfire
 
Light prepass
Light prepassLight prepass
Light prepass
 
SIGGRAPH Asia 2008 Modern OpenGL
SIGGRAPH Asia 2008 Modern OpenGLSIGGRAPH Asia 2008 Modern OpenGL
SIGGRAPH Asia 2008 Modern OpenGL
 
How the Universal Render Pipeline unlocks games for you - Unite Copenhagen 2019
How the Universal Render Pipeline unlocks games for you - Unite Copenhagen 2019How the Universal Render Pipeline unlocks games for you - Unite Copenhagen 2019
How the Universal Render Pipeline unlocks games for you - Unite Copenhagen 2019
 
.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素
 
오픈 소스 GIS와 OSGeo
오픈 소스 GIS와 OSGeo오픈 소스 GIS와 OSGeo
오픈 소스 GIS와 OSGeo
 
GPU Container as a Serviceを実現するための最新OSS徹底比較 - OpenStack最新情報セミナー 2017年7月
GPU Container as a Serviceを実現するための最新OSS徹底比較 - OpenStack最新情報セミナー 2017年7月GPU Container as a Serviceを実現するための最新OSS徹底比較 - OpenStack最新情報セミナー 2017年7月
GPU Container as a Serviceを実現するための最新OSS徹底比較 - OpenStack最新情報セミナー 2017年7月
 
Deferred shading
Deferred shadingDeferred shading
Deferred shading
 
이승재, 실시간 HTTP 양방향 통신, NDC2012
이승재, 실시간 HTTP 양방향 통신, NDC2012이승재, 실시간 HTTP 양방향 통신, NDC2012
이승재, 실시간 HTTP 양방향 통신, NDC2012
 
OpenGL 4.5 Update for NVIDIA GPUs
OpenGL 4.5 Update for NVIDIA GPUsOpenGL 4.5 Update for NVIDIA GPUs
OpenGL 4.5 Update for NVIDIA GPUs
 
C# 継承フォームの作成
C# 継承フォームの作成C# 継承フォームの作成
C# 継承フォームの作成
 
OpenGL ES EGL Spec&APIs
OpenGL ES EGL Spec&APIsOpenGL ES EGL Spec&APIs
OpenGL ES EGL Spec&APIs
 
Optimizing the Graphics Pipeline with Compute, GDC 2016
Optimizing the Graphics Pipeline with Compute, GDC 2016Optimizing the Graphics Pipeline with Compute, GDC 2016
Optimizing the Graphics Pipeline with Compute, GDC 2016
 
[Node-RED] ファンクションノードのデバッグどうしてる?
[Node-RED] ファンクションノードのデバッグどうしてる?[Node-RED] ファンクションノードのデバッグどうしてる?
[Node-RED] ファンクションノードのデバッグどうしてる?
 
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)
 

Viewers also liked

내 손에 픽셀을 쥐어다오
내 손에 픽셀을 쥐어다오내 손에 픽셀을 쥐어다오
내 손에 픽셀을 쥐어다오
KwangSam Kim
 
Mobile Augmented Reality (KT경제연구소 세미나)
Mobile Augmented Reality (KT경제연구소 세미나)Mobile Augmented Reality (KT경제연구소 세미나)
Mobile Augmented Reality (KT경제연구소 세미나)
DoubleMe, Inc.
 
[H3 2012] 키노트 - Backend platform의 미래, baas.io
[H3 2012] 키노트 - Backend platform의 미래, baas.io[H3 2012] 키노트 - Backend platform의 미래, baas.io
[H3 2012] 키노트 - Backend platform의 미래, baas.io
KTH, 케이티하이텔
 
AR tool - Vuforia
AR tool - VuforiaAR tool - Vuforia
AR tool - Vuforia
SeongSik Choi
 
Oauth 이해 (소셜로그인)
Oauth 이해 (소셜로그인)Oauth 이해 (소셜로그인)
Oauth 이해 (소셜로그인)
Eunsung Lim
 
모바일 엔진 개발기
모바일 엔진 개발기모바일 엔진 개발기
모바일 엔진 개발기
changehee lee
 

Viewers also liked (6)

내 손에 픽셀을 쥐어다오
내 손에 픽셀을 쥐어다오내 손에 픽셀을 쥐어다오
내 손에 픽셀을 쥐어다오
 
Mobile Augmented Reality (KT경제연구소 세미나)
Mobile Augmented Reality (KT경제연구소 세미나)Mobile Augmented Reality (KT경제연구소 세미나)
Mobile Augmented Reality (KT경제연구소 세미나)
 
[H3 2012] 키노트 - Backend platform의 미래, baas.io
[H3 2012] 키노트 - Backend platform의 미래, baas.io[H3 2012] 키노트 - Backend platform의 미래, baas.io
[H3 2012] 키노트 - Backend platform의 미래, baas.io
 
AR tool - Vuforia
AR tool - VuforiaAR tool - Vuforia
AR tool - Vuforia
 
Oauth 이해 (소셜로그인)
Oauth 이해 (소셜로그인)Oauth 이해 (소셜로그인)
Oauth 이해 (소셜로그인)
 
모바일 엔진 개발기
모바일 엔진 개발기모바일 엔진 개발기
모바일 엔진 개발기
 

Similar to WebGL

2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
Changhwan Yi
 
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망Sang Seok Lim
 
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
Sang Seok Lim
 
Social game and windows azure platform (final)
Social game and windows azure platform (final)Social game and windows azure platform (final)
Social game and windows azure platform (final)
정현 남
 
오픈소스 기반의 Digital Twin Platform mago3D의 과거, 현재 그리고 미래
오픈소스 기반의 Digital Twin Platform mago3D의 과거, 현재 그리고 미래오픈소스 기반의 Digital Twin Platform mago3D의 과거, 현재 그리고 미래
오픈소스 기반의 Digital Twin Platform mago3D의 과거, 현재 그리고 미래
park jinwoo
 
WebKit / Blink Community 동향 및 개발방향
WebKit / Blink Community 동향 및 개발방향WebKit / Blink Community 동향 및 개발방향
WebKit / Blink Community 동향 및 개발방향
Gyuyoung Kim
 
HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
Jun Ho Lee
 
GDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's NoteGDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's Note
Seok-yong Kim
 
Cloud ide를 이용한_모바일_개발의_가능성과_전망
Cloud ide를 이용한_모바일_개발의_가능성과_전망Cloud ide를 이용한_모바일_개발의_가능성과_전망
Cloud ide를 이용한_모바일_개발의_가능성과_전망Sung-tae Ryu
 
Web os 전략 0912
Web os 전략 0912Web os 전략 0912
Web os 전략 0912
우일 권
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page Application
Sangmin Yoon
 
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
Miyu Park
 
Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)Channy Yun
 
쉽게 풀어보는 WebGL
쉽게 풀어보는 WebGL쉽게 풀어보는 WebGL
쉽게 풀어보는 WebGL
Myung Woon Oh
 
Modern Android App Development
Modern Android App DevelopmentModern Android App Development
Modern Android App Development
Chi Hwan Choi
 
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER Engineering
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
Jae Sung Park
 
Weblockly 소개자료
Weblockly 소개자료Weblockly 소개자료
Weblockly 소개자료
Kay Sung Hyuk
 
지도 서비스용 웹앱 개발환경 사용기
지도 서비스용 웹앱 개발환경 사용기지도 서비스용 웹앱 개발환경 사용기
지도 서비스용 웹앱 개발환경 사용기
Q-Young Lee
 
mago3D 한국어 소개 자료
mago3D 한국어 소개 자료 mago3D 한국어 소개 자료
mago3D 한국어 소개 자료
SANGHEE SHIN
 

Similar to WebGL (20)

2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
 
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
HTML5 관점에서 본 2014 모바일 웹 앱 개발 동향과 사례 및 발전 방향 전망
 
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
 
Social game and windows azure platform (final)
Social game and windows azure platform (final)Social game and windows azure platform (final)
Social game and windows azure platform (final)
 
오픈소스 기반의 Digital Twin Platform mago3D의 과거, 현재 그리고 미래
오픈소스 기반의 Digital Twin Platform mago3D의 과거, 현재 그리고 미래오픈소스 기반의 Digital Twin Platform mago3D의 과거, 현재 그리고 미래
오픈소스 기반의 Digital Twin Platform mago3D의 과거, 현재 그리고 미래
 
WebKit / Blink Community 동향 및 개발방향
WebKit / Blink Community 동향 및 개발방향WebKit / Blink Community 동향 및 개발방향
WebKit / Blink Community 동향 및 개발방향
 
HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
HTML5 관점에서 본 2015년 웹개발 트렌드 및 인사이트
 
GDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's NoteGDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's Note
 
Cloud ide를 이용한_모바일_개발의_가능성과_전망
Cloud ide를 이용한_모바일_개발의_가능성과_전망Cloud ide를 이용한_모바일_개발의_가능성과_전망
Cloud ide를 이용한_모바일_개발의_가능성과_전망
 
Web os 전략 0912
Web os 전략 0912Web os 전략 0912
Web os 전략 0912
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page Application
 
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
 
Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)Mozilla 오픈 웹 모바일 플랫폼 (2012)
Mozilla 오픈 웹 모바일 플랫폼 (2012)
 
쉽게 풀어보는 WebGL
쉽게 풀어보는 WebGL쉽게 풀어보는 WebGL
쉽게 풀어보는 WebGL
 
Modern Android App Development
Modern Android App DevelopmentModern Android App Development
Modern Android App Development
 
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
 
Weblockly 소개자료
Weblockly 소개자료Weblockly 소개자료
Weblockly 소개자료
 
지도 서비스용 웹앱 개발환경 사용기
지도 서비스용 웹앱 개발환경 사용기지도 서비스용 웹앱 개발환경 사용기
지도 서비스용 웹앱 개발환경 사용기
 
mago3D 한국어 소개 자료
mago3D 한국어 소개 자료 mago3D 한국어 소개 자료
mago3D 한국어 소개 자료
 

More from Hyosung Jeon

windows via c++ Ch 5. Job
windows via c++ Ch 5. Jobwindows via c++ Ch 5. Job
windows via c++ Ch 5. Job
Hyosung Jeon
 
9장 도메인 주도 설계
9장 도메인 주도 설계9장 도메인 주도 설계
9장 도메인 주도 설계
Hyosung Jeon
 
Mongo db 복제(Replication)
Mongo db 복제(Replication)Mongo db 복제(Replication)
Mongo db 복제(Replication)
Hyosung Jeon
 
xUnitTestPattern/chapter12
xUnitTestPattern/chapter12xUnitTestPattern/chapter12
xUnitTestPattern/chapter12Hyosung Jeon
 
목적이 부여된 에이전트 행동
목적이 부여된 에이전트 행동목적이 부여된 에이전트 행동
목적이 부여된 에이전트 행동Hyosung Jeon
 

More from Hyosung Jeon (7)

Nodejs express
Nodejs expressNodejs express
Nodejs express
 
windows via c++ Ch 5. Job
windows via c++ Ch 5. Jobwindows via c++ Ch 5. Job
windows via c++ Ch 5. Job
 
9장 도메인 주도 설계
9장 도메인 주도 설계9장 도메인 주도 설계
9장 도메인 주도 설계
 
Mongo db 복제(Replication)
Mongo db 복제(Replication)Mongo db 복제(Replication)
Mongo db 복제(Replication)
 
xUnitTestPattern/chapter12
xUnitTestPattern/chapter12xUnitTestPattern/chapter12
xUnitTestPattern/chapter12
 
Map reduce
Map reduceMap reduce
Map reduce
 
목적이 부여된 에이전트 행동
목적이 부여된 에이전트 행동목적이 부여된 에이전트 행동
목적이 부여된 에이전트 행동
 

WebGL

  • 1. 아꿈사 오전반 스터디 자유발표 : WebGL 2011. 10. 29. 2012. 10. 23. 전효성 itmentor@gmail.com
  • 2. 이번 발표에서 다루는 것들 • WebGL 등장 배경 • WebGL로 할 수 있는 것들 • WebGL에 대한 소개 2
  • 3. WebGL 등장 배경 • 컴퓨팅 파워의 증가, GPU의 활용 • 웹 상에서 3D 요구 3
  • 4. Web 3D의 역사 • VRML / X3D – 뷰어마다 보이는게 다름 – 망했어요 • Collada – 최근 표준처럼 통용되는 3D모델 교환 형식 – XML기반, 느리다 • WebGL – 최근 Khronos group에서 제정한 Web 3D를 지원 하기 위한 API – 일부 웹 브라우저에서 사용이 가능하다. 4
  • 5. Web 3D로 어떤 일들을 할 수 있나? 5
  • 6. 6
  • 7. Google Maps – MapsGL 7
  • 9. PDF Viewer – CubicVR demo 9
  • 11. Google I/O 2011: Building Game Development Tools with App Engine, GWT, and WebGL 11
  • 12. Firefox plugin - Tilt 12
  • 13. Google chrome web store 13
  • 15. OpenGL related eco-system OpenGL OpenCL OpenGL ES WebGL WebCL (OpenGL ES 2.0) Visualization Computation 15
  • 16. 간단하게 말하면… Web browser에서 javascript로 OpenGL ES 2.0 API를 쓰게 하는 것 16
  • 17. WebGL에 없는 것 • Math library • High level graphics API • Immediate mode glBegin( GL_TRIANGLES ); glVertex3f( 0.0f, 0.0f, 0.0f ); glVertex3f( 1.0f, 0.0f, 0.0f ); glVertex3f( 1.0f, 1.0f, 1.0f ); glEnd(); 17
  • 18. 개발환경(IDE) • 웹페이지 개발하는 IDE면 모든 OK – Eclipse – Titanium studio 18
  • 19. 코드를 구경해 봅시다. • WebGL 사이트 – http://learningwebgl.com/blog/?page_id=1217 • 한글 번역 사이트 : – http://firejune.com/1669/ 19
  • 20. 웹에서 3D를 보여준다는 것은? • 장점 – 새로운 사용자 경험 제공 – 빠른 성능 • 단점 – 컨텐츠 비용 증가 – 전력 소모 증가 – 웹개발 + 3D 개발 지식 필요 • 이슈사항 – 컨텐츠의 로딩 시간이 길다 20
  • 21. 진입장벽을 낮추기 위한 노력들 • 라이브러리 – Three.js – GLGE – J3D • Unity exporter – 수 많은 WebGL기반 렌더링 라이브러리 – 심지어 물리 엔진도 JS기반으로 있음(JigLibJS) • http://glge.org/demos/cardemo/ 21
  • 22. WebGL의 문제점 • 초기 로딩 속도 문제 • 보안 문제 • IE 미지원 • 안정성 • 완전하지 않은 모바일 브라우저 지원 – iOS 5.0부터 지원 (iAd에서만 지원) – Android( 기본 브라우저에서 미지원 ) 22
  • 23. Web 3D를 위한 다른 기술 • Flash 11 • Silverlight / ActiveX • PC시장 게임 엔진에서 export – Unity Engine – Cry engine – Unreal engine • Hybrid app – Titanium opengl module 23
  • 24. 결론 • 시간이 지나면 대부분에 웹브라우저에 장착 될 확률이 높 다. • Apple iOS는 정책적으로 막아놓음. • MS는 지원 계획 없음. 답이 없다. • 당장은 사용하기 제한적이지만, 눈여겨보면 좋은 기술. 24