Posts Tagged ‘html5’

Friday, October 29th, 2010

John Nack from Adobe has been presenting Adobe tools exporters to html5 recently.  One is a Flash to html5 convertion tool. It looks good for converting flash vector assets to html5, but you could also use the Illustrator exporter to html5 (canvas/svg) for static assets.

This converter doesn’t appear to do anything for scripted animation or code, just exporting assets via old skool timeline. But this is definitely the right idea.

Friday, October 29th, 2010

Silverlight launched in 2007 to compete with Flash as a rich media and internet app toolkit.  Microsoft had failed before with Liquid Motion competing with Flash back in late 90′s early 2000′s.  Now, over 10 years later, Silverlight might be dying as a technology that was another competitor to Flash, due to poor timing and lack of committment.

Now Microsoft has all but confirmed that Silverlight is losing steam.

I asked Bob Muglia, the Microsoft President in charge of the company’s server and tools business, that very question and got what I consider to be the clearest answer yet about how Microsoft is evolving its Silverlight strategy.

Silverlight is our development platform for Windows Phone,” he said. Silverlight also has some “sweet spots” in media and line-of-business applications, he said.

But when it comes to touting Silverlight as Microsoft’s vehicle for delivering a cross-platform runtime, “our strategy has shifted,” Muglia told me.

Silverlight will continue to be a cross-platform solution, working on a variety of operating system/browser platforms, going forward, he said. “But HTML is the only true cross platform solution for everything, including (Apple’s) iOS platform,” Muglia said.

Silverlight was launched as a competitor to the Flash Flex framework and competing with Flash video most of all.  This was before the H.264 battles, right when the mobile scene blew up and changed the game immensely.  It was actually nice when it launched because it pushed Adobe on Flash and Flex (Flex was even later merged into the Flash brand to help it be more consistent like Silverlight).  This was good for the whole interactive space.

Microsoft is now going with an HTML5 strategy. The odd thing is that the Windows Phone is entirely Silverlight driven, no html5 support. So is Microsoft going to leave their new mobile platfform high and dry due to this change in strategy? It just seems so short sighted and reactionary over at MSFT that everything is wavering.  Who’s developing just silverlight for just Windows Phone? The timing of them stating this couldn’t be worse for Windows Phone.

Microsoft’s html5 strategy is hardware accelerated, something that Silverlight only partially has like Flash (though Adobe is changing that).  It is apparent that mobile has changed even the rich internet applications game as well as gaming in that we are back to multiplatform, native apps and non browser plugins for web content (mobile devices support no web browser plugins at all let alone Flash or Silverlight).  Still for the next 2-3 years limitations in hardware on mobile devices prevents anything software rendered to be fast (including html5 canvas and svg if there is no hardware acceleration), and due to this slowness, not able to compare/compete to compiled native apps that do have hardware access.  This has forced Adobe and now Microsoft to change their strategies to get through it.  We may see a resurgence of Flash and Silverlight like plugins on mobile browsers but not for years.

The only real place we see Silverlight is over at Netflix (maybe they will go html5 video or Flash video) and on Microsoft shop client apps.  It appears with no support from Microsoft it will fall out of favor faster. Microsoft developers are usually forced to go with what Microsoft is recommending as much of it is sold through a business channel rather than developers now.  It is good html5 and standards will be more prevalent in that ecosystem as long as they don’t start marginalizing it to proprietary elements.  But if you step back and see the rumors a week ago that Microsoft might be interested in Adobe, the mobile surge and strategy shifts at Microsoft, it seems to send out a clarion call that Silverlight is over or the credits are about to roll.

The mobile surge, standards, native, hardware acceleration and cross platform aims of current market leaders, we have the new game, again. It doesn’t appear like Silverlight was, or will be, a success.

Wednesday, June 23rd, 2010

Wow. IE9 just set it in motion.

Canvas 2D is now really on the horizon for all browsers. IE9 preview now supports the <canvas> tag and all canvas element APIs and most Canvas 2D context APIs and attributes!

Features Available

  • Canvas
    • In the latest Platform Preview we support all Canvas element APIs and most Canvas 2D Context APIs and attributes.

Features Partially Implemented

  • Canvas
    • globalCompositeOperation
      • The latest Platform Preview does not include support for the globalCompositeOperation attribute.
    • DOM Exceptions
      • The latest Platform Preview does not include support for Canvas 2D Context DOM Exceptions.
    • drawFocusRing()
      • The latest Platform Preview does not include support for the drawFocusRing() Focus management API.

This is pretty amazing even though it has been hinted at by other news (previously from AMD).  Why should we care what Internet Explorer is up to?  Well the dream of standards across web browsers seems to be materializing for html5 and more importantly, canvas 2d.

Even with Silverlight Microsoft has decided to join the party and upgrade the web on some great standards to build even more innovative platforms on top of.  Some may see this as a death knell for Silverlight, Flash etc but I do not see it that way. I see <canvas> as a competing interactive technology but many times technologies bind together for a better experience, they also drive one another to innovate.

Much like Silverlight pushed Flash, and Silverlight was created because of Flash, those two technologies brought on canvas 2D and more graphical capabilities for the web in the interactive, game and application space.  As javascript execution has sped up so has the graphical capabilities of browsers now. What is not to like about that if you are an interactive developer?

Canvas, Flash, Silverlight are all for the most part still software/CPU accelerated. The question is who will start the hardware acceleration of canvas and competing technologies even further to bring us closer to OpenGL ES/WebGL in the browser?

Ars Technica states that IE9 will have hardware accelerated canvas in addition to SVG but that doesn’t seem to be officially stated anywhere by Microsoft yet that I can find.  AMD has hinted at it and previous news about SVG being hardware acclerated.  Time will tell and it will be a HUGE boost to the browsers that do, of course we need all of them to do it to be worthwhile for mainstream content.

Ars on the hardware accelerated canvas support:

What does come as a surprise is canvas support. Microsoft has been promoting Internet Explorer 9′s support of SVG, which provides vector graphics capabilities within the Web browser, but thus far has kept quiet when asked if it would support the canvas bitmap graphics specification. Not only is canvas being supported, it is also being hardware accelerated, continuing Microsoft’s efforts to give Web applications the ability to exploit the extensive hardware capabilities of modern PCs.

Of course we should tread carefully here, there is still a big chance that portions of the canvas 2d spec will not be implemented exactly the same or some browser may have missing features much like CSS and javascript evolution.  For instance the “most Canvas 2D Context APIs and attributes” is something I hope is addressed in the final IE9. If you are gonna spend the time implementing a standard, do it fully and right, don’t try to break it (an old Microsoft tactic). But this step was needed to again push interactive web technologies to more closely compete with desktop graphic technology which adds some really exciting times ahead.

Another golden ray of hope is ES5 support in IE9.  Again Wow!

Sunday, April 25th, 2010

A new Javascript 3D Engine that can render to Canvas and SVG has been released by mr. doob.

Mr. doob is a well known Flash developer that has added many great experiments and cool contributions without being stuck to one technology, making some great interactive projects in javascript, chrome experiments and html5 (canvas/svg) in addition to the work in Flash with toolkits like Papervision 3D.  Recently the Harmony html5/javascript sketching project generated lots of interest for an html5 sketching app.

Three.js is great because it is a 3d engine built with renderers in SVG and Canvas makes to a really good base for modular, cross platform 3d engine right now (as soon as IE9 joins the party). For a while a good javascript rendering library will need to support multiple renderers for browser differences in performance and supported dependencies like canvas, svg and webgl. Three.js has that reality as part of the design.

Currently the engine only supports particles and triangles/quads with flat colors. The aim is to keep the code as simple and modular as possible.

At the moment the engine can render using <canvas> and <svg>. WebGL rendering would come at a later stage but feel free to fork the project and have a go.

Although this allows 3D for iPhoneOS and Android platforms the performance on these devices is not too good.

Sample Code:

var camera, scene, renderer;

    init();
    setInterval(loop, 1000 / 60);

    function init()
    {
        camera = new Camera(0, 0, 1000);

        scene = new Scene();

        renderer = new CanvasRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);

        for (var i = 0; i < 1000; i++)
        {
            var particle = new Particle( new ColorMaterial(Math.random() * 0x808008 + 0x808080, 1) );
            particle.size = Math.random() * 10 + 5;
            particle.position.x = Math.random() * 2000 - 1000;
            particle.position.y = Math.random() * 2000 - 1000;
            particle.position.z = Math.random() * 2000 - 1000;
            particle.updateMatrix();
            scene.add( particle );
        }

        document.body.appendChild(renderer.viewport);
    }

    function loop()
    {
        renderer.render(scene, camera);
    }

Friday, March 19th, 2010

UPDATE: Due to retractions it cannot be entirely confirmed that IE9 will support <canvas> of html5 spec.  They are the last browser and they must support it for it to be a real, valid solution for 2d animation.  GPU supported <canvas> would be a huge innovation but would also most likely kill Silverlight for animation, unless they integrate <canvas>.  Standards are such a tough bet, ask Adobe with the ES4 bet.  Since standards are so tough to get through and are design by committee many times, plugins still have a huge advantage of changing easily. We’ll keep an eye on IE9 to see if the <canvas> revolution will happen soon or if it will be years off.  It will most likely be years off for mainstream at any rate.

Could it be that Microsoft is innovating again?  IE9 will supposedly be largely hardware accelerated for all graphical elements and possibly <canvas> and <video> html5 tags? IE9 test drive preview available here.

It appears Microsoft has been enjoying the Apple, Adobe, Google smackdowns on each other, got lost in the dust kicked up and just done what many developers want: hardware acceleration. Firefox 3.7 also has hardware acceleration coming down the pike.

Specifically, IE9 will take advantage of the underlying hardware in different ways, both from a visual perspective as well as code execution perspective:

  • The MSHTML rendering layer has been enhanced to use Direct2D and DirectWrite instead of GDI.  Direct2D enables GPU accelerated 2D graphics and text, and allows sub-pixel positioning.  In addition, the GPU is used for scaling (bitmaps are mapped to textures), which is ideal for zooming and moving images around the screen.  This GPU support translates directly into improved readability of pages, more precise placement of text and images, and smooth scrolling and zooming.
  • JavaScript performance is greatly improved from older versions of Internet Explorer, and should be competitive if not better than competing browsers.  In the past, JavaScript in IE was interpreted and not compiled into native processor instructions.  The JavaScript engine now includes a JIT compiler which emits x86 instructions and compiles the code before it runs, resulting in a dramatic performance uplift.  Instruction generation can also be tailored to the underlying processor to take full advantage of the underlying platform.
  • IE9 is more standards compliant than previous versions, with new support for HTML5 elements such as <video>, CSS3 support, and SVG support.  All graphic elements will be accelerated on the GPU and will enable hardware accelerated rendering contexts for application development, improving visual display, reducing CPU usage, and improving power usage.

There is no excuse in this age where most people have at least a 32MB cards even on the lowly intel OEM cards to not take some advantage of hardware rendering/acceleration for aspects of web content including video, 2d, games and even 3d.

There are lots of other areas of browsers and tech that is hardware accelerated such as plugins like Unity (and Director waaay before that), video, and new tools like WebGL/O3D. Firefox 3.7 is also aiming for hardware acceleration.  This idea of browser graphical elements not just in a plugin or video player being hardware accelerated is something that might spark some very interesting and innovative experiences.

I applaud this effort and hope there is truth in it beyond just a preview that has features cut.  I also hope more browsers and plugins start doing the same besides just IE9 and Firefox. This entire blog has pretty much had an underlying hardware rendering/acceleration slant.  I have been pushing this for sometime and I believe the time is coming soon that web developers will be equipped with the power that native and game developers have for graphics soon, mainly for applications, games and experiences.

The best news is that IE9 will support html5 and <canvas>, <video> tags and ensures the new functionality that web developers will be able to use.  We’ll all have to wait for 2-3 years probably before it is something that is 90% saturated and usable in the mainstream market but it is good to know great times lie ahead.

I can’t believe I just wrote about IE possibly innovating ahead of others.

Wednesday, December 9th, 2009

Google is pushing Web Sockets into Chrome based on the Web Socket standards being developed at all major engineering standards groups.  Web Socket is an interesting direction but it is great to couple that with O3G or WebGL for some multiplayer 3d game development with just a browser.

Starting in the Google Chrome developer channel release 4.0.249.0, Web Sockets are available and enabled by default. Web Sockets are “TCP for the Web,” a next-generation bidirectional communication technology for web applications being standardized in part of Web Applications 1.0. We’ve implemented this feature as described in our design docs for WebKit and Chromium.

Sample Code

if ("WebSocket" in window) {
  var ws = new WebSocket("ws://example.com/service");
  ws.onopen = function() {
    // Web Socket is connected. You can send data by send() method.
    ws.send("message to send"); ....
  };
  ws.onmessage = function (evt) { var received_msg = evt.data; ... };
  ws.onclose = function() { // websocket is closed. };
} else {
  // the browser doesn't support WebSocket.
}

Socket Advantage

Flash has long been the answer for sockets for web applications and once sockets were added to Flash it instantly became a better interactive and gaming platform for multi-user applications and multiplayer games. They started with XmlSocket then recently added Socket for raw binary data in as3.  Silverlight and Java also have this feature but having this in script is pretty significant because many applications could really use a browser supported bi-directional communication link.

What is Missing

The biggie missing from Flash, Silverlight, etc and Web Sockets is UDP and preferably RUDP or Reliable UDP which allows UDP datagrams to be sent back and forth either verified delivery or broadcast. Unity does support UDP.  The best socket layers are reliable UDP based because mixing TCP and UDP can lead to queuing and not all messages are critical so having just UDP isn’t enough, having TCP is too much.  Reliable UDP is the way to go but so far no web layers are doing it well except Unity on that one (you still have to make your own RUDP implementation – libraries like Raknet or enet in C/C++ give you this but you can’t use that in Unity client only on the server). (Edit: Flash does have RTMFP which is based on UDP and uses FMS for nat for p2p but it is still not a true low level UDP socket just yet as it supports more features. A low-level UDP socket would also be nice in flash.)

Web Communication Evolving

I am a big Flash fan and have been developing it since 1999 among other platforms, I have recently watched other technologies nearly match the features and some go beyond it.  The interesting thing about Web Sockets is that it does go after a core feature of flash; Canvas and WebGL or O3D also do. Flash still has the webcam, mic, sound mixers/tranform, and for now sockets which put it at an advantage in gaming and interactive. Flash used to  be the sole greatest video player but Silverlight is doing a pretty good job of that as well so that is still an advantage but others are entering including possibly browser support in html5. I still think it is the best video but they would need to keep innovating.

Another interesting point about this is XMLHttpRequest objects.  Originally “AJAX” was created by Microsoft for IE, pushing new features and innovating back when IE was a good browser and ahead in IE4. Mozilla and others adopted this feature (as well as editable text areas for html) because they were great features for web applications to evolve to.  now Google is pushing with Chrome and Web Sockets is the next step that should be in web browsers even if it is only TCP based for now.  This will add great capabilities and will probably be preferred over AJAX/XMLHttpRequest for really interactive and real-time tools/games should it take hold.  Ian Hickson is running the table on the standards with this effort and it is a good one to get behind.

Thursday, July 16th, 2009

Haxe Sandy is a version of Sandy that can export to an experimental Javascript 3D engine taking advantage of the <canvas> element. There are some great demos that run smoothly in canvas capable browsers and very smooth in Chrome.

Demos of Haxe Sandy:

Sandy was actually the first open source 3d engine in flash, maybe this will be a trend building in haXe for export to flash and javascript?  It certainly looks like a great start and would make a very nice platform for 3d on the web allowing Sandy or other flash libraries to run in Flash and Javascript by writing in an abstraction platform like haXe. Other libraries like Motor2, Physaxe, haxe3D, PureMVC and more have haXe versions. Still very experimental but a possible need when Flash and canvas are both in the market in the future.  Right now it is still all Flash.

[ via Matthew Casperson at devmaster.net ]