OpenJSGL

As the Web grows into a software development platform in its own right and more applications become available online, so does the demand for 3D graphics in the browser. Currently, most developers accomplish genuine 3D rendering by requiring third-party plug-ins, sacrificing the interoperability and platform independence which are the Web's greatest strengths. This is where OpenJSGL comes in: OpenJSGL is an implementation of the OpenGL 3D rendering graphics pipeline written entirely in JavaScript. Thus, OpenJSGL allows 3D graphics to be embedded in a Web browser without the need for native plug-ins or software extensions. Because it is written in JavaScript, all of the graphics pipeline's operations are performed on the client machine, and using OpenJSGL is as simple as including a script within a Web page. OpenJSGL implements the following graphics pipeline operations:

-Transformations: Scaling, rotating and translating are supported.
-Lighting: OpenJSGL supports up to 8 lights. The developer can create spotlights as well as directional and positional lights.
-Clipping
-Backface culling
-Smooth and flat shading
-Blending
-Anti-Aliasing

All of these functions are delivered in a manner that would feel completely familiar to a standard OpenGL developer. OpenJSGL works on any Web browser that supports the canvas HTML element, such as Firefox, Safari, and Opera. Although OpenJSGL implements the same algorithms as OpenGL, its performance is quite different. Operations are done in software since OpenJSGL cannot take advantage of hardware acceleration. However, much of the code in OpenJSGL is not optimized, meaning its full potential is yet to be seen.

Download

Examples:

Here you can see OpenJSGL in action.

smooth.js

cube.js (Press 'c' to toggle backface culling)

More examples:

sphere.htmlsource:sphere.js spot.htmlsource:spot.js

OpenJSGL pipeline:

This activity diagram shows the ordered pipeline components implemented in OpenJSGL. Currently, all steps of the pipeline are operational except for HSR (Hidden Surface Removal).

graphics pipeline

Code Comparison:

These two snippets of code show the similarities between the OpenJSGL and OpenGL APIs.

OpenJSGL code:

function display() {
  jsgl.jsglClear(JSGL.JSGL_COLOR_BUFFER_BIT | JSGL.JSGL_DEPTH_BUFFER_BIT);
  jsgl.jsglLookAt(15, 0, 15, 15, 15, 0, 0, 1, 0);
  triangle();
}

function reshape() {
  jsgl.jsglViewport(0, 0, canvas.width, canvas.height);
  jsgl.jsglMatrixMode(JSGL.JSGL_PROJECTION);
  jsgl.jsglLoadIdentity();
  jsgl.jsglOrtho(-15, 15, -15, 15, 0.1, 100);
  jsgl.jsglMatrixMode(JSGL.JSGL_MODELVIEW);
}

function triangle() {
  jsgl.jsglBegin(JSGL.JSGL_POLYGON);
  jsgl.jsglColor3f(1.0, 0.0, 0.0);
  jsgl.jsglVertex3f(5.0, 5.0, 0.0);
  jsgl.jsglColor3f(0.0, 1.0, 0.0);
  jsgl.jsglVertex3f(25.0, 5.0, 0.0);
  jsgl.jsglColor3f(0.0, 0.0, 1.0);
  jsgl.jsglVertex3f(5.0, 25.0, 0.0);
  jsgl.jsglEnd();
}

 

 

OpenGL code:

void display() {
  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
  gluLookAt(15f, 0f, 15f, 15f, 15f, 0f, 0f, 1f, 0f);
  triangle();
}

void reshape(int x, int y) {
  glViewport(0, 0, x, y);
  glMatrixMode(GL_PROJECTION);
  glLoadIdentity();
  glOrtho(-15f, 15f, -15f, 15f, 0.1f, 100f);
  glMatrixMode(GL_MODELVIEW);
}

void triangle() {
  glBegin(GL_POLYGON);
  glColor3f(1.0f, 0.0f, 0.0f);
  glVertex3f(5.0f, 5.0f, 0.0f);
  glColor3f(0.0, 1.0f, 0.0f);
  glVertex3f(25.0f, 5.0f, 0.0f);
  glColor3f(0.0f, 0.0f, 1.0f);
  glVertex3f(5.0f, 25.0f, 0.0f);
  glEnd();
}

API Summary:

For details see the OpenGL API documentation or take a look at the OpenJSGL source code here

Constants:

JSGL_FALSE
JSGL_TRUE
JSGL_POINT
JSGL_LINE_STRIP
JSGL_LINE_LOOP
JSGL_POLYGON
JSGL_QUAD_STRIP
JSGL_TRIANGLE_STRIP
JSGL_FLAT
JSGL_SMOOTH
JSGL_MODELVIEW
JSGL_PROJECTION
JSGL_AMBIENT
JSGL_DIFFUSE
JSGL_SPECULAR
JSGL_SHININESS
JSGL_EMISSION
JSGL_POSITION
JSGL_LIGHTING
JSGL_LIGHT0
JSGL_LIGHT1
JSGL_LIGHT2
JSGL_LIGHT3
JSGL_LIGHT4
JSGL_LIGHT5
JSGL_LIGHT6
JSGL_LIGHT7
JSGL_LIGHT_MODEL_AMBIENT
JSGL_LIGHT_MODEL_LOCAL_VIEWER
JSGL_CONSTANT_ATTENUATION
JSGL_LINEAR_ATTENUATION
JSGL_QUADRATIC_ATTENUATION
JSGL_SPOT_DIRECTION
JSGL_SPOT_EXPONENT
JSGL_SPOT_CUTOFF
JSGL_NORMALIZE
JSGL_CULL_FACE
JSGL_DEPTH_TEST
JSGL_CLIP
JSGL_COLOR_BUFFER_BIT
JSGL_DEPTH_BUFFER_BIT

Methods:

jsglMatrixMode
jsglLoadIndentity
jsglRotatef
jsglScalef
jsglTranslatef
jsglLookAt
jsglFrustum
jsglPerspective
jsglOrtho
jsglViewport
jsglPushMatrix
jsglPopMatrix
jsglShadeModel
jsglMaterialfv
jsglMaterialf
jsglLightModelfv
jsglLightModeli
jsglLightfv
jsglLightf
jsglEnable
jsglDisable
jsglClear
jsglBegin
jsglVertex3f
jsglNormal3f
jsglNormal3fv
jsglColor3f
jsglColor4f
jsglColor3fv
jsglColor4fv
jsglClearColor
jsglEnd

SourceForge.net Logo
Valid XHTML 1.1