(almost) murphy.de - A Chessboard Sphere with WebGL

Sun 2009-11-29 ( En pr pi )

The last weeks I have been experimenting with WebGL, the upcoming 3D extension to the HTML 5 Canvas element. It is supported by the latest WebKit and Firefox nightly builds (read about getting WebGL to run on your system).

Now, here’s a rotating ~~500~~ ~~4000~~ about 4900 polygon semi-transparent 3D sphere complete with a texture and lightning, animated via OpenGL by your graphics card – no Flash plugin needed (click the image):

If you want to stay updated about this developing technology, you can subscribe to the Planet WebGL meta-blog feed.

I can also recommend Giles’ step-by-step tutorials on learningwebgl.com, which I based my sphere example on.

This is just the beginning :) Some people are already creating games, demoscenes, and Viewers for 3D models with WebGL.

Update: Much faster mesh generation, more polygons. Always use Array.push instead of Array.concat.

Update 2: The Mesh library is now a separate file. Fixed some bugs with mesh generation.

Say something! / Sag was!

Hi Murphy
FYI the sphere actually shows on the iPhone likely how it looks is not what you intended, unless with semi transparent you meant half of it missing, but it is identifyable - pretty cool!

Licenser @ 08:50 on Tuesday, 2009-12-01

really cool 

I noticed you started from lesson 8 in learning webGL. But the nicest addition is the mesh object that really is neat. Altough it seems like you aren't really consistent in that library becuase of gl and this.gl mixture maybe that is something you should really update

gero3 @ 09:43 on Tuesday, 2009-12-01

Oops,
I was wrong, my fault - the image itself is a screenshot not a renderung o.O. Not working from the iPhone.

Licenser @ 10:10 on Tuesday, 2009-12-01

@Licenser: Maybe some day it works on the iPhone. But not yet. The sphere is indeed holey.

@gero3: Thank you, well spotted. I updated the code.

murphy @ 17:13 on Tuesday, 2009-12-01

also if the polygons go over 65535, you see only a part of the sphere.(try 500 meshes and you will see what i mean). So then you should use more buffers to save all the calculations of the vertexes and normals and textures. You shouldn't forget to update the drawscene function to allow multiple buffers for 1 scene element

gero3 @ 12:57 on Monday, 2009-12-07

Maybe I just calculate one slice (like a piece of an orange) of the sphere and let GL do the rotation around the Y axis...what do you think?

murphy @ 18:10 on Monday, 2009-12-07

Counter Strike Sorce... You need it.

Anoymus @ 15:46 on Saturday, 2015-05-16