rajeesh Posted June 19, 2012 Share Posted June 19, 2012 Microsoft has been long touting the features and capabilities that its latest flavors of Internet Explorer have to offer to all users, and it also came up with a variety of test-drive websites to showcase them. The latest of these is called Bubbles, inspired by Alex Gavriolov’s simulation BubbleMark, and aimed at offering a look at how the JavaScript performance improvements are felt by end users. “The current version has been greatly expanded to take advantage of the new features of the Web platform and includes characteristics common to HTML5 games,” Andrew Miadowicz, program manager, JavaScript, explains in a blog post. Those who access the demo, available for other browsers as well, will see a number of animated bubbles floating through space. At the core of the demo lies a simple JavaScript physics engine. “On every animation frame, about 60 times per second, the physics engine recalculates the positions of all bubbles, adjusts the speed of each bubble by applying gravity, and computes collisions. All these computations involve intensive floating point math,” Miadowicz explains. “Each bubble is represented on screen by a DOM image element to which a CSS transform is applied. The image is first translated around its origin, and then scaled dynamically to produce the effect of the bubble inflating.” In the background, there is a large image, which starts off occluded by a fully opaque mask rendered in a <canvas> element. When bubbles collide, a portion of the occluding mask is removed through applying a Gaussian filter to the mask’s opacity component, thus creating a diffuse transparency effect. According to Miadowicz, the process also involves many floating point multiplications, which are being performed on elements of Typed Arrays, as long as the browser supports them. Users will also observe a touch surface over the floating bubbles, set to respond to touch input or mouse input. Simulated magnetic repulsion is applied as response to touch or mouse click, and the floating bubbles are scattered around. You can learn more on the mechanics behind this demo in this blog post on the IEBlog. At the same time, you can head over to the aforementioned test-drive website to see how well can your browser handle these bubbles. http://news.softpedia.com/news/Take-IE10-to-a-Spin-with-Bubbles-276456.shtml Link to comment Share on other sites More sharing options...
itsthatnathan Posted June 19, 2012 Share Posted June 19, 2012 It works in different browsers too, you just get the Opera logo for Opera and the Mozilla one for Firefox. Link to comment Share on other sites More sharing options...
nuthut Posted June 19, 2012 Share Posted June 19, 2012 31 FPS with IE10 vs 13 FPS with Google Chrome 19computation time was for 40 ms slower in google Link to comment Share on other sites More sharing options...
UkoBlackHat97 Posted June 20, 2012 Share Posted June 20, 2012 I found the Background image.. :D Link to comment Share on other sites More sharing options...
chilly Posted June 20, 2012 Share Posted June 20, 2012 I tried ie 9, palemoon and opera. Opera did the best followed by palemoon, ie9 did the worst? Link to comment Share on other sites More sharing options...
chilly Posted June 20, 2012 Share Posted June 20, 2012 opera 32 fps, palemoon 13 fps and ie 9 8 fps? Could also be the different add on's that I have on the various browsers but my primary is opera, and it has the most add ons? Link to comment Share on other sites More sharing options...
csmdew Posted June 20, 2012 Share Posted June 20, 2012 IE 9 was 61 fps, all bubbles maxed out still got 8 fps Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.