Home > Uncategorized > Webbased 3D viewer

Webbased 3D viewer

“He piled upon the whale’s white hump the sum of all the general rage and hate felt by his whole race from Adam down; and then, as if his chest had been a mortar, he burst his hot heart’s shell upon it.” - Moby Dick

Amen Ahab, amen. I feel the same way about distributing code. Yes yes I’m a programmer and handing out programs should be the end all be all of my existence. It isn’t. Writing code is fun, writing an installer is not. Why do you all think I hand out links to my code rather than compiled executables? Well that and because you freeloaders get enough help. :)

Onward to the point:
I’ve always seen the browser as becoming the dominant app on any computer. Google OS takes this concept to heart by being a browser-centric experience rather than PC centric.

In my mind the major component missing from this system is an OpenGL/DirectX wrapper. Browsers, without the aid of plugins and 3rd party apps, did not have native access to the graphics card. Until WebGL. In a nut shell WebGL is a set of standards for accessing OpenGL from within a web browser.
*Bezier patch seen from the side. Lighting is not calculate for this example.
What I’ve written is a dinky little app that shows you how to accept a .txt file (formatted like a WaveFront OBJ) and display that object in an in-browser renderer.

What you’ll need:

  1. Firefox 3.7 alpha 1 pre-release.
  2. Open Firefox 3.7 (“Minefield”).  In your address bar type about:config and hit enter.  In the filter line search for webgl.  There will be a line called ‘webgl.enabled_for_all_sites‘ , set it to true.
  3. Go to my test page.
  4. Use the browse button or simply drag the proper file over to the browsing area.  The file drag and drop was supposed to look like this tutorial but my server doesn’t support the SVG mime-type so all you’ll see is the works ‘Drop Here’
  5. The red square will update with your file.
  6. Rotation/Translation/Zoom controls are coming in the next update.

The code for my page is freely available but I haven’t posted the entire webgl directory to my repository just yet.  For now you’ll have to manually grab the page source.  Sorry.

WebGL tutorials can be found here. My code is based entirely on his excellent work.  Please be aware that since he posted his tutorials there have been some API changes. I’ve used the updates in my code.  Be aware of these if you copy his code directly as these changes may halt your browser depending on which version of 3.7 you use.

Lastly, if you need a test file for my example just copy the lines of text below to a test.txt file.  (Be aware I use a zero indexed file.)

v 0 0 0
v 1 0 0
v 0 1 0
v 1 1 0
f 0 1 2
f 1 2 3

Categories: Uncategorized Tags:
  1. No comments yet.
  1. No trackbacks yet.