pouët.net

WebGL through Html5

category: code [glöplog]
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?

added on the 2012-04-20 10:42:16 by Navis Navis
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
added on the 2012-04-20 11:14:43 by p01 p01
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
added on the 2012-04-20 11:21:27 by MsK` MsK`
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.
added on the 2012-04-20 11:31:05 by tomaes tomaes
is processing through gl?
added on the 2012-04-20 11:39:09 by Navis Navis
Yes. But I think there's still only immediate mode and no shaders (yet).
added on the 2012-04-20 11:44:35 by tomaes tomaes
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...
added on the 2012-04-20 13:21:12 by MsK` MsK`
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.
added on the 2012-04-20 13:55:59 by tomaes tomaes
check out three.js https://github.com/mrdoob/three.js/

bit of a showcase http://ro.me/tech
added on the 2012-04-20 13:57:29 by randomi randomi
You could also use three.js.
added on the 2012-04-20 14:41:19 by gloom gloom
three.js seems popular.
added on the 2012-04-20 15:17:00 by Hyde Hyde
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.
added on the 2012-04-20 15:18:35 by Hyde Hyde
BB Image
added on the 2012-04-20 15:34:43 by numtek numtek
yeah all I want is to do glVertex and push/pop matrix.
added on the 2012-04-20 15:37:58 by Navis Navis
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/
added on the 2012-04-20 16:26:30 by mrdoob mrdoob
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 :]
added on the 2012-04-20 16:30:54 by mrdoob mrdoob
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. :)
added on the 2012-04-20 17:00:52 by zgrg zgrg
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)?

added on the 2012-04-20 17:06:08 by Navis Navis
Processing is cool for teaching kids programming.
On the other hand, WebGL is awesome ;)
added on the 2012-04-20 18:00:45 by mrdoob mrdoob
ok cool, I got somewhere with lightgl and chrome. Haven't used javascript for many years! Lightgl helps a lot though
added on the 2012-04-20 18:33:54 by Navis Navis
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
added on the 2012-04-20 19:59:26 by iq iq
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.
added on the 2012-04-20 20:02:06 by Navis Navis
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.
added on the 2012-07-01 16:45:28 by Navis Navis
* canvas.getImageData(x,y,w,h);
* context.fillText(text,x,y,maxWdith);
added on the 2012-07-01 18:03:12 by p01 p01

login