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!

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.

• Blog post on the Three.js project
• Three.js at github
• Demos
  • Cube
  • Random
  • Waves
  • Floor

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

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.

• Gordon on github by Tobias Schneider
• Demos posted for viewing by Paul Irish

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:

• Displaying a model
• Getting Started
• Model Loading
• Physics
• Shading
• Tweening
• Skybox
• Primitives

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.

• Haxe Sandy
• Haxe Sandy Demos
• Haxe Sandy Tutorials by Matthew Casperson
• Haxe Sandy Download
  • Download sources
  • Download API documentation
  • Download all examples to get started

[ via Matthew Casperson at devmaster.net ]

Torque3D seems to have full featured browser surfaces that you can use in the 3d engine seamlessly, see the video below (at :38). This is amazing stuff.

Making games that integrate content from the web is especially required these days.  It is a difficult thing to do within the 3d render because of all the plugins, styling etc that needs to be rendered on a 3d surface.  Well Torque3D has a killer feature in that it supports entirely full features browser render on a 3d surface.  So now you can integrate html content, flash video etc in your game easily.

You can play content in flash player content easily and have stripped down html but it is limited, you can play videos and have content in Unity3d but it is limited, even larger engines like Unreal 3 have difficulty handling flash and html content.  If this is a good implementation Torque3D has a killer feature on their hands! Flash is commonly used as user interface elements and content within games but it can be challenging.  This is pretty exciting if it works as advertised. Think of how cool all the little consoles, mini-games and controls in 3d games could be in flash easily.

See at :38 in the video…

GDC 2009 – Torque 3D Web Demo from GarageGames on Vimeo.

Looks like it is a javascript day here at *drawlogic.  Here is an interesting example with some demos of a javascript and canvas based pseudo 3d engine. Anything this cool you know it has to be from Japan.
Also of note, it has been rumored that Silverlight 3 will have fully hardware accelerated 3d and canvas and javascript engines are getting much faster with great demos like this.  Adobe needs to leap into hardware acceleration for flash on a broader scale soon.

But I digress, this demo it appears, was inspired by Papervision3D due to the naming and the javascript reference of “parpevision.js“.  I wasn’t able to find much more information about this but it is very well done and this example even shows some environment mapping. It is not close to flash pseudo-3d engines like Papervision3D yet but at the rate of javascript engine development lately this could rival flash AVM2 in the next couple of years.

Demos

• Cloth
• Miku Character
• Enviroment Mapping

Code

• Sample iPod iTouch Mesh data (meshdata.js) – contains models
• Code from the main engine (parpevision.js)
• Sample Viewport and main app (touch.js from demo 3)

Here is the code for the parpevision.js file and the mini engine, it is an MIT license. (more…)

The YouTube Chromeless Player works with AS3/ActionScript 3.

The demo shows great examples of the player with just the window canvas (chromeless) from both javascript and inside of flash.

The project is hosted on Google Code [youtubechromelesswrapper-as3]

Looks like they maybe had a contribution for this, so do it where you can.

This is something we’ve been wanting to provide for a while, and the YouTube API team greatly appreciates the work of developer Matthew Richmond of The Chopping Block for making it happen. Thanks Matthew!

Links

• Demo
• Google Code [youtubechromelesswrapper-as3]
• Article about the library
• Download the source (get from google code recommended)
• Javascript Player Reference

Capabilities/API

Public Methods

player.loadVideoById(id:String, startSeconds:Number = 0):void

Loads and plays video based on specified id.

player.cueNewVideo(id:String, startSeconds:Number = 0):void

Loads but does not automatically play video based on specified id.

player.clearVideo():void

Clears currently cued/loaded video.

player.setSize(w:Number, h:Number):void

Sets the size of YouTubePlayer instance.

player.play():void

Plays the currently cued/loaded video.

player.pause():void

Pauses the currently cued/loaded video.

player.stop():void

Stops the currently cued/loaded video.

player.seekTo(seconds:Number):void

Seeks to specified time within the currently cued/loaded video.

player.getPlayerState():String

Returns the current state of the currently cued/loaded video.

player.getBytesLoaded():Number

Returns the value of current bytes loaded of the currently cued/loaded video.

player.getBytesTotal():Number

Returns the value of total bytes loaded of the currently cued/loaded video.

player.getCurrentTime():Number

Returns the current position in time of the currently cued/loaded video.

player.getDuration():Number

Returns the current duration of the currently cued/loaded video.

player.getStartBytes():Number

Returns the start bytes of the currently cued/loaded video.

player.setVolume(newVolume:Number):void

Sets the volume of the currently cued/loaded video.

player.getVolume():Number

Returns the current volume of the currently cued/loaded video.

player.mute():void

Stores the current volume and changes the volume of the currently cued/loaded video to 0.

player.unmute():void

Returns the volume of the currently cued/loaded video to the last stored value when muted.

player.getEmbedCode():String

Returns the current YouTube embed code of the currently cued/loaded video.

player.getVideoUrl():String

Returns the current YouTube video url of the currently cued/loaded video.

Events

YouTubeLoaderEvent.LOADED

Fired once the Chromeless Player has successfully completed loading and is ready to accept operations calls.

YouTubeLoaderEvent.STATE_CHANGE

Fired whenever the player’s state changes. The YouTubeLoader class translates the JavaScript API numbers to their related string values, the YouTubeLoaderEvent class stores the current event in a variable called state. Possible values are unstarted, ended, playing, paused, buffering, video cued. When the SWF is first loaded, it will broadcast an unstarted event. When the video is cued and ready to play, it will broadcast a video cued event.

YouTubeLoaderEvent.IO_ERROR

Fired when an error in the player occurs. There are two error codes possible: 100 is broadcasted when the video requested is not found. This occurs when a video has been removed (for any reason), or it has been marked as private. 101 is broadcasted when the video requested does not allow playback in the embedded players.

Jono is giving SWFZ to science and the open source devices.

The SWFZ engine is one Flash 3D engine that took a different approach. It is a bit early in its technique used but the author at custom:media Jono has decided to float the source code out there in ghost mode (no active development but not dead). It is just ready to branch and others to run with it. He is floating the source but I think in 1-2 years this will be the preferred method if processors and multicore parallel usage is optimized. We shall see.

The implementation method and difference with SWFZ engine in Flash for 3d is that is is a pixel based renderer or scanline. It is based on a really fun game engine called Irrlicht which has been pretty active for the last few years but is a C++ DirectX and OpenGL engine. Since SWFZ has to run in Flash and it is a pixel renderer/scanline it has some limitations currently in Flash. Games and renders have to be fast to pull this off and Flash is limited by the software renderer but as computers get multiple processors and flash player gets better at this then this will be a viable option (it is the same thing that limits Canvas based renderers right now). One main problem with this is you can’t go too full screen the biggest sizes that perform well are smaller windows 320×240 etc. But if the processors can handle it it is actually more efficient when it removes overlap, extra triangle drawing and painters algorithm like problems dont’ pop up (triangle overlap when on same plane). This method draws pixel by pixel but fast enough flash engines like Papervision, Sandy3D and Away3D draw overlaps due to the drawing technique, back to front.

But SWFZ still manages to pull off some amazing feats such as these demos

Quake Demo

Terrain Demo

Yoshis Hip Hop Couzin

Jono has put some great classes into SWFZ engine such as bsp parsers, quake md2 parsers, animated mesh, and lots of great examples in porting C++ Irrlicht to AS3. This was a very early example of how AS3 was fun for programmers to port stuff from C or C++ into Flash. AS3 is just fun. Also be sure to check the site for more samples like an FPS game, some basic ai etc.

Jono has been working on 3d in Flash for a while and actually this message is what shows the difference betweeen this approach and other flash engines the way Papervision, Sandy and Away3D (pv3d derivative) make 3d in flash fast enough (Painter’s Algorithm and drawing skewed movieclips and textures.

Demos

• Post on Open Sourcing of Code
• Post on Some Unfinished Work to Build On
• Demo Quake Prototype
• Demo Terrain
• Download Source SWFZ
• Download Source Dependency (FileSystem)

More about the Engine Some Notes

The SWFZ engine.

Overview:

SWFZ engine is the result of four years of me messing with 3D in Flash.

I was a complete newbie to 3D, so a lot of learning has happened to get to here.

If you’re interested in 3D engines check out the resource links at the bottom of the page:

The Demo:

Model

• .md2 format from ID’s Quake2.
• Uses frame based animation
• Textured with jpeg
• No lighting, No Gouraud Shading, just plain texture

Skybox

• Textures are just jpegs.

Boxes

• Rendering – Textured Gouraud , Textured Gouraud with Alpha, Textured Gouraud with Quick Alpha, Gouraud Shaded, and the large box is just Textured.
• Star Texture – Targa (.tga) file format.

AS3 classes

• 171 classes and interfaces

Scene

• No lighting
• No collision detection

SWFZ engine technology:

The demo only shows a small part of the capabilities of the engine. In the coming weeks I will get www.custommedia.co.nz up and running and start to post more info then.

Currently implement stuff:

New file formats supported

• .tga – Targa Image
• .bmp – Bitmap Image
• .3ds – 3D Studio Max
• .bsp – Quake3 levels
• .md2 – Quake2 models
• .obj – Wavefront 3d object (static)
• .zip – Read from a zip archive (all in Flash, no server side scripts)

3D Rendering

• mipmaps
• perspective correct texturing + affine texturing
• Flat shading
• Gouraud
• Textured Gouraud
• Textured Flat
• Textured Two Layers
• Gouraud Alpha
• Textured Flat Alpha
• Textured Gouraud Alpha

3D Scene

• Billboards
• Parent, Child scene nodes
• OctTree
• Skybox
• Static Meshes
• Animated Meshes
• Basic collision detection
• Scene node animators

If any code is useful to you maybe drop him a donation or what would be nice if this was all setup at google code and used to be integrated into other engines. Irrlicht ports are fun and there is a future in this method when processors catch up I think.