Jump to content

WebGL: Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous editNext edit →
Content deleted Content added
VisualWikitext
m remove junk
No edit summary
Tags: Reverted references removed Mobile edit Mobile web edit
Line 23: Line 23:
| size =
| size =
| language = English
| language = English
| language count = <!-- DO NOT include this parameter unless you know what it does -->
| language count = <!-- DO NOT include this parameter unless
| language footnote =
| genre = [[Application programming interface|API]]
| license =
| alexa =
| website = {{URL|https://www.khronos.org/webgl/}}
| standard =
| AsOf =
}}
{{HTML}}


'''WebGL''' (Short for '''Web Graphics Library''') is a [[JavaScript]] [[Application programming interface|API]] for rendering interactive 2D and 3D graphics within any compatible [[web browser]] without the use of [[plug-in (computing)|plug-ins]].<ref name=":0">{{cite web |title=WebGL Fundamentals |url=http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/ |publisher=HTML5 Rocks}}</ref> WebGL is fully integrated with other [[Web API|web standards]], allowing GPU-accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL elements can be mixed with other [[HTML]] elements and composited with other parts of the page or page background.<ref>{{cite web|url=http://my.safaribooksonline.com/book/animation-and-3d/9781449326487/chapter-6dot-integrating-2d-and-3d/overlaying_3d_visuals_on_2d_pa|title=WebGL: Up and Running|last=Parisi|first=Tony|date=2012-08-15|publisher=O'Reilly Media, Incorporated|access-date=2012-07-13|archive-url=https://archive.is/20130201234333/http://my.safaribooksonline.com/book/animation-and-3d/9781449326487/chapter-6dot-integrating-2d-and-3d/overlaying_3d_visuals_on_2d_pa|archive-date=2013-02-01|url-status=dead}}</ref>
'''WebGL''' (Short for '''Web Graphics Library''') is a [[JavaScript]] [[Application programming interface|API]] for rendering interactive 2D and 3D graphics within any compatible [[web browser]] without the use of [[plug-in (computing)|plug-ins]].<ref name=":0">{{cite web |title=WebGL Fundamentals |url=http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/ |publisher=HTML5 Rocks}}</ref> WebGL is fully integrated with other [[Web API|web standards]], allowing GPU-accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL elements can be mixed with other [[HTML]] elements and composited with other parts of the page or page background.<ref>{{cite web|url=http://my.safaribooksonline.com/book/animation-and-3d/9781449326487/chapter-6dot-integrating-2d-and-3d/overlaying_3d_visuals_on_2d_pa|title=WebGL: Up and Running|last=Parisi|first=Tony|date=2012-08-15|publisher=O'Reilly Media,

WebGL programs consist of control code written in JavaScript and [[shader]] code that is written in [[OpenGL Shading Language|OpenGL ES Shading Language]] (GLSL ES), a language similar to [[C (programming language)|C]] or [[C++]], and is executed on a computer's [[graphics processing unit]] (GPU). WebGL is designed and maintained by the [[Non-profit organization|non-profit]] [[Khronos Group]].<ref name="WebGLWebsite" />

On February 9, 2022 [[Khronos Group]] announced WebGL 2.0 support for all major browsers.<ref name=":3">{{Cite web|date=2022-02-09|title=WebGL 2.0 Achieves Pervasive Support from all Major Web Browsers|url=https://www.khronos.org/blog/webgl-2-achieves-pervasive-support-from-all-major-web-browsers|access-date=2022-02-13|website=The Khronos Group|language=en}}</ref>


== Design ==
== Design ==

Revision as of 17:12, 5 January 2023

{{Infobox software | name = WebGL | title = WebGL | logo = WebGL Logo.svg | logo size = x64px | logo caption = | screenshot = | caption = Screenshot from a WebGL-based application running in Google Chrome | collapsible = | author = Mozilla Foundation | developer = Khronos WebGL Working Group | released = March 3, 2011; 13 years ago (2011-03-03)[1] | discontinued = | latest_release_version = 2.0 | latest_release_date = January 17, 2017; 7 years ago (2017-01-17) | latest preview version = | latest preview date = | programming language = | operating_system = | platform = Cross-platform | size = | language = English | language count = , but the Sony Ericsson Xperia range of Android smartphones have had WebGL capabilities following a firmware upgrade.[2] Samsung smartphones also have WebGL enabled (verified on Galaxy SII (4.1.2) and Galaxy Note 8.0 (4.2)). Supported in Google Chrome that replaced the Android browser in many phones (but is not a new standard Android Browser).

Tools and ecosystem

Utilities

The low-level nature of the WebGL API, which provides little on its own to produce desirable 3D graphics quickly, contributed to creation of libraries which are typically used to build things up in 3D graphics (e.g. view transformations for shaders, view frustum etc.). Basic tasks such as loading scene graphs and 3D objects in the popular industry formats is also abstracted by the libraries (some of which were ported to JavaScript from other languages) to provide additional functionality. A non-exhaustive list of libraries that provide many high-level features includes A-Frame (VR), BabylonJS, PlayCanvas, three.js, OSG.JS and CopperLicht. X3D also made a project called X3DOM to make X3D and VRML content running on WebGL. The 3D model will in XML tag <X3D> in HTML5 and interactive script will use JavaScript and DOM. BS Content Studio and InstantReality X3D exporter can exported X3D in HTML and running by WebGL.[citation needed]

Games

There also has been a rapid emergence of game engines for WebGL, both 2D and 3D,[12] including Unreal Engine 4 and Unity.[13] The Stage3D/Flash-based Away3D high-level library also has a port to WebGL via TypeScript.[14][15] A more light-weight utility library that provides just the vector and matrix math utilities for shaders is sylvester.js.[16][17] It is sometimes used in conjunction with a WebGL specific extension called glUtils.js.[16][18]

There are also some 2D libraries built on top of WebGL like Cocos2d-x or Pixi.js, which were implemented this way for performance reasons, in a move that parallels what happened with the Starling Framework over Stage3D in the Flash world. The WebGL-based 2D libraries fall back to HTML5 canvas when WebGL is not available.[19]

Removing the rendering bottleneck by giving almost direct access to the GPU also exposed performance limitations in the JavaScript implementations. Some were addressed by asm.js and WebAssembly (similarly, the introduction of Stage3D exposed performance problems within ActionScript, which were addressed by projects like CrossBridge).[19]

Content creation

Like for any other graphics API, creating content for WebGL scenes requires using a regular 3D content creation tool and exporting the scene to a format that is readable by the viewer or helper library. Desktop 3D authoring software such as Blender, Autodesk Maya or SimLab Composer can be used for this purpose. Particularly, Blend4Web allows a WebGL scene to be authored entirely in Blender and exported to a browser with a single click, even as a standalone web page.[20] There are also some WebGL-specific software such as CopperCube and the online WebGL-based editor Clara.io. Online platforms such as Sketchfab and Clara.io allow users to directly upload their 3D models and display them using a hosted WebGL viewer.

Environment based tools

Additionally, Mozilla Foundation, in its Firefox browser, has implemented built-in WebGL tools starting with version 27 that allow editing vertex and fragment shaders.[21] A number of other debugging and profiling tools have also emerged.[22]

See also

References

  1. ^ "Khronos Releases Final WebGL 1.0 Specification". 3 March 2011. Retrieved 2015-05-18.
  2. ^ "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.
  3. ^ "WebGL on Mobile Devices". iChemLabs. 2011-11-12. Archived from the original on 2013-01-27. Retrieved 2011-11-25.
  4. ^ a b c "Mobile HTML5 compatibility on iPhone, Android, Windows Phone, BlackBerry, Firefox OS and other mobile devices". Retrieved 2015-09-16.
  5. ^ Kersey, Jason. "Chrome Beta for Android Update". Chrome Releases Blog. Retrieved 2013-08-23.
  6. ^ Voipio, Riku (2010-06-07). "WebGL on N900". Suihkulokki.blogspot.com. Retrieved 2011-05-14.
  7. ^ "Dev guide: WebGL – Microsoft Edge Development". Microsoft. Retrieved 2016-06-10.
  8. ^ "Opera Mobile 12". Opera Software. Archived from the original on 1 March 2012. Retrieved 27 February 2012.
  9. ^ "HTML5test – How well does your browser support HTML5?". Retrieved 2015-09-16.
  10. ^ "HTML5test – How well does your browser support HTML5?". Retrieved 2015-09-16.
  11. ^ Cunningham, Andrew (2014-09-17). "iOS 8, Thoroughly Reviewed". Ars Technica. Retrieved 2014-09-19.
  12. ^ 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.
  13. ^ Barrett, Stephen. "Tegra K1 Lands in Acer's Newest Chromebook". anandtech.com.
  14. ^ Cite error: The named reference L5956 was invoked but never defined (see the help page).
  15. ^ "Blog > Away3D Typescript 4.1 Alpha > Away3D". away3d.com. Archived from the original on 2014-08-08. Retrieved 2014-08-05.
  16. ^ a b Boreskov, Alexey; Shikin, Evgeniy (2014). Computer Graphics: From Pixels to Programmable Graphics Hardware. CRC Press. p. 370. ISBN 978-1-4398-6730-3.
  17. ^ Anyuru, Andreas (2012). Professional WebGL Programming: Developing 3D Graphics for the Web. John Wiley & Sons. p. 140. ISBN 978-1-119-94059-3.
  18. ^ Fulton, Steve; Fulton, Jeff (2013). HTML5 Canvas (2nd ed.). "O'Reilly Media, Inc.". p. 624. ISBN 978-1-4493-3588-5.
  19. ^ a b "The WebGL potential - TypedArray.org". typedarray.org.
  20. ^ "Blend4Web Official Site - About". Blend4Web.com. Retrieved 2015-06-22.
  21. ^ "Live editing WebGL shaders with Firefox Developer Tools". Mozilla Hacks – the Web developer blog.
  22. ^ "Real-Time Rendering · WebGL Debugging and Profiling Tools". realtimerendering.com.

Cite error: A list-defined reference named "WebGLWebsite" is not used in the content (see the help page).
Cite error: A list-defined reference named "WebGLSpecification" is not used in the content (see the help page).
Cite error: A list-defined reference named "WebGL2Specification" is not used in the content (see the help page).

Cite error: A list-defined reference named "WebGLAnnouncement" is not used in the content (see the help page).
Retrieved from "https://en.wikipedia.org/w/index.php?title=WebGL&oldid=1131764584"