Open Design

Render and View

What is Render?

Render is a hardware-accelerated rendering engine that creates visual output from a design. Once a design is imported to Open Design, you can use Render to get bitmaps and vectors of entire artboards or individual layers.

The thing that sets Render apart is its ability to read a generalized design format and generate the same exact visual output as the source design tool. This is a tremendously difficult problem space and the Open Design team is quite proud of where the project is today.

How does it work?

Render loads an Octopus file along with its assets (images and fonts) and outputs images of the design according to the user's specifications. These specifications include:

  • which portion of the design should be drawn (a bounding rectangle)
  • which elements of the design (layers, artboards, effects) should be drawn
  • the scale (resolution) to render

This flexible configuration is all you need to perform a variety of tasks such as rendering a single layer for asset export or drawing a live view of the design on the fly (read on to learn more about View). For example, Render is used in the Avocode flagship product to generate preview thumbnails for uploaded designs.

The engine is written in C++ and is fully hardware accelerated via OpenGL. Thanks to this and additional optimizations, such as caching partial results in between individual rendering runs, it is very efficient. Not only is it cross-platform and fully functional on Windows, Mac, and Linux, but it can even run in a web browser thanks to Emscripten, which is able to compile the C++ code into WebAssembly and automatically convert the OpenGL portions into WebGL.

The team has spent the last few years working hard to ensure that Render's output is as close to the source design file as possible. This means that many intricacies and quirks of the various supported design tools are replicated in Render (which is a considerable challenge in its own right).

In addition, new versions of these tools come out all the time that introduce new features and occasionally breaking changes. An automated testing tool runs the engine on large collections of designs that have been accumulated over the years and compare its output to the true output from the source design tool. This tool is a critical part of Render's QA process and helps identify bugs without having to wait for a customer to report it.

What is View?

As mentioned above, Render uses Emscripten to compile to WebAssembly and WebGL. View is an interactive design viewer that uses this technology to allow users to interact with designs in their web browser.

View takes full advantage of Render's efficiency and ability to render specific parts of a design. It allows users to zoom and pan around as the relevant portion of the design is progressively filled in at the appropriate magnification level. It also allows the user to select layers, sample colors, and to make minor changes to the design (such as toggling the visibility of specific layers).

The way View fills in the viewport is similar to how Google Maps works. Similar to a map of the entire world, a design is “just” a static image. However, generating the entire image at once would require huge amounts of CPU time and memory. To solve this, both applications instead produce visible portions of the image (tiles) at screen resolution on demand. In the case of View, it continuously sends requests to Render for parts of the design that are missing from the viewport.

How parts of the design are rendered when the user pans around

View is designed to work and remain interactive even in a single-threaded web environment. To achieve this, Render splits its work into very small chunks, and its work can be paused (or even canceled) in between these to give View enough CPU time to respond to user input.

The following demo shows View's performance when opening a design with a few artboards. If the radar is green, View is running at 60 frames-per-second. If it turns yellow or red, that means that some frames have been dropped. The team uses this tool to optimize certain rendering operations and identify bottlenecks.

How View is tested for performance bottlenecks

Building applications with Render and View

Hopefully, you can start to see how Render and View can be used in the application your building. Whether it's generating a bitmap of a single layer or embedding a full design viewing experience in your app, we hope that these tools are helpful. Please reach out if you have any questions or run into any problems!