{"id":3181,"date":"2012-08-01T18:18:24","date_gmt":"2012-08-02T00:18:24","guid":{"rendered":"http:\/\/www.realtimerendering.com\/blog\/?p=3181"},"modified":"2013-10-28T08:28:34","modified_gmt":"2013-10-28T14:28:34","slug":"webgl-resources","status":"publish","type":"post","link":"https:\/\/www.realtimerendering.com\/blog\/webgl-resources\/","title":{"rendered":"WebGL Resources"},"content":{"rendered":"<p>by Patrick Cozzi, a guest blogger<\/p>\n<p><em>(I was corresponding with Patrick and found he knew way too much about WebGL, so asked him to write something down. &#8211; Eric)<\/em><\/p>\n<p>Although I am a long-time C++ and OpenGL developer, I&#8217;ve been developing full-time in JavaScript and WebGL for the past year and a half on an open-source 3D engine, <a href=\"http:\/\/cesium.agi.com\/\">Cesium<\/a>, for virtual globes and maps. Here are some of my favorite WebGL resources.<\/p>\n<p>Reading<\/p>\n<ul>\n<li><a href=\"http:\/\/learningwebgl.com\/blog\/\">Learning WebGL<\/a> &#8211; Giles Thomas does a great job reporting the latest WebGL news and demos in his <em>WebGL around the net<\/em> posts.<\/li>\n<li><a href=\"http:\/\/www.webglcamp.com\">WebGL Camp<\/a> is a mini WebGL conference. There have been four in the bay area, one in Orlando, and one in Switzerland. Videos, slides, and demos for all of them are online. Of particular interest is the WebGL game engine, <a href=\"http:\/\/turbulenz.com\/\">turbulenz<\/a>: <a href=\"http:\/\/www.shader.org\/webglcamp\/slides\/s2_4.pdf\">slides<\/a> \u2022 <a href=\"http:\/\/www.youtube.com\/watch?v=k2C5govjl5Y&amp;feature=youtu.be\">video<\/a>.<\/li>\n<li>There are a few intro books including <a href=\"http:\/\/voxelent.com\/resources\/webgl-beginners-guide\/\">WebGL Beginner&#8217;s Guide<\/a> by <a href=\"http:\/\/www.imaging.robarts.ca\/~dcantor\/\">Diego Cantor<\/a> and <a href=\"http:\/\/blog.tojicode.com\/\">Brandon Jones<\/a>, and <a href=\"http:\/\/shop.oreilly.com\/product\/0636920024729.do\">WebGL: Up and Running<\/a> by <a href=\"http:\/\/tonyparisi.wordpress.com\/\">Tony Parisi<\/a>. I haven&#8217;t read them, but the authors are well respected in the WebGL community.<\/li>\n<li>Our new book, <a href=\"http:\/\/openglinsights.com\/\">OpenGL Insights<\/a>, has 15 chapters related to WebGL, including a <a href=\"http:\/\/www.seas.upenn.edu\/~pcozzi\/OpenGLInsights\/OpenGLInsights-ANGLE.pdf\">sample chapter<\/a>, <em>The ANGLE Project: Implementing OpenGL ES 2.0 on Direct3D<\/em> by <a href=\"http:\/\/twitter.com\/booner_k\">Daniel Koch<\/a> and <a href=\"http:\/\/twitter.com\/c0d1f1ed\">Nicolas Capens<\/a>, that describes ANGLE, the default WebGL implementation on Windows in Chrome and Firefox.<\/li>\n<\/ul>\n<p>SIGGRAPH<\/p>\n<ul>\n<li>The <a href=\"http:\/\/www.khronos.org\/news\/events\/siggraph-los-angeles-2012#webgl_bof\">WebGL BOF<\/a>, organized by Ken Russell, will have a series of five-minute lighting talks with a focus on demos, including a <a href=\"http:\/\/cesium.agi.com\/\">Cesium<\/a> demo I&#8217;m giving. Last year the room was packed &#8211; people standing, sitting on the floor, and crowding around the door. Let&#8217;s hope the room is a lot bigger this year.<\/li>\n<li><a href=\"http:\/\/s2012.siggraph.org\/attendees\/sessions\/graphics-programming-web\">Graphics Programming for the Web<\/a> is a timely new course by <a href=\"http:\/\/pushkarjoshi.org\/\">Pushkar Joshi<\/a>, <a href=\"http:\/\/www.linkedin.com\/in\/mikeseven\">Mika\u00ebl Bourges-S\u00e9venier<\/a>, Ken Russell, and <a href=\"http:\/\/www.linkedin.com\/in\/zhenyao\">Zhenyao Mo<\/a> covering WebGL and other relavant HTML5 techniques. It sounds like it will be pretty broad, which is great for C++ developers like me that recently started to pretend to be web developers.<\/li>\n<li>Although not WebGL-specific, I&#8217;ll be at the <a href=\"http:\/\/rest3d.wordpress.com\/2012\/07\/08\/rest3d-bof-at-siggraph-2012\/\">Rest 3D BOF<\/a> organized by <a href=\"https:\/\/twitter.com\/remi_arnaud\/\">R\u00e9mi Arnaud<\/a>. I&#8217;ll even miss part of <a href=\"http:\/\/s2012.siggraph.org\/attendees\/sessions\/beyond-programmable-shading\">Beyond Programmable Shading<\/a> for it. <a href=\"http:\/\/rest3d.wordpress.com\/about-2\/\">Rest 3D<\/a> is defining a REST API for accessing 3D content over HTTP. If it gets widespread adoption from content providers, WebGL apps using the API will have access to a ton of content, which is a big win for everyone.<\/li>\n<\/ul>\n<p>Need to convince management\/leads to consider WebGL?<\/p>\n<ul>\n<li>WebGL is cross-platform, and doesn&#8217;t require an install, plugin, or admin rights. IE doesn&#8217;t support WebGL, but there are several <a href=\"http:\/\/blog.virtualglobebook.com\/2011\/10\/webgl-in-internet-explorer.html\">options<\/a>. We&#8217;ve found <a>Chrome Frame<\/a> to be the best because it installs without requiring admin rights, and also brings Chrome&#8217;s fast JavaScript engine.<\/li>\n<li>WebGL browser support is increasing. Check out the <a href=\"http:\/\/webglstats.com\/\">WebGL Stats<\/a> by <a href=\"https:\/\/twitter.com\/pyalot\">Florian B\u00f6sch<\/a>. It currently reports that 65.6% of desktop browsers across all OSes support WebGL. (more stats for Firefox <a href=\"http:\/\/people.mozilla.org\/~bjacob\/gfx_features_stats\/\">here<\/a>).<\/li>\n<li>JavaScript doesn&#8217;t suck that much, really. <a href=\"http:\/\/shop.oreilly.com\/product\/9780596517748.do\">JavaScript: The Good Parts<\/a> by <a href=\"http:\/\/www.crockford.com\/\">Douglas Crockford<\/a> and his other <a href=\"http:\/\/javascript.crockford.com\/\">JavaScript writings<\/a> are great reads. There are downsides too, of course; for example, I have a much harder time rationalizing about performance in JavaScript than I do in C++. Fortunately, the built-in Chrome <a href=\"https:\/\/developers.google.com\/chrome-developer-tools\/docs\/cpu-profiling\">profiler<\/a> is painless to use.<\/li>\n<\/ul>\n<p>Tools<\/p>\n<ul>\n<li>The <a href=\"http:\/\/benvanik.github.com\/WebGL-Inspector\/\">WebGL Inspector<\/a> by <a href=\"https:\/\/twitter.com\/benvanik\">Ben Vanik<\/a> allows us to step through WebGL calls or just draw calls, and view textures, buffers, shaders, and the current state &#8211; think <a href=\"http:\/\/developer.amd.com\/tools\/gdebugger\/pages\/default.aspx\">gDEBugger<\/a> for WebGL. I like to use it as a sanity check to make sure we are not making too many draw calls or loading too many textures.<\/li>\n<li>Our <a href=\"http:\/\/analyticalgraphicsinc.github.com\/webglreport\/\">WebGL Report<\/a> uses a pipeline diagram to display the system&#8217;s WebGL capabilities such as maximum texture size and number of texture image units.<\/li>\n<\/ul>\n<p>Finally, the <a href=\"http:\/\/www.khronos.org\/webgl\/wiki\/Main_Page\">WebGL wiki<\/a> has a ton of great resources including a list of <a href=\"http:\/\/www.khronos.org\/webgl\/wiki\/User_Contributions\">frameworks and more<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>by Patrick Cozzi, a guest blogger (I was corresponding with Patrick and found he knew way too much about WebGL, so asked him to write something down. &#8211; Eric) Although I am a long-time C++ and OpenGL developer, I&#8217;ve been developing full-time in JavaScript and WebGL for the past year and a half on an [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[67,523],"class_list":["post-3181","post","type-post","status-publish","format-standard","hentry","category-resources","tag-opengl","tag-webgl"],"_links":{"self":[{"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/posts\/3181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/comments?post=3181"}],"version-history":[{"count":6,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/posts\/3181\/revisions"}],"predecessor-version":[{"id":3667,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/posts\/3181\/revisions\/3667"}],"wp:attachment":[{"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/media?parent=3181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/categories?post=3181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.realtimerendering.com\/blog\/wp-json\/wp\/v2\/tags?post=3181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}