O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
쉽게 풀어보는
WebGL
projectBS 오명운
웹지엘이냐 웹지Hell이냐..
Naver D2 발표
목 차
• WebGL, 뭐냐?
• WebGL, 왜 써?
• WebGL, 어따 써?
• WebGL, 할 수 있나?
• WebGL, 맛만 보자
• WebGL, 뛰어들기
WebGL, 뭐냐?
 웹 브라우저에서
 아무런 플러그인 없이
 3D 그래픽을 그릴 수 있는
 사실 상의 표준 3D 그래픽 라이브러리
WebGL은 뭐다?
 W3C에서 관리하지 않음
• 당연히 W3C HTML5 스펙에 WebGL 없음
사실 상의 표준?
사실 상의 표준?
사용률 기준 글로벌 브라우저
75% 거의 다 WebGL 지원
WebGL, 왜 써?
 GPU를 쓴다
• 그리는 성능 그 자체가 뛰어나다
• CPU에게 더 많은 여유를 준다
더 훨씬 나은 성능X
그리는 성능 그 자체
CPU vs GPU
http://youtu.be/-P28LKWTzrI
그리는 성능 그 자체
Canvas2D vs WebGL
CPU에게 더 많은 여유
 non-blocking
• JavaScript는
• WebGL API인 gl.draw***() 호출로
• 그리기를 GPU에 위임하고
• 그리기 결과 대기 없이
• 바로 다음 라인의 JavaS...
WebGL, 어따 써?
게임.. 너무 당연하다
Data Visualization
Big Data → Realtime Big Data
이모 : 고모
=
엄마 : ??
Ent. Java Architecture : 제니퍼소프트
=
Realtime Big Data : Data Visualization
이모 : 고모
=
엄마 : 아빠
Data Visualization 사례
https://developers.google.com/events/io/sessions/327631300
다양한 웹 기반 에디터
 Text Editor
 Graph Editor
 IDE
 Photoshop
 AfterEffect
 음악 편집
 뮤직 비디오
설치형 Native App보다
Cloud형 Web App...
외쿡 일자리
WebGL, 할 수 있나?
환경은 이미 지원
남은 건 공부
 GLSL(OpenGL Shading Language)
 수학(행렬, 삼각함수, …)
쉽게 쓰기
 Three.js
 Screen.js
 PhiloGL
 GLGE
 … 많음
WebGL 계의
jQuery
WebGL, 맛만 보자
큰 흐름
Hello Triangle
Canvas에서 WebGL Context 가져오기
Viewport 초기화
Shader 소스 컴파일, Shader Program 생성
삼각형 정보 생성
Shader Program에 삼각형 정보 ...
WebGL, 뛰어들기
사랑스런 우리말
 http://www.bswebgl.com/
 https://github.com/hanmomhanda/WebGL
-Study/
 https://developer.mozilla.org/ko/docs/...
울렁스런 외국말
 http://beginningwebgl.com/
 http://learningwebgl.com/blog/?page_id=
1217
 https://developer.mozilla.org/en-
U...
볼거리
 http://www.chromeexperiments.com/webgl/
 https://developer.mozilla.org/ko/demos/ta
g/tech:webgl
 http://webglsampl...
어쩌면 소모임을 만들지도..
Q&A는
시원하게 생략!!
감사합니다!
Próximos SlideShares
Carregando em…5
×

쉽게 풀어보는 WebGL

5.853 visualizações

Publicada em

WebGL Introduction
WebGL 소개

Publicada em: Software
  • I ordered in ⇒ www.HelpWriting.net ⇐ I know exactly that I can trust them.They can help you with any kind of assignment - from high school essay to PhD dissertation. On the left you can see a detailed list of our services. They can write from scratch according to your instructions.Edit and proofread your paper.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/369VOVb ♥♥♥
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Dating direct: ❤❤❤ http://bit.ly/369VOVb ❤❤❤
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

쉽게 풀어보는 WebGL

  1. 1. 쉽게 풀어보는 WebGL projectBS 오명운
  2. 2. 웹지엘이냐 웹지Hell이냐.. Naver D2 발표
  3. 3. 목 차 • WebGL, 뭐냐? • WebGL, 왜 써? • WebGL, 어따 써? • WebGL, 할 수 있나? • WebGL, 맛만 보자 • WebGL, 뛰어들기
  4. 4. WebGL, 뭐냐?
  5. 5.  웹 브라우저에서  아무런 플러그인 없이  3D 그래픽을 그릴 수 있는  사실 상의 표준 3D 그래픽 라이브러리 WebGL은 뭐다?
  6. 6.  W3C에서 관리하지 않음 • 당연히 W3C HTML5 스펙에 WebGL 없음 사실 상의 표준?
  7. 7. 사실 상의 표준? 사용률 기준 글로벌 브라우저 75% 거의 다 WebGL 지원
  8. 8. WebGL, 왜 써?
  9. 9.  GPU를 쓴다 • 그리는 성능 그 자체가 뛰어나다 • CPU에게 더 많은 여유를 준다 더 훨씬 나은 성능X
  10. 10. 그리는 성능 그 자체 CPU vs GPU
  11. 11. http://youtu.be/-P28LKWTzrI
  12. 12. 그리는 성능 그 자체 Canvas2D vs WebGL
  13. 13. CPU에게 더 많은 여유  non-blocking • JavaScript는 • WebGL API인 gl.draw***() 호출로 • 그리기를 GPU에 위임하고 • 그리기 결과 대기 없이 • 바로 다음 라인의 JavaScript 수행
  14. 14. WebGL, 어따 써?
  15. 15. 게임.. 너무 당연하다
  16. 16. Data Visualization Big Data → Realtime Big Data
  17. 17. 이모 : 고모 = 엄마 : ??
  18. 18. Ent. Java Architecture : 제니퍼소프트 = Realtime Big Data : Data Visualization 이모 : 고모 = 엄마 : 아빠
  19. 19. Data Visualization 사례
  20. 20. https://developers.google.com/events/io/sessions/327631300
  21. 21. 다양한 웹 기반 에디터  Text Editor  Graph Editor  IDE  Photoshop  AfterEffect  음악 편집  뮤직 비디오 설치형 Native App보다 Cloud형 Web App이 좋은 점 유지 관리성 ↑ 과금 편리성 ↑ 불법 복제 손실 ↓
  22. 22. 외쿡 일자리
  23. 23. WebGL, 할 수 있나?
  24. 24. 환경은 이미 지원
  25. 25. 남은 건 공부  GLSL(OpenGL Shading Language)  수학(행렬, 삼각함수, …)
  26. 26. 쉽게 쓰기  Three.js  Screen.js  PhiloGL  GLGE  … 많음 WebGL 계의 jQuery
  27. 27. WebGL, 맛만 보자
  28. 28. 큰 흐름
  29. 29. Hello Triangle Canvas에서 WebGL Context 가져오기 Viewport 초기화 Shader 소스 컴파일, Shader Program 생성 삼각형 정보 생성 Shader Program에 삼각형 정보 전달 및 gl.draw***() 호출 Shader 소스 작성 요 세 놈은 소스가 늘 거의 같다 (딱히 할 게 없다)
  30. 30. WebGL, 뛰어들기
  31. 31. 사랑스런 우리말  http://www.bswebgl.com/  https://github.com/hanmomhanda/WebGL -Study/  https://developer.mozilla.org/ko/docs/W eb/WebGL (목차만 우리말)
  32. 32. 울렁스런 외국말  http://beginningwebgl.com/  http://learningwebgl.com/blog/?page_id= 1217  https://developer.mozilla.org/en- US/docs/Web/WebGL
  33. 33. 볼거리  http://www.chromeexperiments.com/webgl/  https://developer.mozilla.org/ko/demos/ta g/tech:webgl  http://webglsamples.org/
  34. 34. 어쩌면 소모임을 만들지도..
  35. 35. Q&A는 시원하게 생략!! 감사합니다!

×