3D graphics on the web
Web technologies have become part of our daily lives. We spend a fairly large amount of time on the World Wide Web - watch the news, make purchases, communicate and work. The services and entertainment industry on the Internet is rapidly developing, leading software developers are improving the support for three-dimensional graphics in their products. Traditionally, its support was limited to high-performance computers or specialized game consoles, and programming required the use of complex algorithms. However, due to the increase in personal computer performance and the expansion of browsers, it became possible to create and display three-dimensional graphics using web technologies.
Unlike other technologies for working with three-dimensional graphics (such as OpenGL and Direct3D), WebGL is designed for use in web pages and does not require the installation of specialized extensions or libraries. One of the advantages of WebGL - applications are designed as web pages, that is, the same program will run successfully on a variety of devices (for example, on smartphones, tablet computers and game consoles). This means that WebGL will have an ever-increasing impact on the developer community and will become one of the main graphics programming tools.
Advantages of WebGL
')
With the development of HTML, developers have been able to create increasingly complex web applications. At the dawn of its development, HTML offered only the ability to display static content, but with the addition of JavaScript support, it became possible to implement more complex interactions of elements and display dynamic content. The introduction of the HTML5 standard allowed the use of new features, including support for 2D graphics in the form of a canvas tag. Creation of the WebGL technology allowed displaying and manipulating 3D graphics on web pages using JavaScript. Using WebGL, developers can create completely new user interfaces, three-dimensional games, and use three-dimensional graphics to visualize various information. Despite its impressive capabilities, WebGL differs from other technologies in its availability and ease of use, which contributes to its rapid spread.
Browser Support
Currently, WebGL is supported by the following browsers:
Desktop browsers
Mobile browsers and platforms
Benefits of using WebGL:
History of creation
The most common technologies for displaying computer graphics on personal computers are Direct3D and OpenGL.
Direct3D is part of the Microsoft DirectX technology suite.
The OpenGL technology, alternative to it, thanks to its openness, gained much wider distribution. OpenGL implementations are available for various operating systems and hardware platforms. The OpenGL specification was developed by Silicon Graphics Inc. and published as an open standard in 1992. The technology has had a tremendous impact on the development of three-dimensional graphics.
WebGL is rooted in OpenGL, but you cannot call it a direct descendant. OpenGL ES (for Embedded Systems for Embedded Systems) is considered to be the immediate prototype of WebGL, it was created in 2003-2004 and updated in 2007 (ES 2.0) and in 2012 (ES 3.0). The transition to the OpenGL 2.0 version was marked by the appearance of an important new feature - support for software shaders. This support has been ported to OpenGL ES 2.0 and has become one of the main elements of the WebGL 1.0 specification.
In early 2009, the Khronos Group consortium (a non-profit industrial consortium formed to develop, publish and promote various open standards) established the WebGL working group and launched the WebGL standardization process based on OpenGL ES 2.0. In 2011, under its umbrella, the first version of WebGL was released. However, in June of the same year, Microsoft expressed its concern about the security of WebGL technology, citing excessive equipment access rights and unreliable protection mechanisms. Mozilla Vice President Mark Schaver dismissed criticism from Microsoft, calling the concerns exaggerated. At that time, Microsoft had its own 3D web technology, Silverlight 5, based on the same principles as WebGL, which, nevertheless, the corporation considered reliable enough. Later, Microsoft changed its attitude to the WebGL technology, implementing its support in its Internet Explorer 11 browser. Apple decided to support WebGL in the Safari browser at the WWDC conference in 2014.
WebGL development framework overview
The WebGL technology uses a low-level API, this aspect makes it easier for browser developers to embed the technology into their products, but it creates considerable difficulties in creating interfaces. A large amount of time and effort was invested in the development of libraries, frameworks and third-party software tools that simplified the work of site developers.
WebGLU library
The first public library was WebGLU, a set of low and high level utilities for developing applications on WebGL. WebGLU is designed in such a way that a developer can focus on the end result with a minimum of fuss and code, but the library does not limit developers who want more control. This is achieved due to the possibility of using low-level functions for working with the WebGL API.
Incomplete list of functions:
GLGE library
Enough eminent library for developing applications using WebGL. The library is more focused on dynamic scene changes. However, recent changes in the repository are dated 2014, so there are reasons to doubt the relevance of the library today.
Incomplete list of functions:
Library Three JS
The most popular and actively developing library today. Detailed and accessible documentation and a huge number of working examples make this library one of the leaders among similar systems.
Incomplete list of functions:
Babylon JS Library
An open source library for creating full-fledged 3D applications and games that run in a web browser without using third-party plug-ins and extensions. Babylon JS is close in its capabilities to ThreeJS, but it has in its arsenal some built-in functions that are not available in Three JS from the box. These nice features include the built-in physics engine oimo.js — a fairly simple way to create a realistic landscape using a height map. Of course, in the three js there are also such opportunities, but they are implemented with the help of various additional applications. However, for the functionality of the library you have to pay an immodest weight of 800 kb.
List of features:
The increasingly active introduction of computer graphics in the daily activities of users requires developers to develop new horizons. Of course, various tasks require an individual approach to the implementation of applications. The libraries presented in this article are just the tip of the iceberg.
Each developer can choose a library for their specific needs - someone needs skeletal animation, someone has realistic light or physics, and someone is a truly orthodox professional who does not recognize anything but the purest WebGL API and writes shaders in notepad. However, all united by the desire to create high-quality, lightweight and productive web applications that actively use the capabilities of three-dimensional graphics.
Unlike other technologies for working with three-dimensional graphics (such as OpenGL and Direct3D), WebGL is designed for use in web pages and does not require the installation of specialized extensions or libraries. One of the advantages of WebGL - applications are designed as web pages, that is, the same program will run successfully on a variety of devices (for example, on smartphones, tablet computers and game consoles). This means that WebGL will have an ever-increasing impact on the developer community and will become one of the main graphics programming tools.
Advantages of WebGL
')
With the development of HTML, developers have been able to create increasingly complex web applications. At the dawn of its development, HTML offered only the ability to display static content, but with the addition of JavaScript support, it became possible to implement more complex interactions of elements and display dynamic content. The introduction of the HTML5 standard allowed the use of new features, including support for 2D graphics in the form of a canvas tag. Creation of the WebGL technology allowed displaying and manipulating 3D graphics on web pages using JavaScript. Using WebGL, developers can create completely new user interfaces, three-dimensional games, and use three-dimensional graphics to visualize various information. Despite its impressive capabilities, WebGL differs from other technologies in its availability and ease of use, which contributes to its rapid spread.
Browser Support
Currently, WebGL is supported by the following browsers:
Desktop browsers
- Mozilla Firefox (from version 4)
- Google Chrome (from version 9)
- Safari (from version 6, WebGL support is disabled by default)
- Opera (from version 12, WebGL support is disabled by default)
- IE (from version 11, for other versions you can use third-party plug-ins, for example, IEWebGL)
Mobile browsers and platforms
- Android browser (supports WebGL only on some devices)
- Opera Mobile (starting with version 12 and only for Android OS)
- IOS (full support from version 8.1)
- Firefox for mobile (from version 4)
- Google Chrome for Android (from version 25)
Benefits of using WebGL:
- Cross-browser compatibility and lack of binding to a specific platform. Windows, MacOS, Linux - all this does not matter, as long as your browser supports WebGL.
- Using javascript language which is quite common.
- Automatic memory management. Unlike OpenGL, WebGL does not need to perform special actions to allocate and clear memory.
- Since WebGL for graphics rendering uses a graphics processor on a graphics card (GPU), this technology is characterized by high performance, which is comparable to the performance of native applications.
History of creation
The most common technologies for displaying computer graphics on personal computers are Direct3D and OpenGL.
Direct3D is part of the Microsoft DirectX technology suite.
The OpenGL technology, alternative to it, thanks to its openness, gained much wider distribution. OpenGL implementations are available for various operating systems and hardware platforms. The OpenGL specification was developed by Silicon Graphics Inc. and published as an open standard in 1992. The technology has had a tremendous impact on the development of three-dimensional graphics.
WebGL is rooted in OpenGL, but you cannot call it a direct descendant. OpenGL ES (for Embedded Systems for Embedded Systems) is considered to be the immediate prototype of WebGL, it was created in 2003-2004 and updated in 2007 (ES 2.0) and in 2012 (ES 3.0). The transition to the OpenGL 2.0 version was marked by the appearance of an important new feature - support for software shaders. This support has been ported to OpenGL ES 2.0 and has become one of the main elements of the WebGL 1.0 specification.
In early 2009, the Khronos Group consortium (a non-profit industrial consortium formed to develop, publish and promote various open standards) established the WebGL working group and launched the WebGL standardization process based on OpenGL ES 2.0. In 2011, under its umbrella, the first version of WebGL was released. However, in June of the same year, Microsoft expressed its concern about the security of WebGL technology, citing excessive equipment access rights and unreliable protection mechanisms. Mozilla Vice President Mark Schaver dismissed criticism from Microsoft, calling the concerns exaggerated. At that time, Microsoft had its own 3D web technology, Silverlight 5, based on the same principles as WebGL, which, nevertheless, the corporation considered reliable enough. Later, Microsoft changed its attitude to the WebGL technology, implementing its support in its Internet Explorer 11 browser. Apple decided to support WebGL in the Safari browser at the WWDC conference in 2014.
WebGL development framework overview
The WebGL technology uses a low-level API, this aspect makes it easier for browser developers to embed the technology into their products, but it creates considerable difficulties in creating interfaces. A large amount of time and effort was invested in the development of libraries, frameworks and third-party software tools that simplified the work of site developers.
WebGLU library
The first public library was WebGLU, a set of low and high level utilities for developing applications on WebGL. WebGLU is designed in such a way that a developer can focus on the end result with a minimum of fuss and code, but the library does not limit developers who want more control. This is achieved due to the possibility of using low-level functions for working with the WebGL API.
Incomplete list of functions:
- You can load shaders directly from .frag / .vert / .vp / .fp files
- Automatic loading and configuration of the shader
- All compilations and builds are handled automatically.
- Automatic installation of any projection and type of model
- Provides projections and matrix stacks of the model view that roughly correspond to the modes of the matrix in OpenGL
- Automatically creates an array / element of buffers as needed and binds them as necessary during rendering.
- Each object can be assigned a separate shader program.
- Shader attribute data storage, simple call
- Partial .obj analyzer is implemented to load objects
- Supports object hierarchies
- Static images and video textures
- Procedural animation support
- Time-frame animation support
- Ability to mix animation types and object hierarchy
- GameGLU - companion library provides easy tracking of keyboard events
GLGE library
Enough eminent library for developing applications using WebGL. The library is more focused on dynamic scene changes. However, recent changes in the repository are dated 2014, so there are reasons to doubt the relevance of the library today.
Incomplete list of functions:
- Frame animation
- Support for general lighting, directional lighting (spot) and point light sources
- Normal map support
- Animation of materials
- Skeletal animation
- Collada format support
- Support displacement maps
- Text rendering
- Fog
- Shadow depth
- Environment Maps
- Reflection / refraction
- Collada Animation
- 2d filters
- Culling - remove hidden parts of the scene from the process
- LOD support - object detail levels
- Physics
Library Three JS
The most popular and actively developing library today. Detailed and accessible documentation and a huge number of working examples make this library one of the leaders among similar systems.
Incomplete list of functions:
- Renderers - Canvas, SVG or WebGL
- Adding and removing objects in real time
- Fog
- Perspective or orthographic camera
- Skeleton animation, various types of kinematics, frame-by-frame animation
- Several types of light sources - external, directional, point
- Abandoned and received shadows
- Shaders (GLSL)
- Objects — nets, particles, sprites, lines, skeletal animation, and so on
- Many predefined geometry types - plane, cube, sphere, torus, 3D text and so on
- Active support modifiers - fabric, extrusion
- Ability to load multiple data types - binary, image, JSON and scene
- Export and import objects of Blender, openCTM, FBX, 3D Studio Max and Wavefront .obj file
Babylon JS Library
An open source library for creating full-fledged 3D applications and games that run in a web browser without using third-party plug-ins and extensions. Babylon JS is close in its capabilities to ThreeJS, but it has in its arsenal some built-in functions that are not available in Three JS from the box. These nice features include the built-in physics engine oimo.js — a fairly simple way to create a realistic landscape using a height map. Of course, in the three js there are also such opportunities, but they are implemented with the help of various additional applications. However, for the functionality of the library you have to pay an immodest weight of 800 kb.
List of features:
- Scene - using ready-made meshes, fog, skyboxes
- Physics engine (oimo.js module)
- Smoothing
- Animation engine
- Sound engine
- Particle system
- Hardware scaling
- LOD support
- Step loading scene
- Automatic scene optimization
- Debug panel
- 4 sources of illumination - point, radiated everywhere, spotlight and realistic
- Custom materials and shaders
- Rich texturing capabilities
- SSAO
- Glare
- 9 types of cameras, including those for touch control
- Exporters for 3ds Max, Blender, Unity3D, Cheetah 3d
- Elevation map
The increasingly active introduction of computer graphics in the daily activities of users requires developers to develop new horizons. Of course, various tasks require an individual approach to the implementation of applications. The libraries presented in this article are just the tip of the iceberg.
Each developer can choose a library for their specific needs - someone needs skeletal animation, someone has realistic light or physics, and someone is a truly orthodox professional who does not recognize anything but the purest WebGL API and writes shaders in notepad. However, all united by the desire to create high-quality, lightweight and productive web applications that actively use the capabilities of three-dimensional graphics.
Source: https://habr.com/ru/post/325646/
All Articles