Dev Guide: Background Renderer
The RendererBackground
class is responsible for rendering the background grid.
It handles both the hexagonal and the triangular graph view types since they both use the same approach.
In both cases, the background consists of a solid white base color with solid gray lines forming a repeating pattern.
The base color is set in the Main Camera
GameObject: Its Camera
component has an Environment
section under which the background is set to be solid white.
To create the grid lines, we use meshes with solid gray materials.
Each mesh contains a section of the pattern that can be repeated as often as necessary to fill the whole screen.
Because we use copies of the same mesh with the same material, we can use efficient instanced drawing by batching all copies of the mesh into only a few render calls.
The grid meshes are generated by the MeshCreator_CircularView
and MeshCreator_HexagonalView
classes.
These classes are also responsible for creating other meshes, such as the meshes used for particles or tool overlays.
The meshes are generated when the application starts, using some parameters defined in the RenderSystem
class.
These parameters control the line width and the size of the individual meshes, making it easier to adjust the meshes in case some changes to the application make this necessary.
For the hexagonal background, the base mesh is simply a row of hexagons.
The RendererBackground
then uses the size and rotation of the camera to determine how many rows are needed to fill the screen and arranges them such that every second row is offset to match the hexagonal structure.
The length of a row is a constant defined by the RenderSystem
; for very high screen resolutions or if the camera size limit is increased, this may have to be adjusted.
The graph view is composed of three different meshes, one for each line direction.
Each mesh contains a number of parallel lines, the amount and length of which is defined by RenderSystem
constants.
The RendererBackground
then determines the number of copies required for each of the three meshes, similar to the hexagonal view.
Finally, to render the meshes, the InstancedDrawer
class is used.
This class manages a list of matrices to be used for instanced drawing as described in the Rendering Basics guide.
It automatically divides the given matrices into chunks of size 1023 so that as many as possible can be rendered simultaneously.
Because the two diagonal line meshes used for the graph view use the same transform information, they can share the same InstancedDrawer
, meaning that the RendererBackground
uses a total of three InstancedDrawer
s.
In each frame, the renderer recomputes the matrices and passes them to the corresponding InstancedDrawer
s before passing on the mesh and material information for the instanced render calls.
The used materials are Resources/Materials/HexagonalView/HexagonGridMat.mat
and Resources/Materials/CircularView/BGMaterial.mat
.
Both use the same very simple shader Resources/Shaders/Basic/ColorTransparent
, which draws the solid RGBA color it is given as its only parameter.
The UI overlay materials use the same shader with RGBA colors that have alpha values below 1 to achieve the transparency effect.