Blending With Game Content

Overview

Through a non-standard rendering flow, Gameface allows color mixing of UI content with game content. This means that frontend developers can use the CSS mix-blend-mode and let certain elements have non-trivial blending with the game content behind them.

With this feature, we can for example achieve additive blending of particles with the rendered 3D scene behind the UI texture. This means that the colors of an DOM element can be combined with the colors of the color texture where the 3D scene is rendered.

For reference, here is how the particles would look without the additive blending with the example game content behind them.

Particles that do not blend with game content — Particles that **do not** blend with game content

In this case, the colors of the particles are not mixed additively with the game scene texture behind them. The additive blending effect is applied only between different particles.

Usage

The blending with game content requires setting up a proper User-Defined Background texture. Information about its setup can be found in the documentation about the Backdrop Filter in Gameface.

For an HTML element to blend properly with the provided user background, it must have the following CSS properties applied to it.

mix-blend-mode: <mode> - Specify a non-normal mix blend mode for the element. By default, this is mix-blend-mode: normal.
backdrop-filter: empty - activate the backdrop filter rendering flow without having an actual filter. This tells Gameface to consider the user background when rendering the element.

Here is a short example demonstrating the behavior:

<style>
	<!-- elements with this class will be blended with the provided user background -->
	.blend-with-background {
		<!-- 'empty' means that no filters will be applied -->
		backdrop-filter: empty;
		mix-blend-mode: additive;
	}

	<!-- elements with this class will be blended only with other HTML elements -->
	.blend-with-html {
		mix-blend-mode: additive;
	}

	.element {
		width: 100px;
		height: 100px;
		background: rgba(64, 64, 128, 0.5);
	}
</style>

<body>
	<!-- blend with the game texture -->
	<div class="element blend-with-background"></div>

	<!-- blend with the other HTML content -->
	<div class="element blend-with-html"></div>

	<!-- blend with the game texture -->
	<div class="element blend-with-background"></div>
</body>

Blending With Game Content

Overview #

Usage #

Overview

Usage