pouët.net

Hi guys,

I'd like to do some webgl stuff through html5. I've read the wikipedia page on the webgl and all the different libraries that exist.

Would you know which library is considered the best for my task: I don't want to do physics or complex scenes, I'd be happy if I had access to opengl via immediate mode, textures and maybe shaders in the future. Also a timer (clock) to render every x msecs. But also easy to set up (haven't done javascript for many many years). Any ideas?

The WebGL API is pretty much a one-to-one mapping of OpenGL ES 2.0 so you should feel pretty much at home. Pretty much everybody uses Three.js by MrDoob and co, but that might already be way more than what you want. If I were you I'd probably look at Fhtr's WebGL work esp. the part about loading .3ds objects. As for getting a "timer" to render every x msec, look at requestAnimationFrame

http://lywenn.eu.org/webgl/webgl.js
This might be the helper functions you're looking for, did them a while ago. Just add opengl creation context and you're good to go. You can find an example here : http://lywenn.eu.org/webgl/webgl.html

There's also still processing.js. You can look at the examples under exhibition to see if it's good enough for what you'd like to do.

is processing through gl?

Yes. But I think there's still only immediate mode and no shaders (yet).

BTW, if by immediate mode you meant glBegin glVertex... glEnd, it was removed from OpenGL ES, and thus, from WebGL. But in javascript, you can easily fake one...

In processing this is abstracted away (you use box(), sphere() etc. ). On the desktop it goes through Java and some sub OGL 2.0 bindings, in the web implementation with Javascript is works with WGL, see http://processingjs.org/articles/RenderingModes.html.

check out three.js https://github.com/mrdoob/three.js/

bit of a showcase http://ro.me/tech

You could also use three.js.

three.js seems popular.

How about using three.js?

seriously though, does three.js emulate stuff like immediate mode? I think op is aware that webGL some of those arcane OpenGL features.

yeah all I want is to do glVertex and push/pop matrix.

navis: three.js may not be what you're after. lightgl may suit your needs a bit more I think https://github.com/evanw/lightgl.js/

navis: by the way, I was using the obj on your demos for testing a obj loader I was doing for three.js this week. so thanks for leaving them easily accessible :]

Why would you prefer immediate mode to vertex arrays? Or the arcane OpenGL matrix functions to vertex shaders? OpenGL ES 2.0/WebGL do not support any of these features for good reasons. :)

I want the immediate mode on because I'm lazy. I'd rather do things with glVertex than with vertex arrays - after all I only need a fraction of the speed. It's good to have all options open.

Ideally I want to use vertex/fragment shaders too, but push/pop is great for some testing.

Mrdoob: thanks, you're welcome. But what do you think of processing (and webgl)?

Processing is cool for teaching kids programming.
On the other hand, WebGL is awesome ;)

ok cool, I got somewhere with lightgl and chrome. Haven't used javascript for many years! Lightgl helps a lot though

hey navis,

There is not such a thing as immediate mode in WebGL/OpenglES 2.0. You cannot do glVertex3f()

Also, there is not such a things as "no shaders" neither - you have to write a vertex and a fragment shaders always, even if just a very simple one. There are no things like glColor4f() or glLightf()

Both things are good i think :D

these guys at lightgl have done a wrapper for lazy people like me who like glcolors and stuff. Works very well! But yes I can see why you wouldn't want to stick with this forever.

I quite like the unassuming nature of the javascript/webgl pairing!

I have a couple of questions to anyone who knows this stuff more than me:

* How do you access individual pixels from a loaded image? lets say I want to make a heightfield from a map (a png image). Is this possible?

* How would you render text fast as a bitmap? is there a fast way to do so (I've read something like rendering to a texture)?

thanks.

* canvas.getImageData(x,y,w,h);
* context.fillText(text,x,y,maxWdith);