There are various ways of achieving transparency in WebGL. Unfortunately, there is not a perfect way to do so, but variations that can be used. We will explain two workflows, but if you are interested in combinations of them, please have a look here.
Please see the main material page to see how you can adjust materials via the API.
Alpha Map / Alpha Cutoff / Opacity
The alpha map is used for per-pixel control of the alpha value.
The alpha cutoff is the value that is used to determine if the material is rendered. If the alpha is lower than this value, the material will not be rendered.
The opacity is the value that determines how transparent the material is. With
1.0 the material is fully opaque (if there is no alpha map applied).
Transmission / Volume / IOR
Note: This is a relatively new approach. We noticed that some devices suffer from performance and rendering issues when using this method.
The color that the light turns to once the attenuation distance is reached.
The distance for the attenuation, provided in world space.
The index of refraction of the material.
The thickness of the material, provided in world space.
The thickness map of the material is used for per-pixel control of the value.
Degree of transmission, can be used to model materials that are see through but still have reflectivity.
The transmission map of the material is used for per-pixel control of the value.