웹GL

WebGL
웹GL
WebGL Logo.svg
원본 작성자모질라 재단
개발자크로노스 WebGL 워킹 그룹
초기 릴리즈2011년 3월 3일; 11년 전(2011-03-03)[1]
안정적 해제
2.0 / 2017년 1월 17일; 5년 전(2017-01-17)
플랫폼크로스 플랫폼
다음에서 사용 가능영어
유형API
웹사이트www.khronos.org/webgl/
HTML
비교

WebGL(Web Graphics Library)은 플러그인을 사용하지 않고도 호환 가능한 웹 브라우저 내에서 대화형 2D 및 3D 그래픽을 렌더링할 수 있는 자바스크립트 API이다.[2]WebGL은 다른 웹 표준과 완벽하게 통합되어 있어 웹 페이지 캔버스의 일부로 물리학과 영상 처리 및 효과를 GPU 가속화할 수 있다.WebGL 요소는 다른 HTML 요소와 혼합될 수 있으며 페이지 또는 페이지 배경의 다른 부분과 조합될 수 있다.[3]

WebGL 프로그램은 C 또는 C++와 유사한 언어인 OpenGL ES Shading Language(GLSL ES)로 작성된 제어 코드와 셰이더 코드로 구성되며 컴퓨터의 GPU(그래픽 처리 장치)에서 실행된다.웹GL은 비영리 크로노스 그룹에 의해 설계되고 유지된다.[4]

2022년 2월 9일 크로노스 그룹은 모든 주요 브라우저에 대한 WebGL 2.0 지원을 발표했다.[5]

디자인

WebGL 1.0은 OpenGL ES 2.0을 기반으로 3D 그래픽용 API를 제공한다.[6]HTML5 캔버스 요소를 사용하며, DOM(Document Object Model) 인터페이스를 이용하여 접속한다.

WebGL 2.0은 OpenGL ES 3.0을 기반으로 하며 WebGL 1.0의 많은 선택적 확장을 보장하고 새로운 API를 공개한다.[7]자동 메모리 관리는 자바스크립트에 의해 암묵적으로 제공된다.[4]

WebGL은 OpenGL ES 2.0과 마찬가지로 OpenGL 1.0에서 도입되고 OpenGL 3.0에서 사용되지 않는 고정 기능 API가 없다.필요한 경우 이 기능은 최종 개발자가 쉐이더 코드를 제공하고 자바스크립트에서 데이터 바인딩을 구성하여 구현해야 한다.

WebGL의 셰이더는 GLSL로 직접 표현되며 WebGL API로 텍스트 문자열로 전달된다.WebGL 구현은 이러한 셰이더 지침을 GPU 코드로 컴파일한다.이 코드는 API를 통해 전송되는 각 정점 및 화면에 래스터화된 각 픽셀에 대해 실행된다.

역사

웹GL은 모질라에서 블라디미르 부키치예비치가 시작한 캔버스 3D 실험에서 발전했다.부키치예비치는 2006년 캔버스 3D 시제품을 처음 시연했다.2007년 말까지, 모질라와[8][9] 오페라 모두 그들만의 별도의 구현을 했다.

비영리 기술 컨소시엄인 크로노스 그룹은 2009년 초 애플, 구글, 모질라, 오페라 등의 초기 참여로 WebGL 워킹 그룹을 시작했다.[4][10]WebGL 규격의 버전 1.0은 2011년 3월에 출시되었다.[1]2012년 3월 현재 실무그룹 회장은 켄 러셀이다.

WebGL의 초기 애플리케이션에는 Zygote Body가 포함된다.[11][12]2012년 11월에 오토데스크는 대부분의 애플리케이션을 로컬 WebGL 클라이언트에서 실행되는 클라우드에 포팅했다고 발표했다.이러한 애플리케이션에는 Fusion 360과 AutoCAD 360이 포함되었다.[13]

WebGL 2 규격의 개발은 2013년부터 시작되었으며 2017년 1월에 최종화되었다.[14]이 규격은 OpenGL ES 3.0을 기반으로 한다.[15]Firefox 51, Chrome 56 및 Opera 43에 첫 번째 구현이 있다.[16]

구현

거의 네이티브 그래픽 계층 엔진

주요 기사: ANGLE(소프트웨어)

ANGLE(Bear Native Graphics Layer Engine)은 WebGL 1.0(2.0)과 OpenGL ES 2.0 및 3.0 표준을 구현하는 오픈 소스 그래픽 엔진이다.윈도 플랫폼에서 구글 크롬과 모질라 파이어폭스 모두 기본 백엔드로 사용 가능한 플랫폼별 API에 WebGL과 OpenGL 호출을 번역해 작동한다.ANGLE은 현재 데스크탑 OpenGL, OpenGL ES, Direct3D 9, Direct3D 11 APIs에 OpenGL ES 2.0 및 3.0에 대한 액세스를 제공하고 있다.[17]″[Google] 크롬은 가속된 캔버스2D 구현과 네이티브 클라이언트 샌드박스 환경을 포함한 Windows의 모든 그래픽 렌더링에 ANGLE을 사용한다.″[18]

소프트웨어

WebGL은 현대 브라우저에 의해 널리 지원되고 있다.그러나 그것의 가용성은 그것을 지지하는 GPU와 같은 다른 요소에 의존한다.공식 WebGL 웹사이트는 간단한 테스트 페이지를 제공한다.[19]브라우저에서 사용하는 렌더러 및 사용 가능한 확장자와 같은 보다 자세한 정보는 타사 웹 사이트에서 제공된다.[20][21]

데스크톱 브라우저

  • Google Chrome – WebGL 2.0은 2011년 2월 출시된 버전 9 이후 업데이트된 드라이버가 탑재된 그래픽 카드를 보유한 모든 플랫폼에서 사용 가능하다.[22][23]기본적으로 Windows에서 Chrome은 ANGLE(Almost Native Graphics Layer Engine) 렌더러를 사용하여 OpenGL ES를 Direct X 9.0c 또는 11.0으로 변환하므로 드라이버 지원이 더 좋다.[24]그러나 Linux 및 Mac OS X에서 기본 렌더러는 OpenGL이다.[25]윈도에서는 OpenGL을 렌더러로 강제할 수도 있다.[24]2013년 9월부터 크롬은 또한 새로운 Direct3D 11 렌더러를 가지고 있는데, 이 렌더러는 새로운 그래픽 카드를 필요로 한다.[26][27]크롬 56+는 WebGL 2.0을 지원한다.
  • Firefox – WebGL 1.0은 버전 4.0 이후 업데이트된 드라이버가 포함된 그래픽 카드를 가진 모든 플랫폼에서 활성화되었다.[28]2013년부터 Firefox는 또한 ANGLE을 통해 Windows 플랫폼에서 DirectX를 사용한다.[24] Firefox 51+는 WebGL 2.0을 지원한다.
  • 사파리 – 사파리 6.0및 새로운 버전 OSX마운틴 라이언 맥 OSX라이언과 사파리 5.1에 맥 OSX스노우 레오파드에 설치된 WebGL1.0, 기본적으로 사파리 8.0기 전에 되었습니다. 문장에 대한 지원을 추진하였다.[29][30][31일][32][33]사파리 버전 12(맥 OS모 하브에서 사용할 수),"실험적"기능은 현재 WebGL2.0에 사용할 수 있는 지지를 받고 있다.
  • Opera – WebGL 1.0은 2014년에 디폴트로 비활성화되었지만 Opera 11과 12에서 구현되었다.[34][35]Opera 43+는 WebGL 2.0을 지원한다.
  • Internet Explorer – WebGL 1.0은 Internet Explorer 11에서 부분적으로 지원된다.[36][37][38][39]처음에는 대부분의 공식 WebGL 적합성 테스트에 실패했지만, 이후 마이크로소프트는 몇 가지 업데이트를 발표했다.최신 0.94 WebGL 엔진은 현재 크로노스 테스트의 97%를 통과하고 있다.[40]또한 WebGL 지원은 IEWebGL과 같은 타사 플러그인을 사용하여 이전 버전의 Internet Explorer에 수동으로 추가할 [41]수 있다.
  • Microsoft Edge – Microsoft Edge Legacy의 경우 초기 안정 릴리즈는 오픈 소스 GLSL에서 HLSL 트랜시필러로 WebGL 버전 0.95(컨텍스트 이름: "실험 웹글")를 지원한다.[42]버전 10240+는 WebGL 1.0을 접두사로 지원한다.최신 크롬 기반 에지는 WebGL 2.0을 지원한다.

모바일 브라우저

  • BlackBerry 10 – WebGL 1.0은 OS 버전 10.00[43] 이후 BlackBerry 장치에서 사용 가능
  • BlackBerry PlayBook – WebGL 1.0은 WebWorks 및 PlayBook OS 2.00의[44] 브라우저를 통해 사용 가능
  • Android Browser – 기본적으로 지원되지 않지만, Android 스마트폰의 Sony Ericsson Xperia 제품군은 펌웨어 업그레이드 후 WebGL 기능을 탑재했다.[45]삼성 스마트폰에도 웹GL이 탑재돼 있다(4.1.2)와 갤럭시노트8.0(4.2)에서 검증됐다.많은 전화기에서 Android 브라우저를 대체한 Google Chrome에서 지원됨(그러나 새로운 표준 Android Browser는 아님).
  • Internet Explorer – Prefixed WebGL 1.0은 Windows Phone 8.x(11+)에서 사용 가능
  • Firefox for Mobile – WebGL 1.0은 Firefox 4 이후 Android 및 MeeGo 기기에서 사용할 수 있다.[46][47]
  • 파이어폭스 OS[47]
  • Google Chrome – WebGL 1.0은 Google Chrome 25 이후 안드로이드 기기에서 사용할 수 있으며 버전 30 이후부터는 기본적으로 사용 가능하다.[48]
  • Maemo – Nokia N900의 경우 WebGL 1.0은 PR1.2 펌웨어 업데이트 이후부터 Stock microB 브라우저에서 사용할 수 있다.[49]
  • MeeGo – WebGL 1.0은 스톡 브라우저 "Web"에서 지원되지 않지만, Firefox를 통해 이용할 수 있다.[47]
  • Microsoft Edge – Prefixed WebGL 1.0은 Windows 10 Mobile에서 사용할 수 있다.[50]
  • Opera Mobile – Opera Mobile 12는 WebGL 1.0(안드로이드 전용)을 지원한다.[51]
  • Sailfish OS – WebGL 1.0은 기본 Sailfish 브라우저에서 지원된다.[52]
  • Tizen – WebGL 1.0 지원[53]
  • iOS – WebGL 1.0은 iOS 8의 모바일 Safari에서 사용할 수 있다.[54]

툴 및 에코시스템

유틸리티

바람직한 3D 그래픽을 신속하게 제작할 수 있도록 자체적으로 거의 제공하지 않는 WebGL API의 낮은 수준의 특성은 일반적으로 3D 그래픽으로 사물을 구축하는 데 사용되는 라이브러리(예: 셰이더를 위한 뷰 변환, 뷰 좌표 등)를 만드는 데 기여했다.인기 산업 형식의 장면 그래프와 3D 객체 로드와 같은 기본 작업도 라이브러리(일부는 다른 언어에서 자바스크립트에 포팅된 것)에 의해 추상화되어 추가적인 기능을 제공한다.많은 고급 기능을 제공하는 비배출 라이브러리 목록에는 A-Frame(VR), BylonJS, PlayCanvas, 3.js, OSG 등이 포함된다.JS와 CopperLicht. X3D는 또한 X3DOM이라는 프로젝트를 만들어 X3DOM과 VRML 콘텐츠를 WebGL에서 실행하도록 하였다.3D 모델이 XML 태그로 표시됨<X3D>HTML5와 인터랙티브 스크립트는 JavaScript와 DOM을 사용한다. BS Content Studio와 InstantReality X3D 엑스포터는 HTML로 X3D를 내보내고 WebGL로 실행할 수 있다.[citation needed]

게임.

언리얼 엔진4와 유니티 [55]등 웹GL용 게임 엔진도 2D와 3D 모두 급부상했다.[56]Stage 3D/Flash 기반 Away3D 고급 라이브러리에도 TypeScript를 통해 WebGL로 연결되는 포트가 있다.셰이더를 위한 벡터와 매트릭스 연산 유틸리티만 제공하는 더 가벼운 유틸리티 라이브러리는 실베스터.js이다.그것은 때때로 glUtils.js라고 불리는 WebGL 특정 확장자와 함께 사용된다.[57]

또한 성능상의 이유로 이러한 방식으로 구현된 Cocos2d-x 또는 Pixi.js와 같은 WebGL 위에 구축된 2D 라이브러리도 있으며, 이는 플래시 세계에서 Stage3D를 통한 Starling Framework와 유사한 움직임이다.WebGL 기반 2D 라이브러리는 WebGL을 사용할 수 없을 때 HTML5 캔버스로 되돌아간다.

GPU에 거의 직접 액세스할 수 있도록 하여 렌더링 병목 현상을 제거함으로써 JavaScript 구현의 성능 제한도 노출되었다.일부는 asm.js와 WebAssembly에 의해 다루어졌다(비슷하게, Stage3D의 도입은 CrossBridge와 같은 프로젝트에서 다루었던 ActionScript 내의 성능 문제를 노출시켰다).[58]

내용 작성

다른 그래픽 API와 마찬가지로 WebGL 장면에 대한 콘텐츠를 생성하려면 일반 3D 콘텐츠 생성 도구를 사용하고 뷰어 또는 도우미 라이브러리가 읽을 수 있는 형식으로 씬(scene)을 내보내야 한다.이를 위해 Blender, Autodesk Maya 또는 SimLab Composer와 같은 데스크톱 3D 저작 소프트웨어를 사용할 수 있다.특히 Blend4Web은 WebGL 장면이 Blender에서 완전히 작성되고 클릭 한 번으로 브라우저로 내보내지는 것을 독립형 웹페이지로도 가능하다.[59]CopperCube와 온라인 WebGL 기반 편집기 Clara.io과 같은 일부 WebGL 전용 소프트웨어도 있다.스케치팹이나 Clara.io 같은 온라인 플랫폼은 사용자가 직접 3D 모델을 업로드하고 호스팅된 WebGL 뷰어를 이용해 표시할 수 있다.

환경 기반 도구

또한 Mozilla Foundation은 Firefox 브라우저에서 정점과 조각 셰이더를 편집할 수 있는 버전 27부터 내장 WebGL 도구를 구현했다.[60]많은 다른 디버깅과 프로파일링 도구도 등장했다.[61]

참고 항목

참조

  1. ^ a b "Khronos Releases Final WebGL 1.0 Specification". 3 March 2011. Retrieved 2015-05-18.
  2. ^ Tavares, Gregg (2012-02-09). "WebGL Fundamentals". HTML5 Rocks.
  3. ^ Parisi, Tony (2012-08-15). "WebGL: Up and Running". O'Reilly Media, Incorporated. Archived from the original on 2013-02-01. Retrieved 2012-07-13.
  4. ^ a b c "WebGL – OpenGL ES 2.0 for the Web". Khronos.org. Retrieved 2011-05-14.
  5. ^ "WebGL 2.0 Achieves Pervasive Support from all Major Web Browsers". The Khronos Group. 2022-02-09. Retrieved 2022-02-13.
  6. ^ "WebGL Specification". Khronos.org. Retrieved 2011-05-14.
  7. ^ "WebGL 2.0 Specification". Khronos.org. Retrieved 2017-02-27.
  8. ^ "Canvas 3D: GL power, web-style". Blog.vlad1.com. Archived from the original on 2011-07-17. Retrieved 2011-05-14.
  9. ^ "Taking the canvas to another dimension". My.opera.com. 2007-11-26. Archived from the original on 2007-11-17. Retrieved 2011-05-14.
  10. ^ "Khronos Details WebGL Initiative to Bring Hardware-Accelerated 3D Graphics to the Internet". Khronos.org. 2009-08-04. Archived from the original on 2012-04-12. Retrieved 2011-05-14.
  11. ^ "Google Body – Google Labs". Bodybrowser.googlelabs.com. Archived from the original on 2011-05-13. Retrieved 2011-05-14.
  12. ^ Bhanoo, Sindya N. (2010-12-23). "New From Google: The Body Browser". Well.blogs.nytimes.com. Retrieved 2011-05-14.
  13. ^ "AUTODESK FUSION 360: THE FUTURE OF CAD, PT. 1". 3dcadworld.com. Retrieved 2013-08-21.
  14. ^ "WebGL 2 Specification". khronos.org. 2013-09-26. Retrieved 2013-10-28.
  15. ^ "WebGL 2.0 Specification".
  16. ^ "WebGL - Web APIs". MDN.
  17. ^ "ANGLE - Almost Native Graphics Layer Engine". 2019. Retrieved June 21, 2019.
  18. ^ "ANGLE - Almost Native Graphics Layer Engine". 2019. Retrieved June 21, 2019.
  19. ^ "WebGL test page". webgl.org.
  20. ^ "WebGL Report". webglreport.com.
  21. ^ "WebGL Browser Report — WebGL Detection — WebGL Tester — BrowserLeaks". browserleaks.com.
  22. ^ Mah, Paul (February 8, 2011). "Google releases Chrome 9; comes with Google Instant, WebGL – FierceCIO:TechWatch". FierceCIO. Archived from the original on 2011-10-25. Retrieved 2012-03-20.
  23. ^ "WebGL in Chrome Stable! - Learning WebGL". learningwebgl.com. Archived from the original on 2015-05-28. Retrieved 2014-08-07.
  24. ^ a b c "(WebGL) How to Enable Native OpenGL in your Browser (Windows)". geeks3d.com.
  25. ^ "Chromium Blog: Introducing the ANGLE Project". Chromium Blog.
  26. ^ "WebGL around the net, 17 Oct 2013 - Learning WebGL". learningwebgl.com. Archived from the original on 8 August 2014. Retrieved 5 August 2014.
  27. ^ "At last! Chrome D3D11 day has come!". tojicode.com.
  28. ^ "Mozilla Firefox 4 Release Notes". Mozilla.com. 2011-03-22. Retrieved 2012-03-20.
  29. ^ "New in OS X Lion: Safari 5.1 brings WebGL, Do Not Track and more". Fairerplatform.com. 2011-05-03. Archived from the original on 2012-03-19. Retrieved 2012-03-20.
  30. ^ "Enable WebGL in Safari". Ikriz.nl. 2011-08-23. Archived from the original on 2012-03-04. Retrieved 2012-03-20.
  31. ^ "Getting a WebGL Implementation". Khronos.org. 2012-01-13. Retrieved 2012-03-20.
  32. ^ "Implementations/WebKit". Khronos.org. 2011-09-03. Retrieved 2012-03-20.
  33. ^ "WebGL Now Available in WebKit Nightlies". Webkit.org. Archived from the original on 2012-03-08. Retrieved 2012-03-20.
  34. ^ "WebGL and Hardware Acceleration". My.opera.com. 2011-02-28. Archived from the original on 2011-03-03. Retrieved 2012-03-20.
  35. ^ "Introducing Opera 12 alpha". My.opera.com. 2011-10-13. Archived from the original on 2011-10-15. Retrieved 2012-03-20.
  36. ^ "WebGL (Windows)". microsoft.com. Microsoft.
  37. ^ "Internet Explorer 11 Preview guide for developers". Microsoft. 2013-07-17. Retrieved 2013-07-24.
  38. ^ "WebGL". Microsoft. 2013-07-17. Retrieved 2013-07-24.
  39. ^ "Internet Explorer 11 to support WebGL and MPEG Dash". Engadget. 2013-06-26. Retrieved 2013-06-26.
  40. ^ "IE11 fails more than half tests in official WebGL conformance test suite". Microsoft Connect.
  41. ^ "IEWebGL". Iewebgl. Retrieved 2014-08-14.
  42. ^ "GitHub - Microsoft Edge WebGL Implementation". Microsoft. 2016-06-04. Retrieved 2016-06-10.
  43. ^ McDonough, Larry. "WebGL: 3D Gaming on the Web Arrives". BerryReview. Archived from the original on 2013-04-13. Retrieved 2013-04-09.
  44. ^ Halevy, Ronen. "PlayBook OS 2.0 Developer Beta Includes WebGL, Flash 11, & AIR 3.0". BerryReview. Retrieved 2011-11-15.
  45. ^ "Xperia™ phones first to support WebGL™ – Developer World". blogs.sonyericsson.com. The Sony Ericsson Developer Program. 2011-11-29. Archived from the original on 2011-12-03. Retrieved 2011-12-05.
  46. ^ "WebGL on Mobile Devices". iChemLabs. 2011-11-12. Archived from the original on 2013-03-12. Retrieved 2011-11-25.
  47. ^ a b c "Mobile HTML5 compatibility on iPhone, Android, Windows Phone, BlackBerry, Firefox OS and other mobile devices". Retrieved 2015-09-16.
  48. ^ Kersey, Jason. "Chrome Beta for Android Update". Chrome Releases Blog. Retrieved 2013-08-23.
  49. ^ Voipio, Riku (2010-06-07). "WebGL on N900". Suihkulokki.blogspot.com. Retrieved 2011-05-14.
  50. ^ "Dev guide: WebGL – Microsoft Edge Development". Microsoft. Retrieved 2016-06-10.
  51. ^ "Opera Mobile 12". Opera Software. Archived from the original on 1 March 2012. Retrieved 27 February 2012.
  52. ^ "HTML5test – How well does your browser support HTML5?". Retrieved 2015-09-16.
  53. ^ "HTML5test – How well does your browser support HTML5?". Retrieved 2015-09-16.
  54. ^ Cunningham, Andrew (2014-09-17). "iOS 8, Thoroughly Reviewed". Ars Technica. Retrieved 2014-09-19.
  55. ^ Parisi, Tony (13 February 2014). Programming 3D Applications with HTML5 and WebGL: 3D Animation and Visualization for Web Pages. "O'Reilly Media, Inc.". pp. 364–366. ISBN 978-1-4493-6395-6.
  56. ^ Barrett, Stephen. "Tegra K1 Lands in Acer's Newest Chromebook". anandtech.com.
  57. ^ Boreskov, Alexey; Shikin, Evgeniy (2014). Computer Graphics: From Pixels to Programmable Graphics Hardware. CRC Press. p. 370. ISBN 978-1-4398-6730-3.
  58. ^ "The WebGL potential - TypedArray.org". typedarray.org.
  59. ^ "Blend4Web Official Site - About". Blend4Web.com. Retrieved 2015-06-22.
  60. ^ "Live editing WebGL shaders with Firefox Developer Tools". Mozilla Hacks – the Web developer blog.
  61. ^ "Real-Time Rendering · WebGL Debugging and Profiling Tools". realtimerendering.com.

외부 링크