Table of Contents Show
Archive republication: This technical review originally appeared in Digital Production 05:2019 and was republished online in July 2021. Features, compatibility, performance and workflow details reflect the historical software version.
This article originally appeared in DP 05 : 2019.
Viewing assets in the browser is no longer a big novelty these days, or so you might think. But two developers have dedicated themselves to the task of transferring lighting and look development to the home browser. The highlight here is that no plug-ins are required for use and the speed of path tracing depends on your own resources, as client-side rendering has been implemented. The user’s own browser becomes a compact multi-purpose application for quality control or the exchange and pure rendering of 3D assets in a small scene, for example. No plugins need to be installed, no software installation is required and the app is currently available free of charge. Features that make it worth taking a closer look at the app.
To use the app, all you need to do is visit the website cer.org. The app is started directly via a http://www.lighttra button. At first glance, the app looks like conventional 3D software – with a puristic-looking user interface.
Only the most important things
The two minds behind the Lighttracer app, Denis Bogolepov Ph.D. and Danila Ulyanov, have deliberately chosen the structure and presentation in this way. It’s all about the most important things for the user and avoiding complexity through customised menus. When the app is opened, the 3D scene appears in the centre, which switches directly to progressive rendering when the mouse pointer is stopped and also applies a denoiser. To the left of this is the geometry editor and render settings. To the right of the 3D scene or render output are the material editor and an area for the light sources.
Before an app can be used, there is always the question of what purpose it is to be used for. The search for known and, depending on the user, frequently used functions is suspended. According to the structure of the user interface, 3D data should be loaded, quickly staged and rendered using IBL and certain camera settings. This is not about animations such as turntables, but about still images.
Users must first import the desired object into the app. Depending on the size of the file, it is important to have a good internet connection so that the data can be displayed quickly. At the time of testing, only an OBJ wavefront file is permitted for import, and with certain restrictions. The two developers come from the computer-aided design sector, so it makes sense that a CAD visualisation workflow serves as the basis. At the time of testing, no different materials can be interpreted and displayed on a single object. However, an OBJ file can consist of a large number of objects, and objects with the same material can be grouped during import.
If the object consisting of individual objects can be seen in the app, it is worth taking a look at the material editor on the right-hand side of the screen. This only contains the most important parameters for the display and simple customisation of surfaces. The first selection menu is of the drop-down type and contains a range of different presets – default settings – for widely used materials. At the time of testing, 25 different materials could be selected. These included common metals, car paintwork, plastic, rubber and luminous materials. If the required material is not available, changes can be made on the basis of the presets or a material can be set from scratch.
A question of appearance
The material structure of the user interface is simple. There are two basic areas. The second area is purely about the emission of light together with the selection of colour and the intensity of the luminosity. The first area, called BSDF, deals with basic properties – but only in a compact format. The Lighttracer app is a PBR-capable renderer, which means that materials are divided into basic groups: Conductors and Non-Conductors. In simple terms, the electrical properties of the materials have aInside the material editor, there is a range of presets that users can choose from. Existing CAD data can be loaded directly into the app without much preparatory work. influence the optical properties of a medium.
In the material editor, users can now choose between conductors and non-conductors as a basis. Further subdivisions have been made within the non-conductors to make work easier. In the case of non-conductors, a distinction is made between matt, glass, colour in the sense of paint and glossy surfaces. Users can choose from the basic modules and the important parameters are shown based on these.
Of course, the “Custom” field can also be selected as the basis, and a range of standard material settings is provided regardless of the context. Depending on the context, the parameters for metallic surfaces are arranged as follows: First, a reflection colour can be defined. Based on this, it is possible to determine the roughness, followed by an interface that basically determines the Fresnel component. If the visualisation involves accurate representations of metals, the refractive index and refractive coefficient can be entered manually. The values required for this can be determined in portals such as http://www.refractiveindex.info.
In the base for glass, the colour can be assigned for the distribution (scattering) and for the refraction of light (refraction). Is it thin glass or solid shapes? A parameter for defining the density can help here: Density. In addition to the interface, the refractive index is also specified as a single value, although this is a complex number. Many renderers only use one IOR value and hide the complexity of the IOR behind a simple menu. In the base paint (finishes) there are basically two levels of settings that can be overlaid. Glossy surfaces have a handful of settings for colour and roughness. The number of available parameters and their arrangement seems well thought out and does not overwhelm users who are less familiar with computer graphics and rendering.
The choice of light source
The lighting setup has been defined. As befits a PBR-capable renderer, it is possible to access Image Based Lighting – IBL for short – in the “Environment” menu and select an HDR texture for the lighting. An HDR texture is available by default, but this can also be replaced with a colour gradient if no HDR texture is available. Optionally, the ambient lighting can be deactivated, regardless of its type. Another menu called “Light Sources” is used to create additional light sources. You can choose between two light sources: the Infinite Light, a light source that shines from a single direction, and a type of point light with a circular spread of light from a point in the room. The settings for the light sources include position, colour and intensity. There are also settings that are specific to the different lights, such as the radius for point light. Once objects have been placed in the room and the desired light sources have been created and adjusted, the geometry editor can be used to add small details to the scene, such as a polygonal floor area in a square or circular shape. Furthermore, a kind of stage with a background can be integrated, with a rounded transition from the base plate to the back plate for better light distribution and a more attractive visual result.
Camera settings
The final touches to the rendering are made in the camera settings. The camera settings can be found within the render settings. Users can either select a very simple camera model called Pinhole or imitate thin lenses with significantly more setting options. With the pinhole camera, users only have the sensor size and focal length available for the settings. This is certainly fine for most asset tests. If you want something more sophisticated and artistic, we recommend selecting “Thin Lens”. In addition to sensor size and focal length, users can now also select the distance to the focus point along with F-Stop adjustment and the number of aperture blades. This allows effects such as depth of field to be realised in order to impressively showcase objects. The basic render output settings include the size of the output in pixels and the aspect ratio. The settings appear rudimentary, but make work much easier as users do not get lost in gigantic material builders such as the Arnold Standard Surface in Max, Maya or Cinema 4D.
Saving the work in the Lighttracer app is done by saving the scene in GLB format, which can also be opened in other programmes that support glTF. This means that users can also use the Lighttracer app to prepare visualised design data sets from Catia, Inventor or Solidworks for an interactive product catalogue. It is important that the browser is compatible with the app and that the underlying graphics card offers good performance. This is still Monte Carlo path tracing, which takes place on the client side with the Lighttracer app in its own browser. It is exciting that important features such as Importance Sampling have been implemented to intelligently shorten the rendering time without compromising the visual result. Users can also adjust some of the settings themselves, such as the coherence parameter or the number of bounces. The latter is set to a low value by default; Bogolepov recommends adapting the values to your own hardware. The same applies to the coherence parameter, which is set close to the value one. The lower the value, the slower the rendering – around 30% according to Bogolepov, whereby the visual result appears smoother with significantly more natural noise in the image.
Speed increase
There are one or two other levers that users can use outside the app to make the working experience much more pleasant. Step one is probably the most important: the latest graphics card driver should be installed in order to access the latest functions of the underlying GPU. Furthermore, the web browser being used must work with the most powerful GPU. It can happen that mobile devices such as notebooks use the integrated onboard graphics instead of the most powerful graphics chip.
The implementation of the Lighttracer app is based on WebGL 2.0, so it is advisable to change the underlying 3D API to OpenGL in order to maximise performance for the app. Another major advantage is that the shaders are compiled much faster. Each browser has its own workflow for customising the 3D API, which can be found in the respective documentation. Once all the necessary adjustments have been made, users can look forward to a compact but thoroughly well-designed app for creating stills and exchanging GLB scenes.
As the project is still in an experimental phase, Bogolepov and Ulyanov are looking forward to more users testing the app and posting their feedback in the corresponding forum. According to Bogolepov, the app is not just a physically plausible renderer, but a physically correct renderer that, according to their own research, has a unique selling point – according to a post on Linkedin from 14 June 2019. Everyone can form their own opinion and try out the app via the link http://www.lighttracer.org mentioned at the beginning. The developers are constantly working and it seems that exciting features are still being added, especially in the import area for supporting additional file formats and textures.
