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

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

MSAA rendering example

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 rendering example

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:

z-fighting artifacts

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:

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:

Rendering without dithering

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

Rendering with dithering enabled

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:

Browser console
"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.

Got Questions?

Feel free to ask on the forums!