Transparency
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
Alpha Map
available via material.alphaMap
The alpha map is used for per-pixel control of the alpha value.
Alpha Cutoff
available via material.alphaCutoff
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.
Opacity
available via material.opacity
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.
Attenuation Color
available via material.attenuationColor
The color that the light turns to once the attenuation distance is reached.
Attenuation Distance
available via material.attenuationDistance
The distance for the attenuation, provided in world space.
IOR
available via material.ior
The index of refraction of the material.
Thickness
available via material.thickness
The thickness of the material, provided in world space.
Thickness Map
available via material.thicknessMap
The thickness map of the material is used for per-pixel control of the value.
Transmission
available via material.transmission
Degree of transmission, can be used to model materials that are see through but still have reflectivity.
Transmission Map
available via material.transmissionMap
The transmission map of the material is used for per-pixel control of the value.