As reported by Creative JS, Jasmine Kent ported her open source Linux racing game Trigger Rally to WebGL to run in HTML5 browsers. In the following video you can see it running pretty smoothly on my MacBook air that is already running 12% of CPU without it starting (as ScreenFlow is recording and VLC was playing music whilst TweetDeck used quite a chunk, too):
Aurora 10 also implements incremental enhancements like IndexedDB setVersion API changes. Ongoing detailed attention to evolving specifications help to keep Firefox at the front of the Web revolution. (Read more about IndexedDB on MDN.)
DOM
We now fire a “load” event on stylesheet linking when the sheet load finishes or “error” if the load fails.
We turn the POSTDATA prompt into an information page (when navigating in session history).
We only forward event attributes on body/frameset to the window if we also forward the corresponding on* property.
We no longer allow more than one call to window.open() when we allow popups.
We fixed a bug where a success callback never fired when a position update is triggered after getCurrentPosition().
We removed replaceWholeText().
We fixed an error with createPattern(zero-size canvas).
We now handle putImageData(nonfinite) correctly.
We now throw INVALID_STATE_ERR when dispatching uninitialized events.
We’ve made Document.documentURI readonly.
We fixed document.importNode to comply with optional argument omitted.
Web workers
We now allow data URLs.
We implemented event.stopImmediatePropagation in workers.
We made XHR2 response/responseType work in Web Workers.
Graphics
We implement the WebGL OES_standard_derivatives extension.
We implement minimal-capabilities WebGL mode.
JavaScript
The function caller property no longer skips over eval frames.
We fixed E4X syntax so that it is not accepted in ES5 strict mode.
weakmap.set no longer returns itself instead of undefined.
We implemented the battery API.
Offline: IndexedDB enhancements
IndexedDB setVersion API changes
Added support for IDBObjectStore/IDBIndex.count
Various methods accept both keys and KeyRanges.
Added support for IDBCursor.advance.
Implemented deleteDatabase.
objectStoreNames are no longer updated on closed databases when another connection adds or removes object stores
IDBObjectStore.delete and IDBCursor.delete now return undefined.
No longer throws an error if there are unknown properties in the options objects to createObjectStore/createIndex.
We now the errorCode to “ABORT_ERR” for all pending requests when IDBTransaction.abort() is called.
Fixed the sort order for indexes.
Layout
We have updated the current rule for handling malformed media queries.
We now support the HTML5 <bdi> element and CSS property unicode-bidi: isolate.
The CSS3 implementation now supports unicode-bidi: plaintext.
Media
Implemented Document.mozFullScreenEnabled.
Enabled the DOM full-screen API on desktop Firefox by default.
A mandatory clause disallowing usage of cross-domain elements as WebGL textures in the general case.
A non-normative clause specifically allowing cross-domain elements that have CORS approval. For that occasion, the HTML specification on the <img> element got updated to add a new crossorigin attribute.
The first got implemented in Firefox 5, the second is now in Firefox 8.
How to use this feature
There are two CORS modes: “anonymous” and “use-credentials”. We’ll focus on “anonymous” as it’s the common case. A great example of images served with anonymous CORS is Google Maps imagery, such as:
In order to load it with CORS as a WebGL texture, we set the crossOrigin attribute on it:
var earthImage = new Image();
earthImage.crossOrigin = "anonymous";
Now we load it as usual:
earthImage.onload = function() {
// whatever you usually to do load WebGL textures
};
earthImage.src = "http://khm0.googleapis.com/kh?v=95&x=0&y=0&z=0";
That’s it! Aside from setting the crossOrigin attribute, we didn’t have to do anything. Here is the full self-contained example.
The HTTP headers
If we study the HTTP headers for this image (using, for example, Firefox’s Web Console), we find that the Request Headers contain
Origin: null
which is the effect of having set this crossOrigin attribute on the img element. And the Response Headers contain
Access-Control-Allow-Origin: null
which is the effect of the server supporting CORS for this file.
Doing this in HTML
Of course, one could also set this attribute in HTML, in which case it’s case-insensitive:
And since “anonymous” is both the missing-value-default and the invalid-value-default for the crossorigin attribute, we can pass any invalid value for it, or even just omit its value:
Coming soon: CORS approval for Canvas 2D drawImage
What if you first draw a CORS-approved cross-domain image onto a 2D
canvas, and then use that canvas as the source of a WebGL texture? The
good news is that this will work in Firefox 9, which is hitting the Beta
channel soon. This fix means that demos like this will work really
nicely in Firefox 9.
The last few days I was busy talking to in-house developers at two large enterprise companies, Sabre in Poland and SAP in Germany. Both these companies approached us asking for a talk about HTML5 as the topic gets a lot of interest in the upper echelons and there is a lot of confusion about it.
As we were in Poland anyways to attend Frontrow it was easy to visit Sabre and give a one hour presentation on the ins and outs of HTML5 and where the web might go. The day after the same talk was repeated over Skype for the German office of SAP.
In the one hour presentation we covered:
the basics of HTML5
what it meant as an evolution of markup
what HTML5 is not
common HTML5 myths
“Friends of HTML5″ – related technologies and
what the future of web technologies could look like
The slides are available online or embedded below (cursor keys to navigate, press N to show and hide notes and cursor down to proceed on slides with bullet points):
Tilt is a Firefox addon that lets you visualize any web page in 3D. A new update is available, coming with more developer-oriented features. Try the addon.
Since the first alpha version of Tilt was announced (a Firefox extension focused on creating a 3D visualization of a webpage), a lot of work has been done to add a great number of developer-oriented features. These focus on debugging the structure of a webpage, inspecting styling and attributes for each node and seamlessly refreshing the visualization when the DOM structure changes or after contents of document are repainted.
Solve nesting problems
Tilt is useful when searching problems in the HTML structure (like finding unclosed DIV elements for example) by providing the extra third dimension, layering each node based on nesting in the DOM tree. Stacks of elements visually represent branches in the DOM, and each node can be inspected for the inner HTML contents, its computed CSS style and the attributes.
Clicking anywhere on the visualization highlights a color-coded rectangle surrounding the corresponding node. Double click shows up the source preview for that node. Tilt also tries to show the most relevant information when needed (one is most likely to inspect the attributes of an input, button or image element, for example, but can easily switch between HTML, CSS and attributes view at any time).
Minidom map
The “minidom” is a tree view representation showing a minimalistic snapshot of the document object model. Each node is assigned a color associated by tag name (blue for div, green for span etc.) and represented as a strip, along with visual markers for the id and/or class if available. Each one of these strips also has a width relative to the type, id and class name length for the respective element, and the corresponding 3D stack in the visualization has color-coded margins. The coloring for individual elements is easily changeable using the color picker near to the minidom legend.
Clicking a strip in the tree view (or directly a stack on the 3D document visualization mesh) also highlights the node with a colored quad. This behavior is a good way to relate with the Style Inspector, and a more unified interaction between Tilt and other Developer Tools is planned in the future. All of these additions make it easier to analyze the bounds of each node, along with the HTML, computed CSS and attributes.
Realtime editing
Because Tilt is able to detect when a webpage’s DOM structure changes or when a repaint is necessary, integration is seamless with existing Developer Tools. Using Tilt and Firebug or Style Editor at the same time is easy. One can enable or disable CSS properties, changing the style of a node, and the visualization changes accordingly.
To enable realtime updates for the 3D webpage, go to the Options menu and check “Refresh visualization”.
Useful for learning
Developer tools such as “view source” have always been used to help people learn about web development. The 3D view highlights the structure of a page better than a flat view, thus anyone can immediately understand the parent-child relationship between nodes in a webpage, their positioning and how the layout is influenced.
One use case for this is the Hackasaurus mashup. The X-Ray Goggles is a nice and fun tool designed to make it easier to learn about the different document node types, the “building blocks” which create a webpage.
Export
A requested feature was the ability to export the visualization as a 3D mesh, to be used in games or other 3D editors. Tilt adds the ability to export to .obj, along with a material .mtl file and a .png texture (a screenshot of the entire webpage). The open .obj format ensures the fact that the mesh can be opened with almost any editor. Here’s a ray-traced rendering of hacks.mozilla.org in Blender:
Fun with experiments
As soon as it was released, many people found clever and interesting alternative ways to interact with Tilt. One experiment was creating a 3D visualization of an image, by exporting chunks of pixels to a HTML representation. The result was a voxel-like representation, with node blocks and stacks instead of pixels. A simple Image2Tilt converter was written in JavaScript, and you can try it directly in the browser.
Accelerometer support was another addition based on community request. This shows how easy it is to add functionality that wasn’t originally planned.
You can view the source code, fork it and also contribute to the addon with ideas or feature requests on Github, at github.com/victorporof/Tilt.
For compatibility, Tilt requires WebGL capabilities. Go to get.webgl.org to check availability and troubleshoot any issues. The current version works with Firefox 6.0 to latest 10.0 Nightly releases (latest Nightly builds now also support WebGL anti-aliasing, working great with Tilt).
To start Tilt, hit Control+Shift+M (or Command+Shift+M if you’re on Mac OS), or go to Web Developer -> Tilt, available in the Firefox application menu (or the Tools menu on Mac OS). You can modify this hotkey (and other properties) from the Options menu after starting Tilt.
More information about Tilt, the development process and milestone updates can be found on blog.mozilla.com/tilt.
Future
Tilt has become an active Developer Tools project, and an ongoing effort is made to integrate it with other existing tools like Style Inspector and Style Editor (source code and latest builds). As the 3D view of a webpage has proven to be useful for debugging, this main functionality will gradually become part of Firefox in future releases.
The Demoparty Online Competition 2011 is part of the Mozilla Labs Demoparty Project, an initiative to foster artful exploration of open web technologies.
We asked people from the demo scene to have a go at web technologies and (with WebGL being the absolute winner of course) managed to collect over 100 submissions. Now the judges have spoken and we picked the winners in the categories of Main Demo, Single Effect, Audio Demo, Animated GIF and pure CSS demo.
Amongst other great examples of using technology in a purely creative way unhindered by real life application needs here are the winners of Demo and Single Effect:
We congratulate all the winners and thank all those who contributed. Playing with technology is a big part of making it interesting for everyone to use.
It’s Thursday, folks, and you know what that means, right? It’s time for Mozilla Hacks Weekly, with recommended reading from the Mozilla Developer Engagement Team!
We in the Developer Engagement Team at Mozilla – who write this blog, give presentations, work on the MDN documentation, meet the community and many other things – always try to stay on top what is happening on the Internet. And now we want to share our reading with you!
Tilt is a Firefox extension that lets you visualize any web page DOM tree in 3D. It is being developed by Victor Porof (3D developer responsible with the Firefox extension itself), along with Cedric Vivier (creating a WebGL optimized equivalent to the privileged canvas.drawWindow, see #653656) and Rob Campbell (who first thought about creating a 3D visualization of a webpage). Everything started initially as a Google Summer of Code project, but now, with an enthusiastic team behind it and so many new features and ideas, it has become an active Developer Tools project.
Tilt is a fun new Firefox extension focused on creating a 3D visualization of a webpage.
Since the DOM is essentially a tree-like representation of a document, this tool layers each node based on the nesting in the tree, creating stacks of elements, each having a corresponding depth and being textured according to the webpage rendering itself.
Unlike other developer tools or inspectors, Tilt allows for instant analysis of the relationship between various parts of a webpage in a graphical way, but also making it easy for someone to see obscured or out-of-page elements. Moreover, besides the 3D stacks, various information is available on request, regarding each node’s type, id, class, or other attributes if available, providing a way to inspect (and edit) the inner HTML and other properties.
Based on WebGL
The visualization is drawn using WebGL, for dynamic, fast, in-browser rendering. At initialization, Tilt creates individual 3D objects (structures describing how the webpage geometry looks like) using the DOM, with the BODY as the lowest layer and the base of the document upon which descendant nodes are layered. For each successive level, another platform is built, adding depth to the 3D webpage mesh. For example, stacks are built from DIVs, ULs, or any containing node with children.
Controls
Controlling the visualization is achieved using a virtual trackball (arcball), which rotates around the X and Y axes. Other mouse events exist to control yaw, pitch, roll, pan, zoom, as well as various additional keyboard shortcuts. The controller is not tied to these peripherals only however, making it accessible and easily scalable for other input methods or devices. Double clicking a node brings up the Ace Cloud9 IDE editor, showing more useful information about the node and the inner HTML.
Try it
You can find the Tilt source code and the latest extension builds on Github, and a development blog with milestone updates on blog.mozilla.com/tilt.
For now, to test the extension, just download the latest stable build (tilt.xpi: download the file, then open it with Firefox or drag’n drop it on Firefox), install it and search for Tilt inside the Tools menu. Or, you can use Ctrl+Shift+L (or Cmd+Shift+L if you’re on a Mac) to start the visualization. Close it at any time with the Esc key. Tilt works with any webpage, so you can even inspect this blog to see how it looks in 3D.
Future
More features are soon to be added, some of which include: modifying and updating the 3D webpage mesh on the fly (as the webpage changes, exposing CSS transforms for each node, plus customizing stack spacing, thickness, transparency etc.), rendering elements with absolute position or floats differently (e.g., hovering above the webpage based on their z-index), creating a more developer-friendly environment and better integration with the Ace editor and the Firefox Developer Tools. (highlighting the currently selected node, instant 3D preview), exporting the visualization to other browsers or applications (as a 3D object file, probably .obj and/or COLLADA).
The greatest milestone will be achieving seamless 3D navigation between webpages, as in a normal 2D environment.
For more information about upcoming tasks visit the TODO.md list.
Last weekend I was in New York City to speak at the GothamJS conference and Mozilla also sponsored it. It was a nice event with about 200 attendees, taking place in the NYIT Auditorium on Broadway.
The event was one-track with 8 speakers, and personally I always prefer when it’s just one track for follow-up discussions and that everyone have seen and heard the same thing. The topics were ranging broadly between script loaders and HTML5 in one end, and voice-controlled telephony applications in the other.
My presentation
My talk was about HTML5 APIs in general, to give an introduction to them but also to inspire people to try things out and also give feedback to both working groups and web browser vendors about current implementations.
What I especially liked talking about is services like vid.ly which helps you take control over the problem of different video codec support in different web browsers, by storing various formats and then deliver the most suitable one depending on the web browser/device accessing it.
Another favorite is Universal Subtitles, which is an excellent tool for everyone to be able to add subtitles to a video clip, empowering users with varying language skills to take part of a video and its content and sharing it with the world.
An option to make the content of a web site richer, there is Popcorn.js to sync key events in the video playing to what kind of text or other information you want to present to go with that. To complement that, the Butterapp is an editor to create that kind of content syncing, currently in alpha.
I also mentioned videograbber for taking easy video screenshots in the web browser.
Dev Derby <video> challenge
I also want to take the opportunity to remind you that Mozilla Dev Derby has a challenge for what you can accomplish with the <video> that goes till the end of July, so please submit anything if you have a good idea!
