Friday, December 19, 2014

Assasins Creed: Pirates HTML5/JS/WebGL demo

Another demo that caught my eye is Assasins Creed: Pirates Demo made by the IE engineering team, with HTML5, JavaScript, WebGL and more specifically Babylon.js Here is a web page that explains how to start working with Babylon.js and create 3D virtual worlds in a browser.


I played the demo several times in Firefox 34 and I can say it looks fantastic coupled with nice pirate music. There are nine weather conditions between you can choose to play, and each has its own specifics, like day or night, rainy or sunny etc... Use A, D to keys to turn the ship left or right and W, S to speed up or slow down. Use V to switch camera from third person view to first person view and vice versa. Use mouse to rotate the camera around the ship.

Note: To enable and use these new browser technologies you must have IE11 and Windows 7 Service Pack 1 or other advanced browser like Google Chrome, Opera and Firefox. Safari 5.1.7 does not support WebGL.

More info here: https://www.modern.ie/en-us/demos/assassinscreedpirates
Other IE demos: http://ie.microsoft.com/testdrive/Default.html
Babylon.js Challenge: http://www.babylonjs.com/cyos/acpr/#OKULH#1 

Assasins Creed: Pirates Demo
Assasins Creed: Pirates Demo
Intro Comic
Intro Comic
Controls
Controls
WebGL lighting effect
WebGL lighting effect
Beautiful environment
Beautiful environment
I have won the game
I have won the game
First person view. Beautiful foggy effect
First person view. Beautiful foggy effect
Moon shines
Moon shines
Rotate the camera with the mouse
Rotate the camera with the mouse
Rotate the camera with the mouse
Rotate the camera with the mouse

Tuesday, December 16, 2014

List of JavaScript libraries

How many JavaScript libraries can you think of? :D http://en.wikipedia.org/wiki/List_of_JavaScript_libraries
  1.  Angular.js Web Apps
  2. Backbone.js
  3.  Ext.js Web Apps
  4. Jquery.js
  5.  Ember.js Web Apps
  6.  Express.js
  7. Node.js Server side JavaScript
  8. React.js
  9. Underscore.js
  10. Box2d.js 
  11. yui.js
  12. SWFObject.js
  13. Three.js 3D in Browser/WebGL
  14. Modernizr.js
  15. Jasmine.js 
  16. Dojo.js
  17. Midori.js
  18. Prototype.js 
  19. Create.js 
  20. PDF.js  Decode PDF files in Browser with JavaScript
  21. Spry Framework 
  22. Babylon.js  3D in Browser/WebGL
  23. Gamepad.js 
  24. Mobify.js 
  25. Phantom.js 
  26. hapi.js 
  27. chai.js
  28. thaw.js 
  29. parallax.js 
  30. cannon.js 
  31. kinetic.js 
  32. sprite.js 
  33. zepto.js 
  34. GSAP.js
  35. Agile Toolkit
  36. ScrollReveal.js 
  37. Superscrollorama.js 
  38. Sly.js 
  39. Transit.js 
  40. Slidr.js 
  41. physics.js 
  42. Matter.js 
  43. Box2Dweb  Flash like 2D Physics engine in browser
  44. ClickStream.js 
  45. Durandal.js

Useful links: 
http://kangax.github.io/compat-table/es5/
http://blog.rodneyrehm.de/archives/27-Dialog-for-Unsupported-Browsers.html
https://github.com/es-shims/es5-shim
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
http://www.sitepoint.com/ie11-developer-tools/
http://www.amazon.com/Pro-Internet-Explorer-Development-Applications/dp/1430228539
http://msdn.microsoft.com/en-us/library/ie/hh673549%28v=vs.85%29.aspx
http://msdn.microsoft.com/en-us/library/ie/bg182636%28v=vs.85%29.aspx
http://www.vcaa.vic.edu.au/Documents/vass/Windows7-IE10.pdf
http://code.tutsplus.com/tutorials/documenting-javascript-with-yuidoc--net-25324

Links for testing web apps on different browsers and mobile devices:

http://www.sitepoint.com/building-the-best-browser-test-suite/
http://blogs.adobe.com/browserlab/2013/03/13/browserlab-is-shutting-down-on-march-13-2013/
http://browsershots.org/
https://github.com/yui/yui3/wiki/Graded-Browser-Support
http://www.browserstack.com/start?cbsid=browserlab
http://saucelabs.com/
http://sauceio.com/index.php/2013/03/sauce-labs-welcomes-adobe-browserlab-customers/
https://creative.adobe.com/products/inspect
https://www.blackbaud.com/files/support/guides/infinitydevguide/content/webshell/webshelagradebrowsers.htm
https://spoon.net/browsers/
http://www.my-debugbar.com/wiki/IETester/HomePage

Sunday, December 14, 2014

Cube Slam

Nice demonstration of available technologies that exist in todays browsers. It is a game called Cube Slam. Technologies used in this game are: WebRTC, Web/HTML5 Audio API, WebGL and CSS3, Google Cloud Platform.

"If you play Cube Slam on Chrome or Firefox, you’ll see real-time 3D rendering enabled by WebGL and three.js. If you don’t have WebGL, you can still play Cube Slam in 3D thanks to CSS3, with the same game engine running under the hood. All the graphics run on your GPU, freeing the CPU for other tasks."

"Cube Slam is built entirely on Google Cloud Platform. The app is hosted on Google App Engine with a backend written in Go, and the Channel API is used to set up the connection with your opponent. If one of the players is behind a firewall, the game uses a STUN/TURN server hosted on Google Compute Engine to exchange data. PageSpeed helps things load quickly, and AppCache lets you play offline."

The game is not complete as you can play until level 4, right at the moment when it gets interesting :)
Also I reccomend closing other tabs that might download data, because it might break the connection oppened for the game. It happened on Firefox several times.
It also worked on Safari 5.1.7 without using WebGL but with CSS 3 3D alike tricks 

For more info on the details check this link https://www.cubeslam.com/tech

Level 1
Level 1
Breaking an object that holds a video area
Breaking an object that holds a video area
Beautiful effect of blurring the window when you loose
Beautiful effect of blurring the window when you loose
Cube Slam - Main menu
Cube Slam - Main menu
The game is working with CSS3 instead of WebGL in Safari 5.1.7
The game is working with CSS3 instead of WebGL in Safari 5.1.7

Thursday, December 11, 2014

HTML5 Audio API

Several years ago this wasn't really possible without Flash. A fully functional sound spectrum visualizer player made fully in HTML5 and JavaScript/WebGL

3D audio spectrum visualizer
3D audio spectrum visualizer
3D audio spectrum visualizer
3D audio spectrum visualizer
3D audio spectrum visualizer
3D audio spectrum visualizer
A web based piano made with HTML5/JavaScript. Well done!

HTML5/JavaScript piano
HTML5/JavaScript piano










Old timer russian radio replica made with HTML5 and JavaScript

Old timer russian radio device replica.
Old timer russian radio device replica.
Meow Peow player in a browser

Fully functional MP3 player in a browser.
Fully functional MP3 player in a browser.
Links:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
http://webaudioapi.com/
http://shop.oreilly.com/product/0636920025948.do
https://developer.mozilla.org/en-US/demos/detail/beyer-music-player/launch
https://developer.mozilla.org/en-US/demos/detail/oscillators
https://developer.mozilla.org/en-US/demos/detail/musical-mines-and-rails
https://developer.mozilla.org/en-US/demos/detail/touch-turntables
https://developer.mozilla.org/en-US/demos/detail/classical-music-jukebox
https://developer.mozilla.org/en-US/demos/detail/soundbox-lite
https://developer.mozilla.org/en-US/demos/detail/html5-piano

Face Detection/Analytics with HTML5 video tag


Face Detection/Analytics with HTML5 Video from Daniel Goodwin (@dsg) on Vimeo.

https://developer.mozilla.org/en-US/demos/detail/facial-recognition-and-analytics-with-html5s-video/launch

Monday, December 8, 2014

Canvas Mark 2013 - test your browser performance

Check out this nice tool that tests your browser performance: Canvas Mark 2013
Github Source

Tests the HTML5 <canvas> rendering performance for commonly used operations in HTML5 games: bitmaps, vectors, shapes, text, shadow, alpha blending, pixel blur, Math, canvas shapes, polygon fills, image transformations, getImageData, putImageData.

So the tests should be made on the five most popular browsers: Firefox, Chrome, Opera, IE9/IE10, and Safari. You can run them one by one, closing all other applications that might drain CPU/GPU processing power. Also you should run these test on the same machine as running them on different machines will produce different results. The browser window should not be minimised.

I couldn't find a flag called GPU VSync in chrome://flags (Chrome 40) so I couldn't disable it. Apart from that, all other GPU related flags were disabled except One-copy-rasterizer.

I am using Firefox 34, Opera 26.0, Chrome 40, IE9 and Safari 5.1.7 on Windows 7.
Also I am using middle class Asus laptop. Ask me for more hardware details (not sure if I should share this information).

Note: not sure why but the tool detects that Opera 26.0 is actually Chrome 39. I have tested other similar tools and they also say that Opera 26.0 is Chrome 39. Perhaps it is something with the engine of Opera.

Note: running the test twice in the same browser without refresh uncovers a bug, so the second run might go until the blur image test and stop there. Therefore I recommend closing and opening the browser after each test.

 The results from my testing are:
  1. Safari 5.1.7 with 7034
  2. Chrome 40 with 6072
  3. Opera 26 with 5787
  4. Firefox 34 with 4790
  5. Internet Explorer 9 with 4504
canvas mark 2013
Canvas Mark 2013

Tower Diffence web game

Turns out you can build fully featured HTML5/JavaScript games.
Check this demo of a Tower Diffence web game. Made with WebGL and three.js

Browsers: Firefox 34, Chrome 40, Opera 26.0, Internet Explorer 9 and Safari 5.1.7


On Opera, Firefox and Chrome it worked perfectly, while on IE9 and Safari it just displayed white area where the game should happen. I finsihed the game and on Opera and Firefox it used about 40% of the processor power while on Chrome it had two processes that worked hard, on 30% and on 40%. Not sure why? Maybe Chrome works that way.

The game is not a proper test for HTML5 audio API since it doesn't have a single sound effect or music.

internet explorer 9
IE 9
safari 5.1.7
Safari 5.1.7
opera 26.0
Opera 26.0
opera 26.0
Opera 26.0
chrome 40
Chrome 40
Two working processes for Chrome
Two working processes for Chrome
Utilizing WebGL and three.js
Utilizing WebGL and three.js
Utilizing WebGL and three.js
Utilizing WebGL and three.js
Last wave finished on Chrome 40
Last wave finished on Chrome 40
about the game
about

Account Slider

Account slider. I cannot recall making a sliding accordion before, without using Flash. This is made with HTML5/JavaScript. Well done!

Browsers: Firefox 34, Chrome 40, Opera 26.0, Internet Explorer 9 and Safari 5.1.7

On Opera/Firefox/Chrome works perfectly. On Safari works but it is a bit sluggish. On IE9 it shows a bulleted list instead of accordion.



Geometric Photo Filter - Web browser application

 Fantastic web browser application Geometric Photo Filter by http://zd3n.com http://satori.sk
I run this application in Opera 26.0 on my Asus middle class laptop. It was run on 100 steps per frame and it performs well, not overloading the processor. Give it a day maybe it will redraw the complete image.




You can run this application on Firefox, Chrome and Opera perfectly. I have Firefox 34, Chrome 40, and Opera 26.0 I also tried on Safari 5.1.7 and Internet Explorer 9. Turns out they do not support File API and Filereader.

Safari 5.1.7

IE 9

Wednesday, December 3, 2014

HTML 5 3D, 2D canvas demos

http://batiste.dosimple.ch/games/rpg/game.html
http://blog.rodneyrehm.de/archives/27-Dialog-for-Unsupported-Browsers.html
https://developer.mozilla.org/en-US/demos/detail/convolution-matrix/launch
https://developer.mozilla.org/en-US/demos/detail/context-aware-image-resizing
https://developer.cdn.mozilla.net/media/uploads/demos/c/a/calvin/054e17c76b19a054d20d6b313ca1d62f/fractal-explorer_1367242706_demo_package/index.html#500/-0.37/0.6/julia
https://developer.mozilla.org/en-US/demos/detail/webworkers-attractors
https://developer.mozilla.org/en-US/demos/detail/ball-pit
https://developer.mozilla.org/en-US/demos/detail/playroom
https://developer.mozilla.org/en-US/demos/detail/apple-hls-javascript-player/launch
https://developer.mozilla.org/en-US/demos/detail/balls-with-gravitation
https://www.cubeslam.com/
https://developer.mozilla.org/en-US/demos/detail/bombcarrier
https://developer.mozilla.org/en-US/demos/detail/just-spaceships
https://developer.mozilla.org/en-US/demos/detail/opendepth-point-cloud
https://developer.mozilla.org/en-US/demos/detail/moon-wars
https://developer.mozilla.org/en-US/demos/detail/geoqr/launch
https://developer.mozilla.org/en-US/demos/detail/gravedad
https://developer.mozilla.org/en-US/demos/detail/minesweeper
https://developer.mozilla.org/en-US/demos/detail/achtung-die-kurve
https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Bootstrapping_a_new_locale
https://developer.cdn.mozilla.net/media/uploads/demos/p/a/pavloschris/74018e092d31c4610d4ddea786aaf883/lethargy_1343507075_demo_package/index.html
https://developer.cdn.mozilla.net/media/uploads/demos/e/l/elfoxero/c17223c414d8ddafb7808972b5617d9e/html5-notifications_1400214081_demo_package/index.html
https://developer.mozilla.org/en-US/demos/detail/remixing-reality/launch
https://developer.mozilla.org/en-US/demos/detail/the-letter-heads/launch
https://developer.mozilla.org/en-US/demos/detail/trangle/launch
https://developer.mozilla.org/en-US/demos/detail/space-break
https://developer.mozilla.org/en-US/demos/detail/role-playing-game/launch
https://developer.cdn.mozilla.net/media/uploads/demos/L/a/LaNsHoR/e4c139569f1038b21c52cebfac9e4134/fruits_1326101404_demo_package/index.html
https://developer.cdn.mozilla.net/media/uploads/demos/d/r/dragongraphics/0bca6526258ac28e1e900882bc11d333/media-query-mario_1351726916_demo_package/index.html
https://developer.cdn.mozilla.net/media/uploads/demos/c/h/chamb/3c55ddc67e35bc7bee1e7388c9bd5393/comic-gen_1354466686_demo_package/index.html
https://developer.mozilla.org/en-US/demos/detail/beyer-music-player/launch
https://developer.mozilla.org/en-US/demos/detail/classical-music-jukebox/launch
https://developer.mozilla.org/en-US/demos/detail/3d-pong
https://developer.cdn.mozilla.net/media/uploads/demos/n/e/nestoralvaro/d2ab81ed6c13b9bcbb401d7575ad63d5/touch-turntables_1361965544_demo_package/index.html
https://developer.mozilla.org/en-US/demos/detail/3d-assembly
https://developer.mozilla.org/en-US/demos/detail/one-whale-trip/launch
https://developer.mozilla.org/en-US/demos/detail/get-motion-media/launch
https://developer.mozilla.org/en-US/demos/detail/penguin-jump
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
http://webaudioapi.com/
https://dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html
https://developer.cdn.mozilla.net/media/uploads/demos/M/t/Mte90/b10107b9880f5d2c00133ea92c42b396/boxes-wot-shoot_1410529470_demo_package/index.html
https://developer.cdn.mozilla.net/media/uploads/demos/f/u/fusionchess/dc976f147bc37a683f48928b181e08d5/html5-2d3d-chess_1322872921_demo_package/index.html
https://developer.cdn.mozilla.net/media/uploads/demos/v/i/viliusl/07f948b9638c01cec40270c4f1ad522d/moon-wars_1378491054_demo_package/index.html
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions
http://trac.webkit.org/wiki/Applications%20using%20WebKit
en.wikipedia.org/wiki/List_of_web_browsers#WebKit-based
https://www.mozilla.org/en-US/firefox/developer/?utm_source=firefox-com&utm_medium=referral&utm_content=fxdev-mdn&utm_campaign=FX10
http://www.w3.org/2010/webperf/
http://www.chromeexperiments.com/
http://html5readiness.com/
http://ie.microsoft.com/testdrive/Performance/msPerformance/Default.html?loaded=0
http://ie.microsoft.com/testdrive/Default.html
http://ie.microsoft.com/testdrive/Performance/BUILDPerformanceTricks/Default.html
http://race.assassinscreedpirates.com/
http://www.fishgl.com/
http://ie.microsoft.com/testdrive/Performance/FishBowl/Default.html
https://developer.mozilla.org/en-US/demos/detail/zen-photon-garden/launch
http://codepen.io/suffick/pen/KrAwx
http://codepen.io/pixelgrid/pen/ECrKd
http://codepen.io/ara_node/pen/nuJCG
http://www.chromeexperiments.com/detail/gesture-based-revealjs/
http://www.freeriderhd.com
http://codepen.io/soulwire/pen/Ffvlo
http://www.craftymind.com/factory/html5video/CanvasVideo.html
https://developer.mozilla.org/en-US/demos/tag/tech:canvas
http://www.hongkiat.com/blog/48-excellent-html5-demos/
https://developer.cdn.mozilla.net/media/uploads/demos/M/a/Martin/a3bd6127543a304658fc3e61904f1dba/unreal-engine-4-stra_1415835062_demo_package/index.html
http://html5demos.com/canvas
http://www.kevs3d.co.uk/dev/
http://www.canvasdemos.com/top-100/