A unified GLTF/X3D extension to bring Physically-Based Rendering to the Web Timo Sturm∗ Miguel Sousay Maik Thoner¨ z Max Limperx Fraunhofer IGD, Darmstadt / TU Darmstadt Figure 1: Dielectric and metallic physically-based materials, described with a small set of intuitive parameters and rendered in real-time inside a Web browser, using WebGL. From left to right: white dielectric, iron, gold, copper, red dielectric. Abstract significant computational costs. The introduction of programmable graphics pipelines made it pos- We present a unified material description and transmission for- sible to use variations of the reflection models better suited for a mat for real-time, physically-based shading. Our format is general particular application. Meanwhile, the graphics APIs moved away enough to be used consistently across multiple rendering systems from fixed lighting models and, as a result, no new standard models and platforms, covering a wide range of applications from desk- were established. top to Web. Furthermore, our format’s expressiveness allows to In recent years, Physically-Based Rendering (PBR) has been gain- represent a wide variety of real-world materials. First, we define ing a lot of attention. The main premise is that modeling natural a common parameter set for physically-based shading in modern, light behavior leads to more consistent results and unifies the shad- real-time 3D graphics systems. We then demonstrate its applica- ing of diverse materials. In this context, Disney’s work [Burley bility for several types of materials on different rendering systems. 2012] was highly influential. Finally, we propose a transmission format, in the form of extensions Although the number of content creation tools and game/rendering for the glTF and X3D standards. engines implementing the concept of PBR increased, material defi- nitions converged to a common set of parameters. Nonetheless, no Keywords: physically-based rendering, real-time rendering, glTF, proposal for a standardized material description has been put for- X3D standardization ward. With the introduction of WebGL, 3D models became commonplace Concepts: •Computing methodologies ! Graphics file for- on the Web with some of the Web applications behind it using PBR. mats; Reflectance modeling; As in the case of desktop graphics, no unified model for materials has been suggested. 1 Introduction In this paper we propose a set of parameters and a PBR shading model that we believe can be used for representing a wide range of Ever since the first computer generated images of 3D models, there materials, based on the current state of the art of PBR. Our solution has been an attempt to improve the shading of the surfaces to pro- results from capturing the most relevant features from prominent duce a more realistic result. implementations of physically-based rendering. Based on the Phong reflection model [Phong 1975], the Blinn- Furthermore, we present a set of nodes for X3D and a correspond- Phong model [Blinn 1977] became ubiquitous in real time 3D ing set of extensions for glTF for representing PBR materials, along graphics, being used by both, OpenGL and Direct3D. with the resulting renderings captured in a Web context. Even though improved models have been introduced over the years, these were not a good fit for real-time applications as they added 2 Related Work ∗e-mail:[email protected] y e-mail:[email protected] PBR Engines. Most major digital content creation tools and ze-mail:[email protected] x game engines currently make use of some form of physically-based e-mail:[email protected] rendering. Permission to make digital or hard copies of all or part of this work for Unreal Engine 4 [Epic 2016], the game engine from Epic Games, personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear uses PBR extensively. The use of PBR led to more realistic render- this notice and the full citation on the first page. Copyrights for components ing while at the same time it improved artists workflow by simpli- of this work owned by others than ACM must be honored. Abstracting with fying the process of creating materials. These materials are defined credit is permitted. To copy otherwise, or republish, to post on servers or to by a small set of intuitive parameters. redistribute to lists, requires prior specific permission and/or a fee. Request Unity 5 [Unity 2016], another popular game engine, also uses PBR permissions from [email protected]. and a small set of parameters in its Standard Shader in order to Web3D ’16, July 22-24, 2016, Anaheim , CA, USA produce realistic rendering. The move to PBR also simplified the c 2016 ACM. ISBN 978-1-4503-4428-9/16/07 . $15.00 process of authoring physically plausible materials compared with DOI: http://dx.doi.org/10.1145/2945292.2945293 previous versions of the engine. 117 Substance Designer 5 [Allegorithmic 2016] is a material authoring with a single shading model. As deferred shading limits the num- tool designed around PBR. Materials are created using a node edi- ber of shading models that can be used, this is highly beneficial. tor and the application can generate a wide range of textures maps. On forward renderers it improves performance by reducing shader It integrates with the most popular digital content creation tools and switching. game engines. Consistency WebGL engines. Currently, most engines running on WebGL are By using physically-based shading models, which follow real phys- not based on PBR. The popular three.js engine [ThreeJS 2016] does ical laws, materials will look accurate and consistent in all lighting not have native support for physically-based shading although it is conditions without changing an immense list of parameters and set- possible to implement it by writing custom shaders and materials. tings. The X3DOM framework [Behr et al. 2009] is a similar example. Although it has an implementation of the CommonSurfaceShader 4 Shading/Lighting Model [Schwenk et al. 2012], it is not complete thus far and it only sup- ports some of the general parameters from the CommonSurface- The core of every PBR implementation is the underlying shading Shader node. model. As mentioned before, at this time PBR is more of a concept However, some WebGL based applications are introducing PBR on than a true standard. Therefore, the implementation of the shad- the Web. One example is Sketchfab [Sketchfab 2016], a website for ing/lighting model and the used diffuse and specular Bidirectional displaying and sharing 3D content. It allows the use of PBR mate- Reflectance Distribution Function (BRDF) varies between systems. rials on the uploaded models. Marmoset, developer of Toolbag [Marmoset 2016], also uses PBR Most systems we analyzed implement PBR as a combination of in their pipeline. Marmoset Viewer is a WebGL based viewer using Imaged-based lighting and the the Cook-Torrance microfacet spec- PBR for content exported by Toolbag 2. ular BRDF [Cook and Torrance 1982] and the Lambertian diffuse BRDF. Transmission Formats. The GL Transmission Format (glTF) [Khronos a] is an open project by the Khronos Group which aims at 4.1 Specular BRDF defining a format for asset delivery tailored for OpenGL APIs. One key characteristic of the glTF is that its data structures are homolo- The Cook-Torrance reflectance model was chosen as it is the most gous to the ones used by OpenGL. commonly used physically-based specular BRDF. It is based on the In the context of Web applications, often running with limited re- microfacet theory in which surfaces are composed of small-scale sources, this is an important feature as it significantly simplifies planar detail surfaces of varying orientation. Each of these small the parsing of data structures and eliminates the need for data re- planes, so called microfacets, reflects light in a single direction encoding, especially when using its binary version as defined in the based on its normal. KHR_binary_glTF extension. The Cook-Torrance specular BRDF is defined as follows: Another important aspect of this format is its extensibility. The glTF extension model [Khronos c] allows the expansion of any part D(h)F (v; h)G(l; v; h) of the original format. f(l; v) = (1) The current version of glTF (1.0) does not permit the generic defi- 4(nl_)(nv_) nition of materials using a set of parameters although the proposed KHR_materials_common extension provides such support for Where l is the light direction, v is the view direction, h is the legacy reflection models such as the Blinn-Phong model. half-vector, n is the normal, D is the normal distribution function X3D, a standard XML-based file format for 3D content, has no sup- (NDF). F is the Fresnel term and G is the geometry term. port for PBR materials. However, being highly extensible, it is pos- sible to write new Nodes to this end. Specular D Specular D is represented by the normal distribution function which 3 Physically-based Rendering is used to describe the statistical orientation of the micro facets at a given point. The first PBR implementations used distributions such Physically-based rendering (PBR) refers to the concept of using re- as Phong or Beckmann, but recently the GGX distribution [Walter alistic shading/lighting models along with measured surface values et al. 2007] has become a popular choice. It is defined by: to accurately represent real-world materials. PBR is more of a concept than a strict set of rules, and as such, the α2 D(h) = (2) exact implementations of PBR systems tend to vary. Still, as they π ((n · h)2(α − 1) + 1)2 are based on the same principal idea (improve realism by approx- imating physical laws), they are similar across implementations.