{"id":899,"date":"2013-09-01T11:01:02","date_gmt":"2013-09-01T04:01:02","guid":{"rendered":"http:\/\/blog.bebensiganteng.com\/?p=899"},"modified":"2013-09-01T11:01:02","modified_gmt":"2013-09-01T04:01:02","slug":"webgl-experiment","status":"publish","type":"post","link":"https:\/\/rahmat-hidayat.com\/?p=899","title":{"rendered":"Yet Another WebGL experiment"},"content":{"rendered":"<p>This post is a bit long so here&#8217;s the <a href=\"http:\/\/labs.bebensiganteng.com\/html5\/framebufferobjects\/\" title=\"Framebuffer Objects\" target=\"_blank\">demo<\/a> or play the video below in case you can&#8217;t see it (WebGL has tons of quirks depending on the browser versions\/OS) and source files is <a href=\"https:\/\/github.com\/bebensiganteng\/framebufferobjects\" title=\"https:\/\/github.com\/bebensiganteng\/framebufferobjects\" target=\"_blank\">here<\/a>.<\/p>\n<p><iframe loading=\"lazy\" src=\"\/\/player.vimeo.com\/video\/73453740?byline=0&amp;portrait=0&amp;color=ff0179\" width=\"425\" height=\"239\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe><\/p>\n<p>I had my first experience with WebGL around a <a href=\"http:\/\/blog.bebensiganteng.com\/?p=733\" title=\"http:\/\/blog.bebensiganteng.com\/?p=733\" target=\"_blank\">few months ago<\/a> and with <a href=\"http:\/\/en.wikipedia.org\/wiki\/OpenGL_Shading_Language\" title=\"http:\/\/en.wikipedia.org\/wiki\/OpenGL_Shading_Language\" target=\"_blank\">GLSL<\/a> when I was a part of the <a href=\"http:\/\/chrome.com\/maze\/\" title=\"http:\/\/chrome.com\/maze\/\" target=\"_blank\">World Wide Maze<\/a> team, but everything was done through <a href=\"http:\/\/threejs.org\/\" title=\"http:\/\/threejs.org\/\" target=\"_blank\">three.js<\/a>, which hides most of the nitty-gritty.<\/p>\n<p>Since WebGL is based on OpenGL <a href=\"http:\/\/www.khronos.org\/webgl\/wiki\/WebGL_and_OpenGL_Differences\" title=\"http:\/\/www.khronos.org\/webgl\/wiki\/WebGL_and_OpenGL_Differences\" target=\"_blank\">specifications<\/a> and currently most graphic processing uses OpenGL as their infrastructure (well until <a href=\"http:\/\/en.wikipedia.org\/wiki\/OpenCL\" title=\"http:\/\/en.wikipedia.org\/wiki\/OpenCL\" target=\"_blank\">OpenCL<\/a> comes along), so I thought it would be useful to know the inner workings of the system.<\/p>\n<p>In here I employed the <a href=\"http:\/\/www.mathematik.tu-dortmund.de\/~goeddeke\/gpgpu\/oldstuff\/HelloPingPong.pdf\" title=\"http:\/\/www.mathematik.tu-dortmund.de\/~goeddeke\/gpgpu\/oldstuff\/HelloPingPong.pdf\" target=\"_blank\">Ping-Pong<\/a> techniques by utilizing the <a href=\"http:\/\/en.wikipedia.org\/wiki\/Framebuffer_Object\" title=\"http:\/\/en.wikipedia.org\/wiki\/Framebuffer_Object\" target=\"_blank\">Framebuffer Object<\/a> architecture which enables millions of particles calculated through the texture, I&#8217;ve drawn a simple diagram to explain the process.<\/p>\n<p><a href=\"http:\/\/imgur.com\/bHMpe8N\"><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/bHMpe8N.jpg\" title=\"Diagram\"\/><\/a><\/p>\n<p>Hopefully that made any sense! This techniques also used for post-processing calculation by applying several passes through the <a href=\"http:\/\/jabtunes.com\/labs\/3d\/dof\/webgl_postprocessing_dof2.html\" title=\"http:\/\/jabtunes.com\/labs\/3d\/dof\/webgl_postprocessing_dof2.html\" target=\"_blank\">texture<\/a>.<\/p>\n<p>For the algorithms I&#8217;ve used the <a href=\"http:\/\/www.scholarpedia.org\/article\/Duffing_oscillator\" title=\"http:\/\/www.scholarpedia.org\/article\/Duffing_oscillator\" target=\"_blank\">Duffing oscillator<\/a>, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Lorenz_system\" title=\"http:\/\/en.wikipedia.org\/wiki\/Lorenz_system\" target=\"_blank\">Lorenz system<\/a>, and some randomized trigonometric calculation.<\/p>\n<p><em>Quick tips<\/em>, if you want to use complex algorithms I suggest that you read a lot of math books and try to understand at least the basic, because there are already hundreds of mathematician that have published their work since <a href=\"http:\/\/en.wikipedia.org\/wiki\/Lists_of_mathematicians\" title=\"http:\/\/en.wikipedia.org\/wiki\/Lists_of_mathematicians\" target=\"_blank\">centuries ago<\/a>, Computer Vision algorithms like <a href=\"http:\/\/en.wikipedia.org\/wiki\/Space_partitioning\" title=\"http:\/\/en.wikipedia.org\/wiki\/Space_partitioning\">Space partitioning<\/a>, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Fortune's_algorithm\" title=\"http:\/\/en.wikipedia.org\/wiki\/Fortune's_algorithm\" target=\"_blank\">Fortune&#8217;s algorithm<\/a>, etc. has been around for decades and you can easily <a href=\"https:\/\/delicious.com\/tag\/algorithms\" title=\"https:\/\/delicious.com\/tag\/algorithms\" target=\"_blank\">find the programming adaptation<\/a>, all you have to do is just decode\/modify\/combine it.<\/p>\n<h5>Tested on<\/h5>\n<p>&#8211; Chrome v29.0.1547.57<br \/>\n&#8211; Mac OSX 10.8.4, 3.2 Ghz Intel Core i3<\/p>\n<h5>References<\/h5>\n<p>&#8211; <a href=\"http:\/\/www.youtube.com\/watch?v=rfQ8rKGTVlg\" title=\"http:\/\/www.youtube.com\/watch?v=rfQ8rKGTVlg\" target=\"_blank\">Google I\/O 2011: WebGL Techniques and Performance<\/a><br \/>\n&#8211; <a href=\"http:\/\/acko.net\/files\/fullfrontal\/fullfrontal\/webglmath\/online.html\" title=\"http:\/\/acko.net\/files\/fullfrontal\/fullfrontal\/webglmath\/online.html\" target=\"_blank\">Making WebGL Dance<\/a><br \/>\n&#8211; <a href=\"http:\/\/codeflow.org\/entries\/2013\/feb\/22\/how-to-write-portable-webgl\/\" title=\"http:\/\/codeflow.org\/entries\/2013\/feb\/22\/how-to-write-portable-webgl\/\" target=\"_blank\">How to write portable WebGL<\/a><br \/>\n&#8211; <a href=\"http:\/\/learningwebgl.com\/blog\/?page_id=1217\" title=\"http:\/\/learningwebgl.com\/blog\/?page_id=1217\" target=\"_blank\">Learning WebGL<\/a><br \/>\n&#8211; <a href=\"http:\/\/www.html5rocks.com\/en\/tutorials\/webgl\/shaders\/\" title=\"http:\/\/www.html5rocks.com\/en\/tutorials\/webgl\/shaders\/\" target=\"_blank\">Introduction to shaders<\/a><br \/>\n&#8211; <a href=\"http:\/\/www.iquilezles.org\/\" title=\"http:\/\/www.iquilezles.org\/\" target=\"_blank\">I\u00f1igo Qu\u00edlez&#8217;s blog<\/a><br \/>\n&#8211; Once you understand the concept of shaders just stare at these <a href=\"https:\/\/www.shadertoy.com\/\" title=\"https:\/\/www.shadertoy.com\/\" target=\"_blank\">amazing<\/a> <a href=\"http:\/\/glsl.heroku.com\/\" title=\"http:\/\/glsl.heroku.com\/\" target=\"_blank\">shaders<\/a> to get more in-depth<br \/>\n&#8211; <a href=\"http:\/\/webglstats.com\/\" title=\"http:\/\/webglstats.com\/\" target=\"_blank\">WebGLStats<\/a><\/p>\n<h5>Resources<\/h5>\n<p><a href=\"https:\/\/github.com\/toji\/gl-matrix\" title=\"https:\/\/github.com\/toji\/gl-matrix\" target=\"_blank\">gl-matrix.js<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This post is a bit long so here&#8217;s the demo or play the video below in case you can&#8217;t see it (WebGL has tons of quirks depending on the browser versions\/OS) and source files is here. I had my first experience with WebGL around a few months ago and with GLSL when I was a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[27,29,31,45,57],"tags":[101,103,124,147],"_links":{"self":[{"href":"https:\/\/rahmat-hidayat.com\/index.php?rest_route=\/wp\/v2\/posts\/899"}],"collection":[{"href":"https:\/\/rahmat-hidayat.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rahmat-hidayat.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rahmat-hidayat.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rahmat-hidayat.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=899"}],"version-history":[{"count":0,"href":"https:\/\/rahmat-hidayat.com\/index.php?rest_route=\/wp\/v2\/posts\/899\/revisions"}],"wp:attachment":[{"href":"https:\/\/rahmat-hidayat.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=899"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahmat-hidayat.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=899"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahmat-hidayat.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}