Fork me on GitHub
A collection of procedural materials written in shade.js and rendered in WebGL using forward shading (upper left), deferred shading (upper right), Blender Cycles ray-traced (lower left), and with global illumination (lower right). We achieve conceptually equal materials for all four rendering techniques.
  • 26 Aug 2014: Website launched
  • 03 Sep 2014: Preprint available (see Downloads)
  • 01 Oct 2014: Source code available

In computer graphics a material is a visual concept that is parameterizable and should work for arbitrary 3D assets and rendering systems. Since provided parameters and attributes as well as the capabilities of rendering systems vary considerably, a material needs to adapt to its execution environment. In current approaches, the adaptation logic is `baked` into the rendering application based on string manipulation, compiler directives, or metaprogramming facilities. However, in order to achieve application-independent and self-contained material descriptions, the adaptation logic needs to be part of the material description itself.

In this paper we present shade.js, a novel material description using a dynamic language to achieve the necessary adaptivity. A shader can inspect its execution environment and adapt to the available parameters and renderer capabilities at run time. Additionally, shade.js exploits the polymorphism that comes with non-explicit declaration of types. These two novel features allow for writing adaptable and thus more general material descriptions.

Based on the concrete execution environment at run time, the accompanied compiler generates specialized shader code that is specifically typed and optimized for the target rendering system and algorithm. We evaluate shade.js with examples targeting four different rendering approaches (forward and deferred rasterization, ray-tracing, and global illumination). We show that we can improve convenience and flexibility for specifying materials without sacrificing performance.

  author =  {Sons, Kristian and Klein, Felix and Sutter, Jan and Slusallek, Philipp},
  title =   {shade.js: Adaptive Material Descriptions},
  journal = {Computer Graphics Forum},
  year =    {2014},
  volume =  {33},
  number =  {7},
  pages =   {51--60},
  issn =    {1467-8659},
  doi =     {10.1111/cgf.12473},
  url =     {}
We would like to thank Stefan Herhut, Sebastian Hack and the anonymous reviewers for their valuable comments and suggestions. The research presented in this paper has been generously supported by the Intel Visual Computing Institute and the EU projects VERVE, FI-CONTENT, FI-WARE and Dreamspace.