{"id":131,"date":"2010-11-18T12:21:00","date_gmt":"2010-11-18T20:21:00","guid":{"rendered":"http:\/\/steveharoz.com\/blog\/?p=131"},"modified":"2015-09-30T03:23:50","modified_gmt":"2015-09-30T03:23:50","slug":"testing-the-waters-with-webgl","status":"publish","type":"post","link":"http:\/\/steveharoz.com\/blog\/2010\/testing-the-waters-with-webgl\/","title":{"rendered":"Testing the Waters with WebGL"},"content":{"rendered":"<p><strong>Updated browser info as of May 1, 2010<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/learningwebgl.com\/blog\/?p=11\">Getting a WebGL browser<\/a><\/li>\n<li>Firefox 4 and Safari partially work but do NOT have advanced vertex features<\/li>\n<li>Chrome&#8217;s WebGL support is similar, but the features can be enabled:\n<ul style=\"margin-bottom: 0\">\n<li>Close all Chrome windows<\/li>\n<li>Windows: <code>[UserFolder]AppDataLocalGoogleChromeApplicationchrome.exe --use-gl=desktop<\/code><\/li>\n<li>Mac: <code>\/Applications\/Google Chrome.app\/Contents\/MacOS\/Google Chrome --use-gl=desktop<\/code><\/li>\n<\/ul>\n<\/li>\n<li><em>Chrome&#8217;s and Firefox 4&#8217;s default vertex shader compiler has trouble with texture sampling in the vertex shader, so the demo skips that feature for those browsers. As Al mentioned in the comments, <a href=\"http:\/\/code.google.com\/p\/angleproject\/wiki\/VTF\">the plan<\/a> to add the capability to the WebGL engine is in place.<\/a><\/em><\/li>\n<\/ul>\n<p>After multiple people asked, I decided to give WebGL a try. I\u2019m impressed but also annoyed.<br \/>\n<strong>Trying some features out<\/strong><br \/>\n<a href=\"http:\/\/steveharoz.com\/public\/webgl\/\">Check out my modified WebGL moon demo<\/a>. Some credits are in the source.<br \/>\n<a href=\"http:\/\/steveharoz.com\/public\/webgl\/\"><img decoding=\"async\" style=\"background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;\" title=\"screenshot\" src=\"http:\/\/steveharoz.com\/blog\/wp-content\/uploads\/2010\/11\/screenshot1.png\" border=\"0\" alt=\"screenshot\" height=\"210\" \/><\/a>  <a href=\"http:\/\/steveharoz.com\/public\/webgl\/\"><img decoding=\"async\" style=\"background-image: none; padding-left: 0px; padding-right: 0px; display: inline; padding-top: 0px; border-width: 0px;\" title=\"moon\" src=\"http:\/\/steveharoz.com\/blog\/wp-content\/uploads\/2010\/11\/moon1.png\" border=\"0\" alt=\"moon\" height=\"210\" \/><\/a><br \/>\n<strong>Overall thoughts on WebGL<\/strong><br \/>\nPros:<\/p>\n<ul>\n<li>The graphics performance is an order of magnitude above any other web technology<\/li>\n<li>Again, it\u2019s really fast!<\/li>\n<li>It stays fairly true to OpenGL (which is good if you\u2019re familiar with OpenGL)<\/li>\n<\/ul>\n<p>Cons:<\/p>\n<ul>\n<li>The graphics performance is noticeably slower than a desktop app. And forget about using your CPU for anything else.<\/li>\n<li>It says fairly true to OpenGL (is that antiquated, procedural, state-machine-based API the best that anyone can do?)<\/li>\n<li>No released (non-beta) browser can run it by default.<\/li>\n<li>It is OpenGL <strong>ES<\/strong>, rather than full OpenGL. Radom functions are just not implemented, but no documentation mentions what\u2019s missing. In some cases whole features just don\u2019t work (e.g. geometry shaders).<\/li>\n<li>The crippled GLSL doesn\u2019t have most built-in shader variables like texture coordinates and gl_normal, so you need to make your own \u201cvarying\u201d pseudonyms.<\/li>\n<li>HTML, javascript, and GLSL\u2026 ALL IN ONE FILE! Readability is lost.<\/li>\n<\/ul>\n<p>Overall compatibility and tools (text completion and debugging those files) are going to be the primary determining factors in WebGL\u2019s success. It\u2019s early, so we\u2019ll have to see what happens.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Updated browser info as of May 1, 2010 Getting a WebGL browser Firefox 4 and Safari partially work but do NOT have advanced vertex features Chrome&#8217;s WebGL support is similar, but the features can be enabled: Close all Chrome windows Windows: [UserFolder]AppDataLocalGoogleChromeApplicationchrome.exe &#8211;use-gl=desktop Mac: \/Applications\/Google Chrome.app\/Contents\/MacOS\/Google Chrome &#8211;use-gl=desktop Chrome&#8217;s and Firefox 4&#8217;s default vertex shader [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[7],"tags":[24],"class_list":["post-131","post","type-post","status-publish","format-standard","hentry","category-web","tag-webgl"],"_links":{"self":[{"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/posts\/131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/comments?post=131"}],"version-history":[{"count":1,"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/posts\/131\/revisions"}],"predecessor-version":[{"id":551,"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/posts\/131\/revisions\/551"}],"wp:attachment":[{"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/media?parent=131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/categories?post=131"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/steveharoz.com\/blog\/wp-json\/wp\/v2\/tags?post=131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}