- WebGL Tutorial
- WebGL - Home
- WebGL - Introduction
- WebGL - Html5 Canvas Overview
- WebGL - Basics
- WebGL - Graphics Pipeline
- WebGL Application
- WebGL - Sample Application
- WebGL - Context
- WebGL - Geometry
- WebGL - Shaders
- Associating Attributes & Buffer Objects
- WebGL - Drawing a Model
- WebGL Examples
- WebGL - Drawing Points
- WebGL - Drawing a Triangle
- WebGL - Modes of Drawing
- WebGL - Drawing a Quad
- WebGL - Colors
- WebGL - Translation
- WebGL - Scaling
- WebGL - Rotation
- WebGL - Cube Rotation
- WebGL - Interactive Cube
- WebGL Useful Resources
- WebGL - Quick Guide
- WebGL - Useful Resources
- WebGL - Discussion
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
WebGL - Introduction
A few years back, Java applications – as a combination of applets and JOGL – were used to process 3D graphics on the Web by addressing the GPU (Graphical Processing Unit). As applets require a JVM to run, it became difficult to rely on Java applets. A few years later, people stopped using Java applets.
The Stage3D APIs provided by Adobe (Flash, AIR) offered GPU hardware accelerated architecture. Using these technologies, programmers could develop applications with 2D and 3D capabilities on web browsers as well as on IOS and Android platforms. Since Flash was a proprietary software, it was not used as web standard.
In March 2011, WebGL was released. It is an openware that can run without a JVM. It is completely controlled by the web browser.
The new release of HTML 5 has several features to support 3D graphics such as 2D Canvas, WebGL, SVG, 3D CSS transforms, and SMIL. In this tutorial, we will be covering the basics of WebGL.
What is OpenGL?
OpenGL (Open Graphics Library) is a cross-language, cross-platform API for 2D and 3D graphics. It is a collection of commands. OpenGL4.5 is the latest version of OpenGL. The following table lists a set of technologies related to OpenGL.
|OpenGL ES||It is the library for 2D and 3D graphics on embedded systems - including consoles, phones, appliances, and vehicles. OpenGL ES 3.1 is its latest version. It is maintained by the Khronos Group www.khronos.org|
|JOGL||It is the Java binding for OpenGL. JOGL 4.5 is its latest version and it is maintained by jogamp.org.|
|OpenGLSL||OpenGL Shading Language. It is a programming language which is a companion to OpenGL 2.0 and higher. It is a part of the core OpenGL 4.4 specification. It is an API specifically tailored for embedded systems such as those present on mobile phones and tablets.|
Note − In WebGL, we use GLSL to write shaders.
What is WebGL?
WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, It is designed for the purpose of rendering 2D graphics and interactive 3D graphics. It is derived from OpenGL's ES 2.0 library which is a low-level 3D API for phones and other mobile devices. WebGL provides similar functionality of ES 2.0 (Embedded Systems) and performs well on modern 3D graphics hardware.
Who Developed WebGL
An American-Serbian software engineer named Vladimir Vukicevic did the foundation work and led the creation of WebGL
In 2007, Vladimir started working on an OpenGL prototype for Canvas element of the HTML document.
In March 2011, Kronos Group created WebGL.
Rendering is the process of generating an image from a model using computer programs. In graphics, a virtual scene is described using information like geometry, viewpoint, texture, lighting, and shading, which is passed through a render program. The output of this render program will be a digital image.
There are two types of rendering −
Software Rendering − All the rendering calculations are done with the help of CPU.
Hardware Rendering − All the graphics computations are done by the GPU (Graphical processing unit).
Rendering can be done locally or remotely. If the image to be rendered is way too complex, then rendering is done remotely on a dedicated server having enough of hardware resources required to render complex scenes. It is also called as server-based rendering. Rendering can also be done locally by the CPU. It is called as client-based rendering.
WebGL follows a client-based rendering approach to render 3D scenes. All the processing required to obtain an image is performed locally using the client's graphics hardware.
According to NVIDIA, a GPU is "a single chip processor with integrated transform, lighting, triangle setup/clipping, and rendering engines capable of processing a minimum of 10 million polygons per second." Unlike multi-core processors with a few cores optimized for sequential processing, a GPU consists of thousands of smaller cores that process parallel workloads efficiently. Therefore, the GPU accelerates the creation of images in a frame buffer (a portion of ram which contains a complete frame data) intended for output to a display.
GPU Accelerated Computing
In GPU accelerated computing, the application is loaded into the CPU. Whenever it encounters a compute-intensive portion of the code, then that portion of code will be loaded and run on the GPU. It gives the system the ability to process graphics in an efficient way.
GPU will have a separate memory and it runs multiple copies of a small portion of the code at a time. The GPU processes all the data which is in its local memory, not the central memory. Therefore, the data that is needed to be processed by the GPU should be loaded/copied to the GPU memory and then be processed.
In the systems having the above architecture, the communication overhead between the CPU and GPU should be reduced to achieve faster processing of 3D programs. For this, we have to copy all the data and keep it on the GPU, instead of communicating with the GPU repeatedly.
The following tables show a list of browsers that support WebGL −
|Internet Explorer||11 and above||Complete support|
|Google Chrome||39 and above||Complete support|
|Firefox||36 and above||Partial support|
|Opera||27 and above||Partial support|
|Chrome for Android||42||Partial support|
|Android browser||40||Partial support|
|IOS Safari||8.3||Complete support|
|Opera Mini||8||Does not support|
|Blackberry Browser||10||Complete support|
|IE mobile||10||Partial support|
Advantages of WebGL
Here are the advantages of using WebGL −
Increasing support with mobile browsers − WebGL also supports Mobile browsers such as iOS safari, Android Browser, and Chrome for Android.
Open source − WebGL is an open source. You can access the source code of the library and understand how it works and how it was developed.
Easy to set up − Since WebGL is integrated within HTML 5, there is no need for additional set up. To write a WebGL application, all that you need is a text editor and a web browser.
There is no need to set a different environment for WebGL. The browsers supporting WebGL have their own in-built setup for WebGL.