Skip to main content
Skip table of contents

Post-Processing

Post-processing refers to applying additional visual effects or modifications to a rendered scene after it has been initially drawn to the screen. This technique is commonly used to enhance the overall look and feel of a 3D scene or to achieve specific visual effects like ambient occlusion, bloom, motion blur, depth-of-field and more.

As ShapeDiver already uses the three.js library for rendering the scenes in 3D, we now use the postprocessing library for post-processing effects, as it works as a natural extension of three.js. For the ambient occlusion effects, and maybe some other advanced effects in the future, we use the realism-effects library, which is an extension of the postprocessing library.

Via our platform and the API, we make some selected effects available directly. This means that it is possible to easily add, change and remove these effects. By working with these effects on our platform, they can be saved in the the viewer settings of the model and the effects can therefore be applied to the model without ever writing a line of code. Whereas on the platform the order of effects is managed on our end, via the API you are free to choose any order of effects you want (and that is technically possible). You can find guidance on effect ordering here.

With the API, you have access to additional effects like god rays, outline and selective bloom. These effects require the selection of objects, which is currently only possible via the API. These effects, especially the outline effect, can therefore be combined with interactions, as explained here.


Anti-Aliasing

When using post-processing effects, aliasing effects occur as the effects require that the images are rendered to a texture first to be able to manipulate them. This means that the browser side anti-aliasing, that is used per default, cannot be used anymore. Therefore, manual anti-aliasing techniques have to be used to improve the rendering quality. We provide various techniques that can be selected for anti-aliasing, you can read more about that here.

Manual Control & Custom Effects

For advanced usage of the postprocessing library we also provide the option to have full manual control over the library. This means that the effect composer can be used as you wish and you can add passes and effects in any way you like. Here you can see how to do that. In this way it is also possible to create custom effects and shaders and post-processing effects. An example of how you create a custom effect can be seen here, for further information you can follow the documentation of the postprocessing library on this.

Effects

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.