Technology Update

WEBGL AND THREE.JS

2D/ 3D graphic rendering Javascript API
Edited by graphics API. WebGL API is essentially
MOHAN DAS VISWAM a set of JavaScript functions which wrap
WebGL (Web Graphics Library) around the OpenGL ES specification. It
omputer Graphics have uses canvas element of HTML to render
1.0 is one of the Javascript been part of the advent of objects in browser. The HTML Canvas
the latest technology in provides a destination for rendering 3D
ICT. Initially, web brows- objects in web pages, and allows
APIs for rendering interactive performing that rendering using different
ers were not planned for
3D graphics applications, rendering APIs.
3D and 2D graphics within any but were designed for rendering simple
web pages with static content. WebGL has compatibility and independ-
compatible web browser ence with underlying operating systems
With the use of dynamic content and as it adopted web browsers as the content
without the use of plug-ins. scripting languages, the demand for 3D providing platform. Web browsers can
graphics support in browsers has grown provide overall programming interfaces,
There are many Javascript immensely. 3D graphics is playing an which are independent of underlying
important role in user’s multimedia hardware, middleware, graphics library,
libraries that abstract WebGL desktop as well as web experience. There and so on. A WebGL program can be
are different technologies used for executed on every platform, where a
and result in higher code rendering 3D objects in browser such as WebGL compatible web browser is
VRML, ShockWave, Flash, Silverlight, available.
level. One of the utility librar- QuickTime and others. But, these
technologies require browser plugin to be HOW WEBGL WORKS
ies is Three.js, the most popu- installed and there is no standardization
for creation of these plugins. So, different WebGL programs are written in JavaS-
cript language and embedded into
lar 3D library/ API that runs plugins are required for rendering 3D
HTML5 documents. The JavaScirpt
Objects with different technologies,
codes call the WebGL API functions to
alongside feature-rich HTML5 which results in installing multiple
finally get 3D output on the web browser.
plugins in the browser. Sometimes, it
leads to compatibility issues among JavaScript sets up the initial data struc-
to create and display animat- tures and sends them to the WebGL API,
plugins. WebGL (Web Graphics Library)
1.0 is one of the Javascript APIs for which sends them to OpenGL ES
ed 3D computer graphics in a rendering interactive 3D and 2D graphics (OpenGL for Embedded Systems). The
within any compatible web browser graphics driver supplies the implementa-
web browser. without the use of plugins. Sometimes, tion of OpenGL ES that actually runs the
WebGL API may be tedious to use code. Finally, it is to be sent to the graph-
directly without any utility libraries. ics hardware.
There are many Javascript libraries that
abstract WebGL and result in higher code At the core of the WebGL technology are
level. One of the utility libraries is scripts known as shaders which are the
Three.js, the most popular 3D library/ small program written in GLSL that
API that runs alongside feature-rich defines how the pixels of 3D object is
HTML5 to create and display animated drawn on the screen. There are two
G. PRASAD
Sr. Technical Director 3D computer graphics in a web browser. shaders in WebGL - vertex and fragment
[email protected] shader. The shaders are responsible for
WEBGL (WEB GRAPHICS position calculation and colour specifica-
tion respectively. The vertex shader
LIBRARY) converts the coordinates of the 3D model
Web Graphics Library (WebGL) is one of into 2D screen coordinates. It performs
the most important new technologies per-vertex computation. The fragment
RICHA TIWARI facilitating 3D visualisation on the brows- shader is responsible for generating
Scientist -B er platform. It is a cross-platform, royal- colour output of each pixel. It performs
[email protected] ty-free web standard for a low-level 3D per pixel commutation.

36 informatics.nic.in | Oct-Dec 2018

Technology Update

HTML 5
Shaders
Java Script Browser

WebGL
Vertex shader Fragment shader
OpenGL ES

Graphics Driver
OS
Per vertex computation Per pixel computation
Graphics Hardware

Fig 1. WebGL/ OpenGL ES/ OS interactions Fig 2. WebGL Shaders

THREE.JS internally generating WebGL code while ••Ironbane (http://play.ironbane.com/)

exposing a simpler API. Three.js also has is a massively multiplayer online game
The development of interactive 3D pre-built components and helper methods powered by WebGL and Three.js. One
graphics program based on WebGL is that help to get things done faster. can collect items, interact with other
sometimes complicated and time- players and explore the open world
consuming as it requires deep under- APPLICATION AREAS ••360 degree viewer (http://carvisualiz-
standing of the library. To resolve this er.plus360degrees.com/threejs/) for
issue, there are a number of utility librar- Today, 3D computer graphics have a
vast domain of usage in different appli- detailed car visualization with textures
ies such as Three.js, Babylon.js, and environment mapping.
A-Frame, SceneJS etc., which are built cations. They are used for 3D product
upon WebGL and provide framework for design, gaming, city planning, disaster
management, geo-spatial mapping, NIC has developed the 3D Web Viewer,
easy development of 2D and 3D graphic ‘e-CollabCAD’ using Three.js technolo-
rendering applications. Among these digital marketing, architect, medical
imagery, education, fashion designing, gy. e-CollabCAD Web Viewer
libraries, ‘Three.js’ is probably the most (https://collabcad.gov.in/eCollabCAD/)
widely used open source library (https:/- art etc. Some of the examples where
WebGL is being used are: is a product for visualization and sharing
threejs.org. The source code is hosted in a of 3D design data of CollabCAD and
repository on GitHub ••Sony PlayStation 4 uses WebGL to
render the user interface open 3D data file formats (STL, OBJ,
(https://github.com/mrdoob/three.js/). It JSON). No software or plugin is required
is made available under the MIT license. ••Google releasing demos under the
as the viewer works directly on WebGL
The official documentation of Three.js is chrome experiments collaborating with
compliant web browsers. User can
under construction, but it guides begin- numerous world titles and developers
upload, view and share 3D models and
ners very well to start with 3D graphical ••Poly Google (https://poly.google.com) innovative designs with public. Number
rendering application. Three.js is uses WebGL for 3D rendering of visualization and rendering features
have been provided in e-CollabCAD
viewer. These include, 3D model viewer,
shading (wireframe, facets), environment
mapping, setting perspective and
orthographic camera views, applying
color gradients, setting different view.

For further information, please contact:

GUNTUKU PRASAD
Sr. Technical Director
CollabCAD Development Group, NIC HQ
CGO Complex, Lodhi Road
NEW DELHI - 110003
Email: [email protected]
Fig 2. WebGL Shaders Phone: 011-24305177

Oct-Dec 2018 | informatics.nic.in 37