Data Visualization with D3 Javascript

Published in

Search Hacks

7 min readApr 6, 2016

Introduction:

WebGL is a JS API that renders graphics intense, interactive 3D computer animations and 2D graphics within a compatible web browser without using any plug-ins or third party render software development entities. Example usage for WebGL is included in this article. WebGL, nowadays is an integral component of the modern browser. It allows accelerated usage of physics effects and image processing features of the GPU to manipulate vectors in the HTML5 Canvas component of a webpage. Elements of WebGL can be mixed with other parts of the HTML webpage to create immersive backgrounds and highly responsive, real-time graphics that captivate the visitor’s attention. WebGL programs comprise of a control code written in JS and Shader code that is executed on a client’s GPU. Currently, WebGL is designed and maintained by the Khronos Group; an American non-profit member-funded industry consortium based in Beaverton, Oregon.

In fact, initial concept evolved as a spin-off from the Canvas 3D experiments started by Vladimir Vukicevic at the Mozilla Corporation. However, the official WebGL Working Group was initiated by the Khronos Group in 2009 with participation from browser giants like Google, Apple, Opera and Mozilla. Since 2012 the chair of the working group is Ken Russell.

Note: Need some professional Web Design help?

Not yet . . ? Check out our post on AMP (Accelerated Mobile Pages).

Structure and Usage:

Structurally, the WebGL 1.0 (introduced in March 2011) was based on the OpenGL ES 2.0 and uses the DOM interfaces to access the HTML Canvas element. WebGL expresses Shaders directly in GLSL and does not have fixed-function APIs (discontinued since OpenGL 3.0). However, this functionality can be provided manually in the JS.

The WebGL API is most effectively used in conjunction with some utility libraries that handle different graphics functions. Loading scene graphs and most popular 3D objects are not included in the standard libraries. However, they can be added to implement market standard functionalities.

A Steadily Increasing List of High Level Frameworks for WebGL Includes:

Support from Game Engines:

As well as a support from game engines such as Unreal Engine4 and Unity 5. The Stage3D/ Flash-based Away3D high-level library also has a port to WebGL via TypeScript. Another honorable mention is Sylvester.js, a light library that provides vector and math utilities for shaders used in conjunction with WebGl specific extension glUtils.js.

WebGL also has some 2D libraries like Cocos2d-x or Pixi.js, which were implemented this way for performance reasons. The WebGL based 2D libraries fall back to HTML5 canvas when WebGL is not available.

Using WebGL removes the rendering bottleneck by giving almost direct access to the GPU Performance limitations in the JS implementations. Software development for WebGL scenes involves using a regular 3D content creation tool and exporting to a browser readable format using Autodesk Maya or Blender etc. Mozilla Firefox also offers built-in WebGL tools (since its version 27), that allow editing vertex and fragment shaders.

Want To Know More About Javascript Checkout D3JS

Application in Software Development:

The earliest adaptations of WebGL can be traced back to the Zygote Body( formerly Google Body) a web application by Zygote Media Group that renders a manipulate-able 3D anatomical model of the human body. And can be attributed to Auto-desk porting their web applications (such as Fusion 360 and Auto-CAD 360) to the cloud.

Development on the WebGL 2.0 specification started in 2013. This specification was based on OpenGL ES 3.0 and an editor’s draft states it as near completion.

https://blog.mozilla.org/futurereleases/2015/03/03/an-early-look-at-webgl-2/

WebGL Example Usage:

WebGL is a progressive field of interactive design and Software development where a lot can be accomplished with the untapped computing potential. Some of the most notable and praise –worthy examples of creative usage of WebGL have been stated below.

(Note: these might not work on your computer if you are using an outdated browser or have an un-supported graphics card.)

Curated below are a few more practical and stunning implementations of WebGL from all around the world.