Vlge Guide

A detailed guide on upload and sync assets to your Workspace CMS.

‍

The Asset Management Page is a powerful feature within your workspace that serves as a centralized repository for custom assets and media. It's designed to facilitate seamless sharing among team members, allowing you to upload and manage a variety of file types—be it images, videos, 3D models, or audio clips (coming soon).

‍

These assets can be easily incorporated into your spatial experiences created with V-BLDR, offering unparalleled customization. The ability to share and reuse these custom elements not only streamlines the creative process but also ensures consistency and cohesion across multiple projects.

‍

When first accessing the asset page on a new workspace, you'll see an empty state screen prompting you to begin add assets to your workspace.

‍

‍

To add assets, click the 'Add Assets to Workspace' in the centre of the screen, or the 'Add asset' button in the top right hand of the screen.

‍

‍

Adding Assets

‍

When adding a new asset you'll see the screen below. Here you are prompted to add the following details:

‍

1. Asset Name: This is the name that will be used to identify the asset inside the V-BLDR)
2. Asset Media: This is the filetype that will be added to the experience inside of the V-BLDR. Currently we accept the following filetypes:
   1. PNG
   2. JPG
   3. GIF
   4. MP4
   5. .bundle (3D assets from the SDK)
   6. Raw 3D files: .gltf, .glb, .fbx, .obj (coming soon)
   7. Audio files: .mp4 etc. (coming soon)
3. Asset Description: When activated, this description will be visible to users interacting with the asset within your experience.
4. Asset Link: When enabled, a popup with the associated external link will appear for users encountering this asset in your experience. Users have the option to visit this external link if they choose.

‍

‍

‍

‍

A guide to analytics on V-CTRL

‍

The Analytics Dashboard provides a comprehensive look at key performance indicators for experiences deployed through VLGE's V-BLDR/SDK in your workspace. The metrics captured are:

‍

‍

1. Sessions: This metric counts the total number of individual user visits to an experience. Each session captures a user's activity from the moment they enter until they exit the experience.
2. Users: This measures the number of unique visitors who have accessed your experiences. Unlike sessions, this metric is not incremented if the same user revisits.
3. Return Users: This isolates the subset of users who have visited the experience more than once within a specified timeframe. This can help gauge customer loyalty and engagement.
4. Bounce Rate: Represented as a percentage, this metric shows the ratio of users who leave the experience immeditately after loading teh experience. A lower bounce rate often suggests that users find the content engaging and relevant.
5. Average Time in Experience: This calculates the mean duration that users spend in a single session. The longer the average time, the more likely it is that users are thoroughly exploring and engaging with your content.
6. Outbound Link Clicks: This records the number of times users click on links that take them away from your experience to another website or platform. Monitoring this can provide insights into user interests and the effectiveness of your external linking strategy.
7. Countries (Locations): This metric provides a geographical breakdown of where your users are accessing the experience from. You can see user engagement data sorted by country, which can be invaluable for understanding your global reach and for targeting specific markets more effectively.

‍

By understanding these metrics, you can fine-tune your experiences to better align with user behavior and preferences.

‍

We are constantly looking to expand our analytics offering. For custom analytics or tracking please contact us at hello@vlge.com

‍

When first accessing a new workspace, your analytics page will show an empty state screen prompting you to create or connect (coming soon) an existing experience.

‍

‍

Click 'Create Experience' to start creating an experience and select a starting template. When a template is selected you'll see a short preview video showcasing the templates features.

‍

‍

Click on 'Select Template' to choose your desired template and begin detailing the experience.

‍

Once you've input the experience name (which remains hidden until the experience published) and an optional description (which can be added later), click 'Create Experience' to launch the V-BLDR tool.

‍

‍

The Experiences tab is where you create, manage, and edit your connected spatial experiences. In this section, we will cover how to:

‍

• Create a new experience
• Select a template
• Launch V-BLDR
• Edit & Delete experiences

‍

For new workspaces, we've created a tutorial experience for you to practice and learn the ropes of creating spatial experiences using V-BLDR.

‍

‍

A detailed guide on how to use the Workspace Home page on V-CTRL.

‍

The home page serves as a central hub for viewing a high level overview of activity recent activity in your workspace. The home view provides a real-time feed with 4 tabs:

‍

• Experiences: Explore the live experiences currently being showcased from your workspace. For convenient access and editing, simply click on any of the displayed experiences.
• Analytics: Delve into the analytics section to discover key metrics tied to the worlds you've published during the week.
• User Interactions: Gain insights into how members interact with your workspace, from uploading assets and logging in, to downloading and crafting/publishing their worlds.
• Community Engagement: Understand the pulse of your community by tracking the most active members within your experiences.

‍

‍

‍

New Workspaces

‍

If you've just created a new workspace, the home page will show a default state.

‍

The default screen provides some quick links enabling you to test the V-BLDR tutorial, read the user guide of the SDK and apply for access to the creator SDK.

‍

‍

A step by step guide to workspaces in VLGE

‍

What is a workspace?

‍

A workspace is a space designed for teams (or individuals) to manage their experiences and data for the spatial web.

‍

‍

What can you do in a workspace?

‍

• Create and manage virtual experiences
• Invite and manage workspace members
• Collect and analyse user analytics for your experiences
• Upload and manage assets and media to design virtual experiences
• Set language preferences
• Integrate with other platforms.

‍

‍

Workspace Tiers & Flexibility

‍

Membership Tiers:

‍

A unique feature of our platform is the ability for a single user to belong to multiple workspaces with different roles:

‍

1. Member: As a member, you can contribute to projects, access shared assets, and collaborate with team members.
2. Admin: Holding an admin position gives you more control. Besides the usual member activities, you can manage other users, set permissions, and integrate tools specific to that workspace.
3. Owner: As the owner of a workspace, you have the highest level of authority. You can configure the workspace settings, decide its structure, manage all users, and even delete the workspace if necessary.

‍

Versatility of Workspaces:

‍

The flexibility of having multiple workspaces allows for diverse use cases:

‍

1. Project-Specific Workspaces: Create a workspace dedicated to a single project. This ensures that all discussions, assets, and tools are centralized, making project management more efficient.
2. Company-Based Workspaces: If you're part of multiple companies or departments, you can join or create a workspace for each. This helps in keeping company-specific communications and documents separate and organized.
3. Geographic Team Coordination: For organizations spread across various locations, workspaces can be set up based on team locations. For instance, if you have teams in France, the USA, and Japan, you can have individual workspaces for each. This aids in localizing discussions, setting region-specific tasks, and even adjusting workspace settings to local time zones and languages.

‍

By being a part of multiple workspaces, users can seamlessly transition between different roles and responsibilities, ensuring efficient collaboration across projects, companies, and locations.

‍

Step 1: Enter in your details to create your profile

‍

1. Enter your fullname
2. Update your profile picture (optional)
3. Consent to the Terms of Service
4. Consent to the Privacy Policy

‍

‍

‍

Step 1: Click on the 'Forgot Password' link from the sign-in screen

‍

Visit the VCTRL sign in screen and click the forgot password button, or access this URL: https://vctrl.vlge.com/onboarding/signin

‍

‍

Step 2: Enter your email to receive the reset email link

‍

‍

Step 3: Click the link inside the email

‍

‍

Step 4: Create new password

‍

Ensure the new password meets the following criteria:

1. Must be 8+ characters
2. Include a number
3. Include a mix of upper and lowercase characters

‍

‍

‍

Step 5: Log in with new password

‍

A detailed guide on how to sign up and create an account on V-CTRL.​

All you need to get started on V-CTRL is an email address and a password. Alternatively you can sign up with Google SSO.

‍

‍

Step 1: Visit Website

‍

Visit the VLGE website: https://www.vlge.com/ to sign up for a new V-SUITE account.

‍

‍

Step 2: Select sign up option

‍

Choose a registration option. You now have multiple options:

1. Sign up with Email
2. Sign up with Google SSO
3. Sign up with Microsoft SSO

‍

‍

‍

‍

Password Requirements:You will be asked to create a password that has the following requirements:

If you select sign up with email, you will also be asked to set a password to protect your account and to provide an email address, where you will receive notifications - such as activity in your workspace, product updates, or support requests.

‍

‍

‍

‍

Step 3: Check your email for the verification code.

‍

Once you have input your username and password, you will then be asked to verify your account via the access email you provided. You should have received a link in the email with a one-time verification code.

If you haven't received the code, or you entered the wrong email, click the links at the bottom of the page to change your email or resend the link.

If you've entered the correct code you should see the following screen:

‍

‍

‍

‍

Click Log In and proceed to log in with your verified email and password to start creating your profile and workspace.

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

‍

‍

Exporting Assets

‍

You can use any file format compatible with Unity, though OBJ and FBX are the most commonly used. These formats support a wide range of features, including animation, weight painting, and textures.

‍

To optimize your workflow, aim to reduce file size as much as possible and adopt a modular approach. For instance, you might choose not to embed textures in the FBX file, importing them separately into Unity instead.

‍

Be sure to review the export settings in your 3D software to minimize unnecessary disk space usage.

‍

The Hierarchy View can be opened by clicking on the icon in the top right corner.

‍

Here all Content added to your Experience will be listed.

‍

‍

Click on the Pin-Icon to locate Assets in your Experience.

‍

‍

When an asset is selected by clicking on it the Inspector will open on the right side. Here you find and edit all the information about the asset like Name, exact Position, Roation and Scale.

‍

‍

‍

Add URL

‍

Under "Add URL " you can link URLs to the Assets, which will then become Pop-Up-Windows that give the User to open the link in new tab.

‍

‍

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.

‍

In the Top you find you Experience Name, a quick help Tutorial, your "Undo" & "Redo" Bottoms and "Publish" and "Preview"-Functionality.

‍

‍

‍

Publish

‍

Clicking "Publish" will create a Link & QR-Code to your Experience that is shareable to everyone.

‍

‍

‍

▶ Preview

‍

Click on "Preview" to test your created Experience from the perspective of the user. This will open a new Tab and spawn a First-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.

‍

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

‍

‍

Click on the Game you want to add and define the Game-Settings.

‍

‍

Drag & Drop the Game Assets into your Experience.

‍

‍

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

‍

‍

Edit Text

‍

On the right hand side you can choose Text Size, Font, Line Height and Color.

‍

‍

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

‍

‍

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 5MB is recommended.

‍

The max combined Memory-Budget for a Scene should not exceed 150MB to ensure a smooth experience.

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

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 should not exceed 150MB to ensure a smooth experience.

‍

‍

Custom Assets

‍

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

‍

Supported 3D - File-Format: .GLB .OBJ .FBX

‍

Max File Size: 27MB

‍

Recommended max Texture Size: 2048 x 2048px

‍

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

‍

‍

Step 1: Enter "Experiences"-Tap

‍

‍

‍

Step 2: Click "Create Experience"

‍

‍

‍

Step 3: Select your Template

‍

‍

‍

Step 4: Enter your Experience Name & Description & Click "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. Users should understand that the builder will manage lightmapping and UVs via Unity's standard Universal Render Pipeline (URP). You can generate lightmaps directly in the SDK through Unity, or opt to bake textures into the model using your 3D software. Models will utilize the UVs you provide, but remember that you can regenerate UVs in Unity if needed, by selecting the appropriate option in the import panel.

‍

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're working with custom lightmaps and shaders.
• Clean, Smooth Islands: UV islands should be clean, smooth, and flat. Avoid detaching numerous polygons from the main island.
• ‍

In terms of file formats, OBJ and FBX are most commonly used due to their wide feature support, including animation, weight painting, and textures. For workflow efficiency, aim to minimize file size and work modularly.

‍

For example, consider importing textures separately into Unity rather than embedding them in the FBX file.

‍

‍

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.

‍

AOROME format, a quick win:

‍

Users have the freedom to write or edit any shader that's compatible with Unity's Universal Render Pipeline. However, we recommend using the AO (Ambient Occlusion), Roughness, and Metalness texture system. This approach is particularly useful for reducing the number of textures in your project. The system is built around three core textures, as outlined below:

‍

‍

‍

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:
  • 🔴 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.

‍

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 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.

‍

‍

‍