WebGL Cheat Sheet
WebGL has been getting a fair amount of buzz lately - and rightfully so, because it is cool. For those that don't know, WebGL is the 3D extension of the Canvas element, based on OpenGL ES 2.0. Having a standardized low-level graphics API like that available in the browser is pretty exciting stuff if you ask me. 3D canvas graphics has been long underway and not until just recently did it get to an interesting state when the first signs of WebGL showed up in both the (Mac) WebKit and Firefox nightly builds.
Note: This cheat sheet has become a bit out of date as the specs have been released and changes have been made that are not reflected in the cheat sheet. I will update it as soon as possible. Cheers. It's still very much a work in progress and the official specs haven't been made public yet, I'm not even sure how far they (Khronos, the working group responsible) are in settling on the specs. So that means there aren't much in terms of references out there for people like me who are anxious to play around with this new toy. There are a few example demos from both the WebKit and the Mozilla camps and cool sites like Learning WebGL are starting to pop up. There's of course the OES 2.0 reference and the source code for both WebKit and Mozilla implementations is also readily available. So, I decided to just make my own reference sheet by combining those sources and the result is a condensed WebGL cheat sheet which fits on 4 pages - or 2 if you have good eyes and print two on each page.
As an added bonus, this exercise forced me to dig through the entire OES2.0 spec, which was great since I'm an OpenGL newbie and learning stuff is cool!
Of course, given the current state of WebGL, any of the information in this document is subject to change from day to day. Imight most certainly have missed a bunch of things as well due to lack of insight and good references. In addition to that there also seem to be a few differences in the two implementations, so those will be corrected when I know what actually needs correcting.
I also don't have access to a Mac and since the WebKit implementation is Mac-only for now, I haven't actually seen it action. There might be more differences between the two than I've found just by glancing over the source.
Anyway, here it is in both PDF and HTML:
WebGL Cheat Sheet PDF
WebGL Cheat Sheet HTML
The HTML version has the extra bonus feature of tooltip information when you hover the mouse over (most of the) function parameters and enum values.
And corrections and suggestions are of course most welcome!
WebGL has been getting a fair amount of buzz lately - and rightfully so, because it is cool. For those that don't know, WebGL is the 3D extension of the Canvas element, based on OpenGL ES 2.0. Having a standardized low-level graphics API like that available in the browser is pretty exciting stuff if you ask me. 3D canvas graphics has been long underway and not until just recently did it get to an interesting state when the first signs of WebGL showed up in both the (Mac) WebKit and Firefox nightly builds.
Note: This cheat sheet has become a bit out of date as the specs have been released and changes have been made that are not reflected in the cheat sheet. I will update it as soon as possible. Cheers. It's still very much a work in progress and the official specs haven't been made public yet, I'm not even sure how far they (Khronos, the working group responsible) are in settling on the specs. So that means there aren't much in terms of references out there for people like me who are anxious to play around with this new toy. There are a few example demos from both the WebKit and the Mozilla camps and cool sites like Learning WebGL are starting to pop up. There's of course the OES 2.0 reference and the source code for both WebKit and Mozilla implementations is also readily available. So, I decided to just make my own reference sheet by combining those sources and the result is a condensed WebGL cheat sheet which fits on 4 pages - or 2 if you have good eyes and print two on each page.
As an added bonus, this exercise forced me to dig through the entire OES2.0 spec, which was great since I'm an OpenGL newbie and learning stuff is cool!
Of course, given the current state of WebGL, any of the information in this document is subject to change from day to day. I
I also don't have access to a Mac and since the WebKit implementation is Mac-only for now, I haven't actually seen it action. There might be more differences between the two than I've found just by glancing over the source.
Anyway, here it is in both PDF and HTML:
WebGL Cheat Sheet PDF
WebGL Cheat Sheet HTML
The HTML version has the extra bonus feature of tooltip information when you hover the mouse over (most of the) function parameters and enum values.
And corrections and suggestions are of course most welcome!
This is great, thanks!
November 1, 2009 at 10:58 PM AlessandroGood Job!
November 10, 2009 at 9:23 AM Jacob Seidelinbtw, the method in buffer:
void getBufferParameteri (ulong target, ulong value)
should not return a int instead void ?
Yes, of course. Thanks!
November 10, 2009 at 9:33 AM DgisThanks, this sheet is essential :)
November 30, 2009 at 2:20 AM AnonymousHaving a standardized low-level graphics API like that available in the browser-w0w that great! yeah open gl is the rising star in the web! haha
January 6, 2010 at 10:29 PM Unknowni am looking for cheap vps that is reliable and the uptime is 99.9%
Sorry to bother you, Jacob, but there's actually some incorrect info(due to changes in the spec):
February 13, 2010 at 6:55 PM Jacob Seidelin1. getBoolean, getBooleanv, getFloat, getFloatv, getInteger, getIntegerv merged to: getParameter
2. getBufferParameteri, getBufferParameteriv merged to: getBufferParameter
3. getFramebufferAttachmentParameteri, getFramebufferAttachmentParameteriv merged to: getFramebufferAttachmentParameter
4. getProgrami, getProgramiv merged to: getProgramParameter
5. getRenderbufferParameteri, getRenderbufferParameteriv merged to: getRenderbufferParameter
6. getShaderi, getShaderiv merged to getShaderParameter
7. getTexParameterf, getTexParameterfv, getTexParameteri, getTexParameteriv merged to: getTexParameter
8.getUniformf, getUniformfv, getUniformi, getUniformiv merged to: getUniform
9. getVertexAttribf, getVertexAttribfv, getVertexAttribi, getVertexAttribiv merged to: getVertexAttrib
[Taken from an article about changes in the spec: http://learningwebgl.com/blog/?p=1082]
@Gonzalo: Yeah, I know (hence the note at the beginning of the post). It's high on the to-do list, though. Thanks for summary and the link, that should make it a bit easier!
February 14, 2010 at 2:23 AM VjeuxHello,
February 23, 2010 at 7:48 AM AnonymousFirst, thanks for the Cheat Sheet.
After using it for some times I realized there were tooltips for arguments and constants! I would recommand you to use some Javascript tooltip implementation instead of just using the title attribute. Those informations are precious and not easily accessible.
Very useful stuff, thanks for sharing! Noticed a minor bug that you might want to fix: there should be no 'internal format' parameter in copyTexSubImage2D.
March 24, 2010 at 6:36 AM Eksistentiel terapiThank you very much to share this information. It is very useful and informative.
September 3, 2010 at 1:02 AMEksistentiel terapi