Showing posts with label safari. Show all posts
Showing posts with label safari. Show all posts

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

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/