Posts Tagged ‘canvas’

Saturday, July 2nd, 2011

Interactive on the web is changing at a rapid clip. The path of the next wave of ineractive and gaming on the web is beginning to materialize.

WebGL, Canvas grouped with html5 are final and providing new landscapes to draw on and new ways to make levels to beat. Most browsers and platforms are supporting this technology. Tools like Three.js make that very fun. Mozilla Firefox, Chrome and Safari are including WebGL + canvas and mostly hardware accelerated, making Javascript an even more powerful glue of the web.

Adobe is going low level with Flash ‘Molehill’ 3D and hardware acceleration platform that companies like Unity will be including as an export target.

Microsoft has finally laid out their plans. Silverlight is alive with Silverlight 5 / 3D powered by XNA (any surprise? guess it isn’t dead) and hardware acceleration throughout Internet Explorer, this appears to be Microsoft’s version of the future.

Plugins like Flash, Unity, Silverlight, others will continue to push the bounds cross platform where standards cement the technology behind it for a platform to reach the next innovative step.

Mobile has blown up the scene with native and low-level focus, causing web platforms to also go low level for more performance thanks to Apple and now Android. Native languages like C, C++ and Objective-C came roaring back as the hardware was reset a bit back to late 90s/early 2000s processor and graphics power. However with mobile and cpu cost on platform as service system, native will stay more over the coming years.

Games, interactive and entertainment projects and apps are going to be even more fun. New opportunities all over the place.  Game on!

Sunday, January 16th, 2011

Cocos2D has been ported to run in javascript and called cocos2d-javascript by Ryan Williams.

Cocos2D is a game engine similar to Flash in that it is a 2d engine but it natively renders to OpenGL ES.  Cocos2D-iphone was originally a port of Cocos2D, a python game engine.  But the similarities to Flash and DisplayObjects = Nodes, Sprites, Scenes, Layers etc. This helps to port games over fairly quickly or start in productive in cocos2D.

Having this in javascript is a great thing! It runs on html5/canvas/javascript.

What is cocos2d-javascript?

Cocos2d-javascript is a 2D game/graphics engine based on cocos2d-iphone but designed to run in the web browser. It uses the latest features available in HTML 5 allowing real-time rendering of 2D graphics without the need for plug-ins such as Adobe Flash.

While HTML 5 is still new and not fully supported across all browsers it won’t be long before the vast majority of web users are able to enjoy all that it offers. When this time comes cocos2d-javascript will be an excellent way to develop games and applications.

To see a small sample of what is on offer, please check out the demo section.

cocos2d engines are now available on almost all platforms, so if you are building a 2d game and need a 2d engine typically with Box2D physics, cocos2d offers lots of ways to get the game out there with some porting work.

Saturday, January 15th, 2011

Firefox 4 with WebGLFirefox 4 in beta to be released soon, also joins the WebGL ranks with Chrome 9.  Safari has it in nightlies and IE hasn’t even mentioned it.

There really is too much to list as this release is feature packed! Of course the most exciting being WebGL and hardware acceleration from our perspective.

Firefox 4 now has WebGL enabled by default. Based on the original 3-D Canvas work by Vladimir Vukićević, this is being

widely implemented in browsers. The WebGL spec is on the short path to a 1.0 release and we’re very excited to see this be used in the wild.

Hardware acceleration has finally arrived even though it should have been in nearly all platforms for web last decade, but we’ll take it.

Firefox 4 supports full hardware acceleration on Windows 7 and Windows Vista via a combination of D2D, DX9 and DX10. This allows us to accelerate everything from Canvas drawing to video rendering. Windows XP users will also enjoy hardware acceleration for many operations because we’re using our new Layers infrastructure along with DX9. And, of course, OSX users have excellent OpenGL support, so we’ve got that covered as well.

The javascript engine JaegerMonkey is comparably fast to SunSpider and V-8 javascript benchmarks and has support for EC5 javascript.

And you might have noticed that it’s really fast. This is the world’s first third-generation JavaScript engine, using Baseline JIT technology similar to engines found in other browsers and kicked up a level with the Tracing engine found in Firefox 3.6. As such, we’re competitive on benchmarks such as Sunspider and V8, but we’re also fast at a whole mess of things that we expect to see in the set of next-generation web applications, hence Kraken.

WebConsole looks like they are joining Chrome and Safari with built in inspection tools similar to Firebug, however Firebug still available.

Firefox 4 will include the Web Console. This is a new tool that will let you inspect a web page as it’s running, see network activity, see messages logged with console.log, see warnings for a page’s CSS, and a number of other things.

Note this that is something that we’ll be including with Firefox 4 directly. It’s not an add-on.

(Also Firebug will be ready for the final Firefox 4 release.)

Firefox 4 has other improvements like layering (in-memory retained layers), caching/scheduling improvements and lots of other performance enhancements.

2011 is looking like the year all this is coming together, at least for Chrome, Firefox, possibly Safari (need WebGL in main release) and IE is still the biggest problem to getting WebGL. At this point WebGL looks like it is still over a year out as it may not come to IE until IE10 or possibly never, the WebGL 1.0 spec is on the fast track though (don’t we all love Khronos? They have been amazing with OpenGL since they took over).  html5 is looking like it will be close to mainstream by the end of this year depending on the install rate of IE9 when released.

The world is waiting to see if Microsoft implements WebGL or tries the old DirectX/D2D only ways.  Nevertheless, getting a push for hardware acceleration and fast renders in 2d/3d is a very sweet direction.

Friday, December 17th, 2010

EaselJS is a new library from Grant Skinner that somewhat mimics the Flash display list/display object heirarchy.  It is the result of the game Pirates Love Daisies which demonstrates some great gameplay in html5.

The API is loosely based on Flash’s display list, and should be easy to pick up for both JS and AS3 developers. In our preliminary testing, Easel appears to be fully compatible with iOS, Android, and all major browsers that support the canvas element.

Lots of great javascript libraries have been made public including such contributions as this, Three.js (3d canvas/svg/webgl), Lettering.js (typography), audio.js (audio) and many many others, a complete pipeline is emerging. EaselJS adds to that a helpful flash like api for html5 (<canvas> + javascript).

The API contains these familiar classes for Flash/AS3 developers:

DisplayObject

Abstract base class for all display elements in Easel. Exposes all of the display properties (ex. x, y, rotation, scaleX, scaleY, alpha, shadow, etc) that are common to all display objects.

Stage

The root level display container for display elements. Each time tick() is called on Stage, it will update and render the display list to its associated canvas.

Container

A nestable display container, which lets you aggregate display objects and manipulate them as a group.

Bitmap

Draws an image, video or canvas to the canvas according to its display properties.

BitmapSequence

Displays animated or dynamic sprite sheets (images with multiple frames on a grid), and provides APIs for managing playback and sequencing.

Shape

Renders vector drawing instructions within the context of the display list.

Sunday, October 31st, 2010

Helpful tool for taking vector art from Adobe Illustrator .ai assets and exporting them as html5 with canvas script.

It is a visitmix lab product  so it is a Microsoft tool. Mike Swanson has builtmany great conversion tools for interactive such as SWF2XAML (silverlight/wpf markup).

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.

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);
    }

Wednesday, January 13th, 2010

Gordon, a flash runtime written in javascript, is an interesting project that recreates the Flash Player into svg using javascript from a flash source swf file.

UPDATE: Also check out smokescreen for the same, html5/javascript interpreting SWF files.

This is an interesting direction. There are most likely many things that do not work about this approach for existing content. But it is also a neat way to create new content that might be simple enough to play on desktop and a mobile version.

All these examples work on an iPhone or iPod Touch.

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 ]