Alpha transparency
From C4 Engine Wiki
Contents |
Alpha transparency tutorial
This tutorial shows practical use of transparency in C4. Some samples are:
To follow this tutorial the source files can be downloaded here (updated for C4 version 2.6). The files can be extracted directly in the C4 root directory. The path of the source files is Import/Tutorial/world/Alpha_transparency/ and the C4 files can be found in Data/Tutorial/world/Alpha_transparency/.
In addition, in the tutorial sample files, you can find:
- Transition zones
- Cloth geometry
- Remote and direct portals
- Reflection and refraction materials
- Ambient occlusion spaces
- Landscape light
Take a look at the advanced sample below.
How to import transparency textures
First, the texture needs to have an alpha channel and the format 32b TGA. An alpha channel can be created using a selection and going to the Select menu and choosing "Save Selection". It can be accessed by going into the image's "Channels" tab. An alpha channel can also be created by going into the "Channels" tab and clicking on the "New Channel" icon. Photoshop will only let you save a TGA file if the image has one extra (alpha) channel. Be sure to select the "Alpha Channels" save option and select "32 bits/pixel".
For general information on this topic read the Importing a Texture official tutorial.
For our case we need to tell the importer that the alpha channel has transparency information.
In addition we can use the option "Bleed colors for alpha test". When this option is checked, pixels having an alpha value less than 0.75 (where less than 0.5 fails the alpha test) pick up the color from the nearest pixel that passes the alpha test, up to a maximum of 16 pixels away. This process helps remove borders that can appear when alpha-tested textures are rendered.
The next image shows an imported texture with this option unchecked and checked. This file is included.
Another way to minimize this effect is changing the color near the borders to a color similar to the borders in your usual paint application, for example, in the last image, changing the black color to an average green which fits the leave color.
Now we can use our recently imported textures.
How to apply transparency in the world editor
C4 supports two methods: Alpha-testing (left) and alpha-blending (right):
Alpha-testing:
- It can be combined with normal maps and is included in the light pass.
- It doesn't support different levels of transparency, just opaque or fully transparent.
- Geometries using alpha-testing take part in the shadow map generation phase (cube light and spot light). If you're using secondary texture, both textures should have alpha channel (not necessarily the same, which can be useful for some cases) or the texture blend mode should be in multiply mode, otherwise the geometry will take part in shadow map generation but not the alpha channel.
- Geometries using alpha-testing cannot cast stencil shadows, but they can cast shadow maps (landscape light and depth light).
- The 'Render two sided' option in the material manager can be used.
- It allows emission glow and specular bloom flags through the shader editor by using the Kill Fragment process.
To apply alpha-testing we need to mark the 'Render with alpha test' option in the material options (Material manager->flags panel).
Alpha-blending:
- It cannot be combined with normal maps and is not included in the light pass.
- Supports different levels of transparency.
- Geometries using alpha-blending cannot cast stencil shadows. They take part in the shadow map generation phase (cube light and spot light), but cannot cast shadow maps (landscape light and depth light).
- The 'Render two sided' option in the material manager can be used.
- It cannot be used with either the glow or the bloom flags.
To apply it we need to mark the 'Render geometry in effect pass' option in the geometry panel of a geometry node (with the geometry selected->CTRL+I shortcut or 'Menu node->Get info..' or 'Right click mouse->Get info..').
In addition, we can change alpha information for the whole material through the alpha component of the diffuse color:
Basic treatment
In the next images a basic treatment is explained, as well as how this transparency methods can be combined with other material components.
With diffuse color and emission color we can control the color and the bright; because alpha-blended geometries don't take part in the light pass, we need to simulate the received light (or emitted light like the sci-fi sample at the end of the tutorial) in addition to the geometry's color, although in some cases this cannot work very well:
In case (2) we want to see the sticker and the spray lines fully lighted. We raise the emission color, but the effect doesn't look well. In that case we can add the texture map in the emission map slot:
Note that emission color works in reverse now (5).
Next sample tries to simulate a plastic courtain with a blood splatter and shows us another interesting feature: We can modulate the environment color effect with gloss maps.
In this sample I use the mesh tools and texture tools to apply two materials to both sides of the cloth geometry.
Advanced sample
The advanced sample doesn't add anything to what we have seen, just combines the transparency methods with other features to achieve some effects.
Two cages. The projected shadow is from a depth light.
A lantern with its shadow projected on the wall. A group of files are included to see how it was created. Try to shoot it!.
An animated fog plane. Two alpha-blended textures were used to create the effect, combined with a fog space.
An alpha-tested texture combined with remote portals to simulate a window. This sample also shows a transition zone with remote and direct portals.
The inner side of the window. There are two different materials for each side of the simulated glass, to try to simulate the response of the glass for two different light conditions.
An alpha-tested texture used in a cloth geometry to simulate an old curtain in shreds.
An alpha-tested texture. This geometry was imported from 3DS Max. The source file is included.
The window alpha-texted texture combined with other texture map to simulate a blocked window. This sample also shows fake reflection through environment map.
Another window simulation. This sample combines two geometries, one with an alpha-tested texture (the frame) and the other with an alpha-blended texture (the glass).
Glass simulation in arbitrary geometries.
An alpha-blended texture to simulate a cloud/fog layer.
Bloom and Glow flags applied to alpha-tested geometries by using the Kill Fragment process.
Another sample with alpha-tested and alpha-blended geometries combined.
Alpha-blended geometries in a sci-fi environment.
A vegetation sample. This sample features a light transmission shader. You can also find the original shader in the C4 Demo, under Data/Tutorial/material/Leaves.mat.
