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
  2. Backbone.js
  3.  Ext.js
  4. Jquery.js
  5.  Ember.js
  6.  Express.js
  7. Node.js
  8. React.js
  9. Underscore.js
  10. Box2d.js 
  11. yui.js
  12. SWFObject.js
  13. Three.js
  14. Modernizr.js
  15. Jasmine.js 
  16. Dojo.js
  17. Midori.js
  18. Prototype.js 
  19. Create.js 
  20. PDF.js 
  21. Spry Framework 
  22. Babylon.js 
  23. Gamepad.js

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