3D OBJ Viewer
Toxicgonzo has created a canvas application which can read the contents of a 3D .OBJ file and display the results in real-time. This particular demo takes Blender’s monkey model and rotates it. It also displays how many FPS in the upper left corner.
Monkey head!
Comments from the Author:
Here’s the basics of how my app works:
1. A 3d .OBJ object is stored as a string in the javascript file
2. The .OBJ string is decoded to hold information about vertex position and which vertices form the polygons
3. Every polygon is assigned a random color
4. Matrix multiplication happens: Convert object from model space -> camera space -> clip space -> screen space
5. Z-sort the polygons based on the polygon’s centroid
6. Draw the polygons from back to front
Comments
alex
tested on safari 4 (iMac late 2007, core 2 duo 2.8, 4gb ram, snow leopard) and works flawlessly achieving 37 fps. Webkit nightly build also works flawlessly.
Posted on May 5, 2010
Col Forbin
works on Safari 4.0.5
Mac mini core2duo 2GHz – 1GB ram Mac 10.5.8
Posted on May 5, 2010
Kazu
works fine with safari 4.0.5(631.22.7)
Posted on May 5, 2010
Vassil
Works fine on Google Chrome 4.1
Posted on June 1, 2010
Vassil
Works on iPhone Safari, too. But it is too slow there.
Posted on June 1, 2010
Vassil
Fully seen on Android 2.1 HTC Desire with about 2 FPS.
Posted on June 2, 2010
Joenes
Great stuff, i really like to see this pushed furter with some tweaking to enhance the preformance, what about server side processing with http streaming to handle the load of heavy calculations. just an idea tho
Posted on June 18, 2010
Jed Hunsaker
Impressive work! Thanks for the background information and book links as well. I’m pulling 34fps on average on my Chrome 5.0375.99 beta and like .3 fps on my Android 2.2 emulator—haha!
Posted on July 24, 2010
Rayleigh
Hi, i have copied your html code and replaced the obj data under “var g_cubeOBJ = ” with my obj file data. But i cant get it going. Any idea why?
Posted on February 25, 2011
z
50fps (2.6dual laptop chrome win7)
awesome work!
Posted on June 13, 2011
Peter
Hi,
I think it’s the only working 3D OBJ Viewer that I have found yet. Is it possible to include/import a few .obj Files and textures with .mtl and .tga files ? I don’t want put ~70k lines of objectcode into a string in my HTML document
Thanks in advance
Peter
Posted on June 22, 2011
Related demos