Tuesday
Jul092013

Latest Shumway Demos

Shumway is a Flash player and runtime written entirely in JavaScript. It uses HTML5 Canvas to render Flash content and JavaScript to execute ActionScript code. Shumway is NOT an ahead-of-time Flash to HTML5 translator, instead it is meant to be a complete drop in replacement for the Flash player and thus needs to execute .SWF files directly.

http://www.youtube.com/watch?v=LE2LIFJBptE

The first video shows off the following demos (in order):

  • Racing Game: A very simple ActionScript 3 racing game, most notable feature here is path hit testing which is used by the game to implement collision detection.
  • Box2D Demo 1: A demo of the Box 2D physics engine ported to ActionScript3. Shumway uses a JIT compiler to translate ActionScript 3 (bytecode) to JavaScript. You will notice a slight pause right before the first box lands on the floor, this is the Shumway JIT compiling the Box 2D code required to compute collision response.
  • Box2D Demo 2: A few more complicated Box 2D scenes. There is a sight delay at startup while the JIT compiles the code, but then the simulations are fairly smooth.
  • Box2D Truck Demo: Same as above.
  • Truck Game: This is a fairly complex Flash game that uses Box2D internally and has a lot of graphic assets. The short stutter at the beginning is because of a very large SVG shape that is displayed briefly, it however takes a long time to parse and render. During the loading screen (right before the game starts) the game renders all of its vector graphic assets into bitmaps which are then composited during the game. The game itself is definitely playable.  

http://www.youtube.com/watch?v=oe1diSzcFiU

The second video shows off Shumway running the YouTube Flash player. It doesn't work completely right but it is able to at least display the video. This is using a special build of FF that uses GStreamer.

 

Friday
May112012

LLJS: Low-Level JavaScript

What would JavaScript look like if you added low level features to it? Well, three weeks ago, Shu-yu Guo and I set about to find out. We prototyped the idea with two different languages, LLJS based on JavaScript and heap.coffee based on CoffeeScript. 

Both are typed dialects of JavaScript that offer a C-like type system with manual memory management. They compile to JavaScript and let you write memory-efficient and GC pause-free code less painfully. This is early research prototype work, so don't expect anything rock solid just yet. The research goal here is to explore low-level statically typed features in a high-level dynamically typed language. Think of it as inline assembly in C, or the unsafe keyword in C#. It's not pretty, but it gets the job done.

You can play with LLJS compiler online or check out the source on github.

Tuesday
Mar062012

Updated Broadway.js Demo using Web Workers and WebGL

After some hacking, I managed to demux and play video streams directly from .mp4 files. An updated demo is available at:

http://mbebenita.github.com/Broadway/storyDemo.html

or

http://mbebenita.github.com/Broadway/treeDemo.html

Warning, the video file needs to be completely downloaded before playback can begin, so it's a bit slow at first.

Moreover, Broadway.js now supports WebGL and background decoding in web workers. Decoding in a worker is still a bit slow due to the overhead of passing decoded video frames via postMessage, but hopefully that should go away once array buffer transfers land.

Tuesday
Nov012011

Broadway.js Live Demo

Due to popular demand, we have posted a live and easily accessible demo of Broadway.js. Keep in mind that the video clip needs to be completely downloaded before playback can begin.

The performance score is computed by averaging the number of frames per second in the first 60 seconds of the video clip. On my Mac Book Air (1.8 GHz Intel Core i7, 4GB) I get a score of 30 fps.

Friday
Oct282011

Broadway.js - H.264 in JavaScript

Recently I joined Mozilla, it's a fantastic place! My first task was to look into pure software H.264 decoding in JavaScript! I must admit, at first I thought it was a little bit crazy, and that it couldn't be done. Turns out that, luckily, I was very wrong.

Alon Zakai and I managed to take an existing H.264 decoder, simplify it, and compile it with Alon's awesome Emscripten compiler, which translates LLVM bitcode to JavaScript. The result is quite remarkable, we can reach a rate of nearly 30 fps decoding video purely in JavaScript, with no real optimizatsions other than what Emscripten already performs. There are lots of improvements ahead, such as hardware acceleration using WebGL, parallel processing, etc.. This is VERY EARLY WORK, just to show off how far JavaScript performance has come.

Brendan Eich showed a demo (video http://yfrog.com/nmng0z) of this at OOPSLA (slides http://www.slideshare.net/BrendanEich/splash-9915475), and enough people were interested that we've decided to make the code public (https://github.com/mbebenita/Broadway). To run the demo, simply clone the Git repo and open the Demo/broadway.html file in the nightly build of Firefox which includes a fancy type inference that really speeds up the JS JIT.