Tri-souping... a solution to z-fighting

Tri-Souping Vs. 3 Point Clipping as a Solution to Z-Fighting

This tutorial was originally written in response to a forum topic (now long since gone the way of the dodo) on the difference between 'trisouping' and '3 point clipped' brushwork and how that related to z-fighting in-game (where two or more textures 'fight' to be drawn on screen causing a 'zebra' or 'broken' looking pattern to appear). Although it was authored at a time when "16 bit" colour depth was part of the norm', it's still of concern in the wider sense of 'optimisation' even under 24 and 32 bit colour depth systems.

What you can see below are some in-game shots of what happens in 16bit using the two techniques. The 1st part shows a technique that won't have any z-fighting issues; at the expense of looking less 'creative', because the brushwork has been 'converted' into a triangular mesh which allows you to push and pull (usually up or down) the vertex points to resemble hills or mounds of varying height or size (this is in fact the same technique used to create the 'terrain meshes' we 1st saw in Team Arena). The 2nd part shows a more creative approach to making 'terrain', using a technique called '3 point clipping' (this is where you place a number of 'points' on the grid in Radiant along which 'cuts' are made, the result removes brush sections along those cut lines) but at the expense of causing z-fighting.

What is 'Tri-Souping'? ^

Tri-Souping, variously written as "trisouping", "tri souping", "tri-souping", "tris souping", "trissouping" or "tris-souping" (so take your pick!), is a phrase used to describe a process whereby a (square) brush is cut across a face into triangular sub components, usually along the diagonal from corner to corner. The result is an object composed of two triangles rather than on 'cube'. A series of such brushes creates a 'soup' which can be manipulated using individual or groups of vertices that form the corners of each face; the process is called "vertex manipulation" ("V" whilst a brush volume is selected). By pulling or push vertices various shapes can be created.

Original 'quad' brush and it's two sub triangles. All brush objects eventually get broken down into triangles by the games compiler

Original 'quad' brush and it's two sub triangles. All brush objects eventually get broken down into triangles by the games compiler

Cutting across the diagonal of a brush to 'tri' soup it (also shows resulting seaparate tirangular componants)

Cutting across the diagonal of a brush to 'tri' soup it (also shows resulting separate triangular components)

Typical example of a trisouped mesh - a terrain section created by cutting up brushes into separate triangular components that are they grouped together to form a larger 'mesh' object

Typical example of a trisouped mesh - a terrain section created by cutting up brushes into separate triangular components that are they grouped together to form a larger 'mesh' object

What is '3 Point Clipping'? ^

3 Point Clipping describes a process whereby a brush block is 'cut' up using a 'plane' whose angle is determined by 3 reference points. Imagine the blade of a carpenters chisel and the way in which that can be angled depending on how it's held, the carpenter can rotate the head of the chisel as well as the angle of attack against the wood open which he is working. The reference points in 3 Point Clipping work together to determine a similar angular approach to cutting a block; points 1 and 2 represent the blade edge and point 3 the handle and thus the angle of attack.

Design note: Clipper tool can be activated using "Ctrl+RMB" to place clip points (hold down "Ctrl" whilst RIGHT-clicking the grid). And also pressing "X", from "Selection » Clipper » Toggle Clipper", or by clicking the "Clipper" button in Radiants toolbar - displays an icon showing a triangle with three points. Using the latter two activators, clip points are placed LEFT-clicking the grid. Clipper can be cancelled with "Esc".

Using Tri-soups ^

The images below shows a trisouped brush selection in GTK Radiant's camera view. It's been vertex manipulated (see above) to form a basic 'rock' shape that creates a slight rise in ground level. The ground around the 'rock' has also been tri-souped to match the cuts and eliminate the risk of 'sparklies' - very thin lines or cracks in the world that 'sparkle' by showing the void behind. The green lines show a number of cuts in the rock and the red lines a number of cuts on the ground. The thin white lines extending down show how thick the brushwork is; it's always a good idea to make brushwork of this type as thick as possible to reduce the risk of the brush 'breaking' when being manipulated in vertex mode.

As you can see from the image the rock and ground are part of the same 'object'; the rock doesn't sit on top of the ground, instead, it's actually butted up to it. This is shown by the blue line (obviously the line extends all the way around the rock object where it meets the ground). When doing this kind of brushwork be sure to use 'caulk' on the faces that you won't be able to see in game, aside from preventing the odd visual artifact it'll help speed up the compile time of the map.

Although the rock is pretty regular in shape at the moment it's a good way to do them; they're quite 'featureless' but at the expense of using as few polygons as possible; you can get more interesting shapes but at the cost of more brush work (and in-game tris/poly drawing).

Red, blue and green

Red, blue and green

Looks ok in-game (if somewhat plain) when close to it.

The rock in game

The rock in game

Why use Tri-Souping? ^

You'll understand why tri souping is useful once you get some distance between you and 'it'. As shown below when looking at the rock and ground surfaces they don't exhibit any of the usual z-fighting often seen in situations like this because there is no 'overdraw' (as shown in the next section); by using tri-souping you remove/reduce the possibility of (distance related) z-fighting errors occurring.

No z-fighting

No Z-fighting

^