Tune PHP to the Max | PHP | Android | JavaScript | HTML5

Showing posts with label webgl. Show all posts

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

Intro Comic

Controls

WebGL lighting effect

Beautiful environment

I have won the game

First person view. Beautiful foggy effect

Moon shines

Rotate the camera with the mouse

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

Breaking an object that holds a video area

Beautiful effect of blurring the window when you loose

Cube Slam - Main menu

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

A web based piano made with HTML5/JavaScript. Well done!


HTML5/JavaScript piano

Old timer russian radio replica made with HTML5 and JavaScript

Old timer russian radio device replica.

Meow Peow player in a browser

Fully functional MP3 player in a browser.

Monday, December 8, 2014

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.