Features

WebRender is a rasterisation graphics rendering library completely written in JavaScript in order to display 3D scenes within a HTML5 canvas on a web page. It is not as fully featured as larger graphics renderers, however still provides significant customisation of the rendering pipeline.

The key features are:

WebRender is the most fully featured JavaScript only rendering library, and will be able to generate graphics on almost any modern web-enabled device. However, due to WebRender being a software renderer, it cannot achieve the same speeds as the hardware accelerated WebGL. WebRender is aimed at developers who do not need 'real-time' rendering speeds and are looking to reach a wider range of people than WebGL can.

Compatibility

The most important goal for WebRender is to provide compatiblity with as many browsers and devices as possible. Due to the compatiblity problems WebGL has with older devices, it was important for us to reach those devices that are still in use, but are not new enough to support WebGL. On general principle, WebRender will work in any browser and device from 2010 onwards, all it requires is support for the canvas element in the HTMl5 standard.

Here is the Browser compatibility list:

BrowserWebRenderMulti-threadingWebGL
ChromeTrueTrueTrue
FirefoxTrueTrueTrue
OperaTrueTrueTrue
SafariTrueTrueTrue
EdgeTrueTrueTrue
IE 11TrueTrueTrue
IE 10TrueTrueFalse
IE 9TruePartialFalse
IE 8FalseFalseFalse

This is the known mobile device compatibility list. This list is not complete but can be used to determine what range this is compatible with.

BrowserYearWebRenderMulti-threadingWebGL
iPhone 62015TrueTrueTrue
iPhone 52012TrueTrueTrue
iPhone 42010TrueTrueFalse
iPad Air2013TrueTrueTrue
iPad Mini2013TrueTrueTrue
iPad 32012TrueTrueTrue
iPad 22010TrueTrueTrue
HTC One M82014TruePartialTrue
Nexus 72013TrueTrueTrue
HTC One XL2012TruePartialPartial
Samsung Galaxy Tab 10.12011TruePartialFalse

Due to the advent of smart TVs and home consoles with internet connections, WebRender has also been tested on a number of other devices.

DeviceYearWebRenderMulti-threadingWebGL
Playstation 42015TrueTrueFalse
Playstation 32007FalseFalseFalse
PS Vita2012TrueFalseFalse
PSP2008FalseFalseFalse
New 3DS2014TrueFalseFalse
3DS XL2011FalseFalseFalse
LG Smart TV LS572011TrueFalseFalse

History

WebRender started as an experiment in early 2013 in order to see how powerful the modern browsers were with the JavaScript language. Originally started as a joke, it soon became apparent that the language was much faster than expected and the project took shape. The project has had many different forms and goals over that time, and some significant delays.

Proof of Concept

Cube on green plane

This first stage from March to June in 2013 was a very simple implementation of a fixed rendering pipeline that I had learnt, but never fully implemented. The results were a very simple, but reasonably well running scene of a cube on a green plane. This provided my first proof of concept, and gave me something to work from.

From this I looked to add more important features to my pipeline, first having multiple objects and basic animations, then implementing a texturing technique. This took place over July and August, and ended with a simple implementation of lighting where faces would be dulled if not pointed at the light source. It was here that I first ran into the problem of per-pixel calculations in order to perspective-correct my textures. This problem proved to be the main performance roadblock throughout the project.

Game level with brick walls and apples

In order to further expand my pipeline a new scene was created and a game style was adopted. This took place over September and October and mainly dealt with finding ways to improve the performance along with implementing rigged skeletal animations and having specific light sources within the scene. It was also at this point that I looked at other JavaScript libraries that did what mine could and found them to either be very lacking in features and performance, such as jsc3d, or have moved into WebGL and vector rendering like three.js. I had also proved by this point that JavaScript based rendering was possible, but had no real direction to take the project next.

New level now with light objects

Over the next few months until March 2014 I turned the project so that it was changed into a game engine. Since the rendering and engine was written in JavaScript it would be very simple to distribute any game that was created in it. Further performance gains were made, but the main focus at this point was all the extra parts of a game engine not related to the rendering. Some features like pseudo-shaders were added at this point, but the pipeline was still completely fixed.

WebRender

In July 2014 I started a one year Honours over my Bachelors in Information Technology and my research project was to take this fixed pipeline renderer and try and turn it into a robust JavaScript library. The aim was to complete the development of the library by the end of 2014, then use the rest of the time to test, document and refine the library.

A building interior with coloured lights

The project was divided over 6 main stages, each one lasting about a month. The first stage of development was to extract the graphics rendering from the game engine it has been built into, then create a testing framework in order to track performance over the project.

Next the shader system was implemented in order to turn it into a programmable graphics pipeline. Following this, the entire library was evaluated and many sections of old code were written to run faster. Some of rasterisation code before this was still unoptimised testing code from early 2013. This greatly improved the performance of the library.

A high-poly sphere with phong lighting

The last development phase was to implement multi-threading in the library using Web Workers, which are the only type of multi-threading available in JavaScript. This separated the library into two sections, a delayed multi-threading execution, and an immediate same-thread execution. In order to control all this, an interface layer was added so that calls to either type of execution are the same.

In early 2015 I developed health problems that significantly effected how much testing and development I could achieve. Despite this, the entire project, except for user documentation, was completed by June 2015, but then the project was put on hold for several months while I was unable to use a computer. The final version and website for the library was finally released in December 2015.

Future

Due to my ongoing health concerns there are no current plans to extend the library. It would also be rather pointless to add more advanced features to the library at this point seeing that even simple scenes are very taxing to render.