WebGL

A few years ago, Java applications is a combination of applets and JOGL, were it is used to process 3D graphics on the Web by addressing the GPU (Graphical Processing Unit). As applets it require a JVM to run, and it was difficult to rely on Java applets. Because of this after some year, people stopped using Java applets. The 3D APIs provided by Adobe 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.

 

In March 2011, WebGL was released. It is an openware that can run without a JVM. It is completely controlled by the web browser. Then it is easy to use. The new release of HTML 5 has several features to support 3D graphics such as 2D Canvas, WebGL, SVG, 3D CSS transforms, and SMIL.

 

What is WebGL?

WebGL is a graphics application programming interface (API) created for use in web applications. It is based off the open graphics language (openGL) embedded system (ES).

WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, It is designed for the purpose of rendering (It 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 ). 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. It is a JavaScript API that can be used with HTML5. WebGL code is written within the <canvas> tag of HTML5. It is a specification that allows Internet browsers access to Graphic Processing Units (GPUs) on those computers where they were used.

 

OpenGL

OpenGL (Open Graphics Library) is a cross-language, cross-platform API for rendering 2D and 3D graphics. OpenGL is a software interface that allows a programmer to communicate with graphics hardware. The purpose of openGL is that to transfer data from CPU to GPU through is known as openGL object. By using openGL, a developer can use the same code to render graphics on a Mac, PC, or mobile device. read more...

 

HTML5 Canvas

HTML-5 <canvas> provides an easy and powerful option to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions, or do simple animations.

Here is a simple <canvas> element having only two specific attributes width and height plus all the core HTML-5 attributes like id, name, and class. read more

 

Syntax

The syntax of HTML canvas tag is given below. You have to mention the name of the canvas inside double quotations (“ ”).

<canvas id="mycanvas" width="100" height="100"></canvas>

 

Canvas Attributes

The canvas tag has three attributes namely, id, width, and height.

Id - Id represents the identifier of the canvas element in the Document                               Object Model (DOM).

Width - Width represents the width of the canvas.

Height - Height represents the height of the canvas.

These attributes determine the size of the canvas. If a programmer is not specifying them under the canvas tag, then browsers such as Firefox, Chrome, and Web Kit, by default, provide a canvas element of size 300 × 150.

Example – How to Create a Canvas

Output -

 

The Rendering

It 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. read more

 

The Rendering Context

The <canvas> is initially blank. To display something on the canvas element, we have to use a scripting language. This scripting language should access the rendering context and draw on it.

The canvas element has a DOM method called getContext(), which is used to obtain the rendering context and its drawing functions. This method takes one parameter, the type of context 2d.

Example:

Output-

WebGL Context

HTML5 Canvas is also used to write WebGL applications. To create a WebGL rendering context on the canvas element, you should pass the string experimental-webgl, instead of 2d to the canvas.getContext() method. Some browsers support only 'webgl'.

Example:

Output-

 

 JavaScipt

While developing WebGL applications, we write Shader language code to communicate with the GPU. JavaScript is used to write the control code of the program, which includes the following actions- 

• Initialize WebGL − JavaScript is used to initialize the WebGL context.
• Create arrays − We create JavaScript arrays to hold the data of the geometry.
• Buffer objects − We create buffer objects (vertex and index) by passing the arrays as parameters. 
• Shaders − We create, compile, and link the shaders using JavaScript.
• Attributes − We can create attributes, enable them, and associate them with buffer objects using JavaScript.
• Uniforms − We can also associate the uniforms using JavaScript.
• Transformation matrix − Using JavaScript, we can create transformation matrix.

Initially we create the data for the required geometry and pass them to the shaders in the form of buffers. The attribute variable of the shader language points to the buffer objects, which are passed as inputs to the vertex shader.