3D web graphics

    Web technologies are firmly embedded in our daily lives. We spend quite a lot of time on the World Wide Web - we watch news, make purchases, communicate and work. The industry of services and entertainment on the Internet is growing rapidly, leading software developers are improving the support of 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 growth of personal computer performance and the expansion of browser capabilities, 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 is that applications are designed as web pages, that is, the same program will successfully run on a variety of devices (for example, smartphones, tablets 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.

    image

    WebGL Benefits

    With the development of HTML, developers have been able to create increasingly complex web applications. At the dawn of its development, the HTML language 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. Implementation of the HTML5 standard allowed us to use new features, including support for two-dimensional graphics in the form of a canvas tag. The creation of WebGL technology made it possible to display and manipulate three-dimensional 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 the impressive possibilities,

    Browser Support

    WebGL is currently supported by the following browsers:

    Desktop Browsers

    • Mozilla Firefox (from version 4)
    • Google Chrome (from version 9)
    • Safari (since version 6, WebGL support is disabled by default)
    • Opera (since version 12, WebGL support is disabled by default)
    • IE (from version 11, for other versions you can use third-party plugins, for example, IEWebGL)

    Mobile browsers and platforms

    • Android browser (only supports WebGL on some devices)
    • Opera Mobile (starting from version 12 and only for Android OS)
    • IOS (full support since 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, the main thing is that your browser supports WebGL.
    • Using JavaScript, which is fairly common.
    • Automatic memory management. Unlike OpenGL, in WebGL there is no need to perform special actions to allocate and clear memory.
    • Since WebGL uses a graphics processor on a graphics card (GPU) to render graphics, 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 alternative OpenGL technology, due to its openness, is much more widespread. 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. Technology has had a huge impact on the development of three-dimensional graphics.

    WebGL is rooted in OpenGL, but you cannot call it a direct descendant. The direct prototype of WebGL is considered OpenGL ES (for Embedded Systems for Embedded Systems), created in 2003-2004 and updated in 2007 (ES 2.0) and in 2012 (ES 3.0). The transition to OpenGL 2.0 was marked by the appearance of a new important feature - support for software shaders. This support has been ported to OpenGL ES 2.0 and has become one of the core 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 his auspices, the first version of WebGL was released. However, in June of that year, Microsoft expressed concern about the security of WebGL technology, citing excessive access rights to equipment and unreliable protection mechanisms. Mozilla Vice President Mark Schaver rejected criticism of Microsoft, calling the fears exaggerated. At that time, Microsoft had its own 3D Silverlight 5 web technology, based on the same principles as WebGL, which, nevertheless, the corporation considered quite reliable.

    Overview of frameworks for development on WebGL WebGL

    technology uses a low-level API, this aspect facilitates the implementation of technology by browser developers in their products, but creates rather great difficulties in creating interfaces. A large amount of time and effort has been invested in the development of libraries, frameworks and third-party software tools that have 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 so 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 to work with the WebGL API.

    Incomplete list of functions:

    • You can load shaders directly from .frag / .vert / .vp / .fp files
    • Automatic loading and shader setup
    • All compilations and layouts are processed automatically.
    • Automatic installation of any projection and type of model
    • Provides projections and matrix-type model stacks that roughly correspond to the matrix modes in OpenGL
    • Automatically creates, if necessary, an array / element of buffers and binds them as needed during rendering
    • Each object can be assigned a separate shader program.
    • Shader attribute data storage, simple call
    • Partial .obj parser implemented to load objects
    • Supports object hierarchies
    • Static images and video textures
    • Procedural Animation Support
    • Support for frame animation
    • Ability to mix animation types and object hierarchy
    • GameGLU - Companion Library Provides Easy Keyboard Event Tracking

    GLGE Library A well- known

    library for developing applications using WebGL. The library is focused more on the dynamic change of the scene. However, the latest 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, spot lighting and spotlights
    • Normal Map Support
    • Animating Materials
    • Skeletal animation
    • Collada format support
    • Offset Map Support
    • Text rendering
    • Fog
    • Shadow depth
    • Environment maps
    • Reflection / refraction
    • Collada Animation
    • 2d filters
    • Culling - removing hidden parts of the scene from the processing
    • LOD support - object detail levels
    • Physics

    Three JS Library

    The most popular and rapidly developing library to date. 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
    • Add and delete objects in real time
    • Fog
    • Perspective or orthographic cameras
    • Frame animation, various types of kinematics, frame-by-frame animation
    • Several types of light sources - external, directional, spot
    • Thrown and received shadows
    • Shaders (GLSL)
    • Objects - networks, particles, sprites, lines, skeletal animation and so on
    • Many predefined types of geometry - plane, cube, sphere, torus, 3D text and so on
    • Active support for modifiers - fabric, extrusion
    • Ability to load multiple data types - binary, image, JSON and scene
    • Export and import of Blender, openCTM, FBX, 3D Studio Max and Wavefront .obj objects

    Library Babylon JS

    library with open source software to create full 3D applications and games that run in a web browser without the use of third-party plug-ins and extensions. Babylon JS is close in its capabilities to ThreeJS, however, it has in its arsenal some built-in functions that are not available in Three JS out of the box. Such 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, three js also has such features, but they are implemented using various additional applications. However, for the functionality of the library you have to pay an immodest weight of 800 kb.

    Feature List:

    • Scene - use of ready-made meshes, fog, skyboxes
    • Physics engine (oimo.js module)
    • Smoothing
    • Animation engine
    • Sound engine
    • Particle System
    • Hardware scaling
    • LOD support
    • Step-by-step loading of a scene
    • Auto scene optimization
    • Debug panel
    • 4 light sources - spot, radiated everywhere, spotlight and realistic
    • Custom Materials and Shaders
    • Extensive texturing capabilities
    • SSAO
    • Glare
    • 9 types of cameras, including for touch control
    • Exporters for 3ds Max, Blender, Unity3D, Cheetah 3d
    • Height map

    The increasingly active introduction of computer graphics in the daily activities of users requires developers to master 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 needs 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, everyone is united by the desire to create high-quality, lightweight and productive web applications that actively use the capabilities of three-dimensional graphics.

    Also popular now: