Best approach for rendering a procedural modeling grid on a white background?

Hi!

We’re currently prototyping a small in-game modeling tool. The idea is to have orthographic views displaying the modeling area as a white background with a grid aligned to world coordinates. We’re currently experimenting with a top-down view, but we’d eventually like to support other orthographic views as well.

For the first prototype, we created a large plane with an Unlit / Opaque material. We pass the World Position node to a Custom Code node and generate the grid procedurally in HLSL.

Our current shader is very simple:

float3 coord = Input0 / 100.0f;
float lineWidth = 0.05f:

if (frac(coord.x) <= lineWidth || frac(coord.z) <= lineWidth)
{
    Output0 = float4(3.0f, 0.0f, 0.0f, 1.0f); // line color
}
else
{
    Output0 = float4(3.0f, 3.0f, 3.0f, 1.0f); // white background
}

(Input0 is the world position passed from the Material Graph and Output0 is connected to Emissive.)

The division by 100 is intentional because Flax currently uses centimeters as world units, so this gives us a grid with one-meter cells.

This works, but before going further with the implementation we’d like to know whether this is the approach you would recommend in Flax.

In particular, we have two questions:

  1. Is there a way to change the clear/background color of a camera or render view?

    We initially wanted the camera/render view to clear to white and render the grid over it, but we couldn’t find a clear-color property on either Camera or Scene. Because of that, we’re currently using the plane itself both as the white background and as the surface on which the grid is rendered.

    Is the clear color configurable somewhere else in Flax’s rendering pipeline? If not, would changing it require a custom rendering pass or modifying the renderer itself?

    Being able to set the clear color would be useful for us independently of the grid implementation, since ideally we’d like the white background to be a property of the modeling view rather than something provided by geometry in the scene.

  2. Is there a better way to output an unlit color without using Emissive?

    With the Unlit shading model, the documentation says that Emissive is used as the output color, so this is what we’re currently using. However, because the rendered color still appears to go through exposure/tonemapping, a value of (1, 1, 1) appears gray in our scene and we currently need something around (3, 3, 3) to obtain a visually white background.

    Is Emissive the intended way to implement this kind of flat, lighting-independent rendering, or is there another material/shader path that would be more appropriate when we simply want an exact display color?

We also noticed the fullscreen/custom rendering APIs (PostProcessEffect) and wondered whether a procedural modeling grid would be better implemented as a custom rendering/post-process pass instead of using a plane. An important requirement is that the grid should remain aligned to world coordinates, rather than being a screen-space overlay, and we’d eventually like to display it from different orthographic viewpoints.

The plane + Unlit material solution is already working, so we’re mostly interested in understanding what would be considered the cleanest/most idiomatic approach in Flax before we build more functionality on top of it.

Thanks! :slight_smile:

I don’t know about creating a custom rendering pass or modifying anything. But Flax allows you to use custom materials as the SkyBox which should do what you want. You can just set it to whatever color. Here’s a quick example. You just have to make sure the “Cull Mode” is set to inverted.

1 Like

It works very well thank you : )