Skip to main content

Bottle (Glass and Liquid)

In this document, we specify all the necessary properties of 3D assets for the Glass and Liquid categories that are required to be eligible for use within the Threedium infrastructure. Product rendering setup will be covered as well.

The modeling process should start with Threedium Platform in mind. Once we have a High poly version of the asset, the workflow would then split into two streams. One would be baking the necessary details into textures (Threedium Platform asset), other one would be texturing the high poly model and preparing it for rendering.

Product rendering scene

General guidelines

  • Software used in our example is Blender with Lux Core renderer, and Substance Painter for generating textures.
  • Any details in the glass geometry should be sculpted and modeled with geometry. We can use that high poly object and bake any smaller details into normal maps for Threedium Platform.
  • We have no maximum polycount for this workflow, but rendering time does increase as does the polycount.
  • Our example has a basic studio environment for product rendering. Depending on each model, some adjustments might be needed.
  • For some assets clients might want specific backgrounds or environments, this can alter our rendering scene in terms of light positioning to mimic the reflections from glass and liquids.
  • Pay special attention to the thickness of the glass, it needs to appear realistic and mimic the real-life light dispersion and refraction.
  • Refraction of the liquid needs to be different from glass.
  • Pay special attention to glass that is above the liquid level. It needs to have proper thickness. Here are two examples with and without the thickness effect.

Figure 1 Figure 2

  • The bottom part of the bottle needs to represent a manifold glass structure, and IOR should be adjusted correctly to replicate this.

Figure 3

Deliverables and QA Process

  • Initial renders can be delivered in 2k quality for the QA process.
  • Final renders should be 4k resolution.
  • The finished and approved SKU folder should include:
    • X number of render images (to be specified for each project/asset)
    • Complete set of textures and images used
    • Complete rendering scene (Blender is preferred)
    • Everything should be put in a folder under a specific name: SKU_product_render

General guidelines for modeling (Threedium Platform Real-time render)

Formats

Threedium Platform is compatible with GLB, FBX and OBJ file formats.

  • GLB is a good starting point, Threedium Platform is using GLTF standard as well, so this workflow should provide a seamless experience.
  • FBX can still carry materials and necessary textures together with geometry, but due to different versioning of FBX files, some differences may occur.
  • OBJ format can be uploaded with a .mat file as well, to load the necessary textures and material information.

Asset file size

  • The optimal file size should be up to 10mb for e-Commerce workspaces. This should be a good size to aim for, but depending on the project specification this can be specified additionally.
  • For assets that are done without textures (configurator specification), they should be under 5mb.
  • Texture sizes should follow an average. Ex. If 10 textures have a range of 2-5mb and then we have a texture map of 10mb, it should be optimized to fit in the average range.

Geometry

  • No n-gons are allowed, either quads or triangles should be used to ensure good topology and any possible edits in the future.
  • Good flow of topology, no sharp creases, sharp angles, or polygons protruding through the backside.
  • It is preferable to have any sculpted details of the glass done as 3D geometry. However, if they sum up the model over 130 000k triangles, at least some details should be baked to Normal maps.
  • Glass should be a two-layered geometry, meaning there should be inside, and outside geometry, with polygon normals facing away from each other.

Polycount

  • Since we are using webGL we are limited in terms of performance and we need to spend some time to optimize the assets correctly. Polycount is an important parameter that should be considered when creating assets. They should be easily optimizable in case that we need to reduce the polycount.
  • Preferred triangle count for watch assets can be categorized by their complexity:
    • Tier 1 - up to 30 000 triangles
    • Tier 2 - up to 60 000 triangles
    • Tier 3 - up to 130 000 triangles (best performance/quality)
    • Tier 4 - up to 400 000 triangles (for extremely complex or unique assets, a good example would be jewelry with chain links, rings containing large numbers of diamonds, pearls, etc…).

Detaching/separating parts and grouping

  • The number of mesh nodes should be kept to a minimum.
  • Labels, Glass, and Liquid should be grouped separately
  • Parts that have different thicknesses of glass, should be separated (ex. bottom of the bottle)
  • All part groups should have their own empty node to which they are parented.
  • Avoid parenting parts to another geometry part, this creates issues in later integration. No grouping of diamonds to the metal base, they should have their separate empty object for grouping.

Naming parts, groups, and files

  • This chapter can be project-specific, and depending on the final use case (viewer or configurator) it can vary in some aspects. Here are some general guidelines that apply to most projects.

  • The naming convention is immensely important, and our QA has a zero-tolerance policy for this specification. Any assets that have auto-generated names ex. (mesh 001, object 345, etc.) and that do not have logical naming, will be returned for edits.

  • Part and group names should follow a simple logic, using underscores instead of space to connect the string of text. Names can contain only lowercase letters and no special characters.

  • Diamond shapes should always start with “diamond”, all lowercase, and always the same name. They can have large, medium, _small, as the second part of the name.

  • Names should be logical, and easily understandable. They should state, one of these properties for easier identification:

    • Material type
    • General Shape
    • Color (if the part is available only in one color)
    • Location (top, bottom, left, right, middle)
    • Type of shader (Fur, Transparent)
  • Part can contain only one piece of information or multiple combined. In a practical example:

    • SKU123456
      • cap
      • glass_bottle
      • glass_thick_bottom
      • glass_cap
      • label_front
      • liquid
  • Naming of empty nodes should also follow the same logic, it should better describe which parts are contained in the group.

  • File names should always have SKU_123456 format

  • Planes that represent shadow on the floor, should always be named “shadow_plane”

  • Asset name should always be either an SKU or if we do not have an SKU, then the name of the product. It can contain lowercase and uppercase letters and numbers. No special characters apart from the underscore.

  • Part and group names should follow a simple logic, using underscores instead of space to connect the string of text. Names can contain only lowercase letters and no special characters.

  • Groups need to contain two pieces of information:

    • name, of the specific part of the asset it contains
    • name of the material type

Transformation data and scale

  • Before submitting the asset, please make sure all transform data has been applied/reset.
  • The asset needs to be centered in the scene on the X,Y,Z axis origin. Rotation, transformation, and scale of the complete object and all its geometry parts need to be 0.
  • The scale of the asset should be 1 on all axes. This is of great importance since assets are used in an AR environment, we need a real-life scale for all the assets.
  • The native dimensions format for Threedium Platform is cm (centimeter).
  • The bottle (Box) should be centered at the bottom, placed at 0,0,0.

UV Unwrapping

General UV guide

  • Ensure consistent texel density, unless otherwise specified by the project requirements.
  • GLTF divides the asset along UV seams, and when the camera is observing from a long distance, UV seams can be seen. UV seams should be hidden when possible.
  • UV islands should have no stretch or compression, in order to avoid loss of quality in textures. Recommended distance between UV islands:
    • for 512x512 - 4px
    • for 1024x1024 - 6px
    • for 2048x2048 - 8px
  • UV islands should not touch the borders of the UDIM tile

UV channels

  • Channel 1 is reserved for standard mapping of material textures.
  • Channel 2 is reserved for light and ambient occlusion maps.
  • Every asset should include channel 2, which will contain a completely unwrapped asset on one UDIM tile. This is used for baking AO map that will be used as a “Global AO” map. This map is applied to all the parts of the asset regardless of specific materials.
  • Multiple UDIM-s are not supported.

Unwrapping for tileable textures

  • Preparing the UV-s for this kind of workflow, we need to first take into consideration the point above (2.2). Channel 2 = AO map.
  • Channel 1 is now free to create a consistent UV space for applying tiled textures, such as fabrics.
  • For tileable textures, UV transforms for all UV islands should be U 0.5 and V 0.5. This way we ensure that texture starts from the same point of the asset. UV islands should also have the same average scale, no different scale is allowed. This is easily checked with UV checkered texture. Please ensure this criteria is met perfectly, assets with incorrectly setup UV-s will be returned for edits.

Unwrapping for custom textures

Using Substance Painter is the most common way of creating materials and textures. We accept any other software, as long as texture maps are properly baked, and have highest highest-quality details.

Unwrapping for overlays

  • Overlays are a feature on Threedium Platform that lets us render either, custom text or images on our asset. This system uses UV coordinates to do so.
  • SKUs that have specified parts for engraving, embossing, or other types of customization by the end users, need to have those parts unwrapped in a specific manner to allow for easy overlay set up in Threedium Platform.
  • This part should have centrally positioned islands since overlays are by default positioned on U 0.5 and V 0.5 coordinates. The idea is to have as small several transforms as possible to achieve the desired result.
  • In cases where assets have custom texture, overlays should be considered at the beginning of the unwrapping workflow, so they can be positioned properly.

Unwrapping for embossing/engraving

  • When using tiled textures, there are two ways to achieve logo engraving, either using our overlays system, or increasing the density of mesh in that specific area, and using vertex displacement to engrave the details into the geometry. Later baking of AO map will ensure that shadows accent the specified logo/inscription.
  • When Unwrapping this area, be extra careful to not disrupt the seamless flow of textures, while keeping stretching/compression of the UV island to the lowest possible minimum.

Materials

General Textures and Material Guide

  • Most of the materials will be created and adjusted within Threedium Platform, thus it is impossible to create perfect materials, and to use an internal rendering engine, such as Evee in Blender, to adjust these materials perfectly. However, we will need at least some approximation of the materials ex:
    • The glass needs to be transparent with the correct amount of metalness/roughness
    • Normal maps should be added and intensity adjusted to the best possible result within the native 3D tool
    • Labels should have proper alpha maps or PNG (transparency) images assigned
    • Label material should be set to alpha clip/ alpha blend
    • IOR should be different for liquid and glass material
  • Texture size should not go above 2048x2048. Higher resolutions can impact performance on mobile devices.
  • All textures need to be in the rules of 2. Ratios of the textures should be either 1:1 or 1:2, 2:1 3:1 etc… Here are some examples of some accepted texture formats:
    • 512x512
    • 1024x1024
    • 2048x2048
    • 1024x2048 (1:2)
    • 512x1024 (2:1)
  • We recommend keeping the texture ratio to 1:1, and using other ratios only when unavoidable.
  • We support PNG, JPG, and HDR textures. PNG can contain transparency and it will be applied once the texture is applied in a diffuse color map slot.
  • Normal maps should be kept in PNG format, converting them to JPG will result in a loss of subtle details

Decals and floater objects

  • For labels floater objects should be used.
  • Make sure that floater planes are offset enough from the geometry part to avoid “z-fighting” effect
  • For shadow textures, use Alpha map to ensure a good quality of blending with the background
  • For blending modes use Alpha Clip, or Alpha Blend
  • Group all the logo/branding on one set of textures if possible

Branding and logos

  • Logos/branding should have the highest possible quality, we recommend one texture set in 512x512 image size.
  • If there is a need for higher-resolution textures we suggest breaking up the logo/branding into multiple texture sets, especially if they cover a large portion of the asset. When that is not possible, use up to one texture set of 2048x2048 for logos.
  • If SVG files are not available we suggest recreating them and using them as a base for logo/branding textures.

Ambient Occlusion maps

  • Global AO map should have a 2048x2048 resolution, individual maps, can have lower resolutions if they are done for specific parts of the asset.
  • AO details should be used only for non-glass parts of the asset.

Reusable texture format

  • We prefer tiled texture formats, that can be shared across multiple assets.
  • Use custom-baked textures only for unique assets or parts.
  • Every tiled texture set, should at least have 2 texture maps, (ex. Diffuse - Normal, or Normal - Metalness, or Metalness - Roughness). Even plain colors have some details, added through Normal maps.
  • Only polished metal materials do not need additional textures. hey are set up in Threedium Platform using only the Environment map and base color.

Transparent materials

  • For transparent parts of the mesh, we support alpha, transmission, and thickness maps.
  • Coat and coat roughness (maps or integer) can add more details to otherwise flat-surfaced materials.
  • For glass or crystal parts, use offset double mesh to make the object appear thick.
  • Use single-faced meshes for glass thickness.
  • IOR values can not be edited in Threedium Platform, therefore it is very important to set them correctly in the 3D modeling tool by the original artist.
  • Threedium Platform supports IOR values in the range of 1.0-2.3

Animations

Some projects can specify the boxing/unboxing animation of the bottle. This can be done either through Threedium Platform or with external software. This requirement should be agreed upon before starting the project. However, we are listing here a couple of general points for animations:

  • The geometry of the box should have a sufficient triangle count and no oversimplification of the mesh.
  • The textures of the box should not be lacking in comparison to the bottle.
  • The box triangle does not go into the total triangle count for the bottle.
  • The box should be delivered as a separate GLB or FBX
  • Two separate animation sequences are needed, open and close. Both for the bottle asset and box/packaging asset.
  • Alembic animations are not supported by Threedium Platform.