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

#

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:

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:

*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!