We developed a system that efficiently performs image compositing on shaders.
Combining materials through image compositing rather than code
When developing the look of a 3D scene, there are times when existing materials lack sufficient functionality and one wants to combine them with other materials. However, because the implementation code for materials is complex, this was difficult to do easily. We therefore decided to blend two images in any desired blend mode, in image-processing software rather than in code.
Efficiently achieving high-quality looks through image compositing on shaders
To solve the problem described above, we implemented a method in which each material is rendered as a render pass and the results are then composited as images. A high-quality look can be achieved even with a simple image compositing system, but a format that frequently exchanges data between the GPU and memory causes problems with real-time performance, so render pass compositing needs to be fast. We therefore built a shader-based image compositing system for render passes.
Fast image compositing
It uses WebGL to perform compositing at high speed.
A wide variety of compositing methods
It supports the same wide variety of compositing methods as image-editing software. Results developed in image-editing software can be reproduced in the same way.
Layered render passes
The passes are arranged as layers that can be swapped easily. Each render pass is registered like a layer, and the order and methods can be rearranged easily.
Building render passes for each object and material
It supports switching processing for each object and material. This makes it possible to develop looks flexibly for each target part.