Vlge Guide

With the Custom UI you can personalize the screen. You can position various texts and images on the screen and they always remain in the background in the experience. 

‍

The position of the UI can be changed, as well as the appearance of the modal with new textures or already uploaded ones. 

‍

‍

You can also color the background and text with the color picker, as well as change the text font and font margins.

‍

‍

Click on the "Add Audio"-Icon to add sound to your experience.

‍

Max File Size: 20 MB

‍

‍

‍

Add a new audio file or select an existing file that has already been uploaded. 

‍

If you want to have an interaction with the image, you can add a URL. 

‍

Choose whether the page is opened in a new tab or in the same one.

‍

You can toggle the spatial blend via slider as well as the volume if you scroll further down.

‍

Click on the Asset to locate Assets in your Experience.

‍

‍‍‍

Drag & Drop your Assets from the Asset Browser or upload your own Asset. When you let go of you Asset and drop it into the world, this will open the Asset-Modifier.

‍

‍

‍

Asset-Modifier

‍

Press "G" to Grab the Asset, "R" to rotate, "T" to transform and scale, "C" to copy, and "Delete" to delete an asset.

‍

The topbar contains the name of the experience, the tutorial, a list of assets that exist in the scene, the publish button, the preview mode and the profile. 

‍

‍

‍

Click on "Preview" to test your created Experience from the perspective of the user. This will open a new Tab and spawn a Third-Person-Player that is now able to interact & experience your Creation.

Click on the cogwheel icon to access the Post-Processing-Settings.

‍

Under "Preset" you can select different Post-Processing-Looks like Blue Touch, Color Boost or Vintage.

‍

‍

‍

‍

To create a custom look you can find settings like Bloom, Chromatic Aberration, Color Adjustments, Depth of Field, Film Grain, Vignette etc under "Override PostProcess".

‍

‍

Override PostProcess-Effects

‍

• Bloom: Bloom is a post-processing effect that adds a soft, glowing aura around bright objects in a scene, mimicking the way light can spread and create a halo effect. It enhances the overall visual appeal and realism of lighting in the scene.
• Chromatic Aberration: Chromatic aberration is a distortion effect where colors separate along the edges of objects, typically seen as color fringing or rainbow-like artifacts. It simulates imperfections in lenses and adds a subtle touch of realism or stylization to the visuals.
• Color Adjustments (Exposure, Contrast, HUE, Saturation): These adjustments allow for fine-tuning the overall color balance and appearance of the scene. Exposure controls the brightness levels, contrast adjusts the difference between light and dark areas, HUE shifts the overall color tones, and saturation adjusts the intensity of colors present in the scene.
• Depth of Field: Depth of Field (DoF) is a post-processing effect that simulates the way cameras focus on specific objects, blurring out objects in the foreground or background to create a sense of depth and draw attention to the focal point.
• Film Grain: Film Grain adds a grainy texture to the scene, replicating the look and feel of traditional film photography. It can be used to evoke a vintage aesthetic or to add grit and texture to the visuals.
• Lens Distortion: Lens Distortion mimics the optical distortions produced by different types of lenses, such as fisheye or wide-angle lenses. It warps the image slightly, adding a sense of realism or enhancing certain visual effects.
• Vignette: Vignette darkens the edges of the screen, drawing the viewer's focus towards the center of the frame. It can create a subtle framing effect or be used artistically to evoke a specific mood or atmosphere.
• White Balance: White Balance adjusts the overall color temperature of the scene, ensuring that white objects appear neutral under different lighting conditions. It helps maintain color accuracy and consistency in the visuals.
• Overlay Strength: Overlay Strength refers to the intensity or opacity of any additional overlays or effects applied to the scene. It allows for fine control over how prominently these effects are displayed, balancing visual impact with subtlety as needed.

‍

Change Skybox

‍

In the globe settings you will also find the option to change the skybox of the environment with any image file.

‍

‍

‍

‍

Click on the "Add Game"-Icon to open the "Game-Browser".

‍

‍

Once you have selected the game and placed it in the world, you can choose between various setting options, e.g. how many objects must be collected in the collection game.

‍

Select an object to be collected and place it in the world.

‍

‍

‍

You can determine whether the asset rotates or not.

‍

The existing texture can also be changed and colored with the color picker.

‍

You can also determine whether the post process colors the asset or not.

‍

Click on the "Add Text"-Icon to add Text. 

‍

On the right hand side you can choose Text Size, Font and if it's Affected by post process.

‍

Click on the "Add Video"-Icon to open your File-Browser and choose your .mp4 file to upload.

‍

Max recommended File Size: 20 MB

‍

Max recommended Resolution: 1920x1080px (FullHD)

‍

Max recommended FPS: 30

‍

Supported .mp4 codecs: NVIDIA H264, AOM AV1, NVIDIA NVENC HEVC, SVT-AV1, x264

‍

‍

If you want to have an interaction with the video, you can add a URL. 

‍

Choose whether the page is opened in a new tab or in the same one.

‍

If you want the lighting of the scene to have an effect or not, you can do this with the "Post Process Affected" toggle.

‍

Click on the "Add Image"-Icon to open your File-Browser and choose your .PNG or .JPG file to upload.

‍

To reduce upload times a max Image File Size of 20MB .

‍

Add a new image or select an existing file that has already been uploaded. 

‍

If you want to have an interaction with the image, you can add a URL. 

‍

Choose whether the page is opened in a new tab or in the same one.

‍

If you want the lighting of the scene to have an effect or not, you can do this with the "Post Process Affected" toggle.

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

Click on the "Add Assets"-Icon to open the Asset-Browser. Here you can find different Asset-Categories like "Building Kits" or "Interior Decorations" or upload own Custom Assets.

‍

The max combined Memory-Budget for a Scene is 100MB without any subscription. To have the ability to place more objcets insid the scene you will need to have a valid subscription.

‍

‍

‍

‍

Custom Assets

‍

Clicking on "Custom Assets" will open your File-Browser. You can now choose your file.

‍

Supported 3D - File-Format: .GLB

‍

Max File Size: 50MB

‍

Max Supported Texture Size: 1024 x 1024px

‍

Here is where you find all your import functionality.

‍

‍

‍

How to Move on Desktop/Laptop/MAC

‍

Step 1: Press "W" to move forward. Press "A" to move left. Press "S" to move back and press "D" to move right.

‍

‍

‍

Step 2: Hold Right Click on your Mouse or Trackpad to look around

‍

‍

STEP 1: CHOOSE TO FOLLOW THE TUTORIAL BY CLICKING "YES" OR PRESS THE "ENTER/RETURN"-KEY

‍

‍

STEP 2: FOLLOW THE INSTRUCTIONS ON SCREEN OR PRESS "Q" TO QUIT THE TUTORIAL

‍

‍

‍

‍

Once you have logged in, you can select a template from the list below to start creating your experience. You can also access the “Discover” page in the right-hand corner to view published worlds from other users or to enter your workspace.

‍

‍

‍

When you go into your workspace, you still have the option to design your experience from here. You will see your toolbar on the right-hand side and here you will find the 'Experience' section. If you go in there, you will have the option to create new worlds, but you will also find your already created worlds here and you can also modify them if you want.

‍

‍

‍

‍

Once you have selected your template, you will be taken to the template customization window where you can enter the name and description of your experience and click on “Select template”.

‍

‍

‍

‍

This section covers the required information to import your created scene correctly into the SDK.

‍

Create a package of your unity scene by following these steps:

‍

• right click on the scene -> select dependencies
• right click inside the project window -> export package
• Inside the export package -> turn of include dependencies

‍

Make sure only used files are included that are inside the environment

‍

• Import package inside unity SDK project from VLGE.
• Create two folders inside inside Assets/ –V_BLDR_SDK/ --SceneFiles&ObjectPrefabs/ ObjectFolders
  • /#scenename_props
  • /#scenename_scene
• Note: don't use capital letters here it might give some errors while building the asset bundles
• Select one of the new folders -> go to the lower right corner -> next to AssetBundle click on none -> create new -> name it the same name like the folder you selected
• ‍

‍

• Do it for the other folder the same way
• Put the scene from the scene folder inside the #scenename_scene
• Put Prefabs/#SceneName/Props inside #scenename_props

‍

Open the scene inside the SDK project and take a look if everything is looking the same as it was in your project. It could be that some custom collision is scaled incorrectly or that the light bake is not working as it was before. For the light bakes you might need to adjust the intensity of the lights used inside the scene and redo the bake.

‍

This section covers the limitations for webgl on mobile and desktop. It will also include a short description on how to test the performance.

‍

There are a few differences between mobile and desktop applications that we need to cover. The setup of the scene and the material and texture used will be almost the same since we are targeting a small build size to get the best texture quality. The main issue we have on mobile devices is the "out of memory" error we are getting on iOS devices.

‍

This is happening because IOS has a limitation on "cache memory usage" and is stopping the application, which ends up crashing the experience.

‍

• KNOW ISSUE: IOS DEVICES CAN EXPERIENCE GLITCHES OVER THE SCREEN WHICH MAKES IT HARD TO SEE THE SCEEN CLEARLY!
• SOLUTION: TO FIX THE GLICHES YOU NEED TO CHANGE THE DEPTH PRIMING MODE INSIDE UNIVERSAL RENDERER DATA FROM AUTO TO DISABLED.

‍

‍

General limitations about the target boundaries

‍

• 150.000 vertices per scene
• Use as less differet shader as possible
• Texture atlas for assets to reduce the size of the project
• Combine Textures inside RGB channel (Ambient Occlusion, Roughness, Metalness)
• Max texture size depending of the target device and the build size to not get the "out of memory" error:
  • Mobile 512 x 512 or 256 x 256 pixel
  • Desktop 2048 x 2048
• (textures can be reduced already in the import settings if possible)
• Avoid transparent material overlapping on each other as possible
• No tesselation
• No overlapping geometry
• LODs, if needed, need to be done in a 3D program (no native LODs inside Unity)
• Mesh colliders need to be assinged inside unity
• Max target build size:
  • Mobile 90 mb
  • Desktop 250 mb

‍

Lighting

‍

Lighting in WebGL is a very specific topic because we are only able to support three dynamic lights per scene, which are heavy on performance. To avoid this, we only use baked lights. This needs to be changed inside the inspector.

‍

• Meshes that need to be affected by the light bake need to be set to static inside the inspector.
• To get dynamic object effects from the light bake, you need to use reflection probes in the scene. To get more information on this topic, you can enter this link:
• ‍

‍

• To enable reflection inside the scene, you need to create a reflection probe. To see how this affects the scene, you can set it to reflect inside the inspector and change the shape to match the scene. Real-time reflectors are very expensive, which means that to use them, they need to be set back to bake inside the inspector before the lightbake will be started.

‍

Profiling Tools

‍

• To get the CPU and GPU usage, you can use the Unity build-in profiler. It shows exactly in which areas of the scene you need to focus. To get more information about this topic, you can read more at the following link:

‍

Unity - Manual:  Profiler overview

‍

• To get a quick look at the stats, you can also enable the stats window inside the game window. Here you have a few informations like drawcalls, fps, and the tri-count per frame from your current frame.

‍

‍

This section covers the Texturing phase including how to unwrap & and create UVs and the texture production process.

‍

Unwrap & Uvs

‍

‍

Unwrapping models and setting up UVs are crucial steps in the 3D asset creation process. This allows you to control how your chosen texture looks on your mesh and how it will be represented inside your world. 

The general guidelines for UV unwrapping can be summarized as follows:

‍

• No Overlapping Polys: Ensure that UV islands are flat and distinct, without any overlapping elements. Overlaps can lead to texture visualization errors and complicate lightmap calculations, potentially requiring UV regeneration.
• Single UV Channel: Use a single UV channel for each object, unless you work with custom lightmaps and shaders.
• Clean, Smooth Islands: UV islands should be clean, smooth, and flat. Avoid detaching numerous polygons from the main island.

‍

A clean UV is very important if it comes to texturing because here you can get seamless texture results. The following is an example of a well used uv map:

‍

‍

‍

For beginners of unwrap please take a look on how to start and how to unwrap different types of objects here:

UV Unwrapping for Beginners (Blender Tutorial)

‍

When it comes to trim sheets, advanced texturing, and build size:

‍

V-BLDR is fully equipped to handle a variety of texturing techniques. However, it's crucial to manage your texture assets wisely, as they often contribute significantly to the overall build size.

‍

To mitigate this impact, we highly recommend employing techniques that minimize texture load. For instance, consider reusing textures or adopting trim sheet techniques to optimize your project's performance.

‍

‍

‍

Texture Production

‍

Today's range of software options makes texture production highly accessible. Many 3D applications come with dedicated sections for this task. Industry-standard software like Substance Painter, Substance Designer, and Photoshop are often sufficient for creating a wide variety of surface textures for your application. After unwrapping your model, you can import it into your software of choice for texturing.

‍

Before you start make sure you have a low poly mesh from your high poly to get the chance to bake details into a normal map. Sometimes it's easier to go with an exploded bake if the object has multiple objects.

‍

Here are two videos on how to bake in blender and in substance painter. There are other software in which you can perform the bake and in everyone you can bake normal or with an explode bake. In the following videos we see a normal bake inside blender and the explode bake inside substance painter :

‍

 Blender 2.8 - How to bake textures - Tutorial

‍

How to explode and bake the normal textures in Substance Painter

‍

We recommend using the AO (Ambient Occlusion), Roughness, and Metalness texture system. This approach is particularly useful for reducing the number of textures.

‍

‍

‍

‍

‍

There are a few textures which can be added as well like an emissive texture to light up separated parts of the object. 

‍

The whole experience has a texture compression which reduces every texture which is above 1k to 1024 x 1024. This is important to know because huge textures will size up your mesh but it will not be visible. Also this can lead to crash the editor and you can lose your last steps. 

‍

NOTE: all textures created in different softwares have to have the size to be multiples of 4 otherwise they will not be compressed. The size are every number you cat while dividing by two and the First is 1024 till you reach the number 1.

‍

TEXTURE TYPES

‍

• Diffuse Map: This texture defines surface colors and is a full RGBA image. The alpha channel can store either transparency data for your material or additional monochromatic channel information.
• Normal Map: This RGB image dictates how light interacts with the surface, simulating depth, creases, and three-dimensional features.
• AOROME Map: This composite map utilizes three monochrome maps, each assigned to a specific RGB channel. It can be easily generated in Substance Painter or Photoshop. The map includes:some text
  • 🔴 Red channel: Ambient Occlusion map
  • 🟢 Green channel: Roughness map
  • 🔵 Blue channel: Metalness map

Quick Note on Texture Format: We recommend using PNG for its balance of versatility and compression efficiency.

‍

Here is an example of how to setup textures inside blender:

‍

The FASTEST Way to SET UP PBR MATERIALS in Blender - Node Wrangler Texture Setup Quick Tutorial

‍

Material Slots

‍

If your asset requires multiple materials, you can effortlessly assign different materials to various geometric areas within your 3D software. When imported into Unity, these assignments will appear as multiple material slots. You can then populate these slots with the corresponding materials directly within Unity.

Note on materials and Draw Calls:

Draw calls are the drawing instructions sent by the CPU to the GPU, be aware that multi material objects have a big impact on the amount of calls during runtime. To avoid this don’t over use material slots.

‍

This section covers the required information to export your created assets correctly.

‍

EXPORTING ASSETS

‍

We recommend exporting your files in GLB file format to get the most stable import for your mesh. In GLB you can have meshes, materials and animation stored. You could also export other scene objects like lights or cameras but this can lead to crashing the editor. To export textures inside your 3d software you will need to enable the embedding of the textures.

‍

Exporting from CLO 3D

To make CLO3d assets compatible with V-BLDR, the following steps must be taken into account. 

1. If a mesh is textured differently on two sides, the garment must not consist of one plane but must have at least 2 front sides, as a plane can have two sides but share one UV space.
2. We export as OBJ the geometry which has the same texture and UV space part. So we can later delete the material list and leave only the material we actually use.
3. The exported textures should not be larger than 1024 pixels as we do not work with larger textures. For smaller objects that are exported, smaller textures such as 512 pixels or 256 pixels can also be used.
4. the selected geometry should have the option weld checked in the export settings.

‍

5. Also check under File the option “Save with Absolute Texture Image File Path”

‍

6. Once in blender add the .mtl and .obj file to load the asset with the textures.
7. Check the geometry to not have it to high poly otherwise it will crash the experience. You can reduce it with the “decimate” modifier. From our Experience you can get nice looks that are not higher than 15.000 vertices. If the meshes getting to destroyed by the decimate modifier you will have to go back to CLO3D and reduce the particle dense of the clothes and re export again. 

‍

CLO3D to BLENDER | Export with avatar and texture | Easiest way

‍

If everything will look good follow the export to GLB guide.

‍

This section covers the Modelling phase including proportions, poly counts and topology to name a few.

‍

‍

Proportions

‍

To start your 3D project, first make sure you've set the correct unit measurements in your 3D software.

‍

To get a better sense of size and scale, you can import a human model as a reference.

‍

‍

‍

Polycount for Game Ready Assets

‍

To achieve optimal performance in real-time rendering engines like Unity, focus on creating light geometry for your 3D models. This means using as few polygons as possible. Crafting low-poly models is a well-established practice that yields "game-ready assets." These assets are essential for preventing GPU and CPU overload, which can lead to application crashes.

‍

The polycount guidelines for game-ready assets can vary based on the target platform, chosen devices, and hardware specifications. For a stable environment, adhere to the instructions below.

‍

Note that these values are approximate and may change depending on the factors mentioned above:

‍

‍

Polygon Count by Asset Category

Small Assets: Polycount: 100 - 1,000 polys

‍

Small objects like bottles, small furniture elements, framed pictures etc

‍

Medium Assets: Polycount: 1,000 - 5,000 polys

‍

Regular size objects like sofas, fountains, sculpture, intricate decoration etcPolycount: 1000 - 5000 polys.

‍

Architecture and large objects: Polycount: 5,000 - 50,000 polys

‍

Rooms, halls, internal /external architectural spaces

‍

Foliage: Polycount: 300 - 3,000 polys

‍

Flowers, bushes, grass mesh, plants, trees.

‍

Avatars: Polycount: <15,000 polys

‍

A fully functional character with clothes, hair and accessories .

‍

Note on Camera/Occlusion CullingCamera culling, a built-in Unity feature, hides objects not visible to the main camera, offering a way to optimize performance. Level designers should take this feature into account when planning their levels. While it varies by scenario, a general guideline for target polycount is approximately <100,000 viewed polygons per frame.

‍

‍

‍

Topology

‍

Maintain clean and accurate topology in your 3D models to prevent mesh interpenetration and overlaps. Such errors can degrade engine performance and result in flickering surfaces.

‍

Low-poly design is generally more efficient with square shapes; for curved surfaces, the example polycounts may need to be doubled. Keep in mind that a model's polycount can vary based on its structural complexities. The provided values are guidelines and may require slight adjustments.

‍

Pivot Positioning

‍

Special attention should be given to pivot positioning. The pivot should generally be centered on the object and aligned with its lowest point. Exceptions can be made for specific cases; for example, a hanging object should have its pivot at the highest point.

‍

⚠️ Always export objects with their position set to the origin coordinates: X:0, Y:0, Z:0.

‍

‍

NOTE: Always check if your front face is visible and the backface inside the mesh otherwise the mesh will become invisible because imported meshes do not support two-sided materials.

‍

‍