1. Textures.
    1. Make sure your textures’ resolutions are sized to powers of two (e.g., 256x256, 512x1024) in order to avoid the renderer having to resize the texture during runtime.

    2. For big objects in the scene use big textures, for small - small ones. Regular size for WebAR. Texture optimization is a crucial part of WebGL. 1024x1024, 512x512, or 256x1024 is regular but easily could be less in most of the cases.

    3. For alpha and elements that may require different Shaders - separate the Textures. For example, the single Texture, below left, has been replaced by three smaller Textures, below right.

      https://lh6.googleusercontent.com/Vjce2nzWrpwSaxMCv-BZ42Psvrz3inaGUhqs8tPBG8QqyjTWrM3Q_bpwoeopJCZwgK037Mun-GmghXm9ONtRxNp4Nk2u2lyC0VTjIra1qXA5NOckSSHQcvvulCLYu2lyKj7baK0o

    4. Look to bake your lights into textures rather than relying on real-time lighting and shadows.

    5. Pay attention to Environment Map. They don’t export to .gltf/.glb so programmers need to attach them separately with the code to every particular object in the scene (if it’s needed). That’s why so important to keep as few objects in the scene as possible. Please provide EnvMap (in HDR or .JPG format) if you want a specific Environment.

  2. Materials.
    1. GLTF uses material representations from Physically-Based Rendering (PBR). Specifically, glTF uses the metallic-roughness material model.

    2. GLTF exported properties:

      1. Base color, Metallic, Roughness, Opacity (alpha, true/false). And their intensity.
      2. Maps: Base color, Normal, Env, Occlusion, Emissive
      3. Sides: Double Side, FronSide, Back Side
      4. Alpha Mode: OPAQUE, MASK, BLEND
    3. Shader model, specular, other secondary Textures and substance material settings are not recognized or imported.

    4. The diffuse roughness map is used as ambient occlusion.

    5. Transparency:

      1. Only the color of Base Color is used. The weight of the base color is ignored. Only the weight of transparency is used. The color of the transparency is ignored, as well as other parameters (depth, thin-walled, transparency roughness). In glTF format, the transparency is expressed in alpha (alpha = 1 - transparency). The base color RGB and the alpha A are merged together into a single color RGBA.

        https://lh3.googleusercontent.com/a7Q6aweHJlXJuQY6pymOBFaa-PNyBMlufJDra9gRF0LY2JmJ_cN9YbNzKsqRr2WyU_bESscpPP3WGiW_3wMU6RL3q7UbksUG6TZN1ciJWMtoz9yStvzvXxjgHysCurbJCMl-F5j0

      2. The 2 maps must have the same sizes to be merged successfully. The basic parameter value is used as default value when binded map is not provided:

        https://lh4.googleusercontent.com/s7T8XcHu2P6k5bOHvZOERFUdnGdmIuO_FhjeFa_QZh6DIiEANbMPo82gyEU7Tk1bUh8iXi36HzBrHMvub3Q2p02YaWyxaJSqXJMNNrEhb7eUbGhm4wP-UX63j0yCspyxeuTgasvf

    6. Example: For objects with transparency you have to use:

      1. PBR materials with BaseColor + Alpha Texture for reflections and shine
      2. And ORM Texture with metallnes in blue channel and Roughness in the red channel.
    7. More accurate info about GLTF materials.