Hardware-Related Issues — Soft8Soft
Description: Learn how to deal with hardware-related problems and restrictions.

# Hardware-Related Issues

This manual section describes typical hardware and implementation-related issues that can happen during development of a WebGL application.

- Aliasing Issues When Using Procedural Textures
- Intersection Artifacts When Two Objects are Located Close to Each Other
- Banding artifacts when using gradients or dull lighting conditions
- Too Many Attributes
- Too Many Texture Image Units

#

## Aliasing Issues When Using Procedural Textures

Sometimes you might experience aliasing issues when using procedural textures. For example, when using Checker map:

This happens when the Anti-Aliasing export setting is set to MSAA or Auto (which by default uses MSAA 4x on any compatible hardware). MSAA (multisample anti-aliasing) technique produces decent image quality and has low performance impact, however it does not work well for procedural textures with abrupt changes of object color.

Switching Anti-Aliasing technique to FXAA fixes the issue:

FXAA uses post-processing rendering to reduce aliasing and works good for such "edges" generated by procedural maps.

#

## Intersection Artifacts When Two Objects are Located Close to Each Other

Sometimes you might experience artifacts similar to these:

This is called z-fighting (technical stuff on Wikipedia) and happens when different polygons have equal distances to the camera, or their distances differ very slightly.

To fix it you need to do one of the following:

- The most straightforward fix — place your objects further from each other.
- Increase near (or clip start) camera distance and/or decrease far (or clip end) camera distance. This will make camera distance range smaller and thus improve precision of the values stored in the depth buffer.
- If you need to place a billboard texture above some surface — disable Depth Test on the billboard material and increase Rendering Order parameter on the billboard object. The billboard will be rendered after the surface object and will ignore depth stored by that object. This effectively eliminates any z-fighting which might happen between the two objects.

#

## Banding artifacts when using gradients or dull lighting conditions

When using gradients or shading in darker environments, you might experience banding artifacts similar to these:

These artifacts are caused by the limited precision of the color buffer and can be mitigated (or considerably reduced) by using the dithering technique:

Get instructions on enabling dithering in Blender, 3ds Max, or Maya.

#

## Too Many Attributes

Once in a while when working on your scene you may face a problem where some objects are not rendered at all and the browser console shows the following error:

"Too many attributes" error in the browser console

This error means that some objects (apparently, the ones that couldn't be rendered) surpass the maximum amount of vertex attributes that can be used per shader.

How many attributes an object uses depends on different factors: the presence and the number of shape keys (Blender) / morph targets (3ds Max) / blend shapes (Maya), the presence of skinning, certain material nodes, etc...

Here's the table that explains how to calculate the number of attributes used:

Number of Attributes | Description
--- | ---
3 | Mandatory attributes: position, normal, uv.
+2x (WebGL 1.0 only) | Add for each shape key (Blender) / morph target (3ds Max) / blend shape target (Maya). Maximum amount of attributes for this category is capped to +12. For modern hardware which supports WebGL 2.0 morphing does not consume any attributes.
+2 | Add if the object uses skinning.
+1x | Add for each of the following nodes in the object's material that use different* vertex colors: Blender: Attribute, Vertex Color
+1x | Add for each of the following nodes in the object's material that use different* uv maps except the first one (already covered by the mandatory uv attribute, see the first row): Blender: UV Map 3ds Max: Bitmap (only if "Mapping Type" set to "Texture"), Gradient Ramp, Noise (only if "Mapping" set to "Explicit Map Channel") Maya: place2dTexture
+1 | Add if the object's material has one of the following nodes: Blender: Normal Map, Tangent (only in "UV Map" mode) 3ds Max: Normal Bump Maya: aiNormalMap, bump2d (only if the "Bump Interp" input > 0), samplerInfo
+1 | Add if the object's material has one of the following nodes: 3ds Max: Vertex Color

If several nodes use the same vertex color or a uv map then all those nodes count as a one node towards the limit.

Generally, it's enough to stay in the limit of 16 vertex attributes (although some old / low-end devices can support only 8). Most often you should be concerned only about objects that use several shape keys. Other than that the amount of vertex attributes usually stays under the limit for a typical object/material.

#

## Too Many Texture Image Units

This error is similar to attributes limitation described above. Each texture or shadow map occupies a single texture image unit. To fix the crash you need to reduce the amount of shadow casters, disable shadows, or limit the maximum amount of textures in your materials.

"Too many texture image units" error in the browser console

## Got Questions?

Feel free to ask on the forums!