WebGL and OpenGL

WebGL and OpenGl

Lately, you’ve probably heard a lot about WebGL and how it is transforming graphics rendered in a web browser. The consortium definition is quoted below. As highlighted in the quotation, here I will to show the similarities between desktop OpenGL and browser WebGL.

WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element as Document Object Model interfaces. Developers familiar with OpenGL ES 2.0 will recognize WebGL as a Shader-based API using GLSL, with constructs that are semantically similar to those of the underlying OpenGL ES 2.0 API. It stays very close to the OpenGL ES 2.0 specification, with some concessions made for what developers expect out of memory-managed languages such as JavaScript.

If you are not familiar with some of the terminology, review these pages.
OpenGL – Then and Now
Programmable pipeline with VBOs and Shaders

You can access the code at https://github.com/cognitivewaves/OpenGL-Render .
Desktop OpenGL : main.cpp
Browser WebGL : webgl/main.html

As you will see in the snapshots of code snippets, most of differences are in the programming language constructs of C/C++ vs JavaScript. Hope it provides some insight into how OpenGL and WebGL are more similar than different.

Shader Code

OpenGL and WebGL Shader code differences

Shader Initialization

OpenGL and WebGL Initialize shaders code differences


OpenGL and WebGL draw code differences


One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s