tag:blogger.com,1999:blog-6424068376070713252024-03-13T21:49:15.889+02:00Lively goes 3DMatti Anttonenhttp://www.blogger.com/profile/01088803339101746684noreply@blogger.comBlogger21125tag:blogger.com,1999:blog-642406837607071325.post-78446683593141109352012-02-01T14:57:00.008+02:002012-02-01T17:05:14.901+02:00Lively3D released!<a href="http://3.bp.blogspot.com/-_5NpXuBFhY8/TylSik8JUEI/AAAAAAAAAoA/A1IalcKo0Zs/s1600/default_small.png"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;width: 200px; height: 125px;" src="http://3.bp.blogspot.com/-_5NpXuBFhY8/TylSik8JUEI/AAAAAAAAAoA/A1IalcKo0Zs/s400/default_small.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5704181157026418754" /></a><br /><div>Lively3D is three dimensional windowing environment implemented in WebGL with help of GLGE-library. It features embedding of canvas-applications, customizing 3D-scenes and persistence of desktop state.</div><div><div><br /></div><div><div>Lively3D provides API for third party developers, who can develop additional canvas-applications and 3D-scenes which are embedded with implementation of interface functions. These functions are designed in such way that the implementation requires minimal knowledge of the environment itself. Applications and scenes are deployed in shared Dropbox-folder, so that developers can collaborate and deploy their code without constantly updating files on the server hosting Lively3D.</div><div><br /></div><div><br /></div><a href="http://2.bp.blogspot.com/-oWtaN-m5l4M/TylUWPqOVcI/AAAAAAAAAoY/6qXSB3pCZcU/s1600/terrain_small.png"><img style="float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;width: 200px; height: 125px;" src="http://2.bp.blogspot.com/-oWtaN-m5l4M/TylUWPqOVcI/AAAAAAAAAoY/6qXSB3pCZcU/s400/terrain_small.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5704183144178931138" /></a><br /><div>Most of the applications were developed by summer coders and are described in previous blog posts. Two additional scenes are available for initializing in the user interface.</div><div><br /></div><div><br /></div><div><br /></div><div><br /></div><div><br /></div><div>All code is MIT licensed and available in <a href="https://github.com/Zharktas/Lively3D">Github</a>. Documentation of library interfaces is located at <a href="http://lively3d.cs.tut.fi/docs/">Docs</a> Running environment is testable in <a href="http://lively3d.cs.tut.fi/">Lively3D</a></div></div><div><br /></div></div>Jari Voutilainenhttp://www.blogger.com/profile/08675672428925578808noreply@blogger.com0tag:blogger.com,1999:blog-642406837607071325.post-30025276461549867952011-12-09T17:08:00.000+02:002011-12-09T17:08:15.258+02:00HTML5 Security<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-tSq5cxrej04/TuIfhTt9ALI/AAAAAAAAAD0/Z3bcNVsl1_A/s1600/HTML5_Logo_512.png" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="200" width="200" src="http://3.bp.blogspot.com/-tSq5cxrej04/TuIfhTt9ALI/AAAAAAAAAD0/Z3bcNVsl1_A/s200/HTML5_Logo_512.png" /></a></div><br />
Security in HTML5's all new features have generated quite a lot discussion lately in different internet forums. There have been comments on both good and bad sides of the new features and some discussions have turned into debates whether it should be the specifications or the coders responsibility to make their web pages safer.<br />
<br />
In my opinion, as a coder, it is always a good thing to know about the security side of different web technologies, whether they are safe or not.<br />
<br />
The best analyses I have found so far on HTML5 security are the following reports:<br />
<br />
ENISA (European Network and Information Security Agency) have published a 60 pages long security analysis of next generation web standards, in which they address 51 security threats in detail. Full report available <a href="http://www.enisa.europa.eu/act/application-security/web-security/a-security-analysis-of-next-generation-web-standards">here</a>.<br />
<br />
Also a <a href="http://us.trendmicro.com/imperia/md/content/us/trendwatch/researchandanalysis/html5_overview-a_look_at_html5_attack_scenarios.pdf">research report by Trend Micro</a> issues similar threats and presents an example scenario on generating a botnet with HTML5 technologies.<br />
<br />
Another good sites to find out more about HTML5 security are <a href="http://html5sec.org/">http://html5sec.org/</a> and <a href="http://code.google.com/p/html5security/">HTML5 Security Cheatsheet Project</a> websites.Matti Anttonenhttp://www.blogger.com/profile/01088803339101746684noreply@blogger.com2tag:blogger.com,1999:blog-642406837607071325.post-36372988002540180892011-11-07T20:22:00.006+02:002011-11-07T20:52:48.901+02:00Rendering HTML on CanvasRobert O'Callahan writes in his blog about a workaround that allows to render HTML on Canvas element using SVG:<br /><br /><blockquote>The trick is to create an SVG image containing the content you want to render, in this case a <foreignobject> containing HTML, and draw that image to the canvas. Constructing the SVG image as a data: URI lets you compose the content dynamically without requiring an external resource load. There is nothing tricky going on here; this feature works exactly as it should according to the specs.</foreignobject></blockquote><br /><a href="http://robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html">Blog post</a><br /><a href="http://people.mozilla.org/~roc/rendering-HTML-elements-to-canvas.html">Demo</a><div><br /></div><div>There is also another project that aims at rendering HTML on Canvas. Niklas von Herzen has created a JavaScript library to solve the issue.</div><div><br /></div><div><a href="http://html2canvas.hertzen.com/">Project website</a></div><div><a href="https://github.com/niklasvh/html2canvas">Project on GitHub</a><br /><div><br /></div><div><br /></div></div>Arto Salminenhttp://www.blogger.com/profile/08677004150896658594noreply@blogger.com3tag:blogger.com,1999:blog-642406837607071325.post-75012697044339647402011-09-08T12:23:00.023+03:002011-09-08T12:55:18.461+03:00Experiencing with Canvas, HTML5 and WebGLDuring the summer four trainees did little games as an introduction project to JavaScript, Canvas, HTML5 and WebGL. Four games developed were Space Attack, Jump, Mouse and Bullet.<br /><ul><br /><li>Space Attack is an arcade type shooting game where player controls a space ship and destroys enemies.</li><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/-BIo93i7-CBo/TmiKPCmAGNI/AAAAAAAACMY/MWtUPkjQ1t8/s1600/spaceAttack.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 159px;" src="http://3.bp.blogspot.com/-BIo93i7-CBo/TmiKPCmAGNI/AAAAAAAACMY/MWtUPkjQ1t8/s320/spaceAttack.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5649917723535218898" /></a><br /><br /><li>Jump is a simple 2D platform game where player collects coins and tries to avoid falling down.</li><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/-7ROqc72tASU/TmiKdSgX09I/AAAAAAAACMg/O2pBVQj8kG0/s1600/jump.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 255px; height: 255px;" src="http://3.bp.blogspot.com/-7ROqc72tASU/TmiKdSgX09I/AAAAAAAACMg/O2pBVQj8kG0/s320/jump.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5649917968324744146" /></a><br /><br /><li>Mouse is a reaction game where player controls a mouse character, tries to collect cheese and avoid hitting cats in a restricted area.</li><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/-cpEXP3q_p5E/TmiKqcdv9KI/AAAAAAAACMo/SUG-GgpEYGs/s1600/mouse.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 200px;" src="http://3.bp.blogspot.com/-cpEXP3q_p5E/TmiKqcdv9KI/AAAAAAAACMo/SUG-GgpEYGs/s320/mouse.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5649918194336396450" /></a><br /><br /><li>Bullet is another reaction game where player has to counter-attack enemies with correct types of bullets.</li><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/-1GVTun7FFNo/TmiKzsQgJ7I/AAAAAAAACMw/AH-V2G_rI5E/s1600/bulletgame.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 250px; height: 251px;" src="http://1.bp.blogspot.com/-1GVTun7FFNo/TmiKzsQgJ7I/AAAAAAAACMw/AH-V2G_rI5E/s320/bulletgame.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5649918353194624946" /></a><br /></ul><br />Games were done without any experience of web programming, JavaScript or HTML5. When games were ready we decided to do some research and comparisons between different technologies that could be used composing similar games.<br /><br />Two of the games, Space Attack and Mouse, were redone in traditional way using just CSS styles, HTML and JavaScript (no Canvas involved) and other two games, Jump and Bullet were redone with WebGL. Performance, memory usage and code complexity were compared between the original compositions and remakes.<br /><br /><h2>Performance</h2><br />For measuring the percentage of time used in rendering we used profiles from Chrome's developer tools. Measurements showed that the performance differences between implementations were small. Traditional implementations were from 3% to 8% more efficient than Canvas implementation. Differences between WebGL and Canvas implementations were similar: WebGL implementations were up to 9% more efficient than Canvas implementations. We found out that the reason for Canvas being the most inefficient might be text rendering. In our games rendering a simple text showing scores during gameplay took from 35% to 87% of the time used in rendering.<br /><br />We also tried to measure FPS of the games but it's not a trivial task when browser’s rendering loop dominates drawing. For Canvas and WebGL we could use Chrome's FPS counter with 2D-hardware acceleration to measure FPS, but for games that doesn't involve Canvas or WebGL Chrome's FPS counter can't be used. Chrome also limits FPS to 60, so differences between efficiency in Canvas and WebGL weren’t exposed in measurements.<br /><br />MozPaintCount was another method we tried for measuring FPS but for Mouse game that uses mouse movements as a control <a href="https://developer.mozilla.org/en/DOM/window.mozPaintCount">MozPaintCoun</a>t didn't provide reliable results. MozPaintCount gives the number of how many times the whole document is rendered and when you move the cursor, document is apparently rendered again. So for measuring game performance MozPaintCount weren't the right tool.<br /><br />One huge problem of comparing FPS of program in browser is that there aren't tools that works for Canvas, WebGL and traditional programs and are available in several browsers. MozPaintCount method works only in Mozilla Firefox and Chromes FPS counter is only available in Chrome so reliable and comparable results can't be provided easily.<br /><br /><h2>Memory Usage</h2><br />Memory usage we explored with Timeline from Chrome's developer tools. Between Canvas game and traditional web game there isn't a significant difference in memory usage but between Canvas and WebGL the difference is notable. WebGL implementations uses 2-3 times more memory than Canvas implementations. In Canvas games the memory usage were mostly under 10 MB when in WebGL games it was over 20 MB after games had been running approximately 15 minutes.<br /><br /><h2>Code Complexity</h2><br />Measuring code complexity were a hard task because, like in measuring FPS, there aren't good tools or any tools at all for complexity analysis for JavaScript or HTML. One tool we managed to found was <a href="http://jsmeter.info/">jsmeter</a>. Jsmeter provided some results but it couldn't handle source code that was divided in more than one file. Even though we couldn't do complexity analysis we draw some conclusions about complexity based on amount of code lines.<br /><br />Just based on amount of code lines WebGL implementations were the most complex. We didn't use any library or framework for WebGL implementations even tough there are libraries to hide away WebGL's syntax and complexity. Between Canvas and traditional implementations there weren't significant differences in complexity. Traditional implementations have usually less JavaScript code than Canvas implementations but more lines written in HTML and CSS.<br /><br /><span style="font-weight:bold;">Amount of JavaScript code lines</span><br /><table border="1"><tr><td></td><td><span style="font-weight:bold;">Canvas</span></td><td><span style="font-weight:bold;">Traditional</span></td><td><span style="font-weight:bold;">WebGL</span></td></tr><tr><td><span style="font-weight:bold;">Space Attack</span></td><td>573</td><td>533</td><td>-</td></tr><tr><td><span style="font-weight:bold;">Jump</span></td><td>918</td><td>-</td><td>1458</td></tr><tr><td><span style="font-weight:bold;">Mouse</span></td><td>830</td><td>798</td><td>-</td></tr><tr><td><span style="font-weight:bold;">Bulletgame</span></td><td>1041</td><td>-</td><td>1777</td></tr></table>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-642406837607071325.post-43235349982068066492011-09-05T15:42:00.002+03:002011-09-05T15:46:08.359+03:00VNC Client in Lively3D<div style="text-align: center;">
<br /></div>Here is a short video demo about VNC client in Lively3D world. The VNC client used is <a href="http://kanaka.github.com/noVNC/">noVNC</a>.<div>
<br /></div><div><iframe width="420" height="345" src="http://www.youtube.com/embed/IInN9q5v2rU?hd=1" frameborder="0" allowfullscreen=""></iframe></div><div>
<br /></div><div>
<br /></div><img src="http://3.bp.blogspot.com/--fdYEKctJsU/TmTEYM94bXI/AAAAAAAAIBU/hwy0IO2fuwM/s400/9777435.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 258px;" border="0" alt="" id="BLOGGER_PHOTO_ID_5648855752706125170" /><div>
<br /></div><div>
<br /></div><div>
<br /></div>Arto Salminenhttp://www.blogger.com/profile/08677004150896658594noreply@blogger.com0tag:blogger.com,1999:blog-642406837607071325.post-6889246667296453822011-05-16T13:31:00.003+03:002011-05-16T13:44:29.044+03:00Angry Birds in Browser with WebGL<div>Angry Birds is a puzzle video game developed by Finland-based Rovio Mobile. Recently it has been ported for web browsers. The implementation uses WebGL for rendering the graphics.</div><div><br /></div><a href="http://chrome.angrybirds.com/">http://chrome.angrybirds.com/</a><div><br /></div>Most of the WebGL demos so far has demonstrated the 3D possibilities of WebGL but the WebGL version of Angry Birds shows how well WebGL can be used for 2D content as well. Another fine example of using 2D on WebGL is a nice space shooter game called X-Type <a href="http://www.phoboslab.org/xtype/">http://www.phoboslab.org/xtype/</a>, which uses WebGL-2D, a library that implements Canvas2D API on WebGL context. <a href="https://github.com/corbanbrook/webgl-2d">https://github.com/corbanbrook/webgl-2d</a><div><br /></div>Arto Salminenhttp://www.blogger.com/profile/08677004150896658594noreply@blogger.com0tag:blogger.com,1999:blog-642406837607071325.post-50253405079172352152011-03-04T10:04:00.003+02:002011-03-04T10:14:05.481+02:00WebGL specification 1.0 released<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/-kfHvsu28zPk/TXCfEbwX-uI/AAAAAAAAADE/AjE6H1wxAD8/s1600/WebGL_logo.png"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 163px; height: 75px;" src="http://3.bp.blogspot.com/-kfHvsu28zPk/TXCfEbwX-uI/AAAAAAAAADE/AjE6H1wxAD8/s200/WebGL_logo.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5580134836830993122" /></a><br />The WebGL 1.0 specification was released this morning at GDC in San Francisco. Khronos has published a <a href="http://www.khronos.org/news/press/releases/khronos-releases-final-webgl-1.0-specification">press release</a> on the subject.<br /><br />The press release also announces that Khronos is forming up a working group for WebCL to explore defining a JavaScript binding to the Khronos OpenCL™ standard for heterogeneous parallel computing. As said in the press release:<br /><br />"<span style="font-style:italic;">WebCL creates the potential to harness GPU and multi-core CPU parallel processing from a Web browser, enabling significant acceleration of applications such as image and video processing and advanced physics for WebGL games.</span>"Matti Anttonenhttp://www.blogger.com/profile/01088803339101746684noreply@blogger.com0tag:blogger.com,1999:blog-642406837607071325.post-18377112386753991992011-02-07T20:41:00.002+02:002011-02-07T20:46:36.971+02:00WebGL in Chrome 9 by default<div>The latest stable Google Chrome (version 9) has WebGL enabled by default.</div><div><br /></div><a href="http://chrome.blogspot.com/2011/02/dash-of-speed-3d-and-apps.html">http://chrome.blogspot.com/2011/02/dash-of-speed-3d-and-apps.html</a><div><br /></div><div><br /></div>Arto Salminenhttp://www.blogger.com/profile/08677004150896658594noreply@blogger.com0tag:blogger.com,1999:blog-642406837607071325.post-44456666787109727502011-01-17T15:14:00.002+02:002011-01-17T15:30:58.073+02:00Lively team @ C5-11 conferenceOne of our research papers: "The Death of Binary Software: End User Software Moves to the Web" was accepted at <a href="http://www.cm.is.ritsumei.ac.jp/c5-11/">The Ninth International Conference on Creating, Connecting and Collaborating through Computing</a>. The conference is held at Kyoto University at Japan 18-20 January and we have a four member team on the site.<br /><br />On top of our slideshow we are planning to demonstrate the possibilities of WebGL by showing a few WebGL demos:<br /><a href="http://www.cs.tut.fi/~salmin39/webgl/GLGE/canvasexperiments_2/expt.xhtml">Lively Kernel rendered on a cube</a><br /><a href="http://www.eucfutsal2011.com/webgl/minigolf/index2.html">3D Minigolf</a><br /><a href="http://bodybrowser.googlelabs.com/body.html#">Body Browser</a> by Google<br /><a href="http://crystalin.dyndns.org:8080/GwtQuake.html">Quake 2 GWT port</a> by GoogleMatti Anttonenhttp://www.blogger.com/profile/01088803339101746684noreply@blogger.com0tag:blogger.com,1999:blog-642406837607071325.post-89277714549556397412010-12-14T12:47:00.006+02:002010-12-14T14:45:15.567+02:00Christmas version of minigolf<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_WGKkWAMmXuM/TQdm15oSJnI/AAAAAAAAACM/7Elb1Ocgaqc/s1600/xmasminigolf.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 190px;" src="http://3.bp.blogspot.com/_WGKkWAMmXuM/TQdm15oSJnI/AAAAAAAAACM/7Elb1Ocgaqc/s320/xmasminigolf.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5550518141946308210" /></a><br />Christmas is closing by so I decided to cheer up our project meeting by creating a <a href="http://www.eucfutsal2011.com/webgl/minigolf/multi.php">Christmas version</a> of my WebGL minigolf game. It is now possible to play a hotseat multiplayer game with up to 10 players. The game consists of three holes decorated with Christmas theme.Matti Anttonenhttp://www.blogger.com/profile/01088803339101746684noreply@blogger.com0tag:blogger.com,1999:blog-642406837607071325.post-5611034983399684632010-11-26T09:06:00.003+02:002010-11-26T09:09:47.274+02:00WebGL inspector for Chromium, Webkit and Firefox<div><blockquote></blockquote><span class="Apple-style-span" style="font-family: helvetica, arial, freesans, clean, sans-serif; font-size: 13px; line-height: 20px; ">WebGL debugging tool for Chromium, Webkit and Firefox (coming soon) was introduced:</span></div><div><span class="Apple-style-span" style="font-family: helvetica, arial, freesans, clean, sans-serif; font-size: 13px; line-height: 20px; "><br /><blockquote><i>"WebGL Inspector is a tool inspired by <a href="http://www.gremedy.com/" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; line-height: 1.4em; color: rgb(65, 131, 196); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">gDEBugger</a> and <a href="http://msdn.microsoft.com/en-us/library/ee417062.aspx" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; line-height: 1.4em; color: rgb(65, 131, 196); text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; ">PIX</a> with the goal of making the development of advanced WebGL applications easier. What Firebug and Developer Tools are to HTML/JS, WebGL Inspector is to WebGL."</i></blockquote></span></div><div><br /></div><a href="http://benvanik.github.com/WebGL-Inspector/">http://benvanik.github.com/WebGL-Inspector/</a><div><br /></div><div><br /></div>Arto Salminenhttp://www.blogger.com/profile/08677004150896658594noreply@blogger.com0tag:blogger.com,1999:blog-642406837607071325.post-67913558516155321292010-11-22T15:00:00.002+02:002010-11-22T15:02:35.231+02:00Rendering QML on 3D cube<div>QML content can be embedded into 3D world by rendering it on QGraphicsScene that is used as a texture for 3D object. See video below.</div><div><br /></div><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/fgbRKy_ss_s?fs=1&hl=fi_FI&rel=0&color1=0x2b405b&color2=0x6b8ab6"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/fgbRKy_ss_s?fs=1&hl=fi_FI&rel=0&color1=0x2b405b&color2=0x6b8ab6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object><div><br /></div><div><br /></div>Arto Salminenhttp://www.blogger.com/profile/08677004150896658594noreply@blogger.com4tag:blogger.com,1999:blog-642406837607071325.post-75023523549169913432010-11-17T19:16:00.002+02:002010-11-17T19:28:15.372+02:00Qt WebKit supports HTML5<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_WGKkWAMmXuM/TOQQfGP5NqI/AAAAAAAAABk/zGZdpeBrIho/s1600/qt-logo.png"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 200px; height: 200px;" src="http://4.bp.blogspot.com/_WGKkWAMmXuM/TOQQfGP5NqI/AAAAAAAAABk/zGZdpeBrIho/s200/qt-logo.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5540571568011818658" /></a><br />As published by <a href="http://qt.nokia.com/products/library/qtwebkit">Qt-webpage</a>, Qt WebKit Integration is an integration of WebKit with Qt. It provides an HTML browser engine that makes it easy to run web apps or embed web content into Qt applications. Qt WebKit supports HTML5 and WebGL specifications.<br /><br />There is also a <a href="http://www.youtube.com/watch?v=plNk_p2IcLU">3D Flickr HTML5 demo video</a> available to demonstrate the HTML5 and WebGL possibilities with Qt.Matti Anttonenhttp://www.blogger.com/profile/01088803339101746684noreply@blogger.com0tag:blogger.com,1999:blog-642406837607071325.post-44772605326246830792010-11-17T14:06:00.005+02:002010-11-17T14:20:09.060+02:00WebGL seminar at TUT<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_WGKkWAMmXuM/TOPIccTWT0I/AAAAAAAAABc/tKV0Le1ldVo/s1600/WebGL_logo.png"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 163px; height: 75px;" src="http://1.bp.blogspot.com/_WGKkWAMmXuM/TOPIccTWT0I/AAAAAAAAABc/tKV0Le1ldVo/s200/WebGL_logo.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5540492357555081026" /></a><br />A WebGL seminar will be organized at Tampere University of Technology by Prof. <a href="http://www.cs.tut.fi/~tjm/">Tommi Mikkonen</a> and Dr. <a href="http://www.cs.tut.fi/~taivalsa/">Antero Taivalsaari</a>. The seminar will start at December 9, 2010 and end at spring 2011.<br /><br />In this seminar, WebGL and the emerging WebGL libraries will be investigated in the form of student presentations, application development exercises and group discussions. Students will prepare a presentation on one of the topics they choose, and will give a presentation in front of the seminar participants to summarize their findings. Students will also build sample applications using at least one of the libraries mentioned above.<br /><br />For more information about the seminar, check: <a href="http://lively.cs.tut.fi/seminars/WebGL2011/">WebGL Seminar @ TUT</a>Matti Anttonenhttp://www.blogger.com/profile/01088803339101746684noreply@blogger.com0tag:blogger.com,1999:blog-642406837607071325.post-18946195194091608642010-09-30T09:36:00.004+03:002010-09-30T09:47:07.437+03:00How to get WebGL-enabled browserLearning WebGL blog has <a href="http://learningwebgl.com/blog/?p=11">nice instructions</a> how to enable WebGL in most popular web browsers.<div><br /></div><div><b>Instructions for Google Chrome on Windows</b></div><div><div><br /></div><div>Get the <a href="http://build.chromium.org/buildbot/continuous/win/LATEST/">Chorme nightly build</a> and download <i>chrome-win32.zip</i></div><div><br /></div><div>Execute Chrome with the following command:</div><div><span class="Apple-style-span"><span class="Apple-style-span">chrome.exe --enable-webgl</span></span></div></div><div><span class="Apple-style-span"><br /><div>Command line is not necessary if a shortcut with the command parameter (--enable-webgl) is created for running the Chrome.</div><div><br /></div><div><br /></div></span></div>Arto Salminenhttp://www.blogger.com/profile/08677004150896658594noreply@blogger.com0tag:blogger.com,1999:blog-642406837607071325.post-22282621358441577352010-09-14T13:50:00.005+03:002010-09-17T15:55:57.883+03:00Exploring with GLGE canvas textures<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_d-EaXXsJMQ0/TI9TvVe1BZI/AAAAAAAAHYw/wgDcAfxZTj8/s1600/lively-cube.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 158px;" src="http://4.bp.blogspot.com/_d-EaXXsJMQ0/TI9TvVe1BZI/AAAAAAAAHYw/wgDcAfxZTj8/s320/lively-cube.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5516720141237552530" /></a>During the last couple of days I have been exploring with recently announced <a href="http://www.glge.org/">GLGE</a> canvas texture support. Here are a couple of experiments:<div><br /><div><ul><li><a href="http://www.cs.tut.fi/~salmin39/webgl/GLGE/canvasexperiments_2/expt.xhtml">Lively Kernel rendered on a cube</a></li><li><a href="http://www.cs.tut.fi/~salmin39/webgl/GLGE/canvasexperiments/">Other things (video/text/cube itself) rendered on a cube</a></li></ul><div><br /></div><div>On both demos the camera can be moved towards or away from the cube with mouse wheel. On the latter demo you can turn the cube with arrow keys. Please turn right first to avoid a weird bug. </div></div></div><div><br /></div><div><object style="background-image:url(http://i4.ytimg.com/vi/ggLjIJDh2MQ/hqdefault.jpg)" width="425" height="344"><param name="movie" value="http://www.youtube.com/v/ggLjIJDh2MQ?fs=1&hl=fi_FI"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/ggLjIJDh2MQ?fs=1&hl=fi_FI" width="425" height="344" allowscriptaccess="never" allowfullscreen="true" wmode="transparent" type="application/x-shockwave-flash"></embed></object></div><div><br /></div><div>YouTube video is available <a href="http://www.youtube.com/watch?v=ggLjIJDh2MQ">here</a>.</div>Arto Salminenhttp://www.blogger.com/profile/08677004150896658594noreply@blogger.com0tag:blogger.com,1999:blog-642406837607071325.post-49626005474436475532010-09-11T00:31:00.007+03:002010-09-17T15:54:31.048+03:00Having fun with physics - 3D minigolf<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_WGKkWAMmXuM/TIqmTTWGsMI/AAAAAAAAABI/5F3OPvpW3dc/s1600/minigolf.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 320px; height: 186px;" src="http://4.bp.blogspot.com/_WGKkWAMmXuM/TIqmTTWGsMI/AAAAAAAAABI/5F3OPvpW3dc/s320/minigolf.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5515403544209305794" /></a><br /><br />During my summer holidays I happened to hear that <a href="http://www.jiglibjs.org/">JigLibFlash</a>, a 3d physics engine for Flash, had been ported to JavaScript. So when I get back to work my hands were itching to get to code some demos with it.<br /><br />After a few weeks of coding I am happy enough to present you WebGL Minigolf: <a href="http://www.eucfutsal2011.com/webgl/minigolf/index.html">http://www.eucfutsal2011.com/webgl/minigolf/index.html</a> The game is fully playable with 9 different holes.<br /><br />Controls:<br />Space: Hold down to shoot<br />Left and Right arrows: Aim<br />Up and Down arrows: Zoom in and out<br />Left mouse button + mouse: Move camera around<br /><br />The physics engine is still under development and there are not even a pre-release available yet, but with a little debugging I was able to get the current version working acceptably.<div><br /></div><div><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/qNbWzCTWHEw?hl=fi&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qNbWzCTWHEw?hl=fi&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object></div><div>YouTube video is available <a href="http://www.youtube.com/watch?v=qNbWzCTWHEw">here</a>.</div><div><br /></div>Matti Anttonenhttp://www.blogger.com/profile/01088803339101746684noreply@blogger.com1tag:blogger.com,1999:blog-642406837607071325.post-56388638662919605732010-06-17T01:07:00.009+03:002010-06-17T13:01:12.892+03:00WebGL prototype of L3D<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_WGKkWAMmXuM/TBlPBPA8xwI/AAAAAAAAAAM/O-w8KR9cRo4/s1600/l3dwebgl.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 300px; height: 250px;" src="http://4.bp.blogspot.com/_WGKkWAMmXuM/TBlPBPA8xwI/AAAAAAAAAAM/O-w8KR9cRo4/s320/l3dwebgl.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5483500903929267970" /></a><br />WebGL version of L3D has reached its' prototype phase. The first prototype is a technology demo for demonstrating the possibilities of WebGL. Demo bases on <a href="http://learningwebgl.com/blog/">Learning WebGL</a>-site's excellent WebGL tutorials. Live-demo to play with can be found <a href="http://www.eucfutsal2011.com/webgl/test/l3d.html">here.</a><br /><br />We have also progressed our experiments with GLGE-library, and have come up with a few more demos with scripting abilities:<br /><a href="http://www.cs.tut.fi/~salmin39/webgl/GLGE/cubes/">Cubes-demo</a><br /><a href="http://www.cs.tut.fi/~salmin39/webgl/GLGE-26517a1/cubes/">Collada-duck-demo</a><br /><br /><div><br /></div><div><br /></div>Matti Anttonenhttp://www.blogger.com/profile/01088803339101746684noreply@blogger.com1tag:blogger.com,1999:blog-642406837607071325.post-36060712135677236262010-04-09T16:42:00.004+03:002010-04-09T17:02:59.591+03:00Simple Mashups with Different WebGL LibrariesDuring last few months numerous WebGL libraries have been appearing in fast pace. In the process of getting to know most advanced ones of these libraries, we have created some simple mashups that we would like to present.<br /><br />All these demos are "live" so you will need a WebGL enabled browser (<a href="http://build.chromium.org/buildbot/snapshots/chromium-rel-xp/">Chromium</a> and <a href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">Minefield</a> are recommended) to view them. Twitter avatars did not load properly with the latest Chromium (44073), but all worked fine with Minefield.<br /><div><br /></div><div><b>Copperlicht & Twitter (modified collision demo)</b></div><div><a href="http://www.cs.tut.fi/%7Esalmin39/webgl/copperlicht/collision/index.html">http://www.cs.tut.fi/~salmin39/webgl/copperlicht/collision/index.html</a></div><div><br /></div><div><b>GLGE & Twitter</b></div><div><a href="http://www.cs.tut.fi/%7Esalmin39/webgl/GLGE/twitterdemo/">http://www.cs.tut.fi/~salmin39/webgl/GLGE/twitterdemo/</a></div><div><br /></div><div><b>C3DL & Flickr</b></div><div><a href="http://www.cs.tut.fi/%7Esalmin39/webgl/c3dl/demo/">http://www.cs.tut.fi/~salmin39/webgl/c3dl/demo/</a></div><div><br /></div><div>Have fun!</div>Arto Salminenhttp://www.blogger.com/profile/08677004150896658594noreply@blogger.com2tag:blogger.com,1999:blog-642406837607071325.post-79868314572311944072010-03-05T00:53:00.003+02:002010-03-05T02:00:45.350+02:00JavaScript libraries for using WebGLWhile doing my background work on the Lively goes 3D project I have come across several JavaScript libraries aiming to ease the use of WebGL. All the libraries have similar APIs for making animations, camera movements, light effects etc.<div><div><br /></div><div>To view the WebGL demos you need to have a <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL enabled browser</a>.</div><div><br /></div><div>Here are some of the main points of the libraries:</div><div><br /></div><div><a href="http://www.glge.org/">GLGE</a></div><div>-Developed actively</div><div>-Also supports fog and text rendering</div><div><br /></div><div><a href="http://www.ambiera.com/copperlicht/index.html">Copperlicht</a></div><div>-Includes a 3D world editor</div><div>-Binary compilation with the editor</div><div><br /></div><div><a href="http://www.c3dl.org/">C3DL</a></div><div>-Good tutorials</div><div><br /></div><div><div><a href="http://www.scenejs.com/">SceneJS</a></div><div>-Playground demos can be modified on the fly</div></div><div><br /></div><div>Yet a few more libraries:</div><div><a href="http://spidergl.org/">SpiderGL</a></div><div><a href="http://github.com/OneGeek/WebGLU">WebGLU</a></div></div>Matti Anttonenhttp://www.blogger.com/profile/01088803339101746684noreply@blogger.com1tag:blogger.com,1999:blog-642406837607071325.post-33741430068410535322010-01-29T15:24:00.000+02:002010-01-29T15:27:14.637+02:00Project Introduction<p> The <b>Lively 3D</b> project aims for the development of a compelling 3D mashup environment. The main objective of the project is to create an efficient, interactive platform for three-dimensional rendering of web content, including the associated programming infrastructure to enable the development of 3D mashware in a consistent, integrated fashion. The <b>Lively 3D</b> system will be developed using JavaScript, Ajax and Qt. </p> <p> <b>Lively 3D</b> builds upon our earlier experiences in creating the <a href="http://research.sun.com/projects/lively">Lively Kernel</a>, a dynamic programming environment embedded in a web page, and <a href="http://lively.cs.tut.fi/qt/index.html">Lively for Qt</a>, our implementation of a similar environment for Qt. </p> <h3>Project Background</h3> <p> </p><h4>Previous 3D user interfaces and mashups</h4> <p> Several examples of 3D user interfaces and mashups implemented with Web technologies are already available: </p> <ul><li>Papervision 3D is Open Source realtime 3D engine for Flash <ul><li><a href="http://www.papervision3d.org/">http://www.papervision3d.org</a></li><li><a href="http://snakeflash.com/papervision-3d-mashup/">http://snakeflash.com/papervision-3d-mashup/</a></li><li><a href="http://snakeflash.com/wordsgame/">http://snakeflash.com/wordsgame/</a></li></ul> </li><li>WolfenFlickr 3D - Wolfenstein 3D / Flickr JavaScript Mashup <ul><li><a href="http://blog.nihilogic.dk/2008/07/wolfenflickr-3d-unlikely-mashup.html">http://blog.nihilogic.dk/2008/07/wolfenflickr-3d-unlikely-mashup.html</a></li><li><a href="http://www.nihilogic.dk/labs/wolfenflickr/">http://www.nihilogic.dk/labs/wolfenflickr/</a></li></ul> </li><li>3D Weather Mashup <ul><li><a href="http://freeearth.poly9.com/_weather/">http://freeearth.poly9.com/_weather/</a></li></ul> </li></ul> <h4>Relevant Implementation Technologies</h4> <p> <b>WebGL</b> (<a href="https://www.khronos.org/webgl/">https://www.khronos.org/webgl/</a>) is a standard specification that is currently being developed to enable 3D graphics support in web browsers. WebGL will enable hardware-accelerated rich 3D graphics in web pages without the need for special browser plug-ins, on any platform that supports OpenGL or OpenGL ES. From the technical viewpoint, WebGL is a JavaScript binding to a native OpenGL ES 2.0 implementation. For further information, see <a href="http://en.wikipedia.org/wiki/WebGL">http://en.wikipedia.org/wiki/WebGL</a>. </p> <p> <b>Qt</b> (<a href="http://www.qtsoftware.com/">http://www.qtsoftware.com/</a>) is a mature, well-documented cross-platform application development framework and platform that has been under development since the early 1990s. Qt supports a rich set of APIs, widgets and tools that run on most commercial software platforms. While Qt is intended primarily for C++ developers, Qt API bindings are available also for developing applications in JavaScript™ and in the Java™ programming language. Interestingly, Qt libraries include a complete web browser (based on <a href="http://webkit.org/">WebKit</a>), as well as a fully functional JavaScript engine and debugger. </p>Matti Anttonenhttp://www.blogger.com/profile/01088803339101746684noreply@blogger.com0