Besides using less CPU power, the new Firefox version promises a better full-screen experience.Īlso, other changes include the zoom indicator which is now shown in the menu bar, turning on e10s multi-process Firefox for users with extensions that are not explicitly marked as incompatible, and enhancements to various CSS/JavaScript/ES2015 developer improvements. They have also enabled Skia 2D graphics library for content rendering by default in the Linux build too.Īnother enhancement delivers improved video performance for users that don’t benefit from any GPU (graphics processing unit) acceleration. The users can now also save passwords for forms that don’t have “submit” events.
The JS code instantiates the WA module, sets up basic canvas stuff and copies the data over to the canvas in the render loop.While there are no standout features in this release, it however notably does have support for FLAC (Free Lossless Audio Codec) content, a high-end gaming experience thanks to the implementation of WebGL 2 support, and the ability to view passwords before saving them in the built-in password manager. We’re not doing dynamic memory allocation for the image data, as it doesn’t really affect the render speed and I can’t be bothered. All floating point values are doubles: we don’t really need the accuracy, but it runs faster and creates a smaller WASM file. We also use a custom FMOD, as emcc doesn’t seem to provide a native version of that. You’ll notice that we’re using a custom atan2 approximation: while emscripten happily produced WebAssembly with atan2 imported from C libs, the result was as slow as the JS version. You can take a look at the project for further details.
The short of it is, use emcc -Os and check the WAT for required imports with something like wasm2wat.
Getting emcc to produce WASM with a sane amount of stuff imported from javascript etc. Other than that, the code is really similar to the JS version.
I checked, the firefox 45 does support WebGL, and upon going to about:config and searching for entries with WebGL, it seems everything is off for some reason. We have to pass a memory location to JS so that we know where to copy the data from. Im using the latest version of Firefox from the repo. Let’s look at an MVP that colors every pixel red again: Note that just updating the canvas with two prefilled arrays leaves the FPS short of 60. JS can’t render the effect at 60 FPS even at 800×400. But that is really not the point of this exercise, we just want something that’s heavy enough to show differences between the three methods. All the distance calculations are static between frames, we could easily precalculate them etc. Now let’s create our effect proper and see how it fares: Here’s an example that colors every pixel red: Updating the canvas in JS is quite simple, even if we do it pixel by pixel. With the release of Firefox 51, WebGL 2 support has landed WebGL is a standard API to render 3D graphics in the Web. Let’s create a simple effect in all three ways and see how they work. WebGL is really fast, but gets rather complicated if your effect has a lot of state that has to be passed and updated between frames, such as particles (it’s still possible by either handling the state in JS and passing it to WebGL, or even handling it purely in WebGL by storing it in a texture). This might sound like a slow solution, but it still beats JS that gets bogged down even with a moderately complicated draw loop. While JS and WebGL have their own ways of actually writing to the canvas, WebAssembly requires us to copy the resulting memory buffer to the canvas in JS. Use-after-free vulnerability in Mozilla Firefox before 47.0 and Firefox ESR 45.x before 45.2 allows remote attackers to execute arbitrary code via WebGL content that triggers texture access after destruction of the textures recycle pool.
There are roughly speaking three ways to update an HTML5 canvas: plain old JavaScript, WebGL and WebAssembly.