WebGL
lastmod 2023-03-01created 2014-02-234 edits
WebGL is a JavaScript binding of OpenGL ES 2.0 based on HTML5. As befits its OpenGL ES 2.0 base, a key feature is GPU acceleration through the Vertex Shader / Pixel Shader (or Fragment Shader), but the most important point is that it can render 3D graphics on a web page without any separate plugin (web browser plugins such as Adobe Flash Player, Java Applet, MS ActiveX, or VRML). This is a major advantage in a Ubiquitous computing environment, because in any computing environment, as long as a Web browser that supports the WebGL standard is installed, you get the same 3D result.
Despite these great advantages, WebGL still has several problems. First, not every Web browser currently supports WebGL. (Only Web browsers such as Safari on Mac os, FireFox, and Google Chrome support WebGL. You could say "almost all of them support it except MS Internet Explorer," but even among supporting Web browsers, some browsers support it only in beta versions.) Second, as everyone expects, there is the Bottleneck in JavaScript. Given the nature of a Graphics Library, screen refresh speed is one of the most important factors, and code that runs on a Script basis rather than as Binary code will run relatively slowly. (What needs to be considered is the computing environment WebGL runs in: in today's High performance desktop environments you may get satisfactory speed, but the question is whether a Mobile Computing environment can produce the same, or at least similar, results as a Desktop environment.) Third, there is the delay that occurs when transferring large volumes of 3D graphics data over the http protocol of the Web environment. Loading large Mesh data (Vertex/Index data) and Texture data over the web will not be faster than reading data stored in local memory, and in a poor internet environment the problem becomes more serious. Moreover, since data must be received every time a Web Page is visited (if the user clears the cache, or in an environment that does not support caching for the web page), more traffic will be generated. Fourth, related to the hardware acceleration mentioned as an advantage, there are security issues with GPUs accessed via the http protocol.
The above is a brief write-up about WebGL. Disadvantages take up a large share of this text, but that is only because the advantages WebGL has, or is expected to have, are likely numerous enough that others would agree with them, so there was no need to discuss them separately. (Even if not WebGL, if there were another standard supporting 3D Graphics based web browsing in ubiquitous computing environment..)
Projects
- Summer Afternoon - WebGL experiment
- https://summer-afternoon.vlucendo.com/
- A web experiment page made to practice Procedural 3D
- Controlled with arrow keys/mouse. Space bar/right-click to jump
- Multiplayer support. Works well on mobile too
- Find the 5 hidden secrets!
- Three.js + GSAP + Svelte + Houdini
See also
Favorite site
- WebGL notes
- WebGL Lesson 1 - Triangles and squares
- About WebGL
- WebGL - Web API | MDN
- WebGL Public Wiki
- PDF on WebGL presented at SIGGRAPH2009
Tutorials
- [Recommended] WebGL2 Fundamentals