# Welcome to MONA The Welcome to MONA page goes over the basics of MONA and the goal of documentation. ## **MONA is a world-building platform. Built for creators, by creators.** With MONA, you can design and publish online experiences using common 3D creation tools. Experiences like virtual homes, avatars, art galleries, live event venues, games, meeting places, shopping centers, clubs, and more. ## Welcome to the MONA Docs Here, you learn how to create beautiful, immersive worlds using tools like Blender and Unity which are free or paid applications like Maya, and Substance Painter to name a few. We will cover how to create the assets, through to adding interactivity using Reactor and visual scripting. As well as improving your lighting, and optimising the space experience so that it looks great and runs well alongside many other skills that you can learn to improve online experiences. We will also show you how to create Avatars to navigate and explore the many spaces that are available with your friends. *Anyone* can start building a Space by installing Unity and downloading our ready-to-use template on[ GitHub](https://github.com/monaverse/SpaceStarter). ***You do not need to buy land in order to get started.*** Just creativity and an open mind. For more information go to the[ Get Started](https://docs.monaverse.com/create/building-spaces/get-started) doc. Check out the links to the left to learn how to create your space. # What is a Space? ### A **‘Space’ is a 3D virtual social environment** that can be viewed in a web browser. Builders are able to create spaces using free tools like Unity and Blender, or other applications like Maya, Gravity sketch and many other tools that create digital content. Each Space is minted as an NFT, and can be bought and sold much like any other NFT. If you are the owner of a space, you can use Token Gated access to only allow users you want to enter the space. A Space does *not* require 'land' to purchase before creating the space. Each space is created from scratch with the tools of choice and put together in Unity. These spaces are then bought as a complete package. ![A Space in Mona!](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F9FHU1y3HPGn4hCdhlZvb%2Fimage.png?alt=media\&token=0c435f70-d3cb-47da-9a75-3ec1016ccc80) ### **What can I do in a Space?** Spaces are designed to be social environments, and can be used for whatever you can think of! Once published, MONA Spaces become private metaverse hangouts for you and your friends. When entering the Space you can customize your avatar and chat using voice and text. New utility is added to Spaces constantly. ![Social spaces in Mona, just create a Hangout!](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FTBQdjXRQ5DtloBY4gFE9%2Fimage.png?alt=media\&token=1ab05baa-54ea-4346-bd52-b1ba74eb7141) You can connect Spaces together using Portals, or add assets that can be updated after the space has been minted through Artifacts or Canvases. More information on those can be found on the left menu. ### **Can I build a Space?** Yes! Anyone can start building a Space by installing Unity and downloading our ready-to-use template on our [Github](https://github.com/monaverse/SpaceStarter). *You do not need to buy land in order to get started*. Each space is its own little plot of whatever you want it to be in the metaverse! Check out the links to the left to learn how to create your space. ### **Can I buy a Space?** Yes! Many spaces are available on the MONA Marketplace [here](https://monaverse.com/marketplace). [Join our Discord](https://discord.gg/mona-821806953981542468) to stay updated. # Unity Overview A general overview of considerations with Unity and MONA. Unity 2022.3.6f1 is used to create MONA spaces for use in WebGL compatible web browsers. The following doc covers some basic considerations on the version of Unity and how that affects your approach to creating spaces. ### Standard Render Pipeline Unity has three render pipelines: Universal Render Pipeline (URP), High Definition Render Pipeline (HDRP), and Standard (or Built in) Render Pipeline (SRP). ***Mona uses the Standard Render Pipeline (SRP) ONLY.*** Other game engines like Unreal or Godot are also NOT supported. ## **WebGL Limitations** MONA uses WebGL in order to run in browsers. This limits some of the functionality and scope that you would usually find in a standard standalone game. You can find a detailed overview of WebGL's graphical capabilities [here](https://docs.unity3d.com/Manual/webgl-performance.html). If you don't know what these are that's perfectly fine as the MONA SDK has all this set up for you. But for those who are interested, MONA uses the following : * WebGL2.0 * Forward rendering * Linear Color Space ## Custom Shaders It is possible to now use the Unity Shader Graph in the Standard Render Pipeline. It is possible to use 3rd party tools such as[ Amplify](https://assetstore.unity.com/packages/tools/visual-scripting/amplify-shader-editor-68570), which is a node based shader graph that is available for purchase on the Unity Asset store. [Shader Forge](https://acegikmo.com/shaderforge/) is another free tool. These assets can make custom shaders for MONA, *as long as they are WebGL compatible*. ## 3rd Party Assets We generally do not recommend using 3rd Party assets as there can be complications with shaders (among other things) and licensing is a bit of a grey zone due to the nature of having the Mintable file including some/all of the assets that the owner can then use. For now, check [Asset Resources](/create/resources/asset-resources) for assets that seem compatible/incompatible with MONA. {% hint style="warning" %} You must obtain all required permissions to use assets that you did not create yourself before minting your Space. ***Make sure to read all license files carefully.*** {% endhint %} # Getting Started Building This doc goes over the steps to creating your first space in Mona! ## Getting started is easy! If this is your first time in Mona, either as a beginner or an experienced developer, this page is your starting point to building a Mona Space! If you are a beginner to Unity, we understand that this can be intimidating. Feel free to [join the discord](https://discord.com/invite/gcrGHzTerU) to join the fantastic community and ask any questions you may have. There are just three parts to the building process : * Setting up your project in Unity * Creating your Space * Testing and sharing your Space After that you can submit and mint your space to sell! Let’s dive in step-by-step! ### Install Unity 2022.3.6f1 * Install the Unity Hub if you haven't already. It's free! Download this from[ https://unity.com/download](https://unity.com/download). * [Click here to install Unity 2022.3.6](unityhub://2022.3.6f1/b9e6e7e9fa2d) after installing Unity Hub to get the 2022.3.6 directly, or use the [Archive page](https://unity.com/releases/editor/archive#download-archive-2022) for Windows, MacOS, or Linux links. {% hint style="warning" %} We currently require all builders to use **Unity version 2022.3.6f1.** When installing, make sure to add **Build support for WebGL**. If not installed, you’ll run into a WebGL related error when building. {% endhint %} *If you need any help,* [*Join our Discord*](https://www.mona.gallery/discord)*, and we'll help you through the process!* ### Download Mona Template SDK * We have a ready-to-use Mona SDK for Unity. **Download it** [**here**](https://github.com/monaverse/SpaceStarter)**.** * **Download the SDK by pressing 'Code', then 'Download Zip',** *or* [cloning the repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository).

Download Mona SDK from Github

### Open the Template SDK in Unity. * **Unzip the Mona SDK** into the preferred location on your computer. This folder *is* the project. * **Open the Mona SDK folder to your Unity Projects** using the 'Open' Button in Unity Hub.

Load Mona SDK Project in Unity

* If the Space is not opened automatically, **click on the project to open it**. Note that this may take up to 5 minutes to import. {% hint style="info" %} ***Remember to backup often.*** To do this, you can simply make a copy of your project folder (Ctrl + C, then Ctrl + V works) and then open the duplicate folder in Unity to continue. {% endhint %} ### Load Mona Scenes * After opening the project, **load the template scenes** using 'Mona > Load Space Scenes' in the Mona menu at the top. This will open three scenes: **Space**, **Artifacts**, & **Portals**. * **Make sure to delete the 'Untitled' scene in the Hierarchy window** by right clicking it, and selecting 'Remove Scene'.

Load Mona Spaces into Project and remove 'Untitled' Scene

{% hint style="warning" %} * Mona projects should have 3 Scenes loaded in your Hierarchy - Space, Portals, and Artifacts. * ***Do NOT rename or delete any of these scenes.*** * **Make sure to remove any other scenes before exporting.** * Each scene will have an object in its root. **Do not delete or rename these objects** either. * Each root object has a specific tag, 'Space,' 'PortalLayer,' and 'ArtifactLayer.' These are the only objects that use these tags. * *If you collapse your hierarchy, it should **always** look like the following:*

Collapsed scenes should look like this...

{% endhint %} ## Create your space Now it’s time to start creating. Because Mona is based on WebGL in a browser, you must consider limitations when building. Keep note of the polygon count, material count, and texture size to start. If you are coming from a non-game background such as architecture, fashion design, or similar, it will be important to **optimize** your assets considerably before using them in your space. You’ll want your space to run on as many devices as possible, so make sure to check out our tips on [Space Limitations](/create/building-spaces/space-limitations). We consistently add resources to the docs and [YouTube channel](https://www.youtube.com/@monaverse) to give you the best results possible. If you want to *really* optimize your space, check out the [Optimizing your Space](/create/building-spaces/optimise-your-space/optimizing-your-space) for more information about this part of the process. ### Import assets * Import your assets such as 3D assets, textures and sound from your preferred creation tools (i.e., Blender, Maya, photoshop, etc.) into Unity. To import, you can use any of the following : * Drag and drop your assets from your desktop into the Unity Project window directly. * Right mouse click in the Project tab window and use 'Import New Asset' and select your assets to import. * Use the 'Assets > Import New Asset' menu item in the top toolbar to import your assets. We recommend using the **\_AddYourArtHere** folder located inside the Assets folder in the Project window to store your assets, but this is not compulsory. {% hint style="info" %} Supported file formats: * Supported **3D** file formats: **.fbx** (recommended), **.obj** * Supported **2D** file formats: **.png** (recommended)**, .jpg** * Supported **Audio** file formats: **.mp3** {% endhint %} ### Add Assets to your Unity Scene Once your assets are imported into the Project folder, you can add them to your Space by dragging them directly into the Hierarchy window or the Scene itself. There are 3 locations in which you can import your objects depending on what that asset is for: #### **Space Scene (Environment assets)** This scene is your main environment. You will spend of your time creating assets within this scene. ***If you mint your space, these assets will not be able to be modified.*** For example, if you built a Gallery space, you'd add the assets for the walls, ceiling, and floor into the Space scene. {% hint style="warning" %} Mona spaces have a certain hierarchy required to make it work, these include : * All Space assets must be under, or a *child* of, the 'Space' gameobject under the Space scene. This object has the 'Space' tag. * If the Space scene or Space GameObject is deleted or renamed, the space will not work in Mona. * If the Space gameobject tag is removed or changed, the space will not work in Mona. {% endhint %} #### **Portals Scene (Portal Assets)** Adding portals to your space allows the user to travel to other *minted* Mona spaces. The creator, or owner of a space once minted, can decide which minted space the user can go to. {% hint style="warning" %} Portals have a specific hierarchy and tags to function correctly, check out the [Portals](/create/building-spaces/create-your-space/portals)documentation for more information. * Each Portal asset must be under, or a *child* of, the 'Portals' object under the 'Portals' scene. This object has the 'PortalsLayer' tag. * If the Portals scene or Portals GameObject is deleted or renamed, the Space will not work in Mona. * If the Portal tags are removed or changed, the portal will not work in Mona. {% endhint %} #### **Artifacts Scene (Artifacts Assets)** Artifacts are Canvases that can be used to display images or live streams and assets that link to external websites and can be modified by the creator or owner of the space once minted in the future. {% hint style="info" %} Artifacts have a specific hierarchy and tags to function correctly, check out the [Artifacts](/create/building-spaces/create-your-space/artifacts) documentation for more information. * Each Artifact asset must be under, or a *child* of, the 'Artifacts' object under the 'Artifacts' scene. This object has the 'ArtifactsLayer' tag. * If the Artifacts scene or Artifacts GameObject is deleted or renamed, the Space will not work in Mona. * If the Artifact tags are removed or changed, the Artifact will not work in Mona. {% endhint %} ### Test your space * Once your space is to your liking, **click on the 'Playground' button at the top of Unity** - It's that easy! * This will open your project 'Exports' folder and the Mona Playground URL for you to **drag your playground files into the field in the middle of the page**. You can also use the 'Mona > Build Playground Files' menu option. * If you need to locate the Playground Folder, it can be found in the 'Exports' folder in your Unity project folder. If you need to find the playground website, you can find it[ ](https://monaverse.com/playground/)at . {% hint style="info" %} Make sure that your device meets the minimum requirements. For more information go : [Explorer's Frequently Asked Questions](/explore/explorers-frequently-asked-questions). {% endhint %} ## Submitting and Minting your Space ### Adding a Space to your Wallet * You will need a digital wallet to upload the space onto your wallet drafts. This allows you to share the space with others, create a hangout space for others to join you, and/or allow the space to be minted.
* **Connect your wallet to the Mona website**. For information on how to do this, go to [Setting up a wallet](/collect/setting-up-a-wallet).
* Next, **go to the 'Drafts' section and select '+ Create' to start a new space draft**.
* This next page will ask for the following information: * **Artist Name** *(required)* * **Space Title** *(required)* * **Space Short Summary** *(required)* * **Space Long Summary** *(optional)* * **Properties** (recommended)
* On the next page, you will see a number of categories to upload files. The two you need to be able to send to others are : * **Playable Files -** This is used for the Playable Files you have used when testing. **These must be less than 250Mb.** * **Preview Image (optional) -** This is the image that is used when loading the space. **1920x1080 screenshot of the space without an Avatar or Mona UI.**
* Once you’ve uploaded the Playground Files, **use the 'Preview' button to share the URL of your space** and/or create a Hangout link (on the UI navigation bar) to send to others. ### Submit your space To mint your space, **you’ll need to submit it for Quality Assurance (QA)**. The QA process takes up to 72 hours for the first review. **You will be notified of any adjustments that need to be made by email.** **You must make the updates and reply to the QA email directly.** {% hint style="info" %} Do not resubmit the QA Submission form otherwise tracking your space will become more difficult for the QA Team. {% endhint %} To go through QA, you’ll need a few more things: * **Portals -** This links all the Portals to their destinations. * **Canvases -** This adds what images and links are used with canvases. * **Preview Render -** This is the video used for promotion of your space on the Mona site. **1920x1080 video of your space without an Avatar or Mona UI.** * **Mintable File -** This is required when minting your space. **Select “Build Mintable File” in the Unity Mona menu, it must be less than 2Gb)** {% hint style="info" %} ***After all the files are uploaded, you must submit this*** [***form***](https://airtable.com/shry50SFuk6D4unwU)***.*** If you do not do this, the QA Team will not know that it is ready to evaluate. If cleared by the Mona team, you can Mint your space! {% endhint %} For more information on this process go to [Submitting your Space](/create/building-spaces/submit-your-space/submitting-your-space). ### Mint Your Space * Note that after you mint your space, the Space scene assets ***cannot*** be updated. The space owner can update the *destination* of portals and edit Artifacts and Canvas *links*. * After your space has been cleared, we’ll notify you by email. **Use the Mint button to upload your space to the Mona marketplace to sell.** * There are some fees involved with this step. More information on these can be found in[Mint Your Space](/create/building-spaces/submit-your-space/mint-your-space). ## That’s it! And that's how you get started in Mona! You can check out the docs in the [Create your Space](/create/building-spaces/create-your-space) docs for more detailed information on creating a Mona space. To add more features to a space, check out the following categories such as the [Improve your Space](/create/building-spaces/improve-your-space) section or [Adding Interactivity](/create/building-spaces/adding-interactivity) to the space with Reactor or Visual scripting. You can also look into ways to optimise your space to make sure that it runs smoothly with more complex assets in the [Optimise your Space](/create/building-spaces/optimise-your-space)section.
# MONA Crash Course The MONA Crash Course overview With MONA, you can design and publish online experiences using common 3D creation tools to be used in a browser. Experiences like virtual homes, avatars, art galleries, live event venues, games, meeting places, shopping centers, clubs, and more. ## Introduction To the Crash Course Series In the following Crash Course Tutorials, we are going to take you through a series that gives you the basics needed to put a MONA Space together from start to finish, even if you have no experience modelling or using Unity. The goal is to create a simple MONA Studio that you can use to learn the tools that you can take in whatever direction your imagination desires. ## Chapter Introduction In this series, we will be looking at the following topics. * **Setting Up MONA.** The first tutorial will include installing Unity and opening the MONA SDK. * **Introduction to Unity.** The basics of getting around Unity if you haven’t opened up a game engine before. * **Simple Assets.** Adding some simple assets in Unity. * **Metaverse / WebGL Limitations.** Considerations when making assets for WebGL Metaverse spaces. * **Creating assets in Blender.** Creating assets in Blender to use in the space and how to export them. You could also use the premade assets we have available in the MONA Library. * **Applying materials and Unwrapping UVs in Blender.** How to set where the textures go on your asset in Blender. * **Importing Assets.** This tutorial goes over common ways to import your assets from external creation tools like Blender, Maya, and the like. * **Basic Colliders.** You will need to add some colliders to the space; otherwise, your users will fall through the floor or walk through your assets. This tutorial covers some of the methods to do so. * **Lighting.** This tutorial will explore the difference between real-time lights and baked lights and how to set up a quick real-time light example. * **Adding a custom Skybox.** Adding a skybox texture that surrounds our space. * **Canvases.** Canvases allow links to images and live streams that can be updated after a space is minted. * **Uploading your Space to the MONA Wallet.** Uploading your space to your wallet so you can share the space with others! ## Summary Once you have completed all these short videos you are well on your way to making amazing MONA Spaces to use or sell. So, without any further ado, let's get into it! # Setting up MONA in Unity This tutorial will cover how to install the right version of Unity and then open the MONA SDK. {% embed url="" %} Getting Started in Mona Video {% endembed %} As much as you may use other tools to create your assets, such as Blender, Maya, Rhino, and so on, Unity is the game engine that we use to put all our assets together in one place. When creating spaces for MONA, we need to set up the space in a certain way so that it will work in a browser. The MONA SDK is used with this in mind and it will also have all of the resources you need in MONA to make an amazing space. ### Downloading Unity The version of Unity is very important to note. MONA uses 2022.3.6 with the ***Standard Render pipeline***, sometimes called the in-built render pipeline. * Go to [unity3d.com/get-unity/download](http://unity3d.com/get-unity/download) and use the ‘Download Unity Hub’ button. * Save the file. * Double-click on the saved file to install Unity Hub. * Open the program once installed. ### Installing Unity * [Click here to download 2022.3.6](unityhub://2022.3.6f1/b9e6e7e9fa2d) directly into the Unity Hub (after Unity hub has been installed), or go to the [Archives](https://unity.com/releases/editor/archive#download-archive-2022) to install Unity 2022.3.6. {% hint style="danger" %} ***Make sure to install the WebGL module!*** If you do not do this, your space will not work in MONA. If you miss this, you can use Unity Hub to add the module by using the Settings / Add Modules button. {% endhint %} ### Signing in to Unity You will need to sign into Unity to use it, as you will need a Unity License. You can use a free Personal License to do so. * Go to the top left of the Unity Hub and select 'Create Account' if you don't have one already, or 'Sign in'. {% hint style="info" %} On the rare occasion that you have issues with signing in and, therefore, being unable to open Unity, you could try making sure your VPN is off and that Unity Hub is allowed through your Firewall before trying to sign in. {% endhint %} ### Downloading the MONA Template You must download the MONA SDK to start all spaces for use in MONA. * Download it from Github [here](https://github.com/monaverse/SpaceStarter). * Download the SDK by pressing 'Code', then 'Download Zip' on the Github page, \ *or* \ cloning the repository. For more information on this, go [here](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository).

Download the Mona SDK.

### Starting a new MONA Space Once you have the required Unity version installed and access to the MONA SDK, you need to unzip the MONA SDK to a new destination folder. This will be the project moving forward. If you want to back up your project, you can just copy and paste this project folder and open the copy to continue working. * Unzip the MONA SDK zip to your preferred location. * Use Unity Hub to open the project by using the 'Open' button at the top right.

Load Mona Spaces...

* Once in the project, use the 'Mona' menu and select 'Add Mona Scenes'. * Right mouse click on the 'Untitled' scene in the hierarchy window and select 'Remove Scene'. ### Testing the Space It is possible to build and test this space in the browser. * Go to the top and press ‘Playground’, it will open file explorer with the Playground files and load a browser at the playground website for you. * Drag your Playable files folder from Explorer onto the Playground input in the browser * Test your first MONA space! Head to the [Getting Started Building](/create/getting-started-building) doc if you would like a more in depth tutorial on getting started with Mona. ### Summary In this tutorial, we went over installing the right version of Unity, opening the Mona SDK, and doing a quick test of the space in the MONA Playground. # Introduction to Unity This tutorial goes over how to get around Unity if this is your first time using it. {% embed url="" %} Introduction to Unity Video {% endembed %} ### Unity Windows and Panels #### The Scene View The scene view in Unity is the visual representation of your experience where you can manipulate assets and customize its layout according to your preference. #### The Project Window The Project window in Unity contains all your assets and necessary components and access pre-made Mona assets from the \_MonaAssets folder to add to your scene or of you accidentally delete them. #### The Hierarchy Window This is where assets in the scene are organized, and for Mona Spaces to function properly, they require a specific structure with three scenes (Space, Artifacts, and Portals) and their respective parent assets. Any assets not nested under these three parent assets can cause issues. #### The Inspector Window The Inspector Window is where you will be able to modify asset parameters. Different assets offer different elements to modify. #### The Game Window The game window is usually *not* used in Mona, as you require a Camera to use it. We do not recommend adding a camera as it will overide the player camera in the Mona experience. #### The Console Window The Console in Unity is primarily used for programming and troubleshooting purposes, although custom code is not supported, it can help identify and resolve issues with building spaces. #### Miscellaneous Windows The Animation and Animator windows are useful if you are looking at animating assets and can be found under Window / Animation at the top left. #### Lighting window (Optional) This is used for lightmapping and can be found under Window / Rendering. #### Package Manager (Optional) This can be found under Window / Package Manager. This is used if you need to install any packages from the Unity Registry, or assets you have purchased from the Unity Store. Due to compatibility and licensing issues, it is generally not recommended to use assets from the store, but if you have all your bases covered, it is possible. ### Navigating the Scene Viewport * Left Click - Select object. * Hold Left Click - Select box (selects assets that are enclosed inside the box by default). * Middle Click - Pan scene. * Left click + Alt or Right Click - Orbit scene / asset. * Middle Scroll or Alt-Right Click + move mouse left or up/right or down - Zoom in/out. * At the top right of the Scene view, you have the gizmo to shift to different axes. \ Click on the centre white square, to shift between orthographic and perspective modes. * Perspective mode - WASD Keys to fly around the space. Holding shift will let you fly faster. * Orthographic mode - WASD Keys to affect the clipping of the space. ### Adding Assets Drag and drop assets from the Project Window into the Hierarchy or the Scene itself. It is a good habit to drop assets into the correct location in the Hierarchy (such as under the Space, Artifacts, or Portals parent object. ### Transform tools The View, Position, Rotate, and Scale buttons can be found at the top left. The Rect Tool works much like a 2D scale tool, even on 3D assets. The Transform tool with all Position, Rotate, and Scale tools. At the top left you can select if the transform is applied to the 'Pivot' or 'Centre' of the selected asset. You can also choose the 'Global' or 'Local' approach. Global has the transform based on the world, whereas local bases the transforms on the object itself. ### Viewport tools You can hide, show, or resize the gizmos in your space. You can do that at the top right of the Scene window. Showing your assets in shaded, wireframe, and shaded wireframe modes is possible at the top right. ### Hotkeys * Q - View Tool. * W - Position Tool. * E - Rotation Tool. * R - Scale Tool. * T - Rect Tool. * Y - Position/Rotation/Scale Tool. * F - Focus on the currently selected asset. * Ctrl - Snap position/rotation/scale. These amounts can be edited using the Edit menu / Grid and Snap Settings. * V - Vertex selection. This allows you to position assets accurately based on vertices. This is fantastic for modular assets. # Setting up Simple Assets Setting up assets in Unity to learn the basics of asset creation. {% embed url="" %} Simple Assets in Unity Video {% endembed %} We will look at adding simple assets and then adding simple materials, all within Unity. This is not the most common way to make spaces but the easiest. ### Unity Primitives Unity has several basic primitive shapes you can add to a Unity scene. * Cube * Sphere * Capsule * Cylinder * Plane, which has many polygons * Quad, which has very few polygons. * Text - TextMeshPro requires importing assets, which comes up automatically. ### Adding Basic Assets * Right-click on a gameobject in the Hierarchy to place the asset under. * Go down to ‘3D Object’ and select the asset you want to add. This way sets the location of the asset in the hierarchy, as all assets need to be a child of the Space, Artifacts, or Portals gameobject. * These assets will already have a collider component attached. Colliders are what a player will run into or stand on. If an asset such as the floor or a wall doesn’t have a collider, the player will either fall through it or can walk through it. ### Modifying assets * Position, rotate, and scale assets as needed with the tools at the top left, or the hotkeys **W, E, R, T.** ### Adding Simple Materials * Right-click on the folder in the *Project* window you would like to add the material to. * Go to ‘Create’, and then ‘Material.’ * It is recommended to name your assets as soon as you make them. ### Editing the Material settings * Click on the material to see all of its parameters in the *Inspector* window. * Edit the color, metallic, smoothness sliders as needed. * **For transparent materials,** you will need to **change the ‘Rendering mode’ at the top to ‘Cutout,’ ‘Fade’, or ‘Transparency.** Then adjust the Alpha in the color parameter at the bottom. Cutout is the fastest for performance but more limited, whereas 'Transparency' is the slowest for performance, but looks the best. * **For Emissive materials,** you need to **toggle 'Emissive' with the check box.** Then adjust the color and intensity. The Bloom effect in Mona will use the Intensity settings. Best effects are between 0-2. ### Applying the Material * Apply the material to your asset by either dragging it onto the asset in the space or dragging it onto the asset in the Hierarchy. # Metaverse / WebGL Limitations Considerations to have when making a space using WebGL. {% embed url="" %} WebGL Metaverse Limitations Video {% endembed %} As Mona runs in WebGL in a browser, we have limited resources to use in our space, and if we use complicated assets such as too many polygons, materials, or textures, it will affect the quality of the space. *A WebGL browser space that uses Unity has a hard limit of 2Gb of memory to use.* And this can get used up very quickly when you add the space, audio, textures, canvases, avatars, among many other elements. ### Polygon Count One of the most important elements of an asset is how many polygons it has. This may not be considered if you are coming from Architecture using applications like Revit or Rhino, or perhaps sculpting in Zbrush or VR. But in Mona, you will need to pay attention to how many polygons an asset has, as this will affect how well the space runs in the browser and how big the files are to import. A polygon is basically two triangles of a mesh. You will see both polygons, or poly, and triangles, or tris, used a lot, but the numbers are different. Triangles are generally twice the amount of polygons. You may also see Ngons as well, this is more than two triangles together to create a 5 or more-sided polygon. It is difficult to say the maximum polycount for a space as each element affects each other. You could have a higher polycount space if you have less materials for example. That said, there are some simple guidelines to get you started.

Polycount examples

In this example, the polycount on the left is too high for a WebGL experience and should be avoided. A ‘Hero’ asset can have more polygons, such as an important sculpture, a character, or a key element of a Mona Space. This is not recommended for most assets however. A medium-level asset is the most common such as props around the space. Most assets should be this or below. Items in the background or far away should be significantly less polygons. Straight edged objects should have very few polygons. Curved objects should have less than you probably want, similar to the examples given. There are many ways to create these assets, from manually creating the assets from scratch in a 3D Creation tool like Blender to creating high polygon assets made in sculpting tools like ZBrush and reducing the polycounts afterwards. Reducing the polycount of assets can be done in several ways as well, from manually ‘tracing’ the high polygon asset to making a low polygon asset, also known as retopology. This is slower but can achieve significantly fewer polygons. There are also ‘faster’ approaches to reducing polycount, such as decimation and re-meshing, which result in better polycounts than the original mesh, but perhaps not as low as if you created it manually. Decimation is not recommended for assets that require animation, such as VRM Avatars. ### Material count The other element that plays a large part in how well your space runs is what we call *draw calls*. A draw call is when the GPU is asked to draw something new on the screen. The more things it needs to draw, the slower it will go. One aspect of this, that is easily described, is how many Materials are in your space. Each material has the potential to be a draw call. There are many techniques to reduce material count as well, both the builder and the engine itself can help with this. Don’t worry so much about this at the moment, but it is just something to keep in the back of your mind as you improve your skills. ### Texture Size Another key element to making a Mona space is that there is a 250Mb maximum file size allowed for your space, also called the Playground Files once exported. All assets take up file size, but one of the main ones is your textures. Textures allow you to give your assets more color and detail. It could be something like a wood grain, up to a whole assets color, metallic and smoothness, and emissive (or light information). A normal map, which is an approach to bump detail, can also be added. In game engines, textures must be a power of 2, so 4x4 pixels up to 2048x2048. But the latter file size is quite large in file size, so keeping the number of these as few as possible or using that file size optimally is part of the process. You could use a 4096x4096 texture for the skybox, or the image surrounding your space, but this would be the only one we’d recommend using at that size. There are many ways to reduce the size of your texture, both inside and outside Unity. And we will look at some of those in the following tutorials. ### Summary Once again, these examples are less a how-to tutorial and more about recommendations on creating a space that runs well. We recommend jumping in and making your assets with these in mind but don’t worry about it too much for now if you are just starting. Your ability to create optimized assets will improve the more practice you have. # Creating 3D Assets {% embed url="" %} Creating Assets in Blender Video {% endembed %} Assets are usually made in an external application such as Blender, Maya, or 3D Studio MAX, alongside many other applications. In this tutorial, we will go over making a simple asset in Blender, which is a free 3D Creation tool. Go [here](https://www.blender.org/download/) to download the latest version. ### Getting around Blender At the very top left, you have your Menu items but also a bunch of tabs. These are just different layouts that allow you to focus on a particular task. Creating assets is usually in Layout or Modelling. You may need UV Editing and Shading later in the process. This main area is the Viewport, where assets are created. * **Right click** - Orbit view * **Shift + middle click** - Pan view * **Middle scroll** - Zoom * **Alt + middle click** - Snap to different views * **Numpad Period (.)** - Focus on a particular asset At the top left of the viewport, we have the mode you are working in, the two most common are *'Object'* and *'Edit'.* Object mode is used to arrange the scene. Edit Mode allows you to edit the assets in detail such as their vertices, edges, polygons etc. * **Tab** - Switch between Object and Edit mode. Next to that, you have a number of menus, depending on the Mode you are in. At the top centre you have Transform orientation, Pivot point, Snap settings, and Proportional editing tools. To the top left again under the Mode, we have the Asset Creation tools such as position, Rotation, and scale. As well as other tools such as Extrude, Inset, and Bevel, to name a few in Edit Mode. Most Hotkeys are displayed in a popup when you roll over the tool itself. * **G** - Position * **R** - Rotation * **S** - Scale You can optionally use the following, * **X** - Limit to X Axis * **Y** - Limit to Y Axis * **Z** - Limit to Z Axis To finish off you can, * **Left click** or **Space** - Accept * **Right click** - Cancel It is possible to use numbers to modify the edits by a certain amount. Once done, left-click to lock the edit in. At the top Right of the viewport, we only need to worry about the Overlays pulldown, X-Ray mode, and Viewport shading options. The two most common elements in the Overlays pulldown is Statistics, and Face Orientation. Statistics offers things like face/triangle count, etc. and Face Orientation displays a blue and red overaly, where blue is opaque in Unity, and red is transparent in Unity. You will need to use the X-Ray mode to select elements on the other side of an asset. If you don’t, you will only select the visible elements in the viewport. The viewport shading options change how the viewport looks, such as Wireframe, Solid, Material Preview, and Rendered. Usually Wireframe and Solid are all you need in Asset creation for Mona. To the top left of the viewport is the Axes Gizmo, which allows you to shift to different views. You can also use the Numpad keys. Right next to the Axes gizmo is a little arrow that you can select, which will open certain toolbars. * **N** - Open Toolbars. Over to the right, we have your *Outliner,* which organizes your assets in a hierarchy. Double click assets to rename them. Under that, we have the *Properties* section. This has a long list of categories we can use, but the main ones for asset creation are *Object Properties, Modifier Properties, Object Data Properties,* and *Material Properties*. ### Editing assets As noted, you can use different modes on an asset, with Object and Edit being the two most common ones. You can edit one asset or multiple, and doing so will allow you to edit the asset in detail, such as modifying polygons, edges, and vertices. * **Shift + left click** - Multi select Select the asset, or use shift to select multiple assets, and go to edit mode by selecting Edit mode or pressing the tab. You can change the selection type by using the buttons at the top here to edit the vertices, edges, or polygons. * **1** - Select Vertices * **2** - Select Edges * **3** - Select Polygons With that, you can already start creating assets! Select the element you want to edit and position, rotate, or scale them as you see fit. In Edit mode there are a number of tools to the Left of the Viewport that allow more advanced editing of your models. ### Extrude The Extrude tool allows you to grab an element, such as a polygon or edge, and extrude it in or out. After editing an element, a popup will appear at the bottom left of the viewport, you can modify the details manually if need be. The Extrude tool has a few different options, any of the tools with the little triangle on them do. Just click and hold, and select the tool you would like. You can hold over the tool to get more information on each. * **E** - Extrude (in Edit Mode) ### Inset Inset allows you to add polygons within a polygon. Use the popup at the bottom left to modify polygons individually. * **I** - Inset (in Edit Mode) ### Bevel Bevel will make any edges beveled. If you select a polygon, it will bevel all the edges within the selected polygons or vertices. You can edit vertices instead of edges in the tool popup menu. * **Ctrl + B** - Bevel (in Edit Mode) ### Loop Cut Loop cut allows you to add a loop along polygons. A loop is a group of edges along a mesh, and getting comfortable creating good clean loops allows you to speed up your process. * **Ctrl + R** - Loop Cut (in Edit Mode) * **Scroll** - Add Loops * **Left Click** - Slide Loops * **Right Click** - Reset loop position * **Left Click / Space** - Accept * **Alt + left click** - *Select* loop (in Edit Mode) ### Knife / Bisect The Knife tool allows you to cut edges into the mesh as you see fit. Pay attention to placement, though, cutting **near** the edge will add more polygons than if you cut **to** the edge. The Bisect tool is within the Knife tool button, so hold on the button to be able to select it. Select the polygons before you want to cut and then use a straight line to bisect them. * K - Knife tool ### Exporting External Assets It is recommended to use the .fbx file format for use in Unity. Unity does support .blend and .obj, but these are not as good due to filesize, complications, or features. .glb is also an option, but Unity does not import this format by default. Before exporting your assets, it is a good idea to **Apply transforms to your asset in order to reduce issues with scale between 3D Creation program and Unity**. In Blender, you can do this in ‘Object’ mode under the 'Object >Apply > Scale'. * **Ctrl+A** - Apply Transforms (in Object mode) In Blender, you can easily export your asset by selecting the assets you want to export and going to File > Export > .fbx. Make sure to **select the ‘Selected Objects’ toggle**, and if your asset is not animated or rigged with bones, **use the ‘Apply Transform’ toggle** as well. This will reduce scale issues within Unity. Other applications have a similar approach. ### Summary In this tutorial, we went over navigating Blender and its tools to create 3D Assets. # Applying Materials & Unwrapping UVs {% embed url="" %} ### What is Unwrapping UVs? As you probably know, textures are 2D assets. You have an X and a Y axis. 3D Assets are 3D, so they have an X, Y, and Z axis. So, how do you correctly apply a 2D asset to a 3D asset? A simple explanation is that we must flatten the 3D asset onto a 2D plane. And for that, we are going to call our X and Y axis, in this particular case, U and V. Unwrapping UVs just means telling your texture where to go on the 3D Asset. ### Approaches to Unwrapping UVs There are a few approaches to how you unwrap your assets and usually ranges from high detail and larger filesize , to simple detail but smaller filesize. #### Custom UVs The UV space can be used for individual textures, like a character or custom detail asset. As the texture is unique to all parts of the model the texture needs to be in the 0-1 space, or within the square to apply our 3D asset to. This results in high quality textures but requires a larger filesize. #### Tileable textures Tileable textures repeat at the edge of the texture. This means we are not limited to the UV 0 to 1 space, we can apply our UVs as we see fit as big as we like in any direction. This has a high level of detail and large filesize but usually covers a large area in the space such as floors or entire furniture. As spaces usually have many different materials however this can cost in performance if too many unique materials are used. #### Trim Sheets Trimsheets are like having multiple materials in one material. You can use tileable areas so that you can extend in one direction for example, but have other areas of the texture used for other elements. It allows high quality textures and fewer materials. Takes longer to setup. #### Palette Textures You can also apply simple colors to your assets from one material. In this example, each dot has all the polygons that use that color. And each section of this one material has different finishes, such as metallic, polished, matte, or emissive. This allows for many assets to use the same single material reducing drawcalls. This allows for very small filesize and faster performance, but limited to simpler materials. ### Applying Materials In this tutorial we will look at the Tileable Textures approach as it’s a good introduction to UVs. The first thing we need to do is set up a Material so we know what the texture looks like on the 3D asset. * Find a tileable texture from a website with a CC0 license such as [AmbientCG](https://ambientcg.com/). * In the Properties panel, go to Material Properties at the bottom. Your model may already have a material on it, but if it doesn’t, select the + symbol at the top right of the panel. I recommend naming your material by double-clicking on it. * Set the base color to a different color and then make sure to set the viewport shading mode to Material Preview so you can see the result. * With this material selected, select ‘Shading’ at the top of the Blender window. * Drag the texture from your desktop into the node graph in the bottom section. * Connect the texture to the main color texture, also known as diffuse or Albedo, to the ‘Base Color’ in the main node. As Unity has its own way of creating materials, and exporting with materials in place usually requires plugins,I usually stop there when adding textures in Blender. Doing so in Blender is more of a guide rather than the final material. And then, just create the Material from scratch using Unity directly. ### Unwrapping UVs in Blender Returning to the UV Editing layout, this will display the UVs on the left and your assets on the right. We can see the texture applied in the UV. Different layouts have different settings, so make sure to set your viewport mode to Material preview if you haven’t already. * Go to Edit mode and select all the polygons of your asset. * In the right viewport at the top, go to ‘UV > Smart UV Project’ and select OK on the popup that comes up. This tries to flatten your UVs into the square as best it can, depending on the parameters you set in the popup. * Use the standard tools to edit your UVs. * **G** - Position * **R** - Rotate * **S** - Scale. And X and Y to define the axes. * Use the top left buttons to shift between Vertices, Edges, Polygons, and islands. Islands are all connected polygons in the UV. * 1 - Edit Vertices * 2 - Edit Edges * 3 - Edit Polygons * 4 - Edit Islands * Right Click in the UV view to offer other useful tools such as : * Align X or Y * Merge to join vertices * Split Selection to separate elements. ### Applying Transform A common issue that may come up is that the Smart UV Project proportions don’t look correct when applied. For example, a UV might be a square when it should be a rectangle or vice versa. This could be because the asset doesn’t know it has changed from the previous shape. This is due to the transforms not being applied. To fix this : * Go to Object mode * Use Object > Apply > Scale, or use Ctrl + A and select scale. If you select Smart UV Project again, this issue should be fixed. As this is a tileable texture, you can scale the UVs as you see fit and the texture will continue without issue. Note that you could scale the texture in Unity as well if the texture is too small or big in the space. ### Multiple Materials It is possible to create an asset with multiple materials if need be. This is not the best for performance reasons in a WebGL space as each material is a draw call, but it’s perfectly fine when starting to learn. * Go to Object Mode * Add another material with the + symbol in the materials properties panel. * Rename the Material * Apply your textures or colors the same way you did on the last material in the Shading tab at the top. * Select all the polygons on your asset to which you want to apply your second material in Edit mode. * Select the 'Assign’ button under the materials list in the Material Properties panel. There are, of course, many ways to edit the UVs, but we’ll stick with simple edits for now. ### Summary In this tutorial, we went over the meaning of Unwrapping UVs, and how to do it, we also looked at how to create and assign single or multiple materials. # Importing Assets into Unity Importing and applying materials to assets in Unity. {% embed url="" %} Importing Assets into Unity Video {% endembed %} ### Importing External Assets * Drag and drop the assets from a File Explorer into the Project window. This will *copy* the assets into the project rather than move them. * Alternatively, right-click on the folder in the Project window and use ‘Import New Asset.’ where you would like to store the asset ### Adding a textured Material It is ***strongly*** recommended to use textures that are to the power of 2. Examples include 16 by 16, 64 by 64, right up to 2048 by 2048. If need be, you could also use a texture that is 64 by 128 or 1024 by 2048. * Select the Material in the project folder you would like to apply them to. If you need to create one, right click in the target folder, go to 'Create', and then 'Material'. * Drag your textures into the box to the left of the respective category on the material. Using the standard shader has the Metallic on the Red channel of the texture and the smoothness on the Alpha channel. Note that if you add a normal map texture, it will come up with a warning. Make sure to set the texture itself to a Normal map texture by either : * Click on the Fix Now when you apply it in the material or, * Modifying the texture type on the texture itself at the top of the Inspector window. Emissive can also use a texture, but the amount it glows is still based on the Intensity setting. ### Preparing your assets It is a good idea to set up any imported meshes to use it's target material by default. This only works if you have applied material slots to the asset in the external application. * Select your 3D asset in the Project folder, and then look in the Inspector. * Select the ‘Materials’ tab at the top. * You can apply the materials in the imported slots as needed. * Hit ‘Apply.’ ### Applying materials to Models * Drag and drop materials onto the asset in the Scene or the hierarchy, this will only apply to that one asset. * It is possible to import materials from external programs, but the easiest and best approach for this (without using plugins) is to create your materials in Unity directly. Simply name your material *slots* in your external application as needed, and import them. # Adding Colliders {% embed url="" %} Adding Colliders in Unity Video {% endembed %} If you don’t want your users to constantly fall through the floor or be able to walk through walls then you will need colliders. A collider is simply a component that makes assets ‘solid’ and unable to be moved through. ### Collider Types The simplest colliders are the box collider, Sphere collider, and Capsule collider. For more complex objects, you can use a Mesh Collider. The box, sphere, and capsule collider are simple colliders and, therefore, much better for performance. A mesh collider is more complicated and, therefore, slower in performance. However, there are ways to improve this, and we will go over that later in the tutorial. ### Setting up Simple Colliders * Select the asset you would like to add the collider to. * Go over to the inspector and type the part of the component you want. ‘Box’ or ‘Collider’ is a good example. * Modify the collider with the ‘Edit Bounding Volume’ button here. It is also possible to edit the parameters directly if need be. You can apply a collider on the asset itself or on an empty game object. Adding more than one collider component to an asset is also possible. If you apply a collider to an empty game object, you can rotate it. Rotation is not possible on the component itself. ### Setting up a Mesh Collider You can add a mesh collider in the same way as other colliders by selecting the asset and adding the Mesh Collider component. If you apply the Mesh Collider on an asset with a model, the mesh on the asset will be the collider. This is fine for simple objects, but if you have an asset with many polygons, you will want to make a simplified version of the asset so the space has less information to process. You may also *want* a different mesh as a collider, such as a ramp instead of stairs, so moving up them will be a smoother experience. For this, you must make a modified version of the same asset in your asset creation tool. The modified version is purely the collision detection and will not be visible. Make sure to reduce the polygons as much as possible for this. Once imported into Unity : * Drag the *mesh* (not the asset) into the Mesh slot on the component. * Expand the asset in the Project folder, the mesh can be found with a little grid next to it. The asset itself cannot be dragged into the mesh collider slot. * You can apply the mesh collider to an empty game object for more control over the asset. If the Mesh collider doesn’t align with your main mesh, ensure both assets have applied the transform similarly and that the pivot is in the same location in your 3D Creation tool. You may find that deleting and reapplying the mesh collider component will also work. ### Summary In this tutorial, you have looked at adding colliders to prevent your users from moving through the space's assets. # Adding Lighting {% embed url="" %} Adding Lighting in Unity Video {% endembed %} Lighting plays a huge part in the appearance of a space. The issue is that real time lighting, or lighting that is processed every frame, is very expensive. Getting a balance between lighting quality that runs well is an art in itself. Note that it is recommended to use no more than 4 realtime lights in a space. Usually 1-2 is enough. We will take a quick look at alternative approaches to more performant lighting towards the end. ### Introduction to Lights in Unity Unity has a number of light types to use in your scene. These include the following : * A *Directional Light* is the most performant. And is light coming from one direction. * A *Point Light* is light coming from one point. * A *Spot Light* is a light that looks like a spotlight. * An *Area Light* is more like a rectangle or oval of light. Note that this light is only used for Baked lighting which we’ll get into with the Lightmapping section. ### Adding and editing Lights You can of course edit the directional light that is present in the Mona SDK space. Otherwise you can add your own. * Right click on an asset location in the hierarchy window. * Under ‘Light’ you will have access to the lights mentioned. Once you have added the light you can use the standard position and rotation tools, as well as modify its settings in the Inspector. Each light is slightly different but most have the same aspects such as Color, Range, Mode, Intensity, and Shadow Type. Color is exactly that. What color is the light. Range, depending on the light type, is how far do you want the light to travel. Intensity is how strong the light is. Shadow type is what kind of shadows, if any, does the light project. No shadows are the most performant of course. Hard shadows are a *little* more performant than soft shadows, but don’t look as nice. Mode is used when setting if the light is Realtime. Baked is used for lightmapping. Mixed is both realtime and baked. There are others but we will save those for another time. ### Lightmapping If you want an even better lighting result, that doesn’t cost as much in performance, you can use Lightmapping. Lightmapping is a technique that creates, or bakes, light information into textures. Spaces will run better and look great, at the expense of filesize. You may recall using UVs to assign where the texture goes on an 3D model, lightmapping will bake the *light* information into a *2nd* UV map that you can make manually in your 3D Creation tool, or Unity can create it for you. The only issue with lightmaps is that they are static, meaning they cannot change. So dynamic objects, such as the avatars or animated objects, do not cast a shadow in realtime with this lighting information. A good compromise is creating a single directional light that casts a shadow, with much more complicated lighting being baked into the lightmap. This is the best of both worlds. ### Light Probes Note that only realtime lights will light dynamic objects. Lightmaps will not be considered. You can work around this by adding light probes. Light probes can be placed around the space to take in the light information at that point in space, and light dynamic objects accordingly. This would allow a space that has no realtime lights to light dynamic objects properly. ### Reflection Probes The last thing to add into this section, which is on par with lighting but not exactly part of lighting, is reflection probes. Realtime reflections are very expensive, and generally not recommended to use in WebGL based spaces at all. It is best to use reflection probes to once again bake the information into a texture to reflect onto assets in the space and keep performance at the cost of filesize. Reflection probes use the physics based rendering techniques in the materials to show polished and metallic surfaces well. ### Summary Lightmapping, lightprobes, and Reflection probes are not recommended for your first space due to the complexity that they bring, but they are good to know about for when you feel like creating better visuals in your space. For more information on lightmapping, go to [Lightmaps (Unity Lightmapper)](/create/building-spaces/improve-your-space/lightmaps-unity-lightmapper). For more information on light probes, go to [Light Probes](/create/building-spaces/improve-your-space/light-probes). For more information on reflection probes, go to [Reflection Probes](/create/building-spaces/improve-your-space/reflection-probes). In this tutorial we looked at the different light types, how to add them to the scene and how to modify them. We also *introduced* lightmapping, light probes, and reflection Probes so that you know what to look for when you are ready to take your lighting to the next level. # Adding a Custom Skybox This tutorial will cover how to customize the skybox. {% embed url="" %} Adding a Custom Skybox in Unity Video {% endembed %} One of the first things that people will notice in a space is the default unity skybox if you have a space that is not purely an interior space. One way to get around this is to add a custom skybox that better suits your needs. ### Downloading a Skybox There are plenty of resources out there that offer skyboxes you can use for free. One such place is [polyhaven.com](http://polyhaven.com) or [Skybox AI](https://skybox.blockadelabs.com/). It is very easy to go to the site and download a skybox that better suits the atmosphere that you would like in your space. In some cases the skybox will affect the lighting of the space. Keep that in mind when finding an image you like. It is best to download it directly into your project so we don’t have to move it later. ### Setting up the texture * Select the texture in the project and then look in the inspector. * Under Texture *shape* select ‘Cube’. * Hit apply at the bottom. Once done, we can create a material to put the skybox texture on... * Right mouse click on the folder you would like to add the material and select Create / Material. * Click on the material and set the Shader at the top to Skybox / Cubemap. * Drag and drop your skybox texture into the Cubemap (HDR) slot on the material. * Modify material settings such as Tint Color, Exposure, and Rotation if needed. Once the material with the skybox texture is created... * Drag and drop your skybox material onto the default skybox in the scene. # Setting up Canvases In this tutorial, we will go over adding canvases to your Mona Space. {% embed url="" %} Adding Canvases in Mona Video {% endembed %} Canvases allow you to add 2D media such as images or live streams in the space, even after the space has been minted. Canvases can also link to external websites once interacted with. Mona currently supports .jpg, .png, and public .m3u8 links for streaming on platforms like [LivePeer](https://livepeer.org/). Canvases can have an Artist, title, and a description applied to them. Canvases also allow a link to an external website. This could be linked to the page to buy an NFT if displaying an NFT, but could be any website such as your portfolio, an online store, or a company website. The Canvas model can automatically scale down to the image vertically or horizontally, or the image will be cropped to the canvas model vertically or horizontally. The bounds of the Canvas will always be the maximum size of the canvas regardless of which type you use. It is possible to add a frame asset to your canvas, but at the moment, frames will *not* scale. So make sure that the canvas doesn’t scale to the image. ### Adding a Canvas A Canvas asset has very specific requirements for Mona to know that it is a canvas. * Under the \_MonaAssets folder in the project window. There is one Canvas asset available. * Drag the CanvasPrefab onto the Artifacts asset in the Artifacts scene. This Artifacts object also has an ‘ArtifactsLayer’ tag. If this asset is deleted, renamed, or the tag is removed, the space will not work correctly. {% hint style="warning" %} If your canvas is not under the Artifacts gameobject, your space will not work correctly. The best way to test this, alongside the other scenes in the space, is to collapse all the parent gameobjects to make sure nothing is outside of them. {% endhint %} ### Canvas Tags * The Canvas asset, or 'CanvasPrefab' gameobject, does not require a tag. It can be renamed as you see fit. * The Canvas Asset named ‘UniqueCanvasAsset\_1’ requires the ‘Canvas’ Tag. This also must be named differently from other canvas tagged assets. * The Spawnpoint asset requires the Spawn Point tag. * The FrameAssets gameobject and all assets within it should not have tags. ### Canvas Hierarchy #### CanvasPrefab The Canvas object itself, sometimes called the Canvas Prefab, can have any name, but of course, having it named in a useful way will make things easier for you. #### Canvas asset or 'UniqueCanvasName\_1' asset The ‘UniqueCanvasName\_1’ asset is the key asset for Canvas. If you are using more than one canvas the name of this asset must be unique; otherwise, the QA tool will throw an error. This name will also be used to reference which Canvas you apply the media to, so it’s good to use something descriptive. You will note that this asset also has the ‘Canvas’ tag. This asset also *requires* a mesh collider. Other colliders *do not work*. This collider is what the player recognizes as the Canvas to click on. Make sure that no other colliders are covering this asset, otherwise, the player will not be able to interact with it. This collider is *also* a physical collider, but as it is a mesh collider it only applies from one side. Make sure that the canvas polygon doesn’t align exactly on another surface otherwise you will get z-fighting, or the effect of polygons fighting to be in front. #### SpawnPoint Make sure the Spawnpoint is in a position that makes sense, such as not within a collider and has a collider to land on. #### FrameAssets The FrameAssets folder is where you can put your assets that represent the frame of the Canvas. ***This is completely optional.*** As a reminder, Frame assets do not scale, so if you have a Scale to Canvas approach on the Mona Wallet, it will not look correct. If you are adding colliders to your frame assets, make sure that they do not cover the Canvas asset itself, otherwise, the Canvas will not be able to be interacted with. ### Scaling the Canvas It is best to scale the canvas tagged asset, or the UniqueCanvasName\_1 asset, itself. Do *not* scale the parent, as this will reduce potential issues. Select the Canvas tagged asset and scale as needed. ### Z-Fighting Make sure to keep the canvas away from the polygons behind it otherwise you might get Z-Fighting, or polygons fighting to be in front. Just move the canvas tagged asset a little in front of the polygons behind it. ### Testing When you build to the playground your canvas should change to the Mona Coming Soon image. If not then make sure to jump into the Mona Discord support channel to help you out. # Uploading to your Wallet In this tutorial we will cover how to setup your space on your Mona Wallet. {% embed url="" %} Uploading your Space to your Mona Wallet Video {% endembed %} Now that we have a space you can show others what you have done! We can do this by adding a Wallet to Mona such as Metamask and then adding the space to a Wallet Draft Slot. ### Adding a digital Wallet to Mona Metamask is a digital wallet that you can add to your Browser. Mona also allows Wallet Connect and Delegate Cash if you’d prefer. For the most up-to-date approach to registering to [Metamask](https://metamask.io/), [Wallet Connect](https://walletconnect.com/) or [Delegate Cash](https://delegate.xyz/), go to their site for more information. ### Connecting your Wallet to Mona * At the top right of [Monaverse.com](https://monaverse.com/), select the 'Sign In' button and then select your desired Wallet type. * Enter your Password. * Make sure to sign the signature request if needed. ### Uploading your space to your Wallet Once you are signed in, you have access to the Collection, Creations, and Draft categories. * Click on the Drafts tab. * Click on 'Create > Space'. * Enter the details for your space such as : * Name * Artist * Short description (required) * Long Description (optional) * Select which properties best represents your space. * Select ‘Continue’ at the bottom. The following page is where we can upload all the assets for your space. * Drag and drop the Playable files you have been using in your playground so far onto the Playable files section. You can also click on Select a File and add the Playable files folder. This approach will have a popup to confirm that you want to add the files within that folder. * Select ‘Upload’ if the number of Portals, Artifacts, and canvases seems correct. * Click on the ‘Preview’ link to share with others by copying the URL in the preview space and sharing it with those you would like to invite. ### Adding a Splash screen It is possible to edit the image that your space displays when loading with the Preview Image. We recommend creating a 1920x1080 image that does *not* include any Avatars or desktop/Mona UI for best results. One approach to do this is the following : * Load the space in your browser * Use the following hotkeys to prepare your shot * V - Toggle First person * U - Hide Mona UI * N - Hide the reticle, or dot in the middle of the screen * F11 to go full screen. * Use the print screen, or Alt print screen keys to copy the desktop onto the clipboard * Use your preferred Image editing software to edit and make sure it’s at the right resolution eg. 1920x1080. * Drag your saved image onto the Preview Image section in your wallet draft. ### Setting up Portals, Canvas, and Artifact links If you have added Portals, Canvases, or Artifacts you can update their information on the draft. For more information on these, use the following : * Portals -[Portals](/create/building-spaces/create-your-space/portals#linking-portals) * Canvases - [Add Images to a Canvas](/collect/own-a-space/add-images-to-a-canvas) * Artifacts - As an example, let's look at a canvas. * Click on the Link Button next to a Canvas. * Add the Title, Artist and description. * Add a website to link to when clicked on. This is optional. * The link requires the http\:// at the start. * Add what kind of asset you are going to link, such as an Image or a Live Stream. * Note that only certain hosts will allow Images to be linked such as dropbox, [Web3.Storage](https://web3.storage/), or [Imgur](https://imgur.com/). * Add whether the canvas will scale to the image, or the image will crop to the canvas. ### Mintable Files and Preview Video The Mintable files and Video Preview are used when you are planning to mint your space so others can buy them, can find the space on the mona website, and other benefits. For more information, go to [Mint Your Space](/create/building-spaces/submit-your-space/mint-your-space) or [Creating an Image & Video Preview](/create/building-spaces/submit-your-space/creating-an-image-and-video-preview). ### Summary In this tutorial we looked at getting a digital wallet to connect to Mona, connecting your wallet, and then uploading your space to a Wallet Draft to share with others. And that’s it for your first hour with Mona! You have created your first space that you can share with others easily. Once comfortable with your current skillset, the next thing to do is look into our documentation that goes into ways to push your space to the next level, such as lightmapping and light probes, or adding interactivity to your space with Reactor or Visual scripting. There is so much you can create with Mona! And we look forward to seeing your creations! # Building Spaces This page goes over a summary of the best way to use the Mona Docs depending on your skill level. Whether you are completely new to 3D building or coming in from a background in Architecture or 3D Game Design, this section will help you become a Mona builder quickly and easily. Follow these steps to get going and remember you can always jump into [Discord](https://www.mona.gallery/discord) for more help or get your questions answered. Our YouTube [Tutorials](https://www.youtube.com/playlist?list=PLs8yzTDcfgnGTK0sUVhVO75SChITz70U_) are always here as well. If you are a beginner to building 3D spaces for WebGL, we highly recommend reading [Space Limitations](/create/building-spaces/space-limitations) first, as this will go over some of the important elements of building a space that looks good and runs well in a WebGL browser environment. After that, jump into the [Create your Space](/create/building-spaces/create-your-space) category to learn all you need to get a Mona Space up and running! Once you get comfortable with the basics of creating a space you can look at[Improve your Space](/create/building-spaces/improve-your-space), and [Optimise your Space](/create/building-spaces/optimise-your-space) to take your space to the next level in both style and performance. # Space Limitations This page goes over the limitations that WebGL spaces will have, that will affect how you create your spaces and/or VRM avatars. Understanding the basics of Game Development will help you take your builds to the next level. Without this, your space may not run well and therefore be a poor quality user experience. As much as the following is important it would not be expected for you to understand fully until you have made *at least* several spaces. This should be a fun and creative experience for you, so don't feel as if you should understand everything immediately. Every space you make will offer an opportunity to learn and grow your skillset as you improve over time. Feel free to jump into our [Discord](https://discord.com/invite/gcrGHzTerU) to learn from our amazing community and have a look at our [YouTube](https://www.youtube.com/@monaverse) tutorials and workshops to learn more. ## The Basics One of the biggest challenges when it comes to developing video games is the ability to create assets with limited resources. There will always be a balancing act between **Quality vs. Performance vs. File size vs. Time.** ***Since Mona runs on a browser using WebGL***, the building experience is similar to video game development but with more limited resources. This means that learning game developers' tools to create high quality environments that load quickly and run smoothly. ### What is WebGL? WebGL, or Web Graphics Library, is a JavaScript application programming interface, or API, for rendering interactive 2D and 3D graphics within any compatible web browser without using plug-ins. WebGL provides a platform independent means of creating interactive graphical applications on the web. ### WebGL vs. Standard Video Game Design WebGL brings the abilities of standard video games to the web, making it more accessible for users. Standard video games can only be accessed through PCs, consoles, or mobile devices in a client based environment that users would have to download. WebGL is more accessible as you can simply send a web address to others for them to explore and interact with your space. With this, however, comes some limitations with the rendering capabilities of WebGL based browsers creating a few more considerations to take into account when building. ## The Building Process Most assets in a space will be built outside of Unity in a 3D Creation program. These include Blender, Maya, 3DStudio MAX, Revit, or Rhino to name a few. If you are new to development, we recommend the following applications with alternatives: * Blender for Asset Creation (Maya, 3DStudio MAX, Rhino, Gravity sketch, etc.) * Substance Painter or Photoshop for Texturing (Gimp, Blender, etc) * Blender or Unity for Animation (Maya, 3DStudio MAX, etc.) * Unity for putting it all together For more information and tips on other tools to use for Asset Creation, Texturing, and Animation, reach out to our [Discord](https://monaverse.com/discord)! We also have a ton of workshops and tutorials on the [Mona YouTube](https://www.youtube.com/@monaverse) channel. ### Let’s talk about Polycount Polycount is the total number of polygons (or squares/triangles) found in a three-dimensional model. This is one of the most important elements to reduce for assets to run smoothly in your space. Please note that some tools like Rhino (before version 7.0) and Revit don’t have tools to optimize this, but polycount should always be a big consideration. #### Take a look at this graphic. ![](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FFGP7PWcbLEUQSKxmGz4g%2Fimage.png?alt=media\&token=fb5f037a-52ce-41a3-ad6b-e12b4434c0fe) Notice that when these assets are smoothed, the main indicator of the polycount is the edge or silhouette. Use this as a guide when creating your assets. ***You should aim to build assets that look similar to the two right spheres in the image above***. Including assets with a high polycount in your space (like assets on the left side of the image) will considerably affect your space's performance and file size. The overall goal is to lower the polycount in your space as much as possible while still maintaining quality (within reason). There may need to be compromises made, for example: Curved assets may need to have less polygons than you would like due to the increased polycount. Creativity comes in for assets with a lot of detail, like sculptures, characters, etc., but there are some tricks for this, such as baking or creating assets using [Broken mention](broken://pages/DcxMDs8aiUViVwko7BKD). Some questions to take into consideration when determining how high/low the polycount of an asset should be are: * How big is the asset in the scene (how big will it get on the screen)? * How important is the asset (is it a 'Hero' object like a main sculpture or a vase in the corner that no one will look at) * Will there be just one or multiple of these assets in the space? Answering these questions will also help determine the polycount, materials, and textures to use when building. If you would like more information on techniques to make different assets, you could check out the following workshop on [WebGL Asset Creation](https://www.youtube.com/live/a-xLtAIPIwM?feature=share). ### Introducing Materials & Textures **Materials** define the visual properties of an object, such as its color and whether it is dull, shiny and/or bumpy to name a few. A texture is a 2D image that can be applied to the material. **Textures** are particularly important because they can take up file size very easily. Mona spaces (or Playable Files) **must be below a file size of 250Mb**, so the texture is an important element when balancing Quality vs. Size. Textures should be created in factors of 2, like 16x16 or 32x32, all the way up to 2048x2048. We don’t recommend going above 2048x2048 unless it’s for something as big or important as the skybox (a texture that covers the entire outside of the space). Here is some vocabulary to get started with types of textures : #### ***Diffuse / Albedo / Color*** This is the color of the material. The texture can include transparency, also known as alpha. This could just be a simple color with no texture needed. #### **Metallic / Smoothness** Materials can look metal, shiny, or matte using the Metallic/Smoothness parameters. If using a texture in Unity, Metallic is the Red channel, and Smoothness is the Alpha channel. You can also set these manually with sliders in the material properties. #### ***Normal*** Normal maps are a special kind of texture that allows you to add surface detail such as bumps, grooves, and scratches to a model, which catch the light as if they are represented by real geometry. A common method to create a normal map is to project, or *bake*, the high polygon asset details onto a low polygon asset texture. #### ***Emissive*** Emissive is a color/texture that makes a material look like it’s glowing. The bloom effect in Mona will react to this feature of the material. Emissive can also affect the lighting of a space when using lightmapping. #### Miscellaneous Many other parameters can be adjusted to the Standard Shader (or what makes up the material), like tiling, Offset, etc., but the ones mentioned above are the most common. ### All about Drawcalls A large consideration for building, similar to Polycount, is the number of drawcalls in your space. Drawcalls are requests made by the CPU (Central Processing Unit) to the GPU (Graphics Processing Unit) to render a specific object or set of objects in a 3D scene. Each draw call contains information about the object's geometry, materials, and other properties needed to display on the screen. The more draw calls made, the more work the GPU has to do, and the slower the space may be. One of the most common reasons you have a high amount of drawcalls is the amount of *unique* materials you have in a space. Let’s put this into context: * If you have one mesh with one material, that is *one* drawcall. * If you have one mesh with 5 different materials, that is *five* drawcalls. * If you have 5 meshes using the *same* material, that is *one* drawcall. * If you have 5 meshes, each with five materials (the same five materials), that is 5 draw calls. * If you have 5 meshes, each with five different materials (so 25 materials total), that is 25 draw calls. There are tricks you can use to reduce drawcalls. Creating assets that use less materials is a good start. And *batching* can help to draw all the objects in your space with the same material together, reducing your total number of drawcalls. Unity can do this for you if you set it up correctly. For more information on this go to [Optimizing your Space](/create/building-spaces/optimise-your-space/optimizing-your-space#optimising-drawcalls). This information isn’t imperative for simple spaces but it is important for more complex ones. Your first space will probably not run perfectly, but with every space you make, you can learn to improve and create the best spaces for everyone to enjoy. For more information on space optimization, go to [Optimizing your Space](/create/building-spaces/optimise-your-space/optimizing-your-space). ### Lighting Realtime lights, or lights that cast light on a frame by frame basis, are very processor heavy and will slow down your space significantly, especially on low end systems. To greatly improve the quality of your space without slowing the space down you can *bake* your lighting into the scene as a texture, this process is called Lightmapping. The only limitation on this is that these lights cannot be used for dynamic objects such as avatars or animated objects. That said, using [Light Probes](/create/building-spaces/improve-your-space/light-probes)to light your dynamic objects can balance that out significantly. #### Realtime Lights (*Maximum of 4)* \+ Can be dynamic\ \+ Affects dynamic objects (like the avatar)\ \- Expensive on processor (slows down the frame rate)\ \- Shadow quality is usually quite low (high quality is too expensive) #### Baked Lights \+ High quality (depending on resolution etc)\ \+ Not processor intensive\ \- Not Dynamic Therefore, it is generally recommended to use 1-2 real time lights in your space and do the rest with lightmapping. For more information on this you can go to [Lightmaps (Unity Lightmapper)](/create/building-spaces/improve-your-space/lightmaps-unity-lightmapper). There are many ways to create spaces, it’s just about finding what works for you and your build. Remember, we’re here to help and can do so in the [Discord](https://monaverse.com/discord)! # Create your Space Get Started has all the basics of creating a space. In the sub pages in this category, we will go into more detail on each element that your space requires. ### WebGL Overview WebGL based spaces are different from standard game that have their own client that you need to download, and this page covers some of the things that need to be kept in mind in order to make sure your space looks great *and* runs well. ### Space Overview This page goes over the requirements of a Mona Space in more detail such as hierarchy, portals, spawnpoints etc. ### Colliders Colliders are needed so that the avatars do not fall through the floor or walk-through objects in your space. This doc goes over the different kinds of colliders and best practices of using the more complex ones. ### Portals Portals allow users to teleport from one space to another minted space. This doc goes into detail on how to set them up correctly. ### Canvases Canvases allow builders/owners to display different media types that can be changed after the space has been minted. This doc goes over how to set them up correctly. ### Artifacts Artifacts are tools that allow a builder/owner to hyperlink objects in a space. This doc goes over how to set them up correctly. ### Add a Custom Skybox This doc goes over how to add a custom skybox to your space. ### Optimizing your space This doc goes over different methods to help optimize your space, expanding on some of the elements discussed in the WebGL Overview doc. ### Testing your Space This doc goes over how to test your space in Mona. ### Troubleshooting This doc has a list of common issues that you may find when building a Mona Space. # Space Overview ## Scene Hierarchy To make things work correctly in Mona there are some factors that need to be *strictly* followed in order to reduce issues and increase functionality, an example hierarchy is shown below. Note that this is not what is found in the template SDK, just examples of Mona assets that you may want to use. ![Hierarchy example](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FqxvXKWl8hLWVJPRNWLtw%2FOldHierarchy.png?alt=media\&token=2bf6dd8b-fced-4790-8c90-8c2d16418f57) Let's go into each section in detail. ## Space Hierarchy Your **Space** scene should be at the top, and set as the Active Scene (right click - set active scene if it isn't by default). All environment assets that you would like to be minted with your NFT Space should be inside the "Space" GameObject (also commonly called the Space Layer). These objects cannot be edited after the Space has been minted. If you have an Error saying there is more than one root object then there is a high chance that your hierarchy is different from the following. ![Space Hierarchy example](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F9HCKwy8dkdv3OkZEn0aD%2FSpaceHierarchy_01.png?alt=media\&token=35a9b822-2f3f-4cb4-9448-0c1eb63a2cf1) {% hint style="danger" %} Do NOT delete or rename the Space Scene, or Space GameObject. If the Space Scene or Space gameobject (with Space Tag) are not present, it will not work in Mona. {% endhint %} Make sure that your space looks like the following if you collapse all the assets. ***All objects need to be a child of the Space, Portals, or Artifacts Gameobjects**.* If there is anything else on the parent level, ***your space will not build and also fail QA***. ![Collapsed Hierarchy](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FuQdXFIRx8f9Jgj9dialu%2Fimage.png?alt=media\&token=5de53030-fc9e-4df0-805c-9628ae75cb54) ## No Cameras You shouldn't have a Camera in your scene when building your files for Mona. Make sure to delete them. There are some situations where you may want to use a camera to override the Users experience, but initially it is recommended to delete any Cameras in the scene. ## Player Spawn Point The spawn point is the Default location for a Player to spawn when connecting to the Space. There is a Spawnpoint in the Template scene, but if you delete it the Spawnpoint prefab can be found in the \_MonaAssets folder in the Project window. It is best to keep the Spawnpoint in the same location in the hierarchy as the image above. If it is anywhere else there is a higher chance the spawn location will default to 0,0,0. ***The Spawnpoint Avatar gizmo needs to be blue, otherwise it will fail QA.*** Avatar Gizmos will turn red when they are within another collider, or not above a collider to land on. It is recommended to keep all spawnpoints a little above the ground to make sure there are no spawning issues. This applies to all portal, Artifact and Canvas spawnpoints as well. If gizmos are turned off using the Gizmos button at the top right of the scene window, you can use the Pivot and Local mode for your gizmo set with the Position tool selected (at the top left of the Unity window). The green arrow is up, and the blue arrow is forward on the default gizmo. If there is no Spawnpoint in the scene or it is setup incorrectly, the Player will spawn at the 0,0,0 location in the Space. ## Portals Portals allow for easy navigation between Spaces inside of Mona. These function as a hyperlink to other *minted* Spaces within the Monaverse. Portals can be used to form larger interconnected worlds. Portals can look like anything you want, although the most common is something like a door or portal. ***Portals are optional, and require a specific hierarchy to function correctly.*** For more information on Portals, you can go to [Portals](/create/building-spaces/create-your-space/portals) {% hint style="warning" %} If you delete all Portals, make sure to keep the Portals Gameobject under the Portals Scene otherwise it will fail QA. {% endhint %} ## Artifacts ***The Artifacts Scene/Layer keeps all the objects that can be modified/edited in some way after the space has been minted.*** *(Default) Artifacts* allow users to open external websites from within the Space. Perhaps you want to create a virtual store with a 3D representation of a product in your Space, that links to the online store product page. Another use might be some furniture that you want to add to the space, but want the Owner to be able to remove it at a later point in time. Artifacts are completely optional. If used, they require a specific hierarchy to function correctly. For more information on Artifacts, you can go to [Artifacts](/create/building-spaces/create-your-space/artifacts) {% hint style="warning" %} If you delete all Artifacts and Canvases, make sure to keep the Artifacts Gameobject under the Artifacts Scene otherwise it will fail QA. {% endhint %} ## Canvases *Canvases* are also considered an Artifact in that they can be modified or taken out after the Space has been minted. Canvases allow a builder/owner to display external media types such as images in the Space. Currently .jpg, .png, and .gif formats are supported. Livestreaming is also possible with video coming soon. These media URL links *can* be updated after the Space has been minted. As Canvases can be linked to external sites too, it might be used to showcase art in a Mona gallery that links to the marketplace page of the NFT. For more details on how to setup and use Canvases, you can go to [Canvases](/create/building-spaces/create-your-space/canvases) {% hint style="warning" %} If you delete all Artifacts and Canvases, make sure to keep the Artifacts Gameobject under the Artifacts Scene Otherwise it will fail QA. {% endhint %} ## Creating Assets Most assets are made in an application that can export as .fbx. These include : * Blender * Maya * 3D Studio Max * Revit (will usually need optimisation) * Rhino (will usually need optimisation) * Gravity Sketch * and many others... Assets needs to be less complex as they are used in a web browser. ***The larger the space, the simpler the assets will need to be.*** So you will need to keep a number of things in mind when creating your space such as : * Polycount * Number of materials * Size of textures * Limited real time lights (use lightmapping when possible) * many, many more... If you are designing in the hopes of using a standalone VR headset or Mobile (both of which are not supported just yet) then this will be *extremely* important to keep in mind and will change your design directly. So your target device will decide how you design your assets. ## Importing assets into Unity There are a number of ways to import your objects into Unity. 1. Save your assets into the Project folder directly. 2. Right mouse click on the target folder in the Project window and select Import new Asset... 3. Drag and drop your assets from Explorer into the target folder in the Project Window. It is generally recommended to use .fbx to import 3D assets into Unity. .obj and .blend files are supported, but .fbx is simplest and has less issues with the importing process. ## Setting up your imported assets There are a couple of things you could / should do when importing your objects into Unity to save time later. These are optional however. 1\. If you plan on using lightmapping (which we *highly* recommend) and want Unity to do the Unwrapping of the objects second UV Map to do so (so you don't have to do it yourself in another application), click on the Model in the Project window. Select Model at the top of the Inspector window, and turn on *Generate Lightmap UVs (towards the bottom)*.\ This is a pretty common step to forget, so it's good to get in the habit early.
![Setting the Generate Lightmap UVs ](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FsEIm1CZ8XXqVh40qqYRB%2F1_SetGenerateLightmapUVs.gif?alt=media\&token=44cd35fa-0266-4cdb-b6cc-91d9c03e3ac6) 2\. If you have Materials in Unity already created, you can make sure your model uses them by default by clicking on the model in the Project Window. Select *Materials* at the top of the Inspector window, and drag/Drop your materials into the correct slots for your object. These can be changed in the scene, but these are the default materials for your object and saves a lot of time when you are trying to update a lot of the same object in the scene. More information on creating your space in Unity (such as lightmaps, animation, reflection probes etc can be found in the documentation to the left under unity Development). ## Colliders Colliders are used to have the player avatar not fall through the floor or walk through walls and objects. There are several collider types you can use : * Box collider (used for most situations, light and quick on the processor) * Sphere collider * Capsule collider * Mesh Collider As tempting as it is to use the Mesh Collider on all of your objects this is *not* recommended as this adds considerable load to the space. If you must use a mesh collider, ***make a very simplified version of your object and use that in the Mesh Collider component.*** ***For more information you can go to*** [Colliders](/create/building-spaces/create-your-space/colliders) ## Lighting ### Realtime lighting As noted previously, real time lighting is quite processor intensive and is recommended to keep to 1-2 real time lights unless you understand how to optimise heavily. Realtime lights allow dynamic objects (such as the player avatar or animated objects) to have shadows update in real time. A Directional Light is included in the Template scene, however to add a new light to the scene you can add a Directional Light, Point light, or Spotlight to the scene by : * Right click on the target location in the Hierarchy window, go down to Light, and select which light you would like * Use the GameObject menu and go down to Light, and select the light you would like. This method places the light at the bottom of the Hierarchy however. ### Lightmapping / Lightbaking The best way to get good lighting is by using Lightmapping, which 'bakes' the light information into the scene for a much smaller cost to processing. You can find more information about how to do Lightmapping using the Unity Lightmapper [here](https://docs.monaverse.com/create/building-spaces/improve-your-space/lightmaps-unity-lightmapper). Realtime lights can be turned into Baked lights easily using the Mode pulldown on the light itself. For more information on Lightmapping in Unity, you can go to [Lightmaps (Unity Lightmapper)](/create/building-spaces/improve-your-space/lightmaps-unity-lightmapper) ## Reflection Probes Reflection Probes are used to fake reflections in a Space. As Mona can use Physics based Rendering (or PBR) for materials, you can get amazing results with reflection probes that represent real world results of materials such as shiny metal, through to buffed glass. For more information on how to create Reflection Probes, you can go [Reflection Probes](/create/building-spaces/improve-your-space/reflection-probes) ## Lighting Probes Lighting probes are a tool that allows dynamic objects to be lit more accurately from baked information such as lightmaps. All your fantastic baked lighting can be applied, in a way, to dynamic objects like the player Avatar so that it blends in with the environment better. For more information on how to create Light Probes, you can go [Light Probes](/create/building-spaces/improve-your-space/light-probes) ## Animation Animation can be done within the 3D Asset creation tools like Blender and Maya, or within Unity itself. There are pros and cons to each approach, so use whichever is more comfortable for you. For more information on animating in Unity you can use the tutorial [Animation in Unity](/create/building-spaces/improve-your-space/animation-in-unity)or if you want to import animation from external applications, go to [Importing Animation](/create/building-spaces/improve-your-space/importing-animation). ## Interactivity It is possible to create interaction using Visual Scripting or the Reactor tool. Visual Scripting allows you to create code using Nodes very similar to coding whereas Reactor gives you control over the Animator component using events like walking into a collider or interacting with an asset. You can find more information on Visual scripting at [Visual Scripting](/create/building-spaces/adding-interactivity/visual-scripting). And you can find more on Reactor at the following : [Reactor Overview](/create/building-spaces/adding-interactivity/mona-reactor/reactor-overview). ## In Summary... In this page we covered the *basics* of the following : * Added a player Spawnpoint * Added Portals (optional) * Added any artifacts including the Default artifact or Canvas artifact (optional) * Imported and arranged all your assets * Added Colliders * Set up the lighting, both real time and lightmapped/Baked * Added reflection probes * Added Light probes * Added Animation * Added Interactive elements with Reactor As noted, many of these elements have more details. Let's get into those first. Starting off with Portals! # Colliders This page will go into Colliders and how to best use them in your space {% embed url="" %} Colliders video Tutorial {% endembed %} Colliders are used in Unity to make sure the player doesn't run or fall through your environment. Colliders are also used for other functionality, such as what the user can 'see' such as the Canvas, Artifact, or Portal. Colliders are referred to as *Bounding Boxes* as well. There are four main types of Collider in Unity : * Box Collider * Sphere Collider * Capsule Collider * Mesh Collider ### Adding a Collider to an Object * Applying a collider is as simple as adding the component to your object and modifying it to cover the required area. You can type in the Search bar to find it faster (box, sphere, capsule, or mesh) or 'collider.' * It is possible to add a collider to an empty game object, and this may be useful if you want to create an object with all the wall colliders in one place, or rotate colliders as the base component does not have rotation. ![Adding a box collider to the Cube](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FTs4aXxn2G2WLqKyPH6gU%2FAddingCollider.gif?alt=media\&token=c8a24c0e-a532-4ada-b04c-9a7f781ea028) ### Box, Sphere, and Capsule Colliders These colliders are the most common as they are the most performant. Use Box Colliders where you can, as this doesn't cost nearly as much on performance as a mesh collider. ![Box, Sphere, and Capsule Collider examples.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FYgegpOjMfka8AgjHUVNn%2Fimage.png?alt=media\&token=3759785e-366f-4f06-a4c9-d42c9589f70a) ### Mesh Colliders A mesh collider allows you to create custom meshes as the collider. These are not nearly as performant as the basic Colliders and should be used *sparingly*. {% hint style="info" %} ***DO NOT put a Mesh collider on a high polygon object.*** {% endhint %} A Mesh collider on a high polygon object will affect how well the space runs. If you *have* to use a mesh collider for an asset in your space, then you should create an optimized mesh for the collider. Design the optimized mesh with the basic shape in mind, and cut down the polygons as much as possible. ![High polygon and low polygon examples](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FPRqMhhHAAqf3LqRDCx4i%2Fimage.png?alt=media\&token=6a9a6099-419c-42b1-b299-779742d0bb4c) It is possible to make stairs work more like a ramp shown in the example above. Not only does this improve performance, but it makes a smoother user experience as well, especially for larger step heights. #### Adding a Custom Mesh Collider * Ensure the object's position, scale, and mesh collider line up in the Asset Creation tool (such as Blender or Maya). This makes lining things up much easier. The example image above with separated objects is *not* how the objects should be laid out. * To add a custom object as a mesh collider, make sure to use the child ***mesh*** object on the imported model. This can be found under the asset itself in the Project window. It should have a grid icon next to it. The model itself cannot be used in the mesh collider slot. ![Adding the Mesh of the Model to the Mesh collider](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FX3e25ieHQDjwl3PeC97D%2FAddingMeshcollider.gif?alt=media\&token=525ae66a-f9f6-46da-acde-ee48c4987ad8) For more information on Mesh Colliders, check out the Unity Documentation [here](https://docs.unity3d.com/Manual/class-MeshCollider.html). ### Colliders on Mona Assets Mona uses Colliders in a variety of ways for different asset types. #### Portals Portals require a box collider (other colliders also work but are *not* recommended) on the 'Portal' tagged object to function correctly in Mona. This is used so the user can 'see' the portal and interact with it. **This collider will also be a physical collider.** **Ensure there are no colliders *****in front***** of the Portal tagged object Collider.** If there is a collider in front of it, the user cannot see it, making the portal only work as an entrance to the space. #### Artifacts & Canvases **Objects tagged with 'Canvas' *****must***** have a mesh collider applied.** No other collider works in this case. This collider will also be a physical collider. **Objects tagged with 'Artifact' can have a Box Collider (recommended) or other Collider applied.** This Collider will also be a physical collider. **Ensure there are no other colliders *****in front***** of the Artifact or Canvas-tagged object Collider.** If there is a collider in front of it, the user cannot see or interact with it. ## **Using Colliders with Reactor** Reactor uses Collider events (such as OnEnterCollider, OnExitCollider, OnInteract, OnLookAt, and OnLookAway), ensuring the Colliders are used correctly is important. These are not the same functionality as Colliders to stop a user from walking into something, but some of the settings require the collider to be a physical collider (such as OnInteract), whereas others can be walked through (such as OnEnterTrigger and OnExitTrigger). These settings will be covered more in [Mona Reactor](/create/building-spaces/adding-interactivity/mona-reactor). A common issue is having a collider overlap other colliders, such as an **OnEnterTrigger** collider overlapping an OnInteract collider. This situation will block the user from seeing the **OnInteract** collider, so keep this in mind if you are having issues with colliders. # Materials This page goes over the topic of materials and its types. Materials in Unity are how you add color and texture to your assets in a space. Many other elements within a matarial can enhance your space as well, such as emission and normal maps to add light or bump effects to your assets. * Right-click in the Project hierarchy, in the '\_AddYourArtHere/Materials' folder, for example, and select Material. Name as you see fit.

Creating a material

* You can apply materials to an asset by either dragging the material onto the asset in the Scene Viewport or Hierarchy. This will only be applied to this one object. The other option is applying it to the materials on the asset directly in the Materials tab, this will apply the material to all assets.

Applying a material to the asset directly.

Once your material is created, you can select and modify different elements to get the desired effect. {% hint style="info" %} It is *highly* recommended to keep textures to the power of two, such as 64x64, 128x128 up to 2048x2048. It is also possible to use other variations, such as 128x256 or 512x1024. Make sure to reduce the size of your textures as much as possible. This can be done in Unity or on the texture itself. {% endhint %}

The Material details in the Inspector

#### Albedo Also known as diffuse, it is the base color of the material. You can click on the color to affect that directly or drag an image into the square at the left. #### Metallic / Smoothness Metallic is a certain type of reflective property on the material. Usually, you will keep this at 0 or 1, but this is up to you. ***The Standard shader uses Smoothness rather than Roughness*** compared to many other applications. So 0 or black is rough and not polished through to 1, or white is very shiny or polished. If you want to create a texture for this, **use the *****Red***** channel for the Metallic and the *****Alpha***** channel for smoothness.** This is done to reduce filesize. Programs like Substance Painter can export this out correctly; otherwise, you can manually use Photoshop to create the texture. #### Normal Map The Normal map is a special texture that allows the light to display a bumpy surface. You may get a warning when applying a normal map that says **'Fix now'** as Normal map textures require a **'Normal map'** setting in their Texture Type. This can also be done on the Texture itself.

Adjust the Texture type to Normal Map as needed

#### Height Map / Occlusion / Detail Mask These are usually not recommended in WebGL spaces due to the filesize of textures in comparison to the benefit that these textures bring or functionality in WebGL spaces. #### Emission Turning on Emission offers a color and texture slot that allows the texture to emit light. The Bloom effect in a space will use the Emission Intensity, and also apply light within lightmaps. If you click on the color, you can adjust elements such as the emissive color and its intensity. Intensity settings between 0.5 - 2 are recommended. More than that, and the bloom effect gets a bit much.

Adjust Emission settings.

#### Tiling Tiling allows you to tile the texture more or less in two axes. If the mapping is not as you would like, improving the texture scale as you want is possible. This allows you to use smaller textures to create detailed materials. #### Offset Offset allows you to slide the texture along axes as needed. This is great for when you want to animate a texture along a direction (if the UVMaps allow it). #### Secondary maps Secondary maps allow you to add more detail to your texture as Albedo and normal, with the ability to adjust its tiling and offset. This is very useful to break up tiling a bit at the cost of added filesize. Using smaller images to do so can improve the texture in detail, depending on the situation. #### Forward Rendering Options Specular Highlights and reflections can be turned off for faster processing if needed. #### Advanced Options Render Queue - This defines the order that the material is rendered and only used in specific cases. optimizingEnable GPU Instancing - This is used for optimizing material use in a space. If you have a lot of assets that use the same material, this could help. Double-Sided Global Illumination - This will set the material to double-sided when rendering Global Illumination, as most materials are single-sided. **Occasionally you may get a lightmap that looks incorrect or 'scattered'; this may fix that issue.** # Portals This page goes over the details of Portals and how to set them up. {% embed url="" %} Portals Video {% endembed %} A Portal is a gateway to other minted Spaces. It allows Spaces to be linked so visitors can explore spaces on the Mona network. Spaces do not require Portals, however. Others can also link to your portals from their spaces, meaning they can decide to appear at a portal location rather than the default Spawnpoint. You can find the 'PortalPrefab' in the '\_MonaAssets' Folder in the Project Window. You can use this as is, but of course you can update the asset to look however you want. {% hint style="danger" %} * A Minted space *must* have a Portal if you want another space to link to it. * The Portals scene has a Portals Gameobject/layer with an applied PortalLayer tag. ***Do NOT delete or move this scene or object. Do not rename or remove the PortalsLayer tag.*** * Portals are optional but allow you to link to other spaces or have other spaces link to your space exactly where you want. * The gameobject under the *PortalPrefab* object must have a unique name in your Space and have the 'Portal' tag applied. In the example below this is called 'UniquePortalName\_1'. * The Portal tagged object needs to have a ***box collider*** for the Portal to be 'seen' by the avatar. * Ensure the Spawnpoint gizmo is *not* red and is in a logical position. * **Do not cover the Portal tagged objects collider with other colliders**. The user cannot interact with the Portal if there is another collider in front of it. {% endhint %} ### Editing Portals The Portal Prefab consists of several child game objects. * First is the 'Portals' Gameobject/layer, which has the *PortalLayer* tag. ***Do NOT delete or rename this object. Do not remove or rename the tag.*** ![The Portals Hierarchy](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FLk3yPfvEORUZKQFdPymv%2FPortalsHierarchy_01.png?alt=media\&token=18353db3-3e7c-445d-9b5a-3f97d023c918) * Under that is each Portal gameobject/prefab. The name of this gameobject is up to you. Each portal is a unique Portal prefab, ***do NOT put multiple portals under one PortalPrefab***. \ This object has the 'Untagged' tag. * **Under that is a GameObject that must have a unique name and a Portal Tag and requires a box collider.** The collider is needed so the player avatar can '**see**' the object to interact with it. Using a name representing the location is recommended for others to understand where the users will appear easily. * ***A SpawnPoint must be included and has the Spawnpoint tag***. When another space links to the space, they can choose which portal they spawn from. This is where they spawn. Name your Portals well so others know where a player will appear in your space. \ ***The Portal Spawnpoint avatar gizmo needs to be green.*** If it is red, it is in a location that overlaps another collider or not above a collider to land on (which will fail QA). * The Assets gameobject holds the assets that visually represent your Portal in the scene, such as a door or portal, or anything else. These can have colliders on them, so Players can't run through them but make sure they do not override the main 'Portal' tagged object. The Portal does not *need* to have gameobjects in the Assets folder to function. ### Portal Colliders As noted, make sure that the assets that make up the visible Portal do not have colliders in front of, or overlapping, the main Portal object with the 'Portal' tag. This Portal tagged object collider is what is used for the user to 'see' the portal itself. {% hint style="info" %} **Do not cover the Portal tagged objects collider with other colliders**. The user cannot interact with the Portal if there is another collider in front of it. {% endhint %} ### Linking Portals Assigning the Portal destination is done *after* you have uploaded the space to your wallet draft. You can select from any space that has been minted on the Mona platform. If your space has not been minted, it will not be accessible through the Portal system. **Make sure to set** your Portal name to something useful so others can link to them easily. ![Connecting a Portal](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FygcjBG8ba97xtJwoOdwQ%2FLinkPortal_01.gif?alt=media\&token=1040b508-a252-4f8d-b838-4ab0a240bf56) As Owners can set their portal destinations to any space individually, a portal will not automatically link *back* to your space. If you want to create a networked group of Spaces, such as a hub, it is a good idea to discuss linking with the target destination Space owner so that people can return to your space through the same portal. You will need to note which portals to arrive at from both spaces. {% hint style="danger" %} If you change the Unique Name object of a Portal, Artifact, or Canvas, *all* of these links will be reset. Keep that in mind when setting up your space. {% endhint %} # Canvases This page goes over the topic of canvases {% embed url="" %} Canvases Video Tutorial {% endembed %} A Canvas can display a *linked* image from a public URL. It is also possible to display a live stream as well. The space owner can update these links *after* the space has been minted. On top of displaying content, an external website can also be linked when you click on the canvas in the Mona Space. The supported files are as follows : | Images | Streaming | | ------------------------- | --------- | | .png | .m3u8 | | .jpg | | | .gif (inc. animated gifs) | | {% hint style="info" %} At the moment there have been reported issues using animated Gifs. If your space crashes when loading and it has a number of gifs in the space, try reducing or removing them to see if that fixes the issue. {% endhint %} Currently, the Canvas has two methods of applying the image to the canvas : #### Fit Media inside Canvas This option will crop the Image to the canvas, cutting off the left and right for a Landscape image, or top and bottom for a portrait image. #### Scale Canvas down to Media Size This option will reduce the canvas model vertically or horizontally to the image that it is linked to. The bounds of the Canvas will be the maximum size of the Canvas in the Mona space. A Frame is the *optional* object that houses the canvas. ***The frame does not scale***** due to the potential skewing of the object and its textures.** {% hint style="info" %} **Spaces currently load *****every***** image at once before the space is loaded, so it is important to keep canvas count and image filesize as low as possible.** {% endhint %} **It is recommended to have no more than 50 canvases in a space. Images should be less than 2000x2000 pixels in size and less than 2-5 MB**, especially if you have a lot of canvases. Of course, less is better for load times, but this is a good guide to keep under. Depending on the optimization of the space, the number and size of the canvases do play a part in how well it runs. ### Adding a canvas * Drag the 'CanvasPrefab' asset found under '\_MonaAssets' in the Project window under the Artifacts gameobject in the Artifacts scene. * Rename the 'UniqueCanvasName\_1' asset to something that represents the canvas, eg. location. * If you want to scale your Canvas, make sure to scale the 'UniqueCanvasName' object. Do not scale the parent CanvasPrefab asset in order to reduce issues. {% hint style="danger" %} If you change the Unique Name object of a Portal, Artifact, or Canvas, there is a chance *all* of these links will be reset. Keep that in mind when setting up your space. {% endhint %} **For more information on linking the canvas once it has been added to the space and uploaded onto your wallet, go to** [Add Images to a Canvas](/collect/own-a-space/add-images-to-a-canvas)***.*** This tutorial is in the 'Own a Space' section, as both builders *or* owners of spaces can update the links to a space. ### Canvas Hierarch The Canvas Prefab has a similar object structure to other artifacts. ![Artifact and Canvas Hierarchy](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FnrLIODZZ32BwONpyIpOn%2Fimage.png?alt=media\&token=cdf63540-0db2-4819-84c1-44ff18475a46) {% hint style="danger" %} **Canvas Requirements:** * The Artifacts scene has an 'Artifacts' Gameobject/layer with the ArtifactLayer tag applied. This is the only object in the scene with that tag. ***Do NOT delete or move this scene or object. Do not rename or remove the tag.*** * **All Artifacts/Canvases *****need***** to be under, or a child of, the Artifacts GameObject.** * **The 'UniqueCanvasName\_#' *****under*** ***the CanvasPrefab***** object must have a unique name in your Space and have the 'Canvas' tag applied.** All other objects in each Canvas prefab should have the 'Untagged' tag. * **The Canvas tagged object needs to have a *****mesh collider*** for the Canvas to be 'seen' by the avatar. It will throw an error if it is anything else or missing. * **Each Canvas needs a Spawnpoint included.** This will be used in future functionality. * Each Canvas is its *own* Prefab object. **Do not add multiple Canvases under one CanvasPrefab.** * **Do not cover the Canvas tagged objects mesh collider with other colliders**. The user cannot interact with the Canvas if there is another collider in front of it. * Scale the Unique name Gameobject with the Canvas tag (not the parent CanvasPrefab object) to the desired boundaries of your dynamic image. * The naming convention for naming should be "PascalCase" (i.e., Portal1 or TestPortal) {% endhint %} # Artifacts This page will cover Artifacts and how to use them. {% embed url="" %} Artifacts Video {% endembed %} The Artifacts scene houses objects that will be editable (to some degree) in the future. Anything that you do not want fixed in your space after minting should be under this scene. Artifacts can *optionally* link to external websites. This could be linked to an NFT marketplace, an existing portfolio website, a product page on an online store, wherever you like. There are currently two types of artifacts available : Artifacts and Canvases. Canvases are better to use with media types such as Images (currently) and livestreaming, whereas artifacts are usually 3D Assets that can link to external websites if you want. Artifacts are completely optional. ***If you do not want any artifacts/canvases, make sure to keep the Artifacts gameobject under the Artifacts scene*** however, otherwise an error will be thrown. In the future, the owner of the space can take them out if they like, and add their own objects. ***Artifacts are not swapped or replaced with future artifacts,*** so you don't need to add anything for future owners to add their objects into. The Hierarchy for an Artifact should look like the following, Canvases are included for comparison. ![Artifacts/Canvases Hierarchy example](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Fwj8XOIsAzF7jYkrJA3fb%2FArtifactsHierarchy_01.png?alt=media\&token=0a8d735d-62cd-4df3-a337-6b7a9befd39a) {% hint style="danger" %} ***Artifact Requirements*** * The Artifacts scene has an 'Artifacts' Gameobject/layer with the ArtifactLayer tag applied. ***Do NOT delete or move this scene or object.*** This is the only object in the scene with that tag. * **All Artifacts/Canvases *****need***** to be under, or a child of, the Artifacts GameObject.** * **The 'UniqueArtifactName\_#' *****under*** ***the ArtifactPrefab***** object must have a unique name in your Space and have the 'Artifact' tag applied.** All other objects in each Artifact prefab should have the 'Untagged' tag. * **The Artifact tagged object needs to have a *****box collider*** for the Portal to be 'seen' by the avatar. It is possible to use a Mesh collider but this is not recommended. * **Each artifact needs a Spawnpoint included.** This will be used in future functionality. * Each artifact is its own Prefab object. **Do not add multiple artifacts under one ArtifactPrefab.** * **Do not cover the Artifact tagged objects collider with other colliders**. The user will not be able to interact with the Artifact if there is another collider in front of it. * The naming convention for naming should be "PascalCase" (i.e. Portal1 or TestPortal) {% endhint %} As an example, here is the hierarchy of two artifacts under the Artifacts Gameobject. ![Default Artifact examples](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FD84d7UFdm2u7tkdeTzK5%2FArtifacts_Hierarchy.png?alt=media\&token=fdc6a848-36f8-4898-87a3-6099f3c92d4b) {% hint style="danger" %} If you change the Unique Name object of a Portal, Artifact, or Canvas *all* of these links will be reset. Keep that in mind when setting up your space. {% endhint %} # Add a Custom Skybox This section will go over changing the default Unity Skybox to an HDRI image. ### What is a Skybox? A '**Skybox**' is a flat 2D image applied around your Space. The result simulates the experience of being in a much larger environment. {% hint style="warning" %} *Note: The Skybox will affect the lighting in your scene, so it is best to add this early on.* {% endhint %} You can download royalty-free Skyboxes (HDRI Images) from [PolyHaven.com](https://polyhaven.com/). ## How to add a Custom Skybox to your Mona Space. * Download the EXR from the [PolyHaven](https://www.polyhaven.com) HDRI section (or elsewhere). * Save it into your assets folder in your Unity build. * Click on that file in Unity, change the 'Texture Shape > Cube' (in the inspector), and hit apply. * Create a new material. * Set the Shader (at the top of the inspector) to 'Skybox/Cubemap.' * Drag your EXR file onto the Cubemap (HDR) slot in the material. * Drag your material onto the scene's background; it should update with your Skybox! {% hint style="info" %} *Tip: If using the Skybox>Panoramic, uncheck "generate mipmaps" on your image texture settings.* {% endhint %} *For more information on adding skyboxes in Unity go to* :[ Watch Skybox Tutorial here.](https://learn.unity.com/tutorial/fps-mod-customize-the-sky?projectId=5d9c91a4edbc2a03209169ab#) # Test Your Space This page is all about testing your space to see if it works. Now that you have a space to test let's get to testing! This is easy in Mona, so much so that with a couple of clicks, you can have your space in a web browser! By testing often, you can find issues with the space, see how well it is running, ensure you can't run through walls, etc., and generally see what the experience is like as you go. ## Testing Checklist Let's review the checklist to make sure your Mona Space works properly in the testing playground: {% hint style="warning" %} * **Did you remove all Cameras from your scene?**\ If a camera is in your scene, the Space will not display properly with Mona. *Note: If you add a camera for testing inside Unity, make sure to either delete it or turn it off at the top of the Inspector before exporting your Playground files.* * **Did you add Colliders to your scene?**\ If you haven't, the player avatar is out of your world and reset until the end. To learn more about adding colliders \[check out this tutorial]. * **Did you set your Player Spawnpoint?** \ The player spawnpoint is the position in which your avatar will spawn in your world. If you haven't set this or are unsure, \[check out this guide]. Note: by default, your Player Spawnpoint is 0,0,0. * **Did you set unique names for your Portals and Artifacts?** \ If you have used Portals, Canvases, or Artifacts it is best practice to ensure these names are unique. *Note: There will be a warning in the playground that any Portals or Artifacts with duplicate names are present. This warning is to help you make sure there are no duplicates.* {% endhint %} ## Building Playground Files The easiest way to build the playground files is to : * **Click the > Playground files button** at the top of the Unity window. ![Click the Playground Button](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FUG6nBaL4UHaesDYFIchM%2FPlaygroundButton.png?alt=media\&token=e69b4b68-c2fd-46f3-8270-d0c7b0ca4d32) * Your default web browser will open at the playground web address, and the file location of the Playground files will open automatically. * **Drag the 'Playground Files' folder from the file location into the middle of the playground files web page.** * **Play!** If you need to find the Playground files for any reason manually, you can go to: \/Exports/PlaygroundFiles. {% hint style="info" %} ***Make sure to save the project before building the Playground files*** to make sure that the space will update. If this does not work, you could try deleting the previous Playground Files. {% endhint %} ## Filesize limitations (<250 MB) {% hint style="danger" %} Mona supports up to 250 MB for the PlaygroundFiles folder (including *all* its files). If your files are over this, you must change or optimize your space to get the file size under this. {% endhint %} Ways to do this include : * Reduce / Resize textures (this is the big one) * Reduce / Resize lightmap * Reduce / Resize Reflection probes * Resize skybox texture * Reduce polygon count considerably (if you have any high polygon assets, for example) ## Sharing your space Testing your files in the playground is a single user experience. If you want to share your experience, you will need to upload it to the Mona Wallet. For more information go to [Submitting your Space](/create/building-spaces/submit-your-space/submitting-your-space). # Troubleshooting Check out this page for solutions to common issues. ## Getting started with Mona ### WebGL not installed / Playground files not being built One of the most common issues when starting is that the playground files won't build. This is usually because the WebGL module was not installed when you installed Unity. If you look at the console when trying to build the playground files, you will get an error similar to the following :

Example WebGL error

* Go to the Unity Hub Installs section, selecting the Settings button, and then go 'Add Module'. * Make sure the WebGL module is selected and select 'Install' at the bottom.

Select the Add Module option

Installed WebGL Module

* Another approach, if you are not using Unity Hub, is go to 'File > Build Settings' and then switch the Platform to WebGL. This should install the WebGL module as well.
### Tags + Space Hierarchy A lot of issues are caused by Scenes or tags being used incorrectly or not at all. Mona needs the following applied *exactly* like this in order to function correctly, so make sure to keep the following in mind. ![Space Summary](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FeDGK61FnCuSNiwSwAFWT%2FHierarchyGuide_01.png?alt=media\&token=77488f9f-7f84-43f7-879d-7486095a60ec) The next image is a summary of the object types and the applicable states of each. Some of these are compulsory as well, so make sure these are set accordingly. ![Other considerations to make in your hierarchy](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F8a90jTVnbbEYmVGrtHry%2FObjectTypesSummary_01.png?alt=media\&token=cd6e6104-2a11-49a0-8f06-36a89399f62c) ### My Avatar falls through the ground! You will need to add colliders to all objects you want the avatar to walk on, or not walk through. Box Colliders are most performant, but if you need a mesh collider make sure to optimise the mesh and use that instead of the base mesh. For more information go to [Colliders](/create/building-spaces/create-your-space/colliders). ### 'More than one root object' error This means that there is probably an object outside of the Space/Portals/Artifacts Scenes or parent gameobject hierarchy. If you collapse all your folders to the top gameobject layer you should get something like this : ![Reduced hierarchy should look like this](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FHb5DJeu76xQxga4hTxf4%2FRootObjectErrorHierarchy.png?alt=media\&token=29b10c74-4e10-4416-9116-d94a69a136b2) If there are any other objects under the Space/Portals/Artifacts *scene*, then make sure to add them under the Space/Portals/Artifacts gameobject. ### 'You're missing a Space/Portals/Artifacts Layer' error! The first object under each scene is the 'layer' in which all your objects need to be under. The Tags (in green) should be as follows : ![Object tag in hierarchy](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FVLX7WnniHWC15bV8lxRh%2FSpacePortalArtifactLayerError.png?alt=media\&token=9d9e5e39-7518-4a26-b4f7-bc7e913189b1) **Make sure that there is only *****one***** of each green tag in the space.** Any duplicates will throw an error. Other tags (Portals/Artifacts/Canvases) use different tags. ### The camera is stuck/doesn't move in Mona! Make sure that your space doesn't have a camera in the scene. Either delete or disable the camera before building your Space to Playground Files. ### My space doesn't update when I build to Playground! Make sure to delete your Playground Files after testing. Sometimes it will not overwrite the files when you build them. ### Playground Files won't upload (with no error)! First thing is to check the web console for errors : \ \- Edge > Settings in top right / More Tools / Developer Tools\ \- Chrome > Settings in top right / More Tools / Developer Tools This is the best way to help figure out what may be happening. Common issues include : If an error is 'Nullreference : Object Reference not set to an instance of an object' then there may be a broken connection between objects. ***A common issue is that Artifacts, Portals or Canvases (the Unique name object with the respective tag) does not have a collider and it needs it.*** It could be by deleting prefabs without unpacking/deleting the references in the scene, renaming or importing a object that is different in some way to what Unity is expecting, references to objects in Unity Animation, or a reactor reference perhaps. Basically, something in your scene is looking for something *else* in you scene, and not finding it. ### My space works in playground but has trouble uploading to the Wallet! It could be that your internet connection times out before it can upload, resulting in the following error. Make sure that you have a fast enough internet connection to upload your space without issue. Sometimes this may just be a temporary issue, and may work in an hour or two. ![Example issue](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FUtwskrR4Fn9GnKXUwgGC%2Fimage.png?alt=media\&token=27602fd2-ae92-447c-b5ce-eb33c60c911f) ### I have a 'Looks like the "Space' file is missing' error when I upload my Playable files! This error will happen when you have moved or renamed your space scene in the project file outside of the original location, breaking a lot of the internal references that Mona is looking for. Unity will not fix this if you rename it back in some cases. ![Error in question](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FxpgHpXsaVL5uRobJrJId%2Fimage.png?alt=media\&token=70bbc915-8081-436a-9f2b-b5147b053b8d) This can be fixed by copying the Space.unity.meta file from an alternative build (found in the Space location) and copying it to the same location once you have sent the Space file to it's original location. An alternative approach is building the Mintable file of your space using the Mona Menu, and then importing that into a new Template. This process is shown [QA Process](/create/building-spaces/submit-your-space/qa-process#testing-the-mintable-file). You may need to copy any other assets across, but this should solve this problem. ### I can't seem to sign into or install Unity Hub! Occasionally, the Unity Hub can be a little problematic for some uses. One thread that may help is the following, as it has links to earlier version of the Unity Hub. Other approaches may be make sure that your VPN is turned off and that Unity is allowed through the firewall on your computer. These may limit your ability to sign in with the Personal license, and if you can't sign in you won't be able to open Unity. ## Portals / Canvases / Artifacts ### My avatar can't 'see' my Portal/Artifact/Canvas You may have covered the Portal, Artifact, or Canvas collider with another collider (usually for physical collision on the assets themselves). If there is a collider in front of, or surrounding, the collider on the Unique###Name gameobject then that will get priority, meaning the asset will not be able to be seen in Mona. As the portal, artifact, or canvas collider is *also* a physical collider it's best to remove all other colliders on your assets. Another reason is that you may have deleted the Collider on the gameobject that has the Unique###Name and Portal/Artifact/Canvas tag attached (as per the documentation). ### Javascript error when loading The following error appears when loading the space :

Javascript error

A common reason for this is when the canvas images are to numerous, or too large, for the browser memory. Make sure your images are as small as possible if you have many images. we recommend no bigger than 1000x1000 if possible as all these images will need to be loaded before a user can explore the space without lag. Another reason is that you are using too many animated GIF images. Reduce the number of gifs and see if that works. The filesize of the animated gifs may not be a deciding factor on this. ### 'There is a problem with the Collider on one of your Canvases' Canvases MUST have a ***mesh collider*** on the Unique Name Gameobject that has the Canvas tag (Not the CanvasPrefab parent object). If it has any other collider type, or no collider at all, it will throw an error on uploading to the playground files on your wallet. ### 'Duplicate Portal/Artifact/Canvas' Error in my build! This means that that two or more UniqueName gameobjects (with their respective tag) under different Portal/Artifact/Canvas Prefabs have the *same* name. Use the QA button to give you hints to which ones inside Unity. ## Asset Appearance ### There is a very specific pink material on some/all of my objects! This is a shader issue usually related to render pipelines. You may be using a shader on your material that the inbuilt render pipeline is not compatible with. URP and HDRP are not compatible with Mona. If you are porting your assets from either URP or HDRP, played with these settings by mistake, or added an incompatible shader type from the asset store then you will need to reset the material or render pipeline to the Standard Render Pipeline. ### My artifacts / canvases / dynamic objects are really dark! This is most likely due to your space not having Lightprobes. For more information go to [Light Probes](/create/building-spaces/improve-your-space/light-probes). ## Colliders ### My mesh collider mesh looks different from what I exported! It is recommended to close your mesh before export. Although the collision is based on the normal, or the polygon facing direction, of the mesh. Also make sure to apply all transforms before exporting. Deleting the Mesh Collider component and reapplying it will sometimes fix this issue. ## Mona spaces ### Spaces don't load on the Mona website If the Spaces don't load on the website you can always check the 'Browser settings > More Tools > Developer Tools' window, make sure the 'Console' tab is selected, and see if that offers any errors to help troubleshoot. This helps troubleshoot the issue in the Support channel on [Discord](https://discord.com/invite/gcrGHzTerU). ### 'Blocked the loading of a resource' error If the following error is shown it could be related to your Antivirus software.

Website spaces don't load...

## ## Unity Errors ### dataOffset !=file.GetPosition() Error in Unity! This happens sometimes when your hard drive that unity uses for temp files is full. Check your main drive and make sure there is enough space. # Improve your Space The following section will go into the various ways you can take your space to the next level. Most of these additions are optional, but will certainly improve your space in quality and performance. So once you are comfortable with all the basics of a Mona space, have a look at the options here and see how far you can take it. Of the topics covered, Lightmapping, Reflection Probes, and Light Probes would be the ones that significantly improve the visual quality of a space. ### Lightmapping Lightmapping works by 'baking' high quality lighting into the scene while actually reducing the load on the computer. It will make the file size a little bigger, so there is (as always) a fair amount of balance to look at. But the space can look *much* better. ### Reflection Probes Reflection probes allow assets that use metallic and smoothness to reflect baked information in the environment. This is because WebGL does not allow realtime reflections as they are so expensive. ### Light Probes Light probes take the lighting information that is lightmapped, and allow that to affect dynamic objects in the space, such as the Avatars or animated assets. The lighting information is 'simpler', but it does allow dynamic objects to feel more a part of the environment, rather than the equivalent of someone in front of a blue screen in the 90's. ### Prefabs Prefabs are a technique that allows you to make one asset, and then use that as a template for copies of that around your space. By modifying the Prefab, it will update all of the assets in the space that use the same asset. This can save a *lot* of time. Prefabs are also easier to help performance of your space when used correctly. ### Adding Audio Unity allows you to add audio either as ambient noise, or events in the space. This tutorial covers how to add audio into your space. ### Player Property Volumes (PPV's) Player property Volumes is a tool that Mona uses that allow a builder to have some control over the Player (such as walk/run speed, jump height etc.) or Camera effects such as Bloom, Motion blur or Chromatic Aberration. ### Warp Volumes Warp Volumes are a tool that allow a builder to basically teleport a user anywhere in the space. ### Reactor Reactor is a tool that allows you to create interactivity in a Space as scripts are not allowed in Mona due to security concerns. Reactor basically tells an Animator on an object what to do, so assets in your space can trigger certain animations that you create. # Lightmaps (Unity Lightmapper) This section will go over lightmapping using the Unity Lightmapper. {% embed url="" %} Lightmapping in Unity Tutorial {% endembed %} ## What are Lightmaps? Lightmapping is extremely important if you want a Space to run well, on as many systems as possible, and have good lighting. Lightmapping is a method of creating high quality lighting in a digital space by 'baking' the light information into a second layer of UVMaps (texture placement information) on the objects in the scene. The kind of lighting information that can be used with lightmapping is light and shadow information, but even emissive information from materials can be utilised. Due to the nature of this low cost, high quality method, objects are not able to be dynamic (animated) after that information has been baked. But as high quality *real time* lighting is too expensive in web based environments, lightmapping is basically the best way to have great lighting in your environment. ### Overview * Make sure the imported models have Generate Lightmap UVs (if you want Unity to take care of creating the second UVMap information for you) * Set any object you want to bake into the lightmap to Static * Set any lights you want to bake onto the objects to Baked * Set up the Lightmap settings and generate the lightmap ## Setting up your objects ### 1. Generate Lightmap UVs For lightmaps to bake the information your objects need a second layer of UVs to bake onto. You can do this yourself in an external application like Blender etc. But if you are putting the scene together in Unity it is somewhat easier and faster to let Unity do this for you at the expense of using the texture space as less efficiently. 1\. If you want Unity to unwrap your objects for lightmapping, **select your model file in the Project window** and then go to **Inspector / model tab > Generate Lightmap UVs**. Then **select Apply**. A window may popup asking if you want to apply the change to the children objects as well.
![Generate Lightmaps on imported models](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FptgclaXsKSfkgKApaBOo%2F1_SetGenerateLightmapUVs.gif?alt=media\&token=d6ff08c2-a765-4649-9603-8cd194411950) NB : If you bake and your lightmaps look terrible (overlapped UVs, large dark blocks for no reason, etc.) then not having correct second UVs is probably the reason. ### 2. Set Static Objects 1. **Select objects to be lightmapped** in the scene or Hierarchy and **set it to *****Static*** in the top right of the objects Inspector. If this is not set, the lightmapping will not see it.\ \ Static actually sets a number of things, the main one is 'Contribute GI'. This can be seen if you use the arrow to the right of 'Static'. You will most likely want 'Reflection Probe Static' as well so that it will be baked into any reflection probes. ![Set Game Objects to Static](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FJRz3wL497ISH5s6rKrgI%2F2_SetToStatic.gif?alt=media\&token=6357779b-eba9-4a4a-ae94-efd472d32905) ## Lighting Setup ### 1. Adjust Light Settings 1. **Set any lights to be used for lightmapping to *****Baked***, not realtime, using **Light / Inspector > Mode**. If this is not set the lightmapping will not use this light. If you use Mixed the light will be both a real time and a baked light. As noted it is not recommended to use more than one or two realtime lights unless you know your space runs well on low end systems. ![Set Lights to Baked](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Fmriv9odN9XKYVBWoD8u7%2F3_LightToBaked.gif?alt=media\&token=574ad546-47bf-49d7-ad8f-c6ea0b8e2da8) 2\. As an example moving forward, this scene has one real time directional light (the one that comes with the template), an area light (which has to be baked), a spotlight, and a point light. All lights (apart from the realtime light) will be set to Baked. One object with emissive materials (see the materials tutorial for details) will also be added. ![Light Examples](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F9am7eGhhlZiWTIaJY9XP%2F3_LightExamples.gif?alt=media\&token=6a069d71-44fb-4ea6-9771-9bd0f9ceb7b4) ### 2. Adjust Lightmap settings 1. **Open the Lighting Tab** from **Window / Rendering / Lighting** to access the lightmapping Settings if it hasn’t been already. Drag and drop it according to your preferred layout location. ![Open the Lighting Window](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Fq48GOnJ7q3qfwSgipJ6j%2F4_OpenLightingTab.gif?alt=media\&token=912a8ea8-333b-4638-8e17-4f1a5a6a15a7) 2\. **Turn down most of the default settings** in the Lightmapping tab in order to speed up renders and ***make sure to set the Directional Mode is set to Non-Directional***. ![Adjust the Lightmapping Settings](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Fu7XNonHNQfHeki2EN0NH%2F5_LightmapSettings.png?alt=media\&token=a7f7184c-f4ee-41bf-a39c-aee076ccf4d8) 3\. You can **use Progressive GPU (Preview)** (in the Aqua box above) for faster, but less accurate lightmaps, **or Progressive CPU** for more accurate but slower lightmaps. It is recommended to use Progressive CPU for final bakes. 4\. Note that turning off Ambient Occlusion is optional as this does add a lot to the result at the expense of baking time. Adjust these settings depending on your CPU/GPU. ## Baking the Lightmaps ### 1. Generate the Lightmaps 1. Once the objects are set to static, the lights are set to Baked, and the settings are set to something more reasonable, **press the *****Generate Lightmaps*** at the bottom of the lighting Tab to create your lightmaps. Depending on your scene complexity, lightmap settings and computer this can take anywhere from 10 seconds to an hour (or more). ![Press the Generate Lighting Button.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FbVRPcHWBPYAd9Xl9YFxn%2F7_GenerateLightmaps.gif?alt=media\&token=6505d31f-4e88-4c2b-af89-1267b0d57875) If you are using the recommended settings above the quality will be low but bake faster. This stage is more like a guide for how the lighting will appear, and you can adjust the settings as needed. Spend a little time with the lightmapping settings and get a feel for the differences each one does and how long that affects the baking time. 2\. Once baked, you can **check the resulting Lightmap textures** in the Baked Lightmaps section in the Lighting Tab. You can use this to visually see the result of the unwrapping process, and can sometimes guide you with trouble shooting (overlapping second UVs or sections of your space that don’t require baking (polygons that are never seen such as the other side of a ceiling or floor).\ Select an object in the space to highlight in yellow so you can see where it is on the Lightmap. ![Check the Lightmaps](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FDyUK5KoKfR0ViGIbZlnW%2F8_CheckLightmaps.gif?alt=media\&token=192fd4a8-a7a8-49ac-9828-180f7667f6c9) ## Optimising your Lightmaps ### 1. Refine the Results 1. **Modify *****Lighting / Scene / Lightmapping Settings > Lightmap resolution*** to adjust how much space the polygons take up on the lightmap. Increasing this will (potentially) increase the amount of Lightmaps you have (and therefore resulting file size) when the previous lightmap is ‘full’, but it increases the amount of space the polygons take up on the lightmap texture (eg. better quality). Finding the sweet spot between quality and number of lightmaps is half the fun. ![Lightmap resolution = 20, Total Bake Time = 9 seconds](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FoWf1xIRRMVO82pVein1e%2F8_ResolutionSettings_Low.png?alt=media\&token=dfa6cd08-c2c4-4a3d-b23f-641c513a181f) ![Lightmap resolution = 65, Total Bake time = 44 seconds. This is a very high resolution, but there isn’t much in the scene. ](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F4pcrc3yP2ZKoRN5jesrr%2F8_ResolutionSettings_High.png?alt=media\&token=1b2d665d-4f15-4b2e-9c63-2697b8f74dce) These renders are done on a Ryzen 5950X, 32Gb RAM, 2070RTX. 1. **Adjust the Samples options** to increase the quality of the lightmap at the expense of time to bake. So once you have a good feeling about your lightmap, turn these up before your final build. That said, the difference in results get harder and harder to see at the higher levels. ![Modify the samples for quality VS time.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FGRxGQqbsszNu6UuikKo0%2F7_SamplesSettings.png?alt=media\&token=a3d649c0-6e1a-4eee-8f3f-da5c491ca580) 2\. **Setting Lighting / Scene > Max lightmap size to 2048** is a good starting point, you can of course adjust this depending on the needs of your space. It is not recommended to go to 4096 or above however as that increases the texture size significantly. 3\. Isolate the results of your baked lights, by **turning down/off your real time light/s and the environment/ambient lighting** under ***Lighting / Environment / Environment Lighting > Source and/or Intensity multiplier***. Your scene will look different when you turn these back on, but it’s a good way to understand the effect of each light…so bounce between the two (or three) states. ![Turn off ambient lighting to compare lighting results.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F496ShEHY0r2wgEooSs39%2F6_TurnOfAmbientLighting.gif?alt=media\&token=84856255-d496-453d-b6ee-6cbba40c0006) ### 2. Optimise Results 1. ***Artifacts should not have Static applied*** as they will affect, and be affected by, the environment and they might not be there forever (as artifacts can be modified or turned off). So a safe bet is just to turn all Artifacts’ Static to off. Portals are fine however as they cannot be edited in the space. ![](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FynwivZLa6EzjuXhbzGAB%2F9_ArtifactsStaticless.gif?alt=media\&token=6beb9b70-1c3c-4160-9093-d386a5cd3d98) 2\. Make sure that the Lightmap resolution is set to the level that fills up the last lightmap. Check what your lightmaps look like in the Lighting Tab / Baked Lightmaps section. If there is any blank space on the final map, then turn up the Lightmap resolution (even by a decimal level) until there isn’t. Make sure that it doesn’t spill over into a new lightmap, and have most of it blank. Lightmaps will take up considerable file size, so keep this in mind when you are choosing how many you create. 2-3 at 2048 should be plenty. However this could be more or less depending on the complexity of your space. ![Lightmap Resolution = 50. Last baked lightmap example.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FizEjF8nv5m9iqVIhZj5Z%2F9_WastedLightmap.png?alt=media\&token=fb8f76b7-bf80-4c33-b31f-bf7fb527536e) This lightmap has nearly half the space wasted. 3\. It is possible to make an object take more texture space in the lightmap. **Select the static object** and **increase/decrease the *****Mesh Renderer / Lightmapping > Scale*** under **Lightmapping**. Putting that higher will mean it takes more space in the lightmap, less and it will be smaller. ![](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FYmx9VWKOxwL5Xy4E25Ge%2F10_ScaleInLightmap.png?alt=media\&token=5281ae21-307b-4751-968b-91c7f5b6981d) ### Troubleshooting 1. Unity Lightmapper sometimes has issues with light leaking between separate objects (eg. a box for a wall and a box for the floor). You can try to mitigate this by : Create smaller polygons. A huge single polygon floor will probably look bad as the area will be too ‘big’ for precision baking, in this case you could make a gridded plane instead. Make the objects that overlap into one object (in blender etc) and join them at the transition. Light can’t leak if there's nowhere to leak. 2. As noted, if many/all of your objects look like the lightmapping is messed up, there is a reasonable chance those objects have not been set to Generate Lightmap UVs correctly and the lightmaps are overlapping. Check out Generating Lightmap UVs at the beginning of this tutorial for more information. # Light Probes This section goes over Light Probes which help dynamic objects be lit correctly in a baked lighting space. {% embed url="" %} Light Probes Video Tutorial {% endembed %} ## What are Light Probes? Light probes are a low cost answer to the limitation of realtime lighting taking into consideration baked light information. Each probe has lighting information that will light dynamic objects more naturally in comparison to without them. ## Adding Light Probes to my Scene ### 1 . Create a Light Probe Group in your scene 1\. **Create an empty Game Object** in your Hierarchy titled "LightProbes". This is optional, but good for organisation. 2\. **Right Click** on the newly created Game Object in your Hierarchy, then navigate to **Light** -> **Light Probe Group** in the menu. This will create the Light Probe group under the selected game object. ![Add Light Probes by Right Click](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Fuj3BIgfU4WfT1BcCE7MY%2F1_AddbyRightClick.gif?alt=media\&token=4989db30-6fbe-462b-892d-d92a6bfbbc28) ***Alternative option** -* you can complete the same action by navigating to the GameObject Menu and select / Lighting > Light Probe Group. This will place the probe at the bottom of the Hierarchy. ![Add Lighting Probes through the GameObject menu.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FTWwzw8UFe7ojcCBXzvpS%2F2_AddbyMenu.gif?alt=media\&token=8facc8ae-b7db-49c3-ab38-acfa13e276a6) ### 2. Modifying/Adding Light Probes 1\. Press the Edit Light probes button in the Inspector Menu to modify the Light Probes in your scene. Use the 'Delete' key to delete probes as needed. ![Modify and delete keys.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FKHvURWWkGTgbxiBkSVVr%2F3_ModifyProbes.gif?alt=media\&token=e60293dd-5ba6-4a57-add0-6d18f917a2d9) 2\. It is possible to use Ctrl + C / Ctrl + V / Ctrl + D to copy/paste/duplicate probes as you need to (rather than use the Add Probe Button). To save time, set up your lowest layer of probes on one level, and duplicate upwards. ![Use Ctrl + C / V / D to copy/paste/duplicate probes.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FHhCmxtWFAvL8VqEjBE9u%2F4_DuplicateProbes.gif?alt=media\&token=1120e346-6255-4f9e-9198-125271b4b288) ### 3. Arranging your Light Probes 1\. An objects lighting is created from the surrounding probes any object is ‘within’. If the light does not change much within an area, use less probes. If the area has a lot of light changes, use more. ![Add Probes as needed by the detail of the space.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FvwcB1rfOZYuQHwSk8Vn6%2F5_ProbeLayout.gif?alt=media\&token=47492a4d-68ca-4aef-891b-ca31a1762e50) **For more information on Light Probes, check out the** [**Unity Documentation**](https://docs.unity3d.com/Manual/class-LightProbeGroup.html)**.** # Reflection Probes As real time reflections are not possible in WebGL, Reflection Probes offer an alternative allowing you to 'bake' reflections into a space at a low cost to the processing, at the cost of file size. {% embed url="" %} Reflection Probes Video Tutorial {% endembed %} ## What are Reflection probes? Much like lightmaps, reflection probes are a way to bake reflection information into a space. Each reflection probe is a point in space that *projects* the environment *onto* objects in a designated area, both baked *and* dynamic. The reflection probe information itself however is *static* information, so your avatar cannot be reflected in the space for example. You can have quite a few probes, but as each one creates a texture in the scene this will add to the file size of the space. ## Using Reflection Probes in your Space ### 1. Adding Reflection probes to your scene 1\. **Create an empty Game Object** in your Hierarchy titled "Reflection Probes". This is optional, but good for organisation. 2\. **Right Click** on the desired folder in ***Hierarchy / Light / Reflection Probe***. This will place the probe under the currently selected object. ![Right Click to add Reflection Probe](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FzomwQB7KW4PqXZoTkohm%2F2_AddRPByRightClick.gif?alt=media\&token=c353272f-504a-43b5-961d-d976069a6467) Alternative option - **Use *****GameObject / Lighting > Reflection probe***. This will place the probe at the bottom of the Hierarchy. ![Add by using the GameObject Menu.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FFz7mOPCaXUMqBQ4DiXhg%2F1_AddRPByMenu.gif?alt=media\&token=a1be25d0-ef21-4d75-b058-8b37cd93b5ad) ### 2. Adjusting Reflection probes and Objects 1\. Each probe has three things to consider for placement. The object itself, the ‘centre’ of the probe (or the point that it 'projects' from), and the area that is reflected onto the probe. The object itself is modified with the Move gizmo as usual. **Use the Arrow button** in the Reflection Probe Inspector window **to move the centre of the probe to the centre of the area you would like to project to**. Generally it’s a good idea to move this roughly between walking height and jump height of the avatar to reflect to the avatars/camera position. **Use the Node Button** in the Reflection Probe Inspector window **to adjust the edges of the projection box.** ![Modify the edges to surround your objects and place the centre in the middle.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FLYGb9X0ksWIUEPUisxso%2F3_ModifyRPSettings.gif?alt=media\&token=21b1e619-7561-474d-8c12-676b724c2fec) 2\. **Set all objects you want to be reflected to *****Static*** in the Inspector. ![Set objects you want to be reflected to static.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FMYUQPDalyAVqpSv2pGWE%2F4_SetObjectsToStatic.gif?alt=media\&token=64941691-2b2e-4db3-a70e-a84c8e5bf0c0) 3\. You will want to **move the edges to the outside of the objects you want reflected.** The projection will not behave correctly if it is not completely within the Reflection Probe zone. An example of what not to do on one wall is included in this example. ![Modify the edges of the Reflection probe to surround objcts for best results.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F6M6PIZbJNcgXhBpsrYnb%2F5_ExpandaroundObjects.gif?alt=media\&token=19aa6d1d-c65f-48e1-a8a6-d8f253d71f2f) ### 3. Generating the Reflection Probes 1\. You can set the individual Reflection probe to **bake manually by using the button at the bottom of the Reflection probe object** in the Inspector, or all the reflection probes will bake automatically when you Generate Lightmaps using Unity Lightmapper. If you are using Bakery, you will have to press Bake Reflection Probes after you Render the lightmaps. ![Use Bake per Reflection Probe to update manually. ](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FKmKV2taPhmeqivMikbGs%2F6_ManualBake.gif?alt=media\&token=b9c85b2d-d53a-4f01-9731-b075007ed63a) ### 4. Refining the Reflection Probes 1\. Add more reflection Probes as needed. As few as possible is recommended for file size and processing load. A general rule is that each ‘room’ would have it’s own probe to reflect each individuals room/walls correctly. ![Add probes for each 'area' of your space.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FbyR4ThXU2iRjXulI01WZ%2F7_MultipleProbes.gif?alt=media\&token=c4959a5a-30da-4446-a9ca-61c17bafaa4a) 8\. Once you are able to start optimizing your space, **adjust the size of the reflection probe texture** according to your needs. Larger for important areas that are important and/or have lots of ‘clear’ reflection, and smaller for areas that are less important, or have mostly rough materials. This is certainly one area where you can get your file size down in a pinch. ![Adjust quality as needed.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FaNcReszuhw5lo057ZkDv%2F8_ProbesQuality.gif?alt=media\&token=160e60ce-8ce0-489a-8c19-6fcb47525439) 8\. Note than any object, including dynamic objects with high smoothness/metal values, will reflect the reflection probes you create. Using reflection probes well, without going overboard (as they do add to the file size somewhat) can create fantastic results! 9\. For examples of how different material settings look with reflection probes, check out the reference charts for metallic and smoothness settings [here](https://docs.unity3d.com/Manual/StandardShaderMaterialCharts.html). **For more information about Unity Reflection Probes, check out the** [**Unity documentation**](https://docs.unity3d.com/Manual/UsingReflectionProbes.html)**.** # Animation in Unity Animation is a useful tool to bring life to any space. This tutorial will cover some basics for doing so in Unity. {% embed url="" %} Animation in Unity on Youtube {% endembed %} At the moment animation made in Unity is limited to your space. As much as you can create artifacts with animation, these cannot be turned into NFTs. If you want to create an animated NFT, you will need to use a different method such as minting the animated blender file as an .fbx or .glb. ### Setting up the Animation 1\. First, open the Animation window using Window / Animation > Animation. ![Add Animation Window](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FyWVgQJ8OD0WLdGxowTMF%2F1_AddAnimationWindow.gif?alt=media\&token=ccd6cc24-1b53-4f9d-92fb-5b1443a12af6) 2\. Click on the object you want to animate. In the Animation window, click on the Create button. It will ask you to name the animation and set the location. You will then have a new Timeline to work with, and the object will have an Animator Component. ![Create and save Animation](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FmlHXMirQjx9eTG7wKbx6%2F2_AddAnimation.gif?alt=media\&token=30d83195-f667-43d6-92d3-bf4a1b750a59) The animation timeline can use the current object (with the animator component applied) and has access to every child in the object, but none of the objects ‘above’ or ‘below’. If need be, create an empty game object and put all the objects that you want to animate (that are connected in some way) in there.\ \ \- Object (cannot be animated)\ \- **Object with Animator** (Can be animated)\ \- Child Object (can be animated)\ \- Child Object (can be animated)\ \- Child object (can be animated)\ \- Object (cannot be animated)\ \ If you have many objects or parameters you are going to animate, having many objects in one timeline gets difficult to use very quickly as each element that gets animated gets its own line in the timeline. There are ways around this that I will go into later. 3\. If you want different objects to have different timelines (eg. different timing of a loop or less complicated animation), each object would need it’s own animator applied. You would have to add this manually by going to the target object and applying the Animator component. Then reselect the object in question, and the Animation / Create button will be available for that object similar to step 2. ![Add separate Animator manually](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F92I157rx7o0gIGA6SUJP%2F3_ManualAnimator.gif?alt=media\&token=3983fcef-8da0-4421-8ff3-1b16ec05fb17) 4\. You can select if the animation loops or not by clicking on the Animation clip in the Project Hierarchy and toggle Loop Time. You can also set the loop pose for seamless animation and Cycle Offset to set the loop frame different to frame 0. ![Set Animation settings (if need be)](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Fc3UIgmpOwCQce14sGWr6%2F4_SetLoopTime.gif?alt=media\&token=17ca7f10-68d7-4bc8-ae55-4934357c644f) 5\. Select the object with the Animator component once more. Select the red record button at the top left in the Animation window. Nearly anything you change on your object will create a keyframe, or set animation information on a frame, in the timeline. Many parameters can be animated, from object position to material information, and these can be keyframed with this turned on. If you want the first keyframe to be set, without changing the parameter, you can move or type in a new unit in the target parameter, then moving/typing in the original unit. You can also right click on the parameter (the ‘x’ next to parameter slot for example) and select Add Key. ![Set base keyframes](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FvZLbLOw9u60Hfqdu26rI%2F5_SetKeyframe0.gif?alt=media\&token=bac80727-e89d-405e-9500-59e5282261cc) 6\. Move the Animation player head using left mouse at the top of the timeline to the next keyframe location. Modify whatever parameters you would like to animate, and as the Record button is on, the changes will be keyframed automatically. ![Set new Keyframes](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Fexcczv01e2nJcRHzhGiE%2F6_NewKeyframe.gif?alt=media\&token=4518b07f-c042-4b39-8735-4360f245664b) ### Navigating the Animation Window 1\. Use scroll mouse to zoom in and out of the timeline 2\. Hold down middle mouse button to pan the timeline left and right 3\. Left click and drag to select multiple keyframes 4\. Left Click and drag at the top of the timeline to move the play header 5\. Use the Space bar to play the animation (when the animation panel has been clicked) 6\. Use the buttons next to the Record button to skip to the First/Previous/Next/Last keyframe. This is particularly good for making sure you are lining up keyframes with other keyframes, as this gets harder to do with longer timelines. ![Navigating the Animation window](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FbwwjgLHiiCjsZXPmexsp%2F7_TimelineNavigation.gif?alt=media\&token=d465738d-8bca-41f0-8a68-7de3914df5be) ### Keyframe Tools 1\. Select the keys at the top to select all keyframes on that line 2\. Ctrl + C to copy keyframes 3\. Ctrl + V to paste keyframes 4\. Drag keyframes using left mouse button 5\. Select a range and use the bars to stretch keyframes ![Working with Keyframes](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FxGF5zn8IOXdyOjbgVtwc%2F8_KeyframeNavigation.gif?alt=media\&token=2a50fb46-a79a-4f7a-93b0-9efbfebc9632) 6\. Note that the timeline has different keyframe handle types, by default it is Clamped Auto, so it will slow down towards the keyframe, and speed up as it moves away from it. If you want a smooth constant loop you can right mouse click on selected keyframes, and apply Auto. Free smooth, Flat, and Broken are also available. For more information on these, check out the examples in the Unity documentation [Here](https://docs.unity3d.com/Manual/EditingCurves.html). 7\. If you click on the arrow next to each object to the left in the Animation Panel, you have access to each individual parameter to animate. ![Working with individual parameters](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FGHQspMraXySeGRdz0OC1%2F9_IndividualParameters.gif?alt=media\&token=0c5d5cba-8f11-45dd-934f-eb4e1171d068) 8\. At the bottom of the left side of the Animation panel is the option to go to Curves Mode. This will allow you more control over how your animation keyframes work and give you complete control over the keyframe handles. 9\. If you select the elements and press ‘F’ it will focus on that information (this work on the Dopesheet as well). ![Using Curves](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FsrtKOayHAzUznkoubmYo%2F10_Curves.gif?alt=media\&token=9861758e-dbaa-4e5f-b282-d09d9c1c5282) 10\. Edit the curve sheet keyframes and handles as needed with left mouse button. 11\. Right Mouse click to add a Key ![Modifying curves](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FLHTa184TpjUzLHvhAfeY%2F11_ModifyCurves.gif?alt=media\&token=cbcd728a-36f5-485a-898c-6fc30f348079) 12\. Press Delete to delete a key (after selecting it) 13\. As noted, right mouse click access handle types, the Curve sheet allows manual modification of the handles depending on the handle type. ![Edit Handle types](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FliTN8tEIke7s3hcQngmT%2F12_ModifyHandles.gif?alt=media\&token=12d5bd02-5180-4f7b-a0b1-d96d45419207) ### Examples #### **Position, Rotation, Scale** Move the timeline to where you want the next frame to be, and move, rotate, scale your object as you see fit. Continue until your animation is complete.\ If you are wanting to create a full rotation, note that copying the first keyframe to the end of your loop will not work as that will be more like a boomerang effect, you will need to rotate the object the full 360 degrees (in comparison to 0 from the first frame) for that to work correctly. ![Rotation example](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FJM7xAK2US6R1gM8isn2z%2F13_SimpleRotation.gif?alt=media\&token=d10d4126-f3b9-4e9e-b772-7213d03c8099) #### **Material scrolling (and other material effects)** S**i**milar to position, select the object with the material you would like to animate, open up the material information and type in the units you would like, or click and move the mouse on the text next to the parameter. In this example, use the first offset parameter (not the second) to 0. Move the header in the timeline to your next keyframe location and then adjust the parameter as needed. If you want the texture to loop seamlessly the parameter needs to be a factor of 1 (so 22, 5, 10 will also have a loop if need be). I use higher numbers if I am trying to loop a number of textures at different speeds for example (one material loops at one where another is at 4 which would be 4 times faster). Most, if not all, parameters that are accessible on the material can be animated, such as color, emissive level and emissive color, and tiling for example. Use them in creative ways to get the effect you are after! ![Animating material parameters example](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F5XM3E2p5a0dwTHYqHFXu%2F14_SimpleMaterialScroll.gif?alt=media\&token=f2614e34-b0ca-48a6-b9ff-d895c6c8fe2e) NB : Sometimes if you animate one material on an object, other objects with the same material will also animate at the same time. So in some cases you may need to separate objects into different animation components. #### **Optimised animation through UV mapping** A more advanced trick of animating textures is using more strategic unwrapping of the object to have one material scroll one way (as it can only be in one direction) but display the material moving in different directions on the object, even though it only one material (which saves materials, which in turn saves draw calls, which is a lot more optimised use of animation). Basically using the UVMap to define the direction of the texture animation, rather than having multiple materials animating in different directions. #### **Multi-layered animations** It is possible to put an animator layer on a child object so that it has its own loop and then be controlled by the parent animation. Say you want a fish swimming loop (on the fish itself) and then the animated path of the fish on the parent object (you could have three fish as children on the parent object for example. # Importing Animation Importing animation into Unity from external applications such as Blender, Maya, 3D Studio MAX, etc. will be covered on this page. {% embed url="" %} Importing Animation into Unity {% endembed %} If you have created animation in an external application such as Blender, Maya, 3D Studio MAX etc. it is possible to import into Unity. It is even possible to break up a single animation that includes many animations into their separate animations easily inside Unity. So this approach depends on which approach you would prefer. For this example an asset will be animated in Blender (shown in the video) and imported in the usual way into Unity by saving it into the assets folder, or simply dragging and dropping it into Unity. This asset could be made in any tool that supports animation and exports to Unity compatible formats like .fbx. It is perfectly fine to only import one animation from your external application. You will probably use the following tools in order to rename or add looping to your animation. Select the imported asset, and then go to the Animation Tab in the Inspector. ![Selecting the Animation Tab](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FocNpS6Q3D6h6D4fD8gYd%2F1_AnimationTab.gif?alt=media\&token=caadc70f-160f-42e5-a4f6-b8c39417311f) To do this we can add these using the Clips section to create each clip (Red and Orange box), and the frames section to modify the frames for each clip (Green box). ![Adding and modifying Clips](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FMuRXQK6ohHl70KDKTxVP%2Fimage.png?alt=media\&token=6b203a99-3120-47c6-9f0c-46835e489486) This tab will allow you to modify the animation settings as you see fit. In this case, I have two animations that I would like to set. An Idle animation, that is from frame 0 - 60. And a jump animation that is from 60 - 299. ![Adding an Idle and Jump Clip](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FLArQpGuVTVG30JTk3XEe%2F2_CreatingClips.gif?alt=media\&token=9493acc8-f40b-4641-bf27-4a25c3bcfb17) It is possible to set animations as loops or not under the frames section. The Idle will be set to a loop, and the jump will not. It is also possible to modify the Loop Pose and Cycle Offset if needed. ![Looping the Idle Animation](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FG9Q3v2v6p5pNegk3zbMh%2Fimage.png?alt=media\&token=f53f74d3-f3f3-4353-a5dd-4ba215e4cb54) You can preview the animation at the bottom of the Inspector. ![Previewing the Animation](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FKq2xS2xu2AEOXm1QmKX4%2F3_AnimationPreview.gif?alt=media\&token=c3940814-a009-4efd-9d0f-c3abec889604) When you hit Apply your Animation clips will be available to use (dragging into an Animator for example) under the original Asset. ![Applying your Animation Clips](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FG0jqWXvHtZvoexD8OfBB%2F4_ApplyingAnimations.gif?alt=media\&token=1fe02563-d616-4d46-abb3-404abbab41db) Note that an imported model with an animation will not animate in a Space unless it has an Animator or Animation component applied to it. For Mona Spaces we recommend Animator, as that will open up Reactor as a tool for interaction. For more information on this you can look at [Animation in Unity](/create/building-spaces/improve-your-space/animation-in-unity). # Player Property Volumes (PPV's) This page will cover everything to do with Player Property Volumes (PPVs). {% embed url="" %} Player Property Volumes Video {% endembed %} Player Property Volumes (PPV's) are a tool that allow you to control certain properties within an area of a Space. This area is defined by a box, mesh, or sphere collider. Examples could include : * zero, lower, or higher gravity * the effect of distorting the players vision * allowing the player to walk or run slower or faster. You can affect things such as gravity, post processing effects, and certain properties of the avatar. When taking these to the limit you can create some very interesting situations within your space. ![The PPV Script when dragged onto an object](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FjKDFhKvBbm6X0fWcKmaD%2Fimage.png?alt=media\&token=dfb7c9e0-0e8d-4f4b-804d-33b6ab4d02c2) The properties that are currently available include : * Gravity (Default -15) * Jump Height (Default 6.5) * Walk Speed (Default 2.7) * Sprint Speed (Default 10) * Bloom (Default 0.5) * Chromatic Aberration (Default 0.5) * Motion Blur (Default 0.5) {% hint style="info" %} * -1 will leave the parameter setting as is in the space. So only edit the ones you want to affect. * Hover over the parameter text to see the default settings in editor. * **Make sure to set the collider IsTrigger setting to true otherwise you will not be able to enter the collider.** {% endhint %} Some of these can be set to negative, so be sure to play around and see what amazing things you can come up with! ## Creating a PPV The Player Property Volume is a script that you apply to an object with a collider. The script can be found in the Mona/TemplateScripts folder. Simply drag and drop the MonaPPV.cs script onto the object with the collider. ***The Collider should have the IsTrigger set to On.*** For organisation purposes we recommend making an empty gameobject in your scene and applying the collider and script on that. This way the PPV can act as it's own gameobject to edit easily. Adjust the settings on the script as you see fit. When the Avatar touches the collider, the settings of the PPV will override the settings of the default space, and return to the settings of the Space when the avatar exits it. ## Considerations ### Positive gravity without landing If you want a volume to throw the Avatar in the air (without letting them land) the gravity setting should be above 100. If it is below this the Avatar can usually land and the gravity only kicks in again if they jump. ### Can't get into the volume This is probably due to the PPV Collider 'IsTrigger' set to false. Make sure this is set to true/on. # Warp Volumes {% embed url="" %} Warp Volumes Video Tutorial {% endembed %} A Warp Volume allows a builder to teleport, or warp, a user from one location to another in the same Space. It is also possible to warp the player once they interact with the asset. It uses any game object transform in the space as a target. You can assign the orientation to face the same direction as the target object, or it will keep the same orientation as when you teleport. ### Setting up a Basic Warp Volume * Create an empty gameobject * Assign the Warp Volume component * Add a Box Collider (other collider types should work) * **Make sure to make the collider 'Is Trigger' to *****true*****.** If you don't do this the collider will simply be a collider and not work.

Set the 'Is Trigger' to true

* Adjust the box collider so that as soon as the user connects with it, they will be warped * Drag the asset that you would like to warp to onto the Warp Target field * An empty game object would be a good example * Select if the orientation is to the target (Use Rotation) or not * If you select local and pivot at the top right, the front direction is the blue arrow ### Setting up an Interactive Warp Volume * Create an empty gameobject * Assign the 'Mona Warp' component * Add a Box Collider (other collider types should work) * Select 'Use Rotation' if you want the user to face the direction of the warp target. * Select the 'On Interact' option in the Mona Warp component.

Select the On Interact Option

* **Make sure to make the collider 'Is Trigger' to *****false*****.** If you don't do this the collider will not be interactable. Note the collider has to be a physical collider due to how Raycasting is done in Unity.

Make sure the Is Trigger is false

* Adjust the box collider with the Edit Collider button to take up the area that the user can 'see' it. When the user reticle is over this asset, they can press 'E' to warp. * Drag the asset that you would like to warp to onto the Warp Target field * An empty game object would be a good example * Select if the orientation is to the target (Use Rotation) or not * If you select local and pivot at the top right, the front direction is the blue arrow # Adding Audio {% embed url="" %} Audio Basics Video {% endembed %} Adding Audio can improve the atmosphere of your space. It can also be used to enhance reactor events such as door sounds or other elements to add to your interactivity. Note that the Audio will be in the same environment as the Chat channel at the moment. It is currently possible to mute Audio on the browser tab, but this will mute *all* audio in the page (including chat). Some events can also have live music using the tools found in [Live Music Feed](/collect/own-a-space/live-music-feed)so adding a background track in the space would make it very difficult to use this functionality. Unity supports .mp3 and .wav audio formats. MP3 is recommended due to it's decreased filesize. ### Adding Audio to a Mona Space * Audio is added by using an Audio Source component. It can go on any asset, depending on what you are using it for such as the asset that makes the sound, or an empty gameobject for easier readability. ![Adding an Audio Source](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FQlFuL6YXx3SO9ZiVZjIp%2FAddAudioSource_01.gif?alt=media\&token=7b4b4c2c-ad50-4632-979b-a1c27f96f287) * Once you have an Audio Source you can drag and drop your audio file into the Audio Clip. ![Adding the Audio to the Audio Source](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FQw4FghB9UeuzNnnUdZ9D%2FAddAudio_01.gif?alt=media\&token=3bf464d7-11a6-473a-bd81-a94bff8a8724) * The most common tools on the audio source, depending on your needs, would be the following: * Loop (Will loop the audio at the end of the clip) * Volume (Adjust the volume of the clip) * Spatial Blend ( Is the Audio heard in the whole space, or is it local ) * Volume Rolloff ( How does the volume run off at distance ) * Min Distance / Max Distance ( How far can does the audio reach ) Of course there are others, but those are the main tools that adjust the parameters to your needs. # VRM Switcher It is possible to have a user switch to a specific VRM when they interact with an asset in a Mona space using the VRM Switcher component. A good example of this would be having a VRM model that the user can click on and load the VRM as their avatar.

VRM Switcher Example

This is done by creating a collider with the VRM Switcher component. {% hint style="info" %} Switching the Avatar is not local to the current space. They will keep the new avatar indefinitely until they manually change their avatar or use a different VRM Switch. This includes when they go to other spaces in the Monaverse. {% endhint %} * Add an empty gameobject to your space. * Add a collider to the empty gameobject. Box colliders are recommended for performance. * Add the VRM Switcher component to the gameobject.

VRM Switcher component

* Add the URL for the VRM file you would like to switch to. Note this has to be a public source, so make sure it works with the standard Custom VRM import process beforehand. * Add the VRM Name to label the switch. * In the space, a user can press 'E' to switch to the target VRM Avatar. # Custom Canvases It is possible to customise your canvases in Mona to look like anything you want by creating a custom model for the canvas to be displayed on. Both images and live streams can be put onto a custom canvas, but the result may vary due to how UVs work with each process. Using a Livestream on the canvas seems to be more in line with the mapping. ## Creating a Custom Canvas * First, we need to create a model to place our canvas onto. For this tutorial, we can just create some simple examples. Note that you don't have to label the material canvas or make it red in the example below, these were just to show that it was one mesh with one material.\ \ Other examples of custom canvases include : * Creating multiple screens of the same livestream (as there can only be one live stream in a space) * Using animated gifs or a livestream to have an animated texture on an asset in your space * Combining livestreams from Touch Designer or other visualisation tools to add interesting dynamic environmental elements to your space * and many more...

Make sure your assets are one mesh and one material

{% hint style="warning" %} Note that the asset needs to be *one* object with *one* material. Otherwise, the canvas will not work. {% endhint %} * It is recommended to make sure that you 'Apply Transforms' or at least 'Apply Scale' to your mesh. This will make sure that your UVs will be scaled correctly.\ \ You can do this in Blender by using Ctrl + A in Object mode.

Apply Transforms to your model

* Unwrap the model as you see fit. The UV Square represents the canvas itself. If you have a 16:9 ratio stream, you need to stretch any rectangle's UV to the full square. In the example below, both the square and the rectangle are applied the same, this is the correct approach.\ \ Just a reminder that applying an Image (instead of a Livestream) may have results that are less predictable.

Adjust the UV Maps as you see fit

For more information on interesting approaches to Unwrapping UVs, you could check out the [Broken mention](broken://pages/DcxMDs8aiUViVwko7BKD)tutorial. By creatively utilising UVs on your model you could create very unique and interesting uses of canvas assets. * Once done, export as an .fbx to the Mona project in Unity. ## Adding the Asset as a custom Canvas * In the Unity project, drag a Canvas into the Artifacts gameobject. We will use this as a template to build our custom canvas.

Add a CanvasPrefab to the Artifacts gameobject

* You may want to Unpack the prefab to reduce warnings about modifying the prefab.

Unpack the Canvas Prefab to reduce warnings

* Drag your custom model into the base Canvas prefab object. This object will replace the Canvas tagged object after we copy over the elements that make it a canvas.

Add your custom canvas mesh to the canvas prefab

* There are three things you need to add to your model to make it recognised as a canvas. * Add the 'Canvas' tag to the asset * Add a Mesh Collider to the asset * Add the correct Mona Canvas material

Setting up the Custom Canvas Asset

* Once done, delete the original Canvas Tagged object ' UniqueCanvasName\_1'. * Don't forget to name your asset as you would like it to be recognised in the Canvas tools within the Mona space.

Delete original canvas and rename your own

* If you test the space in the playground the texture should be replaced with the 'Coming Soon' image. If so, your custom canvas is ready to go.

Test in the Playground

* Note how the Coming soon image is not to adjusted on the first plane and rectangle, these would look correct using the Livestream feature on a canvas. * Once uploaded to your wallet you can assign the Image/Livestream URL as per usual. FOr more information you can go to : * Livestream - [Add a Livestream to a Canvas](/collect/live-streaming-in-mona/add-a-livestream-to-a-canvas) * Images - [Add Images to a Canvas](/collect/own-a-space/add-images-to-a-canvas) # Embedded Video It is possible to add a video to your space using the Video player tool in Unity. {% hint style="warning" %} **Note that the video URL link *****cannot***** be updated after the space has been minted.** If you want to update the video link after minting you should use the standard canvas approach that can use Live streaming currently and will support video in the future. {% endhint %} * Select the asset you would like to add the Video to, add the 'Video Player' component. * Make sure to set the 'Source' to 'URL' otherwise it will not work.

Add the 'Video Player' and set the Source to 'URL'

* Add the URL for your video into the 'URL' parameter. **Unity only supports .mp4 video formats.** * It is recommended to turn the 'Looping' and 'Mute' options to on. Mute or significantly reduce the audio as the audio is *global*. As this URL cannot be updated after the space is minted the owner will not be able to edit this result.

Turn on Looping and Mute

* You can test the video URL by pressing the Play the play button within Unity, or test it within the playground itself. # User Interface (UI) It is possible to add User Interface (UI) elements in a space. As scripting is not possible in Mona elements like buttons etc will not be functional, that said, elements like text, images etc could be used in interesting ways for your Mona space. It is possible to use Animation/Reactor on UI Elements however, and once again if it can be animated it can be triggered by Reactor. {% hint style="info" %} Note that UI in Unity is a bit of an interesting process and has a bit of a learning curve due to how it is applied. As the Camera is generally controlled by Mona, certain elements are more difficult or invalid approaches. {% endhint %} ### UI Elements Mona would work best with the following UI Elements : * Text / Text Mesh Pro - Useful for any text you may want to display. Text Mesh Pro is recommended as it has a higher quality result. * Image - Displays images in your UI. It has a number of ways to use it such as Simple, Sliced, Tiled, and Filled. * Raw Image - Image displays a sprite where a Raw Image takes a texture. That said Image is usually recommended for UI based assets. For more information on these you can go to the Unity Manual [here](https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/UIVisualComponents.html). If you are planning on using animation/Reactor to control the more interactive UI elements you could possibly use other elements, but as you cannot use scripts for them to control other elements (eg. a slider to control text) this may have limited functionality. * You may not be able to use the Record button for certain elements of Interactive UI (Such as the toggle) but it is possible to animate this feature using the 'Add Property' at the left of the Animation panel. This could be applied to *any* animation situation.

Add property to animate features

* This can be used to animate more advanced UI Elements, which means they could be used with Reactor

Examples of animated UI Elements

### Adding a UI Element * To add a UI element, select the Mona 'Space' object (as all objects need to be a child of this asset) or under an asset in your space and **right click to add a UI element**. UI is added on a Canvas gameobject (which is different from the Mona Canvas asset). * If you add a Text Mesh Pro element you will be asked to import the assets to do so.

Adding a UI Element in Unity

* **Delete the EventSystem Gameobject** that is added as this is a script related asset and may throw errors if it is included.

Delete the EventSystem Object (Script related)

* It is recommended to keep UI Elements under the one canvas, however it is possible to have multiple canvases. eg. if you are using World Space canvases. ## Canvas Options There are three different ways to apply UI in Mona. Screen Space - Overlay, Screen Space - Camera, and World Space. Screen Space - Camera would require a Camera in the scene, which is generally not recommended unless you have a specific reason to do so (cinematics etc.). Adding a camera to a space will override the player characters camera. This setting can be found on the Canvas Gameobject that is added when you add the UI element. ### Screen Space - Overlay / Camera Screen Space - Overlay will apply the UI over the top of the browser screen, much like most games have a HUD/UI to display health, score etc. Screen Space - Camera will apply the UI over the top of a specific camera similar to the Overlay. As noted, only add a custom character if you are planning to override the players camera. * Select the Canvas Gameobject, and **set the Render Mode to 'Screen Space - Overlay'**

Set Render Mode to Screen Space Overlay

* Note that the canvas asset will be rather large, and not aligned with your space. This is how it is meant to look. The arrow points to the default Mona Space flooring as an example.

Note the UI Canvas Asset in Screen SPace mode is large!

### World Space World space allows you to create a UI element within your Mona Space. * Set the Render Mode to World Space.

Set the Render Mode to World Space

{% hint style="warning" %} Note that you do not need to add an Event Camera and the warning under the Event Camera can be ignored as events are not supported at this time. {% endhint %} * You may need to edit the scale of the Rect Transform component on the Canvas so that it scales to the size of your space. This will keep each UI Element at a reasonable size moving forward.

Adjust the scale of the Canvas in World Space

* Note that the settings can be tweaked to use the settings that feel right to you. It all depends on the size of the UI element in your space.

Adjust Canvas settings as needed

## Positioning UI Elements * The position of your UI elements depends on it's settings, **modify the Rect Transform settings** in order to position your UI Element as you like. This would be similar to aligning text to the left, middle, or right as well as the top, middle, or bottom. * Using Shift or Alt can help affect the pivot and position with Hotkeys. * If you want the Canvas to take up the entire screen (not using World Space), you should use the Stretch options (vertical, horizontal, or both). Otherwise your elements may be placed more in the centre of the screen. Stretch will take into consideration the size of the screen regardless of what resolution it is. * For more information on these you can check the Unity Manual [here](https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/UIBasicLayout.html).

Modify the Canvas Anchor / Pivot and Position settings

# Creating Custom Shaders This doc goes into how to make custom shaders using the Unity Shader Graph... The Standard Unity shader is what is most commonly used to display materials on your asset. It includes the most common options such as a base color, diffuse, normal, metallic and smoothness textures, as well as other things such as emission, tiling, and offset. It is possible to make custom shaders in Unity to have more control over how your materials look on an asset. You can animate textures or create them procedurally, you can create interesting and unique effects that work depending on the scene itself. In some more advanced cases you can even modify the asset itself. You can create the custom Shaders in tools such as the Unity Shader Graph, [Amplify](https://assetstore.unity.com/packages/tools/visual-scripting/amplify-shader-editor-68570), or [Shader Forge](https://acegikmo.com/shaderforge/). The Unity Shader Graph is included with Unity however and easy to setup. ## Installing the Unity Shader Graph The first thing you will need to do is install the Unity Shader Graph from the Package Manager. * Go to the Package Manager window. * If it is not visible, you can go to 'Window / Package Manager'. * At the top left, make sure that 'Packages : Unity Registry' is selected. * Scroll down to 'Shader Graph' package, or use the top right Search bar to search for 'Shader Graph'. * Select the Shader Graph package, and select 'Install' at the top right of the window. ## Creating a Unity Shader Graph Shader * A common thing to do is to create a 'Shaders' folder in your Assets folder, but this is not compulsory. * Right click in the Project window and go to 'Create > Shader Graph > Built in > Lit Shader Graph OR Unlit shader graph'. * Lit Shader Graph will use standard lighting approaches. * Unlit Shader Graph will result in a completely bright texture and doesn't use any lighting information from the scene. These are more performant. * Select the new Shader and select 'Open Shader Editor' in the Inspector, or double click on the Shader itself.

Custom Shader Graph example...

## Using the Unity Shader Graph From here you have access to all the functionality of a node based Shader graph. Of course, there is *so much* you can do with shaders! And there are plenty of resources online for more advanced custom shaders, but lets look at the basics. ### Creating a Simple Color Shader All nodes in a default Unity Shader Graph will not be able to be edited in the material unless you allow them to be. This is known as *exposing* the property such as making a color or number be able to be modified when you select the material, through to choosing which texture is used on different material types such as Diffuse, Normal, or Smoothness to name a few. Let's make a simple shader with custom elements. * Right click in the Project window, and select 'Create > Material' to create a new Material. By default this will use the 'Standard' Shader which you can see at the top of the Material in the Inspector window. We will update this after we have created our shader. * Right click in the Project window and go to 'Create > Shader Graph > Built in > Lit Shader Graph. * Select the Shader and select 'Open Shader Editor' in the Inspector, or double click on the Shader itself. * At the top left is a window panel, this is called the *Blackboard*. * The Blackboard can be turned on and off at the top right of the window.

Add a simple Property into the shader graph...

* Click the '+' symbol in the Blackboard to create a new property to expose. In this case, lets create a color property, and rename it 'Base Color'. * Connect the property by dragging from the node to the 'Base Color' property under the 'Fragment' section. * Select 'Save Asset' at the top right. you will need to do this *every time* you want to update your material. * Go to the new Material you created, at the top of the Material in the Inspector click on 'Standard' and select 'Shader Graphs > \[NameOfYourShader]'.

Assign your new Shader to the Material...

* Adjust your exposed property as you see fit! With Metallic and Smoothness you can use a single number to adjust them, but lets use a slider to make that easier to use.

Add Properties as Sliders...

* Go back to the Shader graph. * Add two float properties in the Blackboard. One for Metallic, and one for Smoothness. * Drag them into the graph. * Select each property and set the 'Mode' pulldown to slider, rather than Default. * It is possible to adjust the minimum and maximum properties, but not needed in this case. * Drag the edge of each node to their respective property under 'Fragment'. * Save the asset, and you can see the properties available to be edited in the top right. ### Adding Textures as Properties Another common property in materials is textures. Let's update our shader to include textures instead of simple color and sliders. You could start a new shader if you would prefer.

Add Texture Properties...

* Go back to the Shader graph. Delete the previous properties in the Shader graph if you are updating your previous material by selecting them and press *Delete* key*,* or right click on each and select 'Delete'. * Add three 'Texture 2D' properties into the Blackboard. 'Diffuse', 'Normal', and 'Smoothness'. * Drag them into the Shader Graph.

Add Sample Texture 2D nodes for each texture property...

* In the graph, right click and select 'Add Node' or simply hit *space*. * Type in 'Sample' in the search bar, and ***double click*** the 'Sample Texture 2D' to add it. * This is required to pass the texture property into the final result. * Duplicate or copy the 'Sample Texture 2D' node so that you have three, one for each property. * You can use Ctrl + C and Ctrl + V to copy and paste nodes. * You can use Ctrl + D to duplicate nodes. * Connect your properties to their 'Sample Texture 2D' nodes, and then connect the 'Sample Texture 2D' nodes to the final properties under the Fragment section.

Update the Normal Map Sample Texture Type...

* You will need to make sure that your Normal map is setup correctly, otherwise the normal will look broken. Select the Normal map 'Sample Texture 2D' node and change the 'Type' from 'Default' to 'Normal'.

Apply textures to the material...

* Save your asset and close the shader graph. * Update your material with the new Shader if you created a new one. * Drag and drop the respective textures into the properties in the material. You can also click on the 'Select' button on each texture if you like. * Drag and drop the material on your target asset! ### Creating a Scrolling texture shader Of course, Shader graph allows for a near endless range of effects using all the nodes it has access to. One example is a simple scrolling texture and make a water effect. First, you'll need a water texture, it could be realistic, toon shaded, or any other texture you may want to have scrolling in one direction. Do note that the direction will depend on how the asset has its UVs unwrapped. The default Unity cube can work for the purposes of this tutorial. * Add a default unity cube to your scene by right clicking in the Project window (not the hierarchy) and go to '3D Object / Cube'. * Create a unique material for it that we can add our new Shader after we create it. * Create a new Shader Graph shader and add the texture properties and Sample texture nodes. * Follow the previous shader example or update that shader if you like. * Add a *'Float'* property to the Blackboard and call it 'Scroll Speed'. * Set the Scroll Speed default between 0.5 - 1 by default in the Node Settings panel at the top right. * We may want to adjust the speed of the scroll in the material, we could also use this in Reactor for interesting interactive results.

Set the default of your Properties in the Node Settings panel...

* Select 'Add Node' and search for the 'Time' and 'Multiply' Nodes. * We need to multiply our Scroll Speed number by time to use for our scrolling effect. * Don't forget you need to double click on the node to add it. * You should have something like the following :

Add a scroll property, Time, and Multiply node...

* Add a 'Tiling and Offset' Node to the graph. * Offset represents the placement of the texture in the UV space, or where it appears on the polygons. This is basically the same elements as the Tiling and Offset that comes with the Unity Standard Shader. * Connect the Multiply node to the Offset parameter. * Connect the Tiling and Offset Out property to the UV of your 'Sample Texture 2D' Node.

Add the Tiling and Offset Node before connecting it to the Sample Texture 2D nodes...

* Note how you can collapse a lot of nodes so that it doesn't show the graphic. You can do this with the arrow at the top of the graphic. * It is also possible to have one node connect to more than one property such as using the scroll speed to affect the diffuse, normal, *and* smoothness. * If the scrolling effect does *not* work as soon as you connect it, make sure that your Scroll Speed float parameter actually has a number in it by default, otherwise it will be 0, which will not scroll. You will note that this scrolls in a diagonal direction, which is maybe not what you want. This is because the scroll speed is being applied to both the U and V directions, rather than just one. So lets look at limiting this to one direction. * Add a Vector 2 node between the Multiply and Tiling and Offset nodes. * Connect the Multiply to the first Vector if you want the scroll to go left, or the second Vector if you want the scroll to go down. * If you want it to go the other way, you can use a 'One Minus' node to invert the vector 2 result. * The result should look like the following :

Add a Vector 2 node for scroll direction...

If you created an asset with specific UV unwrapping, you could then have this one shader create a flowing river or curving conveyor belt to name just a couple. ## Other Resources There are tons of tutorials out there on the Unity Shader graph on YouTube and the web to create some amazing results with custom shaders. It all depends on what you are trying to do. # Imported Assets Depending on your pipeline you may find difficulty in getting your assets into Unity. This page will go over some common approaches for getting around these issues. ## Open Brush Open Brush files use dependencies that give an error inside of Mona because they're reliant on certain scripts. This is simple to fix however with the following : * Load the space files in * Import the OpenBrush SDK unitypackage * Import the OpenBrush Json unitypackage files For more information, and to download the required unitypackage go to the following : {% embed url="" %} Open Brush documentation an Links {% endembed %} ## Rhino/Revit ### Poly count As much as it is possible to export assets as .fbx from Rhino/Revit into Unity, as these 3D tools are not designed with optimized polygon count in mind, it is highly likely that your assets will be very high polygon for a WebGL experience which will reduce the frame rate on spaces. It is strongly recommended to look into mesh optimization using something like Blender (which is free) or other 3D modeling tools (Maya, 3D Studio MAX etc.) in order to make sure that your user experience is as good as possible with a reasonable frame rate. Rhino 7 does have a remesh tool now however, so that could certainly be used to improve your assets performance inn a space. An example of this can be found at the following : {% embed url="" %} Mesh optimization Video Tutorial {% endembed %} ### UV Wrapping UVMaps are also not possible to be edited in Rhino or Revit. These will tell how to apply the texture to the assets in Unity. Once again Blender, Maya, 3D Studio MAX etc. all have tools that allow for UV Editing. Tutorials for this will be included in the future, but you can certainly search for good UV Unwrapping tutorials for your 3D modeling tool of choice to find out more. # Lightmaps (Bakery Asset) Bakery is an asset on the Unity store that offers improved, and potentially faster, lightmap baking results in comparison to the Unity Lightmapper. Bakery is usually about US$60.50, but can be found for half price on Unity Store sales. Bakery does things a little different from the Unity Lightmapper, and has some quirks of it’s own, but can be well worth the results. Note that there are some considerations with the Bakery asset. The Mintable file does not include the Bakery asset due to licensing issues, and therefore there are some console errors with the build when opening the Mintable file in Unity. **The owner will need to purchase Bakery as well if they want to use your lighting or update the scene,** or they will need to redo the lightmapping with the Unity Lightmapper if they want to make any changes. **Bakery will also add significant filesize to the Artifacts and Portals scenes,** even if there are little to no assets in them. So this negates the benefits of filesize with the better packing for the second UVs. {% hint style="warning" %} Due to the aforementioned issues Bakery is *not* recommended to use unless you understand the potential issues. {% endhint %} ## Overview * Install Bakery Lightmapper * Make sure the imported models have Generate Lightmap UVs (if you want Bakery to take care of that) * Set any object you want to bake into the lightmap to Static * Either add the Bakery light scripts to the lights you have in the scene or add bakery lights from the Bakery / Create menu. * Set up the Lightmap settings in the Bakery window * Render the lightmap * After rendering the Lightmap, generate the Reflection Probes (if you have them) ## Installing Bakery 1\. Open the Package manager from the Window Menu. 2\. Add it to your layout. ![Adding the Package Manager](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FL7L6bs9wcRubbK5HJX8f%2F1_OpenPackageManager.gif?alt=media\&token=8b868b77-8edc-4b87-8b0a-2089d717d2ea) 3\. (Sign in if you need to) and select Bakery - GPU Lightmapper. 4\. Select Download in the bottom right of the Package manager (I will use a different asset as I already have the latest Bakery downloaded). 5\. Once downloaded, select Import. A popup will appear asking what assets you want to import. Select Import at the bottom right. ![](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Fd0U0m7n0YOC11tERc60y%2F2_ImportingBakery.gif?alt=media\&token=0263681f-1171-400a-934d-c9a7239dd216) ## Setting up the Scene ### Generating Lightmap UVs For lightmaps to bake the information your objects need a second layer of UVs to bake onto. You can do this yourself in an external application like Blender etc. But if you are putting the scene together in Unity it is somewhat easier and faster to let Bakery do this for you. Bakery has a much better packing algorithm than Unity does, with differing results depending on which method you use (more on that in the Bakery Settings section) 1\. If you want Bakery to unwrap your objects for lightmapping, **select your model file in the Project window and then go to Inspector / model tab > Generate Lightmap UVs. Then select Apply.** A window may popup asking if you want to apply the change to the children objects as well. ![Set imported models to Generate Lightmap UVs](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FsEIm1CZ8XXqVh40qqYRB%2F1_SetGenerateLightmapUVs.gif?alt=media\&token=44cd35fa-0266-4cdb-b6cc-91d9c03e3ac6) NB : If you bake and your lightmaps look terrible (overlapped UVs, large dark blocks for no reason, etc.) then not having correct second UVs is probably the reason. ### Static Objects 1\. **Select objects to be lightmapped in the scene or Hierarchy and set it to *****Static*** in the top right of the objects Inspector. If this is not set, the lightmapping will not see it. ![Set scene objects (to be lightmapped) to static.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FkejfTsvN7imoG5S8JRDn%2F2_SetToStatic.gif?alt=media\&token=4a5ab433-a050-464c-8d2d-4af0fa4b4c0c) ## Using Bakery {% hint style="warning" %} ***It is not possible to use Bakery Shaders in your Mona space.*** This is due to them referencing custom scripts, which are not supported in Mona. So using Bakery for lightmapping works fine, but using the Bakery shaders on objects do not. We recommend using Standard or WebGL compatible shaders only. {% endhint %} ### Adding Bakery Lights There are two methods to set up lights using Bakery, Adding Bakery scripts to pre-existing lights or creating them from the Bakery menu. Pre-existing lights offer a more visual guide to the result, whereas using the second method does not. Therefore using the second method won’t get visual results until after you bake the lightmaps. You could purchase the Bakery Previewer asset (that is still in a preview state as of Dec 2021) for real time previews of the Bakery results. #### Method 1 - 1\. Select a pre-existing light in your scene 2\. Make sure that it is set to baked. This will make sure that the light does not count as a real time light. Note that this light is purely for visual reference in the scene and is not used in the final bake. The Bakery scribe is what is included in the baked scene. ![Set Lightmap lights to baked](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FiPZrAP6vXfWaHoBffktb%2F3_LightToBaked.gif?alt=media\&token=1929e132-0720-4d7f-b321-e331d829d185) 3\. Click on Add Component at the bottom of the Inspector. 4\. Type ‘B’ in the search box to filter to the list of Bakery scripts 5\. Select the script that best suits the light you are applying it to. Options are : * Bakery Direct Light * Bakery Point Light * Bakery Sky Light There are other Bakery scripts but they are outside this tutorial. Feel free to look at the Bakery docs here for more information. You may note there is no spotlight script. An example Spotlight can be found using Method 2 to create a modified Point Light to create one. ![Add Bakery Script to light.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Fqi0rzRNKVbAH5GBz0w01%2F3_AddingBakeryScript.gif?alt=media\&token=ab91dbcd-24dc-46e7-88e9-99613f86cee7) Once you have applied the script, you can easily transfer your light settings over to the Bakery script using the Use real time to lightmap Button. Or vice versa with the Use lightmap to Realtime button. Real-time = the Unity Light Lightmapped = the Bakery Script Note that changing the unity light and not updating the Bakery script is a common error, so keep that in mind when the lightmap doesn't work as you expect. Get used to transferring settings between the two elements of your lights as you will end up doing it quite a lot. ![Match Bakery script to light or vice verse.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FmuyUiVgHaM6hUPc2w0qY%2F4_MatchScriptToLight.gif?alt=media\&token=64de25c0-b89b-4b6b-989c-b0c026ba9c48) #### Method 2 - 1\. Go to the Bakery / Create menu and select the light you would like. ![Add Bakery light by menu](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FfRcxeC5T1c9zHNxcHdNo%2F5_AddByMenu.gif?alt=media\&token=8ebc2227-c15f-4652-a999-eec0c7c43c20) 2\. Move your new light to your desired location, and angle. As noted, this method does not give any visual cues as to what this might look like. ![Adjust light as needed](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FzZiUd741EduXdaZPFeXo%2F6_AdjustLightFromMenu.gif?alt=media\&token=8125fa0c-13e2-4c53-8df2-5dc4ac885ab1) 3\. Adjust the parameters on the Light settings as you see fit. #### Bakery Lights in detail This section will cover some of the elements of Bakery lights in detail. Coming soon. ### Example Scene As an example moving forward, this scene has one real time directional light (the one that comes with the template), a Bakery area light (which is basically a plane with a script that sets an emissive material to it), a Bakery spotlight (which is a modified point light that has no visuals in scene), and a Bakery point light (which is a Unity light with the Bakery Point Light script on it). All unity lights (apart from the realtime light) will be set to Baked (although this will not be used with Bakery). One object with emissive materials (see the materials tutorial for details) will also be added. ![Example Scene](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FGxKSqnU905AVPHIEc9Ql%2F7_LightSetup.gif?alt=media\&token=b81ccf2c-034e-4a0c-9997-bdc458363821) ### Lightmapping settings 1\. In order to see the results of the lightmap baking, open the Lighting Tab and place in your layout. ![Add the Lighting tab (for later)](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F1ZlC4WW0UM5DhLsDWz6G%2F4_OpenLightingTab.gif?alt=media\&token=7b7ca8ae-f8a2-43f7-8212-2fb6d161657b) 2\. Open the Bakery Tab using Bakery / Render Lightmaps. Drag and drop it according to your preferred layout location. ![Add the Bakery Render Lightmaps Tab.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F8NZnOwwyv5qDcXVCjXMz%2F8_BakerySettingsWindow.gif?alt=media\&token=866148f6-9ae1-412d-b7d1-2adc0247ab9e) 3\. If you hit the Render button in the Bakery Settings window. Select yes to bakery automatically selecting Optimal settings. It is recommended to set the recommendations as default, and play with them afterwards if need be. Select yes if you have an RTX graphics card, or no if you have a card older than that. You do not need an RTX card for Bakery to function, but it will speed up the process if you do. ![Using the Automatic Optimal Settings tool](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FjNwDaBo8zuWh0H0TMd02%2F9_AutomaticallyAdjustSettings.gif?alt=media\&token=a15620e8-b5f5-47e8-9e94-a630c03ecebb) 4\. So far the best results I have found in the settings are the following ; ![Example settings](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Fcqavd8pP0eFC8ucbSb8N%2F10_BakerySettings.png?alt=media\&token=5c210d43-3771-4f34-8bce-a262a8f73b80) Some of these depend on the results of your Optimal Settings (such as RTX mode and Optix version). * Setting the Texels per unity will be the main factor on quality as this will give more space to the polygon in the lightmap texture. This of course means more textures will be needed. Adjust this as needed for optimal resolution to size. * If you select Xatlas under the Unwrapper it will come up with a popup about settings, I will usually apply the recommendations. * Directional Mode / Baked Normal Maps gives good results for speed. Other options may give better results for slower render times (or vice versa). Check the documentation for more information * Hole Filling will only be available if you use the XAtlas mode under Atlas Packer. I find this better for packing the second UV more efficiently. * Adding Ambient Occlusion will slow down the render but give better results to your environment. Use as you see fit. ### Baking the Lightmaps 1\. Once the objects are set to static, the Bakery light scripts have been added, and the settings are set to the above (or similar), you can render the lightmap by pressing Render at the bottom of the Bakery Settings tab. ![Bake the Lightmaps](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Fs3uDnCv1mimeZ3OLycQR%2F11_BakeLightmaps.gif?alt=media\&token=b3966bed-4504-4364-92d2-2dda7aa77fcb) 2\. Once baked, you can check the resulting Lightmap textures in the Baked Lightmaps section in the Lighting Tab. You can use this to visually see the result of the unwrapping process, and can sometimes guide you with trouble shooting (overlapping second UVs or sections of your space that don’t require baking (polygons that are never seen such as the other side of a ceiling or floor). ![Check the Lightmaps](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Ff4eJLg8xZOFwLbwYQagE%2F12_CheckLightmaps.gif?alt=media\&token=a9981ff3-99d1-4a00-aafc-3259722133b7) ## Refining Results ### Improving your space 1\. Modify Bakery Tab > Texels per Unit to adjust how much space the polygons take up on the lightmap. Increasing this will (potentially) increase the amount of Lightmaps you have (and therefore resulting file size) when the previous lightmap is ‘full’, but it increases the amount of space the polygons take up on the lightmap texture (eg. better quality). Finding the sweet spot between quality and number of lightmaps is half the fun. ![Texels per unit = 20, Total Bake Time = 19 seconds](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FxBlP3N2qZNmcCKJmkpVD%2F13_BakeryAt20.png?alt=media\&token=53e870f6-ff1a-4873-b4bb-993636a064f1) ![Texels per unit = 65, Total Bake time = 21 seconds](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FHedgw4fcNGrVqj9DGgb8%2F14_BakeryAt65.png?alt=media\&token=a0fb1767-9a03-4e3d-9b32-80d00baead23) NB : These renders are done on a Ryzen 5950X, 64Gb RAM, 2070RTX. If you compare the results to the unity lightmapper, the number of lightmaps to quality is exceptional. I could go higher in quality and still keep the lightmaps small (note how the two maps are only 512 by 512 pixels) but to be honest this is more than reasonable, and would be more so if all the objects weren’t plain colour objects 2\. Other options are available to tweak, but generally aren’t needed with results this good. 3\. Isolate the results of your baked lights, by turning down/off your real time light/s and the environment/ambient lighting under Lighting / Environment / Environment Lighting > Source and/or Intensity multiplier. Your scene will look different when you turn these back on, but it’s a good way to understand the effect of each light…so bounce between the two (or three) states. Note that this only works with Unity lights as reference, and Bakery lights (on their own) will not be displayed in the space. ![Turn off ambient lighting](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FJ5nEiN403lm0aDWgTLhW%2F6_TurnOfAmbientLighting.gif?alt=media\&token=5578fb08-c346-48f4-88e0-ad4873d80274) ### Optimising results 1\. Make sure that the Lightmap resolution is set to the level that fills up the last lightmap. Check what your lightmaps look like in the Lighting Tab / Baked Lightmaps section. If there is any blank space on the final map, then turn up the Bakery Tab / Texels per Unity resolution (even by a decimal level) until there isn’t. Make sure that it doesn’t spill over into a new lightmap, and have most of it blank. Lightmaps will take up considerable file size, so keep this in mind when you are choosing how many you create. 2-3 at 2048 should be plenty. However this could be more or less depending on the complexity of your space. ![This lightmap has nearly half the space wasted for example](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FS1mU16Q6XF8nI1L8CgkV%2F9_WastedLightmap.png?alt=media\&token=a8c1db44-242d-4520-82ca-dc8dbf76f695) 2\. It is possible to make an object take more texture space in the lightmap. Select the static object and increase/decrease the Mesh Renderer / Lightmapping > Scale under Lightmapping. Putting that higher will mean it takes more space in the lightmap, less and it will be smaller. ![Scale objects in Lightmap (if needed)](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FrA1QQAuE4UaamapgWP4h%2F15_ScaleInLightmap.gif?alt=media\&token=55295900-266c-4a94-8a77-2a57e16a1f7a) ## Miscellaneous ### Mona related 1\. Artifacts should not have Static applied as they will affect, and be affected by, the environment and they might not be there forever (as artifacts can be modified or turned off). So a safe bet is just to turn all Artifacts’ Static to off. Portals are fine however as they cannot be edited in the space. ### Troubleshooting #### All/some of my objects look dark/messup up As noted, if many/all of your objects look like the lightmapping is messed up, there is a reasonable chance those objects have not been set to Generate Lightmap UVs correctly and the lightmaps are overlapping. Check out Generating Lightmap UVs at the beginning of this tutorial for more information. #### My emissive object isn't affecting the objects around it If your object that is meant to be emitting light does not seem to be affecting the space around it then your object might not be 'big' enough to do so. There are two ways to get around this : 1. Go back to the original model in your 3D application and make sure to reset transforms, Apply transforms or the equivalent. This will make sure that the asset is exported at the right scale 2. Go to the Model tab on the imported object in the Project window of unity. At the top there is Scale Factor. If you increase this the 'size' of the object is bigger, you will need to readjust the size in the scene once you apply this. You could possibly use this to your advantage if you want an object to emit more light, without affecting the emissive material itself. # Optimise your Space It is very important to optimise your space as best you can in order to make sure that your space looks great *and* runs smoothly. A space can look and run much better on a desktop web browser, than a standalone VR or Mobile device however. So keeping your target platform in mind at all times will help make decisions as you go. The following tutorials will cover different techniques if you want to improve how your space runs. # Prefabs Prefabs are a tool that helps with management and optimization of a space by creating assets that work much like a template object. ***When you update the Prefab,***** all *****assets in your space will be updated as well.*** If you plan on using the one asset in multiple places in your environment, then it is recommended to use Prefabs to do so. This improves performance as well as prefabs placed in a space act like *instances* of the asset, which allows Unity to render them to the space with less resources than if you placed the same model in the space manually. ## Setting up a Prefab Setting up a prefab is as easy as dragging the asset from the Hierarchy to the Project folder. It's recommended to have a folder in your Project labelled Prefabs, and then drag your assets into that. ![Creating a Prefab](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FEK4JtNgSg2ldsYJ2ryT9%2FSettingUpAPrefab.gif?alt=media\&token=ef6c92cf-dba4-4595-9e85-617517e7b603) ## Updating your Prefab There are several ways to update a prefab, and therefore all the assets in the space that use that prefab. Which one you choose completely depends on your process, but will basically come down to two results, editing in Context and editing in Isolation. ***In Context*** will open the prefab in the space, so you can see the space around the asset if that is important or useful to visualise next to the asset. ***In Isolation*** will open the prefab in it's own space, so you know exactly what is included in the Prefab itself. ### Method 1 ![Editing the prefab with Right Click](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F0B9Vuk4juWCpdmOTnYyw%2FUpdatingAPrefab_01.gif?alt=media\&token=aeb335c2-5e68-45a2-9f47-ac580e6f2422) Right mouse click the prefab asset in the Hierarchy, and use either : * Prefab > Open Asset in Context * Prefab > Open Asset in Isolation This will open the asset itself allowing you to edit it as you see fit. Once you return to the main space (at the top left) all instances of the Prefab will also be updated. ### Method 2 Click on the arrow to the right of the asset in the Hierarchy to open the asset in context. If you hold the Alt key it will open in Isolation. ![Editing the prefab using the Arrow](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F9IBSyIlfTpqM0OFzyKaL%2FUpdatingAPrefab_02.gif?alt=media\&token=fc04faee-7e8b-4023-99d7-5028568bfd22) ### Method 3 It is possible to update the Prefab *after* you have edited the asset in the space using the Overrides pulldown at the top right of the Inspector on the prefab itself with the blue box (not the asset you have edited if it is a child of the prefab). It is also possible to revert back to the original prefab if you do not like the changes you have applied. ![Editing a Prefab using Overrides](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FftPOaouNbHkhqkmdRV4a%2FUpdatingAPrefab_03.gif?alt=media\&token=5497e871-d3b8-44cf-9cec-32af20ed778c) ### Method 4 Double click the Prefab in the Project to open it in Isolation. ![Editing a Prefab by Double Clicking](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F9eO1aHfhaxZ2f9HB4uX5%2FUpdatingAPrefab_04.gif?alt=media\&token=a9e3e637-0755-4d93-9184-d23a72af6296) ### Method 5 Use the Open button on the prefab at the top of the inspector. It is also possible to select the Prefab asset in the Project with the Select button next to it if required. ![Editing a prefab using the Open Button](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FOUnxFGbNpykggwG8lUrq%2Fimage.png?alt=media\&token=fce286c2-41e6-477b-af21-8f275385a236) ## Returning to your Space After you have edited your Prefab, you can usually return to the Space itself by using the Top Left of the Space window. ![Return to editing your space](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FvRtfRfpXofq2RqjLe0id%2Fimage.png?alt=media\&token=a23dc6f6-e599-4c12-90d5-98ed41448c71) ## Removing an Asset from the Prefab Occasionally you may want to remove an asset from the Prefab itself. You do this by Right clicking on the gameobject in question and use : * Prefab > Unpack * Prefab > Unpack Completely Unpack Completely will remove *all* prefabs within the asset, whereas Unpack will remove the links to the prefab on the gameobject in question. This is useful on assets that produce a warning about editing Prefabs or Nested prefabs, and removes the warning. However note that the asset is no longer a prefab, and will not benefit from their advantages unless you make it a prefab again and use it as the Template. ## Unique Prefabs It is possible to make variations on Prefabs without updating the prefab itself. These are done using what are called *Overrides*, and can be applied to the following elements of a Prefab. * Overriding the value of a property * Adding a component * Removing a component * Adding a child GameObject To do this all you have to do is modify the asset directly and then make sure you do NOT update the prefab itself. Any overrides to the prefab will be visible in bold, and the Prefab icon (the blue box) may have a Plus on it notifying you that the asset has been modified. An overridden property will always have priority over updates you make to the original prefab. # 3D Asset Specs This page covers optimised asset specs to work across as many platforms as possible... {% hint style="success" %} WebGL operates with inherent performance and resource constraints, especially when targeting a wide variety of devices such as mobile and standalone VR. Therefore, it's crucial that you heavily optimize your assets to ensure a fluid experience for *all* users. {% endhint %} 3D Assets are different from .vrms, and therefore require different considerations when creating them. If you are creating assets to use in your space in Unity the following guidelines will help you create assets that look good *and* work well in Mona. You can use the following chart as a guide. Note the polycount is in *triangles*, rather than polygons :
Excellent 3D Asset SpecsGood 3D Asset SpecsReasonable 3D Asset Specs
Less than 4Mb in totalLess than 8MbLess than 12Mb
Less than 1,500 trianglesLess than 3,500 trianglesLess than 10,000 triangles
1 Mesh1 Mesh1-2 Meshes
1 Material 1 Material1-2 Materials
512 x 512 total texture *
(4x256x256 textures)		512 x 512 total texture *
(4x256x256 textures)		512x512 individual textures *
(4x512x512 textures)
e.g. rocks, small props that get used a lot, bushes, doors, etc.e.g. General architecture elements, furniture, trees etc.e.g. key/important environment assets such as sculptures, NPCs, detailed props etc.
\*Note how the textures differ from *Total* and *Individual*. Total means that *all* your textures add up to the target texture size, and individual means that *each* texture is the target size. ### Memory Web browsers have a 2Gb maximum memory allowance per tab regardless of the device's power. In this memory space, we need to store our website's front end, the main virtual space, all the players and their avatars, and any added items or artifacts as well as other elements. * **Consequences of Overuse:** Going over the recommended memory usage can lead to issues. More memory-heavy spaces will accommodate fewer users, making them feel less lively. Additionally, performance can suffer, causing lag, slow responses, or even crashes, which isn't ideal for an immersive virtual experience. ### **Polycount** High polycounts can lead to performance issues, especially on lower-end devices or when many objects are present in a scene. Make sure to note the difference between polygons and triangles as these can be different numbers. A simple summary is that triangles is double the number of polygons as polygons are usualy made of two triangles, but this does not take into consideration NGons, or polygons made of 5 or more sides. This is why Triangles are used as a baseline. As noted above there are recommended polycount guidelines for assets, but here are some example polycounts for different types of objects : * **Simple Objects** (lamps, rocks, etc.): ≤ 500 triangles. * **Intermediate Objects** (large furniture, small structures): 500 - 3,500 triangles. * **Advanced Objects** (large buildings, significant structures, hero assets): 3,500 - 12,000 triangles. * **File Size Constraints:** The file size primarily depends on object complexity and texture count. A single large asset can be up to 12MB. However, we encourage smaller assets which remain under 4MB unless its a particularly important asset. ### **Textures** As textures take up the largest amount of filesize it is important to keep these as few and small as possible with the following as a rough guide. * **Resolution :** 512x512 pixels or lower per texture. Higher resolution is not recommended. * **Count :** Try to use as few textures as possible to reduce memory consumption. When considering texture resolution for 3D objects, it's a balance between visual detail and memory consumption. * Only use textures you *need*, so if an increased texture resolution doesn't benefit the result, reduce the texture size. One example may have the Diffuse and Normal map at 256x256 pixels, and the metallic/smoothness map might be 128x128. ### Materials Each additional material increases draw calls, which slow down rendering. Aim to reduce and simplify when possible. * ***The simplest approach is to use one material per asset.*** It is even better to use one material for as many assets as possible as Unity can reduce draw calls automatically if the space is set up correctly. Look at [Optimizing your Space](/create/building-spaces/optimise-your-space/optimizing-your-space)for more information. * [Trim sheets](broken://pages/DcxMDs8aiUViVwko7BKD) and texture atlases are advisable in order to reduce the number of materials on assets. ### Meshes There are a number of aspects to consider when modeling your assets apart from just the total polycount such as sub-meshes, topology, UV Mapping and Backface Culling. * For objects comprised of several distinct meshes, consider merging them if it doesn't compromise their appearance or functionality. Reducing the number of meshes minimizes draw calls, enhancing performance. * Remove any unseen or unnecessary vertices, edges, and faces. The end user may not see them, but the camera will, so internal or overlapping faces should be removed to optimize performance. * Aim for clean and efficient UV maps to optimize texture usage. Familiarize yourself with techniques like Overlapping UVs, [Trimsheets](broken://pages/DcxMDs8aiUViVwko7BKD),[ Texture Atlasing](https://en.wikipedia.org/wiki/Texture_atlas), and[ Seamless Tiling textures](https://plusspec.com/seamless-texture-tileable-texture/). These approaches can significantly enhance the efficiency and visual fidelity of your assets. * As game engines render only one side of a polygon, ensure your models are built with this in mind. Unity does not render, or *culls*, the backfaces of polygons in objects by default, so make sure all your normals are correctly oriented. ### General Advice #### **Prioritize Efficiency** When creating 3D assets for our platform, it's crucial to balance detail and performance. While detailed assets are appealing, we need to ensure they run smoothly in WebGL. Beautiful assets don't look great at 5 frames per second. If some details won't be noticeable, it's recommended to leave them out to save processing power. #### **Use Alpha Textures Wisely** Alpha textures, which add transparency to objects, should be used sparingly. Only apply them where necessary, like for glass or foliage, as they can impact performance considerably. If possible, use more performant versions of transparency. 'Cutout' is better than 'Fade' which is better than 'Transparency' on the material settings. **Optimize for Low-Spec Devices** Many users may access our platform on less powerful devices. Make sure your assets are optimized to work well on these devices, [look at our minimum specs to run Mona](/explore/explorers-frequently-asked-questions). # Optimizing your Space As Mona uses WebGL to create Spaces it is important to make sure that you optimize your space to run as well as possible in order to have the best experience. There are several ways to improve your Space and the assets within them, and this page will go over some of the methods to do so. ## Level Of Detail (LODs) {% embed url="" %} Level of Detail Video Tutorial {% endembed %} Level of Detail is a technique that allows an asset to reduce its polycount at a distance, therefore reducing the amount of polygons the Space needs to render. This improves the performance of a space, especially when those assets are high polygon when close to the avatar. If you name your assets correctly, Unity will import your assets with the LOD component already applied. This is probably the easiest way to create LODs for assets. * \\_LOD0 (The most detailed mesh) * \\_LOD1 * \\_LOD2 * and so on up to a maximum of 8 LODs... Otherwise you can assign the LOD Group component and assign them manually. This component has a few options on how the LOD behaves for the object. For more infoamrtion you can check out the unity documentation [here](https://docs.unity3d.com/Manual/class-LODGroup.html#LODGroup). ## Optimising Drawcalls {% embed url="" %} Optimising Drawcalls Video Tutorial {% endembed %} Drawcalls are the thing that takes a large part of the processing in a Space. Reducing these is very important in creating an environment that runs well on as many devices as possible. There are several ways to reduce the drawcalls of a Space such as the following : * Reducing the number of Materials (Each material is a drawcall) * GPU Instancing on Materials (Don't use on small assets however) * Static Batching by using the 'Batching Static' item in the static menu (set if you apply static) * Combining Assets in the original 3D Creation tool It is possible to monitor the drawcalls as well using the Profiler or the Frame Debugger (both found in the Window Menu). These may require a Camera in teh scene, make sure to delete the camera before submitting to QA. ## Texture Compression ***It is easy to change the size of a texture (once selected) in the Unity Inspector and see the results of that change directly***. Doing this can get a significant filesize reduction of the playable files, and then following those changes up to the original texture would also improve the size of the Mintable Files as well. ![Changing the texture size within Unity](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FD1rpBvTWGMKLb9bfaeaC%2FTextureSize.gif?alt=media\&token=f8c567bb-988c-458d-a8fb-2a17520abe48) ## **Crunch Compression** We have previously allowed Crunch Compresssion on textures to reduce the filesize but have found that due to the textures being uncompressed in browser the memory limitations made spaces unstable if Crunch Compression was used. Therefore, ***Crunch compression is not supported in Mona spaces***. Builders will be notified if any of their assets use crunch compression in the QA process using the Mona SDK. ## Occlusion Culling {% embed url="" %} Occlusion Culling Video Tutorial {% endembed %} As a game engine does not automatically know what it should or should not render to the screen it is up to the builder to help decide what elements should be hidden when behind other objects. This can improve the performance of a Space as there is less to render overall. Setting an asset to be an Occluder (an object that 'hides' other objects) or an Occludee (an asset that is hidden) can be easily done using ***the pull down menu next to the Static check box at the top right of the Inspector.*** If you set an object to static, they will be both an Occluder and Occludee by default, but you can customize these settings as you need. To apply these occlusion settings though, ***you will need to bake the occlusion information into the assets using the Occlusion Baking tools*** found under Window > Rendering > Occlusion Culling and using the Bake tab to bake the information at the bottom right. ***It is also possible to add Occlusion Areas in order to have more control over which areas should have more accurate Occlusion (such as main rooms etc.)***, this will save time on occlusion baking as well as reduce the overall filesize (depending on how complex your environment is of course). An Occlusion Area is a component you can add to an asset, usually an empty gameobject that allows you a clean asset to modify as needed. ***Another tool is the Occlusion Portals Component***. This allows you to create a Occlusion Culling object without the need for an asset itself (such as a 3D object). # Adding Interactivity There are two ways to add interactivity to a Mona Space : Visual Scripting and Reactor. Custom scripting is currently not supported due to security concerns in a WebGL environment. Visual scripting is a method of creating game logic using a visual interface instead of writing code in another programming language. This makes it easier for creators to make incredible experiences, all inside Unity 3d. You may have seen this in Unreal with Blueprints. For more information go to [Visual Scripting](/create/building-spaces/adding-interactivity/visual-scripting). Reactor is Mona's approach to interactivity by using events (such as walking into or interacting with a collider) to trigger parameters in the Animator component. This basically removes the need to program anything and focuses on transitioning between different animations that you create when an event happens. If you want a detailed overview of the Reactor process, you can go to the [Mona Reactor](/create/building-spaces/adding-interactivity/mona-reactor). If you have a good understanding of Unity's Animation and Animator toolset you could go to [Reactor Overview](/create/building-spaces/adding-interactivity/mona-reactor/reactor-overview). Choosing which method depends on what you are trying to do, but understanding both would definitely allow you to create the best experiences for your space as both are pretty powerful in their own way. # Visual Scripting The new Monaverse Developer Kit includes the ability to create custom experiences using Visual Scripting. Visual scripting is a method of creating game logic using a visual interface instead of writing code in another programming language. This makes it easier for creators to make incredible experiences, all inside Unity 3d. Visual Scripting is available in all Mona spaces using the Unity 2022 Mona SDK. {% hint style="danger" %} **Note: Please update to the latest version of the Mona SDK here before using Visual Scripting**: {% endhint %} ### Importing the Visual Scripting Asset to Unity3D * You may need to import the Visual Scripting asset from the Package Manager. Go to 'Window/Package Manager' and select 'Packages : Unity Registry' at the top. * Scroll down to 'Visual Scripting', then select 'Install' at the top right of the window. ### Adding a Visual Scripting graph Visual Scripting is done as a component on an asset. For the purposes of this tutorial, we will add a graph to a simple cube, but of course you can add it to anything you want. * With the asset selected, select 'Add Component' in the Inspector. * Type in 'Script machine' (or enough to pull that up or scroll down to the 'Visual Scripting' menu and select 'Script Machine'. * The source defines where the graph is found. * Embed adds the script to the asset itself. You can add a Title and a Summary if you wish.

Embed Options

* The other source option is Graph. * Graph creates an external graph file that you could use on other assets. * If you select Graph, select 'New' to save your new visual script graph to your assets. The Title and the Summary are available in the graph itself.

Graph Options

* At the base you have 'Edit Graph' which is where you start creating your nodes. ### The Node Graph The Node Graph is where all the magic happens. Think of it much like a story going from left to right where each node happens over time. There are two base nodes, On Start and On Update : * 'On Start' happens once at the very beginning of the assets 'life'. Anything that you need to setup for the asset initially stems from here. * 'On Update' happens every time the frame is updated, so these nodes will be played out all the time.

The Visual Scripting Node Graph

### Adding Nodes * There are two ways to add a node : * Right click on the graph and then search for the node you are after * Drag an arrow from a node, once you let go you can search for the node you are after. * If you create nodes without using the connection you can connect nodes simply by dragging from the arrows to the left and right of nodes. * It is possible to delete connections by right clicking on the arrows on the left/right of the node. * You can create Groups easily by holding Ctrl and left drag to create a Group node. If this surrounds multiple nodes, you can move them all easily. * You can rename the group by clicking the label once. * Delete the group by selecting it and pressing 'Delete', or right click and select 'Delete'. ### Supported Nodes At the moment the Nodes you can use are limited, and growing every day. If there is a Node that you would like to use that isn't included you can easily request it in our [Discord](https://www.monaverse.com/discord), or submit a request [here](https://airtable.com/shro8C407UAL78Qwc). Currently the main node types fall under the following categories : * mscorlib * UnityEngine.CoreModule * UnityEngine.AudioModule * UnityEngine.PhysicsModule * UnityEngine.AnimationModule * UnityEngine.UIModule * UnityEngine.UI * Unity.TextMeshPro # Web Request Node This doc goes over the Unity Web Request Node... The Unity Web Request node allows a Mona space to communicate with a web server. The primary goal of the Unity Web Request system is to allow projects to interact with web browser back-ends. For more information, check out the [UnityWebRequest documentation](https://docs.unity3d.com/2023.2/Documentation/Manual/UnityWebRequest.html). You could therefore create a space that interacts with information from the web. \ Examples of this include : * Get information from web data such as a .json or image files to feed into a space. * Send information to a server to store data such as a leaderboard. * Create a text file to track an inventory or scoreboard over multiple spaces. * Realtime data: weather data, news feed, pollution, planets, etc. * Saving game progress: save collected items, areas unlocked, so that you don’t start from scratch next time you play. You will need to use the latest Mona SDK [here](https://github.com/monaverse/SpaceStarter) if you want to use the UnityWebRequest nodes in Visual Scripting. ### UnityWebRequest Example If you would like to see an example of the UnityWebRequest in action, you can download the following project. If you look into the Cat asset (near the desk) you can interact with it in order to pull cat facts from an external source. Looking into the Visual Script of the asset will give you a simple example of utilising the UnityWebrequest node in Visual Scripts. To download the project, go here : ### Updating a current Mona Space If you want to update a current project, the easiest approach is using the [Updating the Template SDK](/create/resources/updating-the-template-sdk) documentation. Alternatively, you could add the required nodes manually by doing the following : * Go to Edit > Project Settings. * Go to Visual Scripting in the left panel. * At the top, expand the *'Node Library'* options. This needs to be first. * At the bottom of the *'Node Library'* listing, select the '+' symbol to add a new item. * Add the following two items by clicking on the slot and using the search tool. * UnityEngine.UnityWebRequestModule * UnityEngine.UnityWebRequestWWWModule

Add the Node Library options

* Expand the *'Type Options'* listing above the Node Library listing. * At the bottom of the *'Type Options'* listing, select the '+' symbol to add a new item. * Add the following three items by clicking on the slot and using the search tool. * Download Handler * Unity Web Request * WWW Form * Once the items are added, select *'Regenerate Nodes'* and select OK once done.

Add the Type Options...

# Mona Reactor This page goes over what Mona Reactor is and a quick introduction to how it works... ## What is Reactor? The Reactor system allows you to use an event to trigger an animation on an asset. As an example, *an event* (a player walking into a collider) *would trigger a command in the Reactor component* (the Mona Reactor script) *to change a parameter* (that the builder sets) *in the Unity Animator component* (or the location where all the animations on an asset reside) *that then plays a specific animation.*

The Reactor System

{% hint style="info" %} If you feel you have a good understanding of the Unity Animation and Animator tools, you could jump to [Reactor Overview](/create/building-spaces/adding-interactivity/mona-reactor/reactor-overview) in order to go over the Reactor process. {% endhint %} There are several parts to the Reactor system and understanding each is important to setting up an interactive element. That said, once you understand these elements the scope of your spaces increases *significantly*. The two main areas that you will need to understand is : * Reactor component + colliders * Animation + Animator component The Reactor component will check for events in regard to a collider. This could include the player interacting with, walking into/away from, or looking at/away from a collider. Once triggered, the Reactor component would then send a message to the Animator Component on an asset. The Animator component has access to all the animations on an asset and has *Parameters* that you can create to help trigger those animations as you see fit. ***The Reactor Component tells the Animator component what to do.*** Both are important in order to create a Reactor system. If you have not used the Animation tools, and especially the Animator Window/component, we recommend going over the basics in the following tutorials to learn the skills needed to create amazing interactive assets. It is better to build a Reactor system from the animation side first, as the Animator parameters are what you will use in the Reactor component. Let's start with some animations to use! # Creating Animation The Animation tool allows you to create animation on assets such as 3D objects, audio, particles etc. This could be something simple like changing position, rotation, or scale, as well as animating a texture, or adjusting volume on an audio asset. There are *many* elements of many asset types that can be animated. For more information on how to create animation in Unity, go to [Animation in Unity](/create/building-spaces/improve-your-space/animation-in-unity). It is also possible to import animations from other programs such as Blender, Maya, 3D Studio MAX etc. For more information on importing animation from external applications, go to [Importing Animation](/create/building-spaces/improve-your-space/importing-animation). To use Reactor, you need to have more than one animation, allowing Reactor to switch between them, and the method of navigating multiple animations is through the Animator window. A simple door could have different approaches to it such as : * a single frame closed animation and a single frame open animation where the Animator component will transition between the two. * A single frame closed animation, an open animation (that isn't looped), and a close animation (that isn't looped). There are more ways to make it work, it just depends on how you want the door to work. # Using Animator Understanding the Animator component is crucial to navigating the Reactor process as this is what Reactor will take control of once an event is triggered. Reactor can modify the *parameters* in the Animator component, which can trigger different animations. These are set up using the Node Graph in the Animator window. A simple example would be an if statement. *If* the player walks into collider *set* the OpenDoor parameter to true, which will *play* the animation to open the door. The Animator component is usually added automatically if you use the method discussed in the Animation docs found in the previous tutorial. It is possible to add it manually as well. With the Animator component applied, you should be able to see the animations you have created in the Animator window. This is also called a *Node graph*. * If the Animator Window is not visible, you can go to Window Menu > Animation > Animator. Note how the animation nodes aren't visible until you click on the asset with the Animator component with animations applied.

Add the Animator Window if it is not available

* If you haven't already, you need to create multiple animations to switch between. If you are animating within Unity, you can use the 'Create New Clip' in the Animation window.

'Create New Clip' in the Animation Window to add animations

## The Animator Node Graph The Animator Node graph is where you set up all your animations to control using the Reactor Component. With your animated asset selected, going to the Animator Window will give you something like the following :

The Animator Window

### Node Graph To the right of the window you have the Node Graph itself. this houses all the animations you have created on the asset and a few other nodes. The Orange node (with 'Cube\_Idle' above) is the default state animation. This is the animation that plays when you start the Mona space. This could be an idle state, base state, or similar state that your asset will be in when the space loads. The name of this node is based on the animation file name initially. The Grey nodes (in this case with 'Cube\_Move') are all the separate animations you have created with the Animation tool. The name of these nodes is based on the animation file name initially. The Any State node allows us to switch to an animation from *any* other animation. If you have a more complicated node graph, this is useful to clean things up for organisation. Entry/Exit nodes are less important apart from the entry node leading to the Default state node. * If you want to change which animation is the Default animation, right click the node and select 'Set as Layer Default state'. * To move nodes around the graph, just left click and drag as needed. ### Layers and Parameters At the top left you have two buttons, Layers and Parameters. **Layers Tab -** This is less important as it is used to allow you to layer animations over other animations. This is not usually used unless you have some advanced use of the animation tools. **Parameters Tab -** This is used to create parameters that allow you to trigger switching between animations in the Animator window. You will need this tab to create Reactor events. ## Parameters Parameters are where a lot of the power behind Reactor can be. A simple example would be to create a parameter that is used to note if a door is open or not. This is a great use of a true/false parameter, also called a *Boolean*. We can set this parameter using the Reactor component when an event happens, that way we can switch between animations. * Select the Parameters tab in order to add custom parameters * Add an example parameter that we can use * Pay *very close* attention to the spelling and case of the parameters you set as this will be important when adding them to your Reactor component later. Come up with a standard and stick to it to reduce issues.

Add a parameter to the Animator

## Transitions To trigger an animation, we need to transition between them. And to do that we need to add a transition between the animations. * Right click on an animation and select 'Make Transition', then drag and select the animation you would like to transition to. * Once the transition is made, you can select the transition arrow in order to set how the transition is done in the Inspector window.

Making transitions between animations

* 'Has Exit time' means the transition will happen at the end of the animation. Usually you will want the transition to happen as soon as the event is triggered, so this is usually turned off. That said you can use this to have an animation go to a different animation automatically (without needing Reactor to trigger it) or to transition to an animation *after* a certain point in the animation. \ \ Once turned off Unity will give you a warning saying there is no situation that the transition can happen, and this is where we add our Parameter condition.

Turn off 'Has Exit Time' (usually)

* Under the Conditions section, use the '+' sign to add a condition. This will add a parameter condition that we can reference with the Reactor Component. Select the parameter that you would like to reference.\ \ So basically If 'isDoorOpen' is true, play the 'Cube\_Move' animation. And we can set 'isDoorOpen' to true when the player walks into a collider with Reactor.

Add a condition to start the transition

Now that you have your animations created, your parameters set, and the transitions applied, you can move to the next tutorial in order to set up the Reactor component to trigger them! There are some useful techniques that you could use to improve your Reactor experience however. ### Simple Reactors Things like doors, elevators, and platforms don't really require a looping animation to function. A door is either closed or open, and the animation is simply the transition between one to the other. Animator can do that animation for you, and you just have to focus on the end points as single keyframes such as the door closed, and the door open.

Use single frame animations for simple reactors

Doing it this way also allows you a little more control over how it transitions by modifying some of the values in the settings such as the transition length.

Adjust Transition Length.

These can apply to position, rotation and scale. Even color, audio volume or other simple blends from one state to another. # The Reactor Component The Reactor Component is best added onto it's own gameobject with a collider. This allows you to easily move the asset if need be, and this can be useful when the collider needs to be a child of an elevator (so the reactor moves with the platform). This also makes things much easier to navigate, especially if you have a complicated scene. You will also need to adda collider for the event to be triggered by. A box collider is best performance wise, but others are acceptable.

The Reactor Component with Box Collider

EventsOperation typesParameter types
OnInteractSetBoolean (true/false)
OnEnterTriggerAdditionInt (-124, 0, 12, 45,231 etc.)
OnExitTriggerDeletionFloat (-12.432, 5.0, 732.43 etc)
OnPlayerLookStartMultiplicationTrigger
OnPlayerLookEndDivision
Invert
## Events The Reactor Component is made up of several event types. Each one can hold multiple triggers. An example would be if the player walks into a collider, 5 different Animators could trigger a specific animation. One trigger is the most common, however. OnInteract - When the collider is targeted by the white reticle of the player, you can press the 'E' key to interact with it, which can trigger an animation. The OnInteract event also allows you to customise the text on the asset when the cursor is over it. OnEnterCollider / OnExitCollider - An event can be triggered when a play first touches the collider or when the player leaves the collider. OnPlayerLookStart / OnPlayerLookEnd - An event can be triggered when the player first looks at the collider or when they stop looking at the collider. ## Operations The animation can be triggered using different operations such as setting a parameter, adding / subtracting / multiplying / dividing a parameter, or inverting the parameter. Inverting would be making a 1 turn to a -1, or more importantly turn a true to false or vice versa. With a bit of creativity these operations allow for a lot of interesting approaches to interactive experiences. In the Reactor Component example above : if the player enters the Box collider, *set* the 'doorOut' parameter on the DoorPivot Animator component to true. The Animator would then play the door out animation. A more complex approach would be if the player interacts with a door, *invert* the 'doorOpen' parameter on the door Animator component. Each time the player interacts with the door the animation would either open, or close, depending on what state it is currently in. ## Parameters The parameter itself can be different types as well. A true/false parameter (*boolean),* whole number (integer/int), a decimal number (float), or a trigger (as in a simple 'Do this!' state). These parameters align with the parameters that are set in the Animator. The boolean, int, and float parameters are pretty self explanatory. The Trigger, on the other hand, is a parameter that allows you to set a parameter, but then it stays in its default state to be triggered again easily. Other parameters would need to be changed back before using it again. ## Local The other element that you have access to is the Local toggle on each event. This means that the event will only happen to the player that triggers it, rather than all users in the space. ## Summary Now that we have looked into the basics of a reactor system, we can start putting them together. # Reactor Overview Reactor is a beta release of the interaction tools for Mona. It is experimental and will have limited support for now, but if you're willing to get your hands dirty it can make cool stuff! {% hint style="info" %} If you are using the Template V1.0, you can get the Reactor tools [here](https://cdn.mona.gallery/c6b913b1-ad25-40b6-ab1f-49777deb5469.unitypackage). {% endhint %} {% embed url="" %} Reactor Basics Video Tutorial {% endembed %} {% embed url="" %} Reactor Basics | Doors video tutorial {% endembed %} {% embed url="" %} Reactor Basics | Elevators video tutorial {% endembed %} Mona reactor is an intermediate level interaction tool for the Mona platform. It uses simple events, such as interacting with, entering or exiting, or looking at or away from a collider to trigger parameters in the Unity Animator. You can create objects such as doors and elevators of course. But with some creativity this can be used for nearly anything! ## Current events ### On Enter Trigger and On Exit Trigger When the avatar first touches or leaves the collider on the object with the Reactor Script, it can tell the target object (with the Animator applied) to trigger specific animations. **Note that the collider needs to have 'Is Trigger' set to *****true***** so that you can move through it.** ### On Interact When the user interacts with a reactor object collider using the 'E' key, you can trigger an animation. This feature allows you to specify what text is shown on the event for complete customization. {% hint style="info" %} **Note that the collider needs to have 'Is Trigger' set to *****false***** so that the player can see it.** This will make the collider a physical collider. Due to how Unity does raycasting this cannot be helped. At the moment **OnInteract reactors can not overlap other types of reactors.** So an OnInteract cannot be inside an OnExitCollider for example as the OnExitCollider will override the OnInteract. There are usually ways to get the result you are after however. {% endhint %} ### On Look At and On Look Away You can trigger an animation when you look at and when you stop looking at an object (collider). **Note that the collider needs to have 'Is Trigger' set to *****false***** so that the player can see it.** This will make the collider a physical collider. Due to how Unity does raycasting this cannot be helped. ## Setting up the Animation Reactor is a tool that triggers parameters in an assets Animator component. These parameters tell the asset which animation to transition to. Think of the Animator like a node graph for different animations with different ways to trigger them. The below example is a simple example transitioning between an open and closed door, but they can get very complex if needed.

Simple Animator example

Each transition from one animation to the next can be controlled by testing a parameter for true or false, and/or greater than, equal to, or less than operations on numbers. The condition type depends on if the parameter is a boolean (true/false), int (whole number), float (decimal number) or trigger.

Clicking on the Arrow transition to see the transition conditions

So in this example, when the reactor triggers the 'Open' parameter to be true, the door will open. We’ll go into more details on these later in this tutorial. There are two main elements to the Reactor system : * **The Target Object**, or the object to animate (Red Box below) * **The Reactor Object**, any object that has the Reactor script and a collider (Green Box below) These can be the same object, or different, but for organization purposes it is recommended to keep them separate like the example here. ![Reactor Object Example](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FIyrbrGzLlht0zN9ZvFkv%2Fimage.png?alt=media\&token=ae462a27-a7e7-4839-a76c-2c5ba341e186) So, a quick summary of how reactor works : * Player triggers an Event * Entering a collider * Exiting a collider * Interacting with an object based on a collider * Looking at a collider * Looking away from a collider * Reactor defines what happens on that event * Setting a parameter in an objects Animator * Parameter triggers an animation in the Animator ## The Target Object The target object needs an Animator component attached. Inside that Animator is a *parameter* that the Reactor script will set. The Animator then needs Animation clips in it to transition to/from depending on what the parameter does. Let's set those up first. ### **Creating the Target Object** * You will need both the Animation window, and the Animator window open (found in the Window/Animation panel). * **Select your target object** you would like to animate * **Open the Animation window** (not Animator) and select the 'Create' button. * **Save the animation** (The Animation Folder in the \_AddYourArtHere is a good spot for example). This will also add the Animator to the object and add the Animation into it * **Animate your object** as you see fit. * If your animation shouldn't loop, make sure to change the Loop Time option on the animation clip itself by clicking on the animation clip / Inspector. * Use the pull down with your current animation name at the top left of the Animation window to **add any other Animation Clips with Add Animation Clip**… This is the easiest way to add new clips to your object. It is easy to add more later through the same process. * Once you have your animations, and the target object selected still, **open the Animator Window**. Your clips should be visible in the animator. Arrange them neatly so they are easy to navigate. * **Right click on the animation clip you would like to be the default state.** Set that to the Default state. It should turn Orange. * Next, we can make a Parameter to modify in the Parameters button to the left of the Animator.\ Reactor will be looking for this when the trigger event has been set. You have the choice of integer (eg. 1, 14, 34126), floats (eg. 3.21, 645.326), Boolean (true or false) and a trigger. * **Use the ‘+’ sign to add a parameter**, choose which type you would like. * **Name the Parameter** and **remember this parameter name *****exactly**,* as you will need this to trigger correctly in the Reactor script later. * **Right mouse click the default state and select Make Transition.** Move the arrow to the first animation you would like to blend to with your reactor event, and click on it to connect the two. * Click on the newly made arrow, in the Inspector you can edit many elements to the animation, but the main one we want is the On Exit time, the blend time between the animations, and conditions under the frame to trigger the transition. Have a look through the options available such as greater than, equal to, less than, or if a Boolean is true or false. These are the conditions you can affect using the Reactor tool. **Apply a condition that suits your purpose**. * Add any other parameters and transitions as you see fit. We recommend keeping it simple for a first pass though. ## The Reactor Object The Reactor Object can be the one with the Animator on it, or a completely different one. For ease of use, *it's usually better to have it running on it's own empty gameobject*, either in the scene where the trigger is placed, or as a child of the object you plan to affect (if you need the trigger to be part of the target object). This will make more sense as your systems get more complex. Whichever one you choose, it needs to have the Reactor script on it, and a collider. Without the collider, the player avatar will have nothing to interact with, so make sure there is one. You can use any kind of collider to interact with including box, sphere, capsule and mesh colliders. Having the reactor and collider on its own gameobject (as recommended above) will mean there is less conflict with other colliders so the avatar doesn't run through the objects in question. **As noted above there are a number of events you can use on you assets : OnEnterTrigger, OnExitTrigger, OnInteract, OnLookAt, OnLookAway.** Note that OnEnterTrigger and OnExitTrigger needs to have the 'Is Trigger' toggle on the collider set to true so the player can run through it. OnInteract, OnLookAt, and OnLookAway needs to have the 'Is Trigger' set to false, so the player can see it. This collider also acts as a physical collider. Each event will send information from the Reactor Object to the Target objects Animator. The information you send includes the following : **Name -** Just the name of the command, has no real function\ **Operation -** This is the type of operation on the parameter. See Below.\ **Object -** Drag the Target Object into this slot\ **Parameter -** This is the parameter in the Animator you will affect\ **Value type -** This is the type of parameter such as bool, integer, or float\ V**alue -** This is the value that is sent to that parameter type The Operation covers the following operations : **Set** - Sets the parameter to the parameter value.\ **Addition -** Adds the parameter value to the Animator parameter\ **Minus -** Minuses the parameter value from the Animator parameter\ **Multiplication -** Multiply the parameter value by the Animator parameter.\ **Division -** Divide the Animator parameter by the Parameter value\ **Invert -** Switches any parameter to the opposite.\ \- 1 <> -1\ \- 5.32 <> -5.32\ \- true <> false\ For Invert to work (at the moment) the parameter value must have a value of true or false.\ The value itself is ignored. ### **Creating the Reactor Object** * **Select your Reactor object** (the target object, any other object, or **preferably an empty object**) * Make sure the location of the Reactor object is not at 0,0,0 unless thats where it *needs* to be. Doing this will have the Gizmo information come from the centre, and that's not so useful. Moving objects that have already been animated 'after' animating them can also lead to unwanted results. * **Drag the Reactor Script onto the object**. It can be found under Mona/TemplateScripts/MonaReactor in the Project window. * **Add a collider to the object** (it’s a good habit to get into as it’s easy to forget) * **Adjust the collider** to where the avatar would touch it to trigger the event. Note it is the first touch, not completely entering the collider. * **Use the ‘+’ under the desired trigger event to add a command** under the trigger event you would like to use. You can use both trigger events (OnTriggerEnter and OnTriggerExit)on one object without a problem. * **Add the information into the command**. Make sure that the Parameter Name matches the Parameter in the Animator exactly. * With your Target object animated, the Reactor object set up with the Reactor Script and the collider, you should be ready to go. ## Hints and Tips * Start small to get used to the Reactor system. A simple door or animation trigger is a good place to start, and then get more and more complex. Complex systems are certainly possible, but adds a level of difficulty for each moving part you have in your system. That said, you can get really complex systems to do amazing things. * Make sure to set your objects location correctly from the start (parent objects should be where they are in the world for example, not left at 0,0,0 unless you have a specific reason). Animation is based on the parent of the object, and if you find you need to change the position of the object *after* it has been animated, you may find it will give you unexpected results. It can be cleaned up after but it is not fun to do so. * We plan on streamlining the process as much as possible over time, so if it’s too difficult in its current state it will be easier to use in the future. It is certainly possible to create an interesting environment by just using animation. ## Troubleshooting {% hint style="warning" %} Remember that Reactor is currently in a Pre-Alpha state and therefore ***will have limited support***. We will be continuing to work on it to make it easier to use and in doing so it will continue to evolve over time. That said, we thought it a good opportunity to get the community involved in some of the very exciting developments here at Mona. {% endhint %} #### My OnTriggerExit/OnTriggerEnter action is triggering when it shouldn’t * If your collider needs to move with the animation so that when you leave the object it triggers the Exit actions, make sure the Reactor Object is a child of the animated object. If the collider is static and your elevator (as an example) moves away from the collider, your avatar leaves the collider, and the OnTriggerExit actions will trigger. Use the Reactor gizmos to help visualize the collider for each reactor script. This may happen on moving objects like elevators. * One issue might be the parameter is set in the Animator to the wrong value (that triggers the first state of the animation). An example would be the OpenDoor boolean parameter is true in the Animator, but that needs to be set by the trigger first...it will animate on starting the scene. #### My Animation isn’t triggering * The parameter name in Reactor is different to the parameter in the Animator. Double check that the Reactor Parameter Name matches the Animator Parameters *exactly*, including upper and lower case. * You have the correct object with the target animation in the Reactor target object slot * You have the correct operation on the transition arrow (using greater than instead of equals for example) * The action hasn’t happened from a duplicate enter/exit event (you may need to turn off the Reactor collider to make sure it doesn’t get triggered again as an example) #### My Invert action type isn’t triggering * If you are using the Invert action type, make sure that ‘true’ or ‘false’ is in the Parameter Value slot even though it will not be used. If it is empty, or any other value, it will not trigger correctly. #### My animation keeps looping when it shouldn't * Make sure to turn off Loop Time on the animation clip in question by clicking on the Animation clip, and in Inspector you should see Loop Time. # MONA Tools Over time we MONA will be adding a number of tools to help you build amazing spaces. Some of these tools will be found in the MONA Library such as the Mona Capture Tool, whereas others will be found in the MONA template itself, such as the Template Utility. ### Template Utility The Template Utility helps make sure that your version of Unity is correct, that you have WebGL installed and that the template itself is the latest version. For more information go to [Template Utility](/create/building-spaces/mona-tools/template-utility). ### MONA Capture The MONA Capture (Beta) allows users to control a free moving camera, separated from their player to create more interesting and interactive content with the spaces they visit. For more information go to [MONA Capture](/create/building-spaces/mona-tools/mona-capture). ### Light Probe Generator The Light Probe Generator is a tool that great speeds up Light Probe placement in Light probe groups. Light probes are important for dynamic objects (non-static) in spaces that use lightmapping. For more information go to [Light Probe Generator](/create/building-spaces/mona-tools/light-probe-generator). ### VOX Importer The VOX Importer allows builders to import .vox files. For more information go to [VOX Importer](/create/building-spaces/mona-tools/vox-importer). # Template Utility The Template SDK Utility Is a tool that helps make sure that you have the right version of Unity, WebGL is installed, and the latest version of the Mona Template SDK installed. If any of these are not correct, it will offer methods to fix the situation. **The right version of Unity, and WebGL being installed are compulsory for Mona to work.** The latest version of the template SDK is always recommended. The latest version will have all the latest tools, assets and updates that you can use when creating your space. ### Using the Template SDK Utility The Utility itself can be found under the Mona menu at the top of Unity. Simply select 'Template SDK Helper' to open the tool. If there is an issue with the Unity version or WebGL you will be given an 'Info' button that links to where you can find the information you need. If the Template SDK is not up to date, you can do so with the 'Update' button.

Mona Template Utility

#### Version of Unity If you need to get the correct version of Unity, you can go [here](https://unity.com/releases/editor/archive#download-archive-2022) to grab the correct version of Unity. Make sure to go to the 2022.3.6f1 link to download. #### Template SDK Update If you click on update a window will appear displaying what assets need to be installed. Select 'Import/OK' to update the Mona template SDK to the latest version. #### WebGL Module If the WebGL Module is not found, you will need to install it. You can do this by going to the Unity Hub, 'Installs' section and select the Settings/Add Modules button.

Adding Modules to Unity Hub

After that you need to make sure the WebGL module is installed. By selecting the toggle and selecting 'Install' at the bottom.
# MONA Capture This doc goes over the MONA Capture functionality. The MONA Capture (Beta) allows users to control a free moving camera, separated from their player to create more interesting and interactive content with the spaces they visit. {% hint style="info" %} This initial iteration of MONA Capture must be added to the Space *in Unity* in order to be used. Further iterations of Mona Capture will allow the feature to be used (optionally) in all MONA Spaces. {% endhint %} ### Installing Visual Scripting You may need to install the 'Visual Scripting' tool for capture to work. * Open the Package Manager using 'Window > Package Manager'. * Select the 'Packages : In Project' at the top left. If 'Visual Scripting' is not in the list below, you will need to install it. * Select the 'Packages : Unity Registry', scroll down to Visual Scripting. And select 'Install' in the description window.

Install The Visual Scripting Package (if it isn't installed already)

### Installing the Mona Capture * In the MONA Library, select the MONA Assets category. * Select the 'Mona Capture' item and select 'Download'. * Select 'Import' in the Import Unity Package popup.

Add the Mona Capture Asset...

### Using the MONA Capture * Drag the MONA Capture asset from MonaLibrary / Mona Capture folder into the Space Parent asset in the Space scene. * You may need to Import the TextMesh Pro asset, if the popup comes up, just select 'Import TMP Essentials'. * **Make sure to click on the 'MainCamera' in the MonaCapture asset to initialise the visual scripting.** If you do not do this the Mona Capture camera will not work in the space. * Once you build your space and test in playground or add to your Mona Wallet, you can press '0' to use the Capture tool. * Hit F2 to pull up the hotkeys for more information. * You can use any screen capture tool such as OBS Studio or the NVidia Shadowplay to record the screen. For more information on this, go to [Creating an Image & Video Preview](/create/building-spaces/submit-your-space/creating-an-image-and-video-preview).

F2 for Capture details

### Hotkeys
HotkeyResult
F2 Help
0 Toggle Free Camera
MouseRotate Camera
WMove Forward
SMove Back
AMove Left
DMove Right
QRoll Left
ERoll Right
SpaceMove Up
CtrlMove Down
ShiftBoost Move Speed
Middle ScrollChange Field of View
Increase SpeedIncrease Speed
Decrease SpeedDecrease Speed
Reset PositionReset Position
Save PositionSave Position
Load PositionLoad Position
Toggle Mona UIToggle Mona UI
Toggle ReticleToggle Reticle
Toggle Avatar TagsToggle Avatar tags
FullscreenFullscreen
# Light Probe Generator {% embed url="" %} Light Probe Generator {% endembed %} ### What are Light Probes? Light Probes are an important aspect of a space if you are using [lightmapping](/create/building-spaces/improve-your-space/lightmaps-unity-lightmapper) (which is recommended) in order to improve your overall lighting results. Lightmaps only work on static, or non-dynamic, assets by creating unique textures for those assets. These look great, but as they are *fixed* textures, we can't use it on dynamic objects such as the Avatar, or canvases. Light Probes get around this problem by creating many 'dots' of color information, or probes, in the space to take in the light at that location and dynamic objects like the Avatar will use that information to light it. It is less accurate than a lightmap, but it is also a *lot* less intensive on the processor. So, with Lightmaps and Lightprobes, you can have the best of both worlds. ### The Light Probe Generator The Light Probe Generator tool can help make most of your Light Probes quickly and easily. You can add one light Probe generator, or multiple, it all depends on the needs of your space.

Light Probe Generator Component

### Light Probe considerations Each probe does take a small amount of file size and processing, so you want the number of probes to only be what you need. Having probes very close together is usually a waste. A good target is to make sure that you have less than 1000 probes in a space at most. Smaller numbers are recommended. Generally speaking, if there is little light change in an area you can use a lot less probes. On the other hand, if you have an area with many different lights and colors, this will look better with more. For a more detailed explanation of Light Probes, you can check the Unity documentation [here](https://docs.unity3d.com/Manual/LightProbes.html). ### Light Probe Generator Settings The Light Probe generator uses a number of different approaches and settings to creating light probes. Which ones you apply depends on the space and how you have set it up. Play around with them to get the best results. **Nav Mesh**\ Creates a navmesh and uses it to generate probe positions. This placement method is useful for generating probes in areas most player avatars will traverse. **Raycast**\ Traces the light rays of point and spot lights to find probe locations in the scene. **Volume Scatter Placement** \ Scatters a uniform grid of probes inside the set volume. **Object Bounds Placement**\ Places probes on the bounding box corners of objects. **Density**\ Density controls the density of the generated Light Probe Group, a lower value means *more* Probes. These only effect the volume scatter and raycast placement methods. ### Using the Light Probe Tool * Download the Light Probe Generator using the Mona Library > Mona Tools > Light Probe Generator 'Download' button. Import all the assets. * Create an Empty Game Object with Right Mouse click. Name it however you like.

Creating an Empty game object

* Apply the Light Probe Generator script to the Empty game object.

Add Light Probe Generator Component

* Adjust the box to cover the area you would like to apply your Light Probes. You can do this by entering the numbers manually, or click/scrolling next to the parameter (this works for most fields in Unity).

Adjust box scale and position

* Apply the settings on the script to get the best result, more details on these parameters are below.

Adjust settings for Probe generation

* Select 'Generate' to create the Light Probes

Select Generate to add Probes

* You can choose to optimise the number of Light Probes by selecting 'Optimise' to reduce the number of Light Probes. This will merge probes that are within the Merge Distance assigned in the parameter.

Optimising Light Probes

* You can see the number of light probes in the Console when you create or optimise the light probes. Ideally you do not want more than 1000 probes in your space, lower is better. Otherwise, this will start affecting file size etc.

Light Probe count

* It is possible to manually edit the probes if needed by selecting the 'Edit Probes' button on the Light Probes Group component. \ \ You can also use the following to add probes as needed : \ Ctrl + C - Copy probes\ Ctrl + V - Paste Probes\ Ctrl + D - Duplicate Probes\ \ For more information on manual approach to light probes, go [here](/create/building-spaces/improve-your-space/light-probes).

Manually editing probes

# VOX Importer The VOX Importer allows you to import .vox files into unity to add to your spaces as standard assets. Vox files are made in the MagicaVoxel Editor which is free and can be found [here](https://ephtracy.github.io/).

Example of MagicaVoxel assets

### Using the Vox Importer Import the VOX Importer tool from the Mona Tools panel in the Mona Library asset.

Importing the Vox Importer into Unity

Once downloaded, you can import .vox files much like any other asset such as .fbx.

Importing the .vox file

# Submit Your Space Once you have finished your Space you can submit it for QA before minting the space. The following docs are a useful guide on how to do that. ### Submitting your Space This doc covers the main aspects of what you need to do in order to submit your space for QA before being allowed to Mint your Space. ### Creating An Image & Video Preview This doc goes into the detail of how to create a Preview Image and Video for your asset. There are multiple ways to do it, and this page covers a couple of those. ### QA Process The QA Process is there in order to make sure that your space is ready to go public. The QA team will go over your space to make sure that it is ready to be minted. ### Mint Your Space Once your space has been cleared it is ready to be minted! This doc goes over any final elements before doing so. # Submitting your Space {% hint style="info" %} After submitting your files, make sure to fill out the following submission form. We will either notify you if you space has Failed or Passed QA : {% endhint %} {% embed url="" %} How to Submit your Mona Space {% endembed %} Once you have gone over your space and are 100%, absolutely sure that it is finished (note that it may not be able to be updated after it is minted) you can submit the space to Mona for minting. There are some steps to make sure that you submit all the files needed, as well as make sure that your files are ready for minting. You will need to submit your space for QA before being able to mint. Basically you will need the following files to submit in your Wallet draft : * Artist Title * Space Title * Short Summary * Long Summary * Space theme (SciFi, Classical, etc.)
* **Playable Files** \ (<250Mb, the PlaygroundFiles folder from testing) * **Mintable Files** \ (< 2Gb, covered in this section) * **Preview Image for the loading screen** \ (< 5Mb, 1920x1080 minimum, No desktop or Mona UI, or Avatar) * **Preview video for promotion on marketplace/Mona website**\ (<20Mb, 1920x1080 minimum, No desktop or Mona UI, or Avatar) ## Export the Playable Files Use the Mona menu within Unity to 'Build Playground Files'. This will export and save a playable files folder to your computer in the 'Exports' folder. You have probably been using these files to test in the Playground. The explorer window and default browser window will automatically appear, however this time we don't need the Playground. This folder will be needed to be submitted to Mona. ## Export the Mintable Files Use the Mona menu within Unity to select '**Build Mintable Files**'. ![](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F5sKG4KO64vuSEIk6emZj%2F138575231-02a4c0c4-5d3e-413e-a4c3-63cd267c1f56.png?alt=media\&token=6c7751bf-4712-4227-b900-d8126451d99e) This will export and save a Unity Package to your computer in the same folder as the Playground files. A window will automatically open with the destination of the saved Unity Package. This folder will be needed to be submitted to Mona. If you want to see if your Mintable Files are correct, do the following : * Open a *new* template project * Import your Mintable files with Assets > Import Package > Custom Package... * Load the spaces with Mona > Load Space Scenes * See if any of your files are missing or broken. You could also go through the QA Process doc \ ( [QA Process](/create/building-spaces/submit-your-space/qa-process)) in order to see if you pass the QA Process. ## QA Process The QA Process is applied in order to make sure that your space is ready for the masses. We will go over the basics such as image, video, playable files and mintable files to make sure that it is ready to be minted. This following checklist is the *hard* fail list, so if your space fails any of the aspects you will need to resubmit your space. So best get it sorted before you send it to save time. For a detailed list of the things we will check in the QA process, you can go [QA Process](/create/building-spaces/submit-your-space/qa-process) ## Submit Build to Mona # Creating an Image & Video Preview A guide to help record a video render of your Mona Space. When submitting your Space to Mona, you are required to provide an **Image Preview** and **Video Render** of your Space. A **Preview Image** is an appealing 1920x1080 Image of your Space that will be used for the Loading screen and links to the space. * **File size**: Under 5Mb (*Required*) * **Dimensions**: 1920x1080 (*Minimum*) * **Must NOT** have the Avatar, Desktop, or Mona UI (*Required*) A **Video Render** is a short video preview clip of what your Space looks like. This will be linked to your Space on the Mona site, marketplace and will help when visitors view it on a website. * **Duration**: Between 5s - 15s (*recommended*) * **File size**: Under 20Mb (*Required*) * **Dimensions**: 1920x1080 (*Minimum*) * **Must NOT** have the Avatar, Desktop, or Mona UI (*Required*) ### Examples {% embed url="" %} {% embed url="" %} ### How do make an Image and record a video of my Space? {% hint style="warning" %} If you are using the browser to capture the Image and Video, make sure there is no Avatar, desktop, or Mona UI in them otherwise this will fail QA. To help with this you can use the following : * To **hide your avatar from view,** press the 'V' key on your keyboard. * To **hide the UI elements**, press the 'U' key on your keyboard. * To **make the browser go Full screen**, press 'F11' on your keyboard. {% endhint %} {% embed url="" %} Using PrintScreen and OBS to make the Image and Video {% endembed %} {% embed url="" %} Using Unity Recorder to make the Image/Video {% endembed %} ### What if my recording is larger than 20MB? You can make your Video file size using smaller by using [Handbrake](https://handbrake.fr) - a free open-source video transcoder program. Once you download Handbrake, open your video file and select a Preset such as Fast 1080p. Selecting "Web Optimized" option may also reduce your filesize further. ![Handbrake settings](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FHMJr6TZ5SRf2xgudFJaY%2FScreen%20Shot%202021-10-26%20at%209.10.15%20PM.png?alt=media\&token=f743b4d0-b6a8-42a6-98a4-53bc112fdde6) {% hint style="warning" %} *Be careful not to overwrite your original video file. To avoid this, change the name of your video file in the bottom menu text field next to Save As.* {% endhint %} ![Change the save file destination](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FAlzQJlKl8GxbqTGS49sw%2FScreen%20Shot%202021-10-26%20at%209.13.00%20PM.png?alt=media\&token=b79493ba-48c0-43b9-87ea-56d4f9e272fa) ### Image/Video examples If you are going to use the Browser to capture your Image and Video make sure that they **do not include your avatar or any UI graphical elements.** Here is what it should look like: ![This is a good Image. Notice there are no UI elements or Avatars. Credit: Archonomous](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FUTTce6qtAr76GYyhEj7n%2FScreenShot-Good.png?alt=media\&token=55689c17-2e30-4436-81c1-a2e69a4d29b8) Here is what it should not look like: ![This is not an acceptable Preview Image. Do not include any UI elements. Credit: Archonomous](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Fb6Be0lwuJaDFxnIUPsPM%2FScreenShot-Bad2.png?alt=media\&token=aecf2423-a500-48f8-b501-0b32c297dedc) ![This is not an acceptable Preview Image. Do not include the Avatar or UI elements. Credit: Archonomous ](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FMx5gwpTfEXdt5zfZtdyT%2FScreenShot-Bad1.png?alt=media\&token=d466eef7-5d55-41f4-be67-bfae3c208be7) # QA Process This page will include all you need to know to pass QA... In order to pass QA you will need to make sure of the following. It's easier than it looks! Most of these are there by default in the template unless you modify names or files manually. {% embed url="" %} QA Process {% endembed %} The following is what the QA team look for in each space. **Preview Image** * At *least* 1920x1080 * *Less* than 5Mb * Does *not* have the Avatar, Mona/Unity UI, or desktop elements in it * Accurately represents the Space **Video** * At *least* 1920x1080 * *Less* than 20Mb * Does *not* have the Avatar, Mona/Unity UI, or desktop elements in it * Accurately represents the Space **Playable/Mintable Files** * Playable Files are *less* than 250Mb * Mintable files are *less* than 2Gb * Playable and Mintable files should not have any differences in the space * There are *no* objects in Space/Portals/Artifacts root scene \ All objects should be the child of the Space/Portals/Artifacts gameobjects * Root Space/Portals/Artifacts Gameobjects are present * Space Spawnpoint is present and not red (eg. not in another collider and above a collider to land on) and in a logical location * There are no custom scripts on assets in the Space * Normal Maps are set as Normal Map type in settings * There are no missing assets in the Space (such as missing Prefab issues) * All shaders look correct (no missing/pink shaders in mintable files) **Portals (** [Portals](/create/building-spaces/create-your-space/portals)) * Have the correct hierarchy / tags applied * Are in a logical location (eg. not inside another object) * The Portal Spawnpoint is present and not red (eg. not in another collider and above a collider to land on) and in a logical location * Has a box collider on the Portal Tagged gameobject * The Portal tagged gameobject's collider is aligned in position and size with the portal assets * There are no colliders in front of the Portal tagged object's collider * Do not have multiple Portals in one PortalPrefab * Does not have the Template guide texture on it **Artifacts** ( [Artifacts](/create/building-spaces/create-your-space/artifacts) ) * Are not the Default Template artifacts or an Empty Artifact * Have the correct hierarchy and tags applied * The Artifacts Spawnpoint is present and placed correctly (eg. not under the floor, in another object etc) and in a logical location * Have a box collider (mesh collider works but is not recommended) * The Artifact tagged object collider is aligned in position and size with the Artifact assets * There are no colliders (Space or otherwise) in front of the Artifact tagged object's collider * Do not have multiple Artifacts in one ArtifactPrefab **Canvases** ( [Canvases](/create/building-spaces/create-your-space/canvases) ) * Has the correct hierarchy and tags applied * The Canvas Spawnpoint is present and placed correctly (eg. not under the floor, in another object etc) and in a logical location * Must have a mesh collider (other colliders do *not* work on Canvases) * There are no colliders (Space or otherwise) in front of the Canvas tagged object's collider * Do not have multiple Artifacts in one ArtifactPrefab * Do not have other textures applied in the Material (such as emissive etc) * Do not use a custom material ## Testing the Mintable File It is recommended to test the mintable file yourself before submitting for QA. Doing the following will show if there are any broken shaders or assets, and basically display any possible issues that we will need to get back to you on. **If you are using any 3rd party assets it is *****strongly***** recommended to do this to make sure that the assets are compatible with the mintable package process.** 1. Open a *new* template project 2. Go to Assets > Import Package > Custom Package and import the Mintable package you created from your Space. This can be found in the Exports folder (similar to the Playable files) 3. Load Space Scenes, if you haven't already Common issues that might come up include : * **Errors in the console**. Usually you cannot build the playable files if there is an error in the console, therefore these need to be fixed. Common reasons for this are objects (usually from 3rd party assets) have scripts on them, which are not supported in Mona anyway. * **Broken Shaders.** Some of your assets may be the dreaded pink that happens when shaders break due to them needing extensions to the shader. These are currently not compatible with Mona and should be replaced with the Standard shader (or other shaders known to work after the mintable process. * **Bakery errors.** If you are using Bakery then it will throw some errors in the console. This *can* be fixed, but this would require the Owner of the space purchasing Bakery, and having to rebake the scene manually with the settings that were originally used. We are currently looking into ways around this, but for now it may be better to avoid Bakery for now. # Mint Your Space Information about minting inside of Mona. Minting allows you to sell your space to a collector, as well as be visible on the Mona website. * Once all the files have been submitted accurately, your Space will then enter our QA process. Make sure to check out the [QA Process](/create/building-spaces/submit-your-space/qa-process) doc if you haven't already. * As soon as your space passes QA, you will be notified, and the ***Mint*** button on your Space Draft page will be enabled. You will need either ETH or Matic in your wallet for the gas fees. * Click the ***Mint*** button to begin the process. * Once you mint your space, you will see a link in your Space Drafts page to view your Space NFT, where you can sell it to a collector! * ***Note: it may take 10-15 mins for your Space NFT to update*** * You will have a choice between minting on either ***Ethereum*** or ***Polygon*** * There are several things to consider when choosing between Ethereum and Polygon, but one of the main factors is the gas fees. ### Gas Fees Over the process of minting on the Mona Marketplace and selling your space there will be a number of gas fees, or the fees related to the amount of electricity the transactions require. You have the *option* to list your space, and this will include further gas fees. Some of these fees will be one time only per wallet. This will allow you to set a price for your space which a collector can purchase. If the space is unlisted, a collector can make an offer on the space but no price will be set.

Unlisted VS Listed Spaces

The fees for minting include the following : * Minting gas fee * Listing gas fee (optional : if you want to set the price as above) The *first time* you decide to *list* your space would require the following : * Mona Permissions gas fee (one time per asset type per wallet) * Marketplace Permissions gas fee (one time per wallet) {% hint style="info" %} Asset types would include Spaces or Avatars. The first time you want to list an space you would pay this fee, but all following spaces would not. {% endhint %} Permissions fees are about 1/6th the amount of the minting fee. The amount that each Gas fee costs depends on the Blockchain you use and can vary *significantly* over time. Ethereum and Polygon MATIC are currently supported and are compared below. As much as MATIC has smaller gas fees, if you don’t have Matic it is possible to have a bridging fee which is based on an Ethereum gas fee. There are many web resources that display the current Gas prices for Ethereum such as [UseWeb3.xyz](https://www.useweb3.xyz/gas). ### Commission fees When selling directly on the Mona Marketplace, Creators receive 4.5% more on Secondary Sales versus selling on a 3rd party marketplace like OpenSea. Primary Sale : 85% Creator + 15% Mona Secondary Sale : 85% Seller + 12% Creator + 3% Mona ### Ethereum * [Ethereum](https://ethereum.org/en/) is where most NFTs (including high-end art and collectibles) are currently minted. Ethereum is more popular than Polygon, and NFTs minted on Ethereum are ***easier to sell and re-sell***. With that popularity comes more network traffic and higher gas prices. * Ethereum has higher gas fees. This means that in order to mint your space on Ethereum, you will be prompted to pay a fee in order to do so. The amount varies greatly, from $25-30 (Feb 2022) up to $300-$500 (October 2021) per transaction. Unfortunately, this is the norm for minting on Ethereum, for any platform right now. The gas fees fluctuate wildly throughout the day, so if you're seeing high fees now, you can check back an hour later or even in another few minutes and you might see them a bit lower (or higher). * While the gas fees are high, the financial upside for an artist minting on Ethereum is ***significantly higher*** than minting on Polygon. ### Polygon * [Polygon](https://polygon.technology/) (previously known as Matic) is a proof-of-stake chain, which is built on top of Ethereum. While not as popular as Ethereum, Polygon has gained a lot of traction in the community. NFT artists seeking a cheaper, more environmentally friendly solution have been turning to Polygon to mint their work. * Polygon has ***significatly lower gas fees*** when compared to minting directly on Ethereum. Fees are typically less than $1. * [Follow this guide](https://docs.polygon.technology/docs/develop/metamask/config-polygon-on-metamask/) to add the Matic network to your MetaMask Wallet. * While Polygon is cheaper for those who are less familiar with crypto, keep in mind that saving money upfront on minting fees may not balance out with the possible resellability of a space. So, consider all the factors when choosing which chain to mint on. ### What about other chains? * Currently, we only support minting on Ethereum and Polygon. We are working on supporting other chains, especially those that are *carbon negative*, such as Algorand. If you'd like to recommend a certain chain, please send us a message in our [Discord](https://discord.gg/Ad7hBzCqwV). # Update your Space From Unity 2020.3.18 to Unity 2022.2.3 You may need to update your space to the latest Mona SDK for several reasons, this doc will cover how to do so. Reasons you may need to do so include the following : * You need to update your space from a previous version. eg.2022.3.18 or 2022.2.3 to the latest build. Spaces should always be built using the latest update. * You have a space in the Mona SDK where the Mona library and/or Mona Template utility do not connect/work. * Your space seems to have broken due to a Unity bug and want to get your space into a fresh Mona SDK Build. * You have a *minted* space made in Unity 2020.3.18 and it doesn't look right in the latest version of Mona. Submit your updated Playable files using the following form : ## Updating from a previous build to Unity 2022.3.6 All you need to do (in most cases) is import your previous version Mintable file into the latest Mona SDK. You will need the following : * Latest Unity version for Mona, click on [this link to install 2022.3.6](unityhub://2022.3.6f1/b9e6e7e9fa2d) with Unity Hub already installed. *Don't forget to include the WebGL Module when you install it.* * The latest Mona SDK - Download [here](https://github.com/monaverse/SpaceStarter). {% hint style="danger" %} It is ***not*** recommended to use the Unity Hub to simply update the project as a number of errors may appear. You should import the mintable files as assets, this process is described below. {% endhint %} ### Creating Mintable files from the previous Space * If you don't have the Mintable Files for the space already, open up the original space in previous version of Unity. eg. 2020.3.18 or 2022.2.3. * Use the 'Mona/Build Mintable Files' menu to create the Mintable files in the project 'Exports' folder.

Export Mintable Files

* Make note of any assets that may be required (custom shaders, TextMeshPro etc.) ### Updating to the latest Unity 2022 Mona SDK * Extract the latest Mona SDK .zip file to where you would like the project to be. This is the Unity project we will be opening in Unity Hub.

Unzip the Mona 2022 SDK

* Use Unity hub to open the latest project file you just unzipped. Make sure that it is opened using the target Unity version.

Open 2022 SDK in Unity

* Import any of the external assets that you used when creating your space using the Package Manager. Make sure they are all up to date. * This may include any custom shaders or assets in the Unity store. Note that this is purely to make sure all your assets work when importing your Mintable files. * If you used Text Mesh Pro assets, make sure to import that into your project as well. * Use the 'Assets/Import Package/Custom Package...' menu to import the Mintable files from your *previous* project 'Exports' folder. * **In most cases, make sure to turn off the '\_MonaAssets' and 'Mona' folders in the import process so that it uses the latest build files.** * In some cases, you may have modified the template assets for use in your space, if so you may need to import these assets after all. Only select the assets that you have modified.

Import the Mintable Files into Unity 2022

* Use the 'Mona/Load Space Scenes' to load the scenes from your Mintable files. * Make sure to delete the 'Untitled' scene in the hierarchy. * Update the space so that it looks and plays correctly. * ***If you are importing from Unity 2020, the space lightmaps will probably need to be rebaked*** as 2022 uses a different approach to how to use 'Generate Lightmap UVs' on models. If the lighting setup files were imported correctly all the settings should be the same, so just use the 'Generate Lighting' button in the Lighting window. * Make sure that all the shaders etc look correct. If you used any custom shaders, you may need to reimport them. * If you have any other issues, feel free to jump into the Mona Support Channel on Discord. * After that you can continue on with your project! {% hint style="info" %} If you would like to update the playable files on *a previously minted space* using Unity 2020, please submit your Playable files using this form : {% endhint %} # Frequently Asked Questions ## What software do I need to build the metaverse? You can use **any 3d modeling software** to build a virtual space with Mona. Software commonly used are **Blender**, **Rhino**, **3ds Max**, **Gravity Sketch**, and more. After you've modelled your world, we use the **Unity Game Engine** to package and publish your metaverse space. We make this process very easy, even if you have never used Unity before. Check out our [Get Started tutorial](/create/getting-started-building) to get started building. ## What equipment do I need to enter the metaverse? You can enter any Mona space **directly in a web browser** -- no downloads needed. More specifically, you can use a Mac or PC running Chrome, Firefox, Brave, or Edge. (Yes even Microsoft Edge). Safari is currently not supported. ## How big can I make my space? {% hint style="danger" %} **250MB** is the *maximum* filesize for the Playground Files folder. If it is more than this you will need to optimize further. {% endhint %} #### Some techniques for optimising filesize include : * Reduce the size/number of textures * Reduce the number/size of lightmaps * Reduce the number/size of Reflection Probes * Reduce the size of the skybox texture **So how *****big***** can I make the space?** Generally speaking the size of your Space can be as big as your ability to optimise it for use on most devices. A large space would have less detail/textures etc, whereas a small space could have more detail. A lot of it comes down to *draw calls* which includes things like how many unique objects and textures/materials are in your space and how the lighting affects them. There are many ways to optimise your assets in your space, and some of these will be covered in [Improve your Space](/create/building-spaces/improve-your-space). ## Does Mona support VR / AR? At the moment Mona does not support VR or AR. We will be looking into this in the future however. ## Can I use Assets from a marketplace? **Yes, but there are considerations.** Assets need to be 'game ready'. High polygon objects are not designed with game ready assets in mind, and will need to be optimised to do so. This may require retopology and baking, so unless you are willing to take the extra steps to make these assets ready for a WebGL game experience then it may be wise to avoid these assets. But make sure to read the usage license before using in your Space. We recommend you create your own 3d assets from scratch or using open-source 3d assets. Another issue is to make sure that the assets are able to be used and there are no issues with the mintable files. A common issue is that a 3rd Party Asset uses a complex shader that does not work in the mintable file. This will usually be picked up in the QA process, thereofre something to consider with purchasing assets. To test the mintable file, you can follow the instructions at the bottom of the following page : ## **Can I play on a mobile device?** No, but this is being looked into in the future. ## Can I add lighting to my scene? Yes, you can add lighting! That said, it is wise to limit your use of Realtime lights to 1-2 unless you understand how to use them effectively (this comes down to optimising spaces). We recommend doing most of your lighting by using Lightmaps. Lightmaps can create much better results for less resources, the only catch is they are not dynamic. Check out our [Lighting guides here](/create/building-spaces/improve-your-space/lightmaps-unity-lightmapper). ## What Unity version is recommended? **Unity 2022.3.6** is the recommend version at the moment for highest compatibility with Mona. This can be downloaded [here](https://unity3d.com/unity/qa/lts-releases?version=2020.3). ## Can I animate elements in my scene? Yes. Objects can be animated in a 3D application like Blender and imported into Unity, or within Unity by using the Animation timeline. You can get started with Unity Animation [here](https://docs.mona.gallery/unity-development/animation-unity). ## Can I stream in video or Audio into a space? Yes. You can set up a canvas to have Livestreaming. For more information go to [Live Streaming in MONA](/collect/live-streaming-in-mona) # Troubleshooting FAQs for all issues relating to Spaces ## Getting started with Building in MONA ### The Playground files are not being built One of the most common issues when starting is that the playground files won't build. This is usually because the WebGL module was not installed when you installed Unity. If you look at the console when trying to build the playground files, you will get an error similar to the following :

Example WebGL error

* Go to the Unity Hub Installs section, selecting the Settings button, and then go 'Add Module'. * Make sure the WebGL module is selected and select 'Install' at the bottom.

Select the Add Module option

Installed WebGL Module

* Another approach, if you are not using Unity Hub, is go to 'File > Build Settings' and then switch the Platform to WebGL. This should install the WebGL module as well.
### Tags + Space Hierarchy A lot of issues are caused by Scenes or tags being used incorrectly or not at all. Mona needs the following applied *exactly* like this in order to function correctly, so make sure to keep the following in mind. ![Space Summary](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FeDGK61FnCuSNiwSwAFWT%2FHierarchyGuide_01.png?alt=media\&token=77488f9f-7f84-43f7-879d-7486095a60ec) The next image is a summary of the object types and the applicable states of each. Some of these are compulsory as well, so make sure these are set accordingly. ![Other considerations to make in your hierarchy](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F8a90jTVnbbEYmVGrtHry%2FObjectTypesSummary_01.png?alt=media\&token=cd6e6104-2a11-49a0-8f06-36a89399f62c) ### My Avatar falls through the ground! You will need to add colliders to all objects you want the avatar to walk on, or not walk through. Box Colliders are most performant, but if you need a mesh collider make sure to optimise the mesh and use that instead of the base mesh. For more information go to [Colliders](/create/building-spaces/create-your-space/colliders). ### 'More than one root object' error This means that there is probably an object outside of the Space/Portals/Artifacts parent gameobject in the hierarchy. If you collapse all your folders to the top gameobject layer you should get something like this : ![Reduced hierarchy should look like this](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FHb5DJeu76xQxga4hTxf4%2FRootObjectErrorHierarchy.png?alt=media\&token=29b10c74-4e10-4416-9116-d94a69a136b2) If there are any other objects as well as the Space/Portals/Artifacts gameobject, then make sure to add them *under*, or as a child of, the Space/Portals/Artifacts gameobject. ### 'You're missing a Space/Portals/Artifacts Layer' error! The first object under each scene is the 'layer' in which all your objects need to be under. Each of these objects have a tag applied to them above the Inspector. The Tags (in green) should be as follows : ![Object tag in hierarchy](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FVLX7WnniHWC15bV8lxRh%2FSpacePortalArtifactLayerError.png?alt=media\&token=9d9e5e39-7518-4a26-b4f7-bc7e913189b1) **Make sure that there is only *****one***** of each green tag in the space.** Any duplicates will throw an error. Other tags (Portals/Artifacts/Canvases) use different tags. ### The camera is stuck/doesn't move in Mona! Make sure that your space doesn't have a camera in the scene. Either delete or disable the camera before building your Space to Playground Files. ### My space doesn't update when I build to Playground! Make sure to delete your Playground Files after testing. Sometimes it will not overwrite the files when you build them. ### Playground Files won't upload (with no error)! First thing is to check the web console for errors : \ \- Edge > Settings in top right / More Tools / Developer Tools\ \- Chrome > Settings in top right / More Tools / Developer Tools This is the best way to help figure out what may be happening. Common issues include : If an error is 'Nullreference : Object Reference not set to an instance of an object' then there may be a broken connection between objects. ***A common issue is that Artifacts, Portals or Canvases (the Unique name object with the respective tag) does not have a collider and it needs it.*** It could be by deleting prefabs without unpacking/deleting the references in the scene, renaming or importing a object that is different in some way to what Unity is expecting, references to objects in Unity Animation, or a reactor reference perhaps. Basically, something in your scene is looking for something *else* in you scene, and not finding it. ### My space works in playground but has trouble uploading to the Wallet! It could be that your internet connection times out before it can upload, resulting in the following error. Make sure that you have a fast enough internet connection to upload your space without issue. Sometimes this may just be a temporary issue, and may work in an hour or two. ![Example issue](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FUtwskrR4Fn9GnKXUwgGC%2Fimage.png?alt=media\&token=27602fd2-ae92-447c-b5ce-eb33c60c911f) ### I have a 'Looks like the "Space' file is missing' error when I upload my Playable files! This error will happen when you have moved or renamed your space scene in the project file outside of the original location, breaking a lot of the internal references that Mona is looking for. Unity will not fix this if you rename it back in some cases. ![Error in question](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FxpgHpXsaVL5uRobJrJId%2Fimage.png?alt=media\&token=70bbc915-8081-436a-9f2b-b5147b053b8d) This can be fixed by copying the Space.unity.meta file from an alternative build (found in the Space location) and copying it to the same location once you have sent the Space file to it's original location. An alternative approach is building the Mintable file of your space using the Mona Menu, and then importing that into a new Template. This process is shown [QA Process](/create/building-spaces/submit-your-space/qa-process#testing-the-mintable-file). You may need to copy any other assets across, but this should solve this problem. ### I can't seem to sign into or install Unity Hub! Occasionally, the Unity Hub can be a little problematic for some uses. One thread that may help is the following, as it has links to earlier version of the Unity Hub. Other approaches may be make sure that your VPN is turned off and that Unity is allowed through the firewall on your computer. These may limit your ability to sign in with the Personal license, and if you can't sign in you won't be able to open Unity. ## Portals / Canvases / Artifacts ### My avatar can't 'see' my Portal/Artifact/Canvas You may have covered the Portal, Artifact, or Canvas collider with another collider (usually for physical collision on the assets themselves). If there is a collider in front of, or surrounding, the collider on the Unique###Name gameobject then that will get priority, meaning the asset will not be able to be seen in Mona. As the portal, artifact, or canvas collider is *also* a physical collider it's best to remove all other colliders on your assets. Another reason is that you may have deleted the Collider on the gameobject that has the Unique###Name and Portal/Artifact/Canvas tag attached (as per the documentation). ### Javascript error when loading The following error appears when loading the space :

Javascript error

A common reason for this is when the canvas images are to numerous, or too large, for the browser memory. Make sure your images are as small as possible if you have many images. we recommend no bigger than 1000x1000 if possible as all these images will need to be loaded before a user can explore the space without lag. Another reason is that you are using too many animated GIF images. Reduce the number of gifs and see if that works. The filesize of the animated gifs may not be a deciding factor on this. ### 'There is a problem with the Collider on one of your Canvases' Canvases MUST have a ***mesh collider*** on the Unique Name Gameobject that has the Canvas tag (Not the CanvasPrefab parent object). If it has any other collider type, or no collider at all, it will throw an error on uploading to the playground files on your wallet. ### 'Duplicate Portal/Artifact/Canvas' Error in my build! This means that that two or more UniqueName gameobjects (with their respective tag) under different Portal/Artifact/Canvas Prefabs have the *same* name. Use the QA button to give you hints to which ones inside Unity. ## Asset Appearance ### There is a very specific pink material on some/all of my objects! This is a shader issue usually related to render pipelines. You may be using a shader on your material that the inbuilt render pipeline is not compatible with. URP and HDRP are not compatible with Mona. If you are porting your assets from either URP or HDRP, played with these settings by mistake, or added an incompatible shader type from the asset store then you will need to reset the material or render pipeline to the Standard Render Pipeline. ### My textures seem to flicker at distance * You may have turned off Mipmaps on the texture in Unity. * The Anti Aliasing has been turned off in Mona * Your assets overlap other assets and the texture is 'fighting' to be in front, also known as Z-Fighting. ### My artifacts / canvases / dynamic objects are really dark! This is most likely due to your space not having Lightprobes. For more information go to [Light Probes](/create/building-spaces/improve-your-space/light-probes). ## Colliders ### My mesh collider mesh looks different from what I exported! It is recommended to close your mesh before export. Although the collision is based on the normal, or the polygon facing direction, of the mesh. Also make sure to apply all transforms before exporting. Deleting the Mesh Collider component and reapplying it will sometimes fix this issue. ## MONA Spaces ### Spaces don't load on the MONA website If the Spaces don't load on the website you can always check the 'Browser settings > More Tools > Developer Tools' window, make sure the 'Console' tab is selected, and see if that offers any errors to help troubleshoot. This helps troubleshoot the issue in the Support channel on [Discord](https://discord.com/invite/gcrGHzTerU). ### 'Blocked the loading of a resource' error If the following error is shown it could be related to your Antivirus software.

Website spaces don't load...

## MONA Library ### An Error is caused when opening the MONA Library The following error happens when you open the MONA library :

Mona Library error

If the error is *exactly* the same as the one in the picture above, it can be ignored. Just press 'Clear' at the top left of the console window. ## Unity Errors ### dataOffset !=file.GetPosition() Error in Unity! This happens sometimes when your hard drive that unity uses for temp files is full. Check your main drive and make sure there is enough space. # Creating Assets Overview of the Mona documentation for Creating Assets ... Many of the things discussed in this tutorial have been covered in other areas in the Mona Documentation as Creating Spaces or VRM avatars uses the same techniques. But if you are coming into the Mona eco-system as an asset creator specifically then you can continue with the details here and we will link to other tutorials as needed. There are *many* ways to create assets depending on the requirements of the end goal. Making assets to be used many times in for a mobile game is very different from a single centrepiece object for a client-based desktop experience. The following image displays a number of pipelines to create your assets from Palette texturing on the left, trim sheets in the middle, and High polygon approaches on the right. Palette texturing and trim sheets are fantastic approaches for highly optimised assets. These can usually be used in all spaces including Mobile and standalone VR/XR. High polygon assets that have been optimised are usually used in high end experiences for desktop only.

Asset Creation Pipelines...

## 3D Creation approaches As optimisation is important when creating assets for your space the result needs to consider the polycount, texture resolution, and material count in order to make sure the assets look good and don't slow down the experience. ### Low Poly Asset Creation The simplest is creating low polygon assets from scratch. This approach is usually called Sub-D modelling and basically means you create the asset end result from the start by adding polygons manually. This is great for simpler assets such as simple furniture and/or architecture. This is not so great for complex or detailed assets such as characters or sculptures. ### High Polygon Asset Creation This could include sculpting assets in something like ZBrush or Blender, or using a 3D Creation Tool that doesn't really consider polycount such as Rhino. The issue with these, in regards to using them in WebGL spaces with limited resources, is that the polycount is usually in the millions. And this is not practical for a WebGL experience unless you want the space running at a very low frame rate. That said, it is possible to take your high polygon asset and turn it into a low polygon asset with Retopology. ## Optimization ### Retopology Retopology is the process of basically *tracing* a high polygon asset as a low polygon asset. You can make the high polygon asset however you like so you can focus on how it looks, but it is still recommended to consider the end result, as some details are extremely difficult to reduce down to a low polygon asset. Manual retopology can take some time, but is the best way to get an asset polycount down as much as possible. You can then *bake* the high polygon detail into the low polygon asset texture. More information on this can be found below. An approach to manual retopology is covered at the bottom of [Optimizing your Mesh](/create/creating-assets/optimizing-your-mesh). ### Decimation, Remeshing, and Auto Retopology Decimation, Remeshing, and Auto Retopology are methods that reduce the polycount for you much faster, but are usually less optimised than doing it manually. 3D Creation tools like Blender have modifiers that can do this. You can find more information about this in [Optimizing your Mesh](/create/creating-assets/optimizing-your-mesh). You could also use other tools like [Instant Meshes](https://github.com/wjakob/instant-meshes) to automatically retopologise your assets. ## Texture and Material Approaches There are several approaches to texturing that allow you to improve the visuals of your assets while at the same time keeping it more performant and/or smaller filesize. ### Palette Texturing Palette Texturing is using a simple texture of color to apply to an *entire* model. You would assign the polygons of your model onto the specific areas on the texture, also known as Unwrapping UVs. In exceptionally optimised examples, the texture could be as small as 16x16 pixels, with a small number of color options. This is great for creating relatively simple assets with a number of colors at a *very* small filesize.

Example Asset with a 16x16 pixel texture. Created by TheMattEmpire.

Palette Texturing is a fantastic approach to asset creation, especially if you are creating a lot of assets to use in a Mona Space using Unity as Unity can combine all your resources together if they are using the same material, reducing draw calls, and therefore running the space better. As they are all using a texture that is very small, the filesize is also quite small in comparison. For more information on this, check out the [Broken mention](broken://pages/H6HIN8l4O7QOYRZdEIvc) doc. ### Trim Sheets Trim Sheets takes this a little further where the texture has high quality textures that can be used in different ways on your asset. An entire house can be textured with one material, but the texture has an area for roof, floors, window frames, walls and other details.

Example of Trim Sheets...

Similar to Palette Texturing, Trim Sheets are a fantastic approach to asset creation, especially if you are creating a lot of assets to use in a Mona Space using Unity as Unity can combine all your resources together if they are using the same material, reducing draw calls, and therefore running the space better. The *difference* to Texture Palettes is that Trim sheets are usually larger in filesize as they require higher quality textures. The performance is still better, but the filesize does increase. For more information on Trim sheets, check out the [Broken mention](broken://pages/DcxMDs8aiUViVwko7BKD) doc. ### Baking A common thing to do, at least with important assets, is to *bake* high polygon detail into the low polygon asset texture. Baking can be done in Blender, Maya, or 3D Studio MAX, but the most common approach to baking is by using a program like Substance Painter or Marmoset due to its easy to use approach and improved results. Both of these are not free however, whereas Blender is. Baking does produce fantastic results and allow for more performance in comparison to just high polygon assets, but as each asset requires it's own baked textures, the filesize can get quite large in comparison to Trim sheets. So baking is usually recommended for important or hero assets only. # Asset Requirements This page describes the specifications for optimized 3D models. {% hint style="success" %} WebGL operates with inherent performance and resource constraints, especially when targeting a wide variety of devices such as mobile and standalone VR. Therefore, it's crucial that you heavily optimize your assets to ensure a fluid experience for *all* users. {% endhint %} 3D Assets are different from .vrms, and therefore require different considerations when creating them. If you are creating assets to use in your space in Unity the following guidelines will help you create assets that look good and work well in Mona. To ensure that your assets work well in spaces and don't slow down the experience too much it is *highly* recommended to follow the guidelines below when creating your assets. To put it simply however, you can use the following chart. Note how the polycount is in *triangles*, rather than polygons :
Excellent 3D Asset SpecsGood 3D Asset SpecsMaximum 3D Asset Specs
Less than 4MB in totalLess than 8MBLess than 12MB
Less than 1,500 trianglesLess than 3,500 trianglesLess than 10,000 triangles
1 Mesh1 Mesh1-2 Meshes
1 Material 1 Material1-2 Materials
512 x 512 total textures *512 x 512 total textures *512x512 individual textures *
\*Note how the textures differ from *Total* and *Individual*. Total means that all your textures *add up to* the target textures. So instead of having a diffuse, normal, smoothness/Metallic, and emissive texture at 512x512, they would actually be 256x256 each to add up to a 512x512. Individual would be 512x512 for each texture type. Textures play the largest part in file size so keeping these as low as possible is recommended. ### Memory Web browsers have a maximum memory allowance per tab, around 2GB, regardless of the device's power. In this memory space, we need to store our website's front end, the main virtual space, all the players and their avatars, as well as other elements. * **Consequences of Overuse:** Going over the recommended memory usage can lead to issues. More memory-heavy spaces will accommodate fewer users, making them feel less lively. Additionally, performance can suffer, causing lag, slow responses, or even crashes, which isn't ideal for an immersive virtual experience. ### **Polycount** High polycounts can lead to performance issues, especially on lower-end devices or when many objects are present in a scene.

Example of a small asset polycount ...

Make sure to note the difference between polygons and triangles as these can be different numbers. A simple summary is that triangles is double the number of polygons, but this does not take into consideration polygons made of 5 or more sides, also known as Ngons. This is why Triangles are used as a baseline. As noted above there are recommended polycount guidelines for assets, but here are some example polycounts for different types of objects : * **Small / Simple / Less important Objects** (lamps, rocks, etc.): ≤ 500 triangles. * **Medium sized / Intermediate Objects** (large furniture, small structures): 500 - 3,500 triangles. * **Large / Complex / Important Objects** (large buildings, significant structures, hero assets): 3,500 - 10,000 triangles. * **File Size Constraints:** The file size primarily depends on object complexity and texture count. A single large asset can be up to 12MB. However, we encourage smaller assets which remain under 4MB unless its a particularly important asset. Balancing the polycount to the size and importance of the asset is very important. The vase above would be a small asset. If it was important to the environment, you could use the left most example. If it was less important, you could use the middle example. If it was very far away and in the background you could use the right example. Note how the small examples at the top right of the asset don't look very different. Even though the polycount is significantly different. If you are designing the asset to be used in engine such as Unity, you can use Level of Detail, or LODs. This utilises all three assets and displays each according to its distance from the camera. For more information on these, check out [Optimizing your Space](/create/building-spaces/optimise-your-space/optimizing-your-space). ### **Textures** As textures take up the largest amount of filesize it is important to keep these as few and small as possible with the following as a rough guide. * **Resolution :** 512x512 pixels or lower per texture. Higher resolution is permissible in unique cases, but always consider its memory implications. * **Count :** Try to use as few textures as possible to reduce memory consumption. When considering texture resolution for 3D objects, it's a balance between visual detail and memory consumption. Here's a way to visualize it: * **1 texture at 1024x1024** consumes around the same memory as **4 textures at 512x512** * **1 texture at 2048x2048** consumes around the same memory as **4 textures at 1024x1024** or ***16***** textures of 512x512** * **Compression:** Texture compression may shrink file sizes initially, but it doesn't reduce memory usage in Mona itself. In other words, smaller files doesn't necessarily mean less memory use or better performance in the space itself. Note that Mona does *not* support Crunch Compression. ### Materials Each additional material increases draw calls, which can slow down rendering. Aim to reduce and simplify when possible. * The simplest approach is to use one material per asset. If you have many assets though, this can be a lot of Draw calls. * [Trim sheets](broken://pages/DcxMDs8aiUViVwko7BKD) and texture atlases are advisable in order to reduce the number of materials on assets. * Palette Texturing is a fantastic approach to creating an entire space with one material. ### Meshes There are a number of aspects to consider when modeling your assets apart from just the total polycount such as sub-meshes, topology, UV Mapping and Backface Culling. * For objects comprised of several distinct meshes, consider merging them if it doesn't compromise their appearance or functionality. Reducing the number of meshes minimizes draw calls, enhancing performance. * Remove any unseen or unnecessary vertices, edges, and faces. The end user may not see them, but the camera will, so internal or overlapping faces should be removed to optimize performance. * Aim for clean and efficient UV maps to optimize texture usage. Familiarize yourself with techniques like Overlapping UVs, [Trimsheets](broken://pages/DcxMDs8aiUViVwko7BKD),[ Texture Atlasing](https://en.wikipedia.org/wiki/Texture_atlas), and[ Seamless Tiling textures](https://plusspec.com/seamless-texture-tileable-texture/). These approaches can significantly enhance the efficiency and visual fidelity of your assets. * As game engines render only one side of a polygon, ensure your models are built with this in mind. Unity does not render, or *culls*, the backfaces of polygons in objects by default, so make sure all your normals are correctly oriented. ### Shaders In terms of 3D model supported shaders we support several variations of the Standard PBR shader (Standard Metallic, and Standard Specular). * **Albedo Map** : Determines the color of the material. It can include transparency if the texture has an alpha channel. * **Metallic / Roughness Map** : As .glb's use their own shader it is different from the Unity standard shader. The red channel defines which parts of your model are metallic. The green channel serves as the Roughness map. * **Normal Map** : Provides the illusion of surface detail (like bumps and dents) without adding extra polygons. * **Height Map** : Used for parallax mapping, giving additional depth illusion on the surface. * **Occlusion Map** : Defines areas of ambient occlusion, making crevices and corners look naturally shaded. * **Emission Map** : Specifies which parts of your model should glow. It is possible to make custom Shaders in a Mona Space with the Unity Shader Graph which is included with Unity, or 3rd Party tools such as [Amplify](https://assetstore.unity.com/packages/tools/visual-scripting/amplify-shader-editor-68570) or [Shader Forge](https://acegikmo.com/shaderforge/). If you are using Unity Store Shaders there may be issues with complex shaders as Mintable Files will break any dependencies on export. Be sure to test this by importing your Mintable Files into a new project to make sure there are no issues. ### General Advice #### **Prioritize Efficiency** When creating 3D assets for our platform, it's crucial to balance detail and performance. While detailed assets are appealing, we need to ensure they run smoothly in WebGL. Beautiful assets don't look great at 5 frames per second. If some details won't be noticeable, it's recommended to leave them out to save processing power. #### **Use Alpha Textures Wisely** Alpha textures, which add transparency to objects, should be used sparingly. Only apply them where necessary, like for glass or foliage, as they can impact performance considerably. If possible, use more performant versions of transparency. 'Cutout' is better than 'Fade' which is better than 'Transparency' on the material settings. **Optimize for Low-Spec Devices** Many users may access our platform on less powerful devices. Make sure your assets are optimized to work well on these devices, [look at our minimum specs to run Mona](/explore/explorers-frequently-asked-questions). # 3D Asset Types Describing the different asset types approach to help reduce drawcalls and filesize while increasing quality and performance. Below are separate tabs that cover different approaches to Asset Creation. Each method has pros and cons, but generally comes down to Final Result VS Optimisation. ### Modular Assets Good for creating highly optimised models with small filesize that can create much larger assets and variations of them such as different buildings or ships to name a few. Think of it like 3D Lego. ### Instanced Assets General assets that have medium quality, but can be used many times in a space such as trees to generic furniture. Depending on the platform, it is possible to position, rotate and scale each asset to imply they are different, at little to no extra cost. ### Centrepiece Assets Important or Key assets that can be given more resources such as polycount and texture resolution. Due to their higher resources you can't have too many of these in a space. {% tabs %} {% tab title="Modular Assets" %} {% embed url="" %} Creating Modular Assets with Trim Sheets YouTube Video... {% endembed %} Modular Assets are more like parts of assets that you combine into larger assets. A simple example is creating separate parts as walls, doors, windows, roof etc. so that you can make many different buildings with very few parts.

Examples of Modular Assets...

As each building is made with fewer assets the overall filesize is significantly smaller, meaning it takes less time to download or offers more room for other assets or textures.

Final result using the above assets...

If you manage to reduce the material count for the parts as well, you can have unique buildings with reduced drawcalls which allow for better experiences overall with a higher frame rate. A great approach to getting the drawcalls down is using Palette Texturing or Trim Sheets. We have a tutorial on these if you want to go into more detail at [Asset Creation Approaches](/create/creating-assets/asset-creation-approaches). ## Asset Creation The first thing we need to do is create some Modular Assets. It's always good to look at reference of the style you are going for, but also other modular kits that are out there. These can be found online on YouTube tutorials, or things like the Unity store and Unreal Marketplace. ### Jigsaw puzzle approach Design all elements to be able to fit into each other perfectly. A simple approach to this is to have key dimensions for all parts, so the wall height is the same as the pillar height, and all doors are the same dimensions. If possible, try to keep to the metre or at least to 0.25m as these are common snapping levels in most engines or 3D Creation programs. Another tool that is useful is snapping to vertices. Unity has a great tool using the 'V' key to snap an assets vertex to another vertex, so make sure that all your vertices line up accordingly as well. If you hold 'Ctrl' while moving the asset will snap to the parameters set in the snap tools. If you are putting two walls together make sure that the texture is tileable, so it doesn't look like there is a seam. Either that, or put a pillar or detail over the top to make it less obvious. This is easier if you are using a tileable texture for the walls, but if you are using a trim sheet approach you may need to be a little more accurate with placement of the UVs. ### Pivot location It is generally recommended to put the pivot of all parts at the end, or the center, of the asset so things line up easily. Walls should have the pivot on the ground, at the *end* of the wall. That way when you line them up it is easy to get the pillar where it needs to be or continuing the wall is also easy when using the snapping tools. Adding the pivot to the end is recommended as it is easy to set the pivot to the centre of an object in Unity. This allows the asset to be pivoted from both the end *or* from the centre. ### Overlapping assets It may not be ideal for a wall to have a pillar at each end as when you copy the asset, there will be an overlap of two pillars. It is better to have one end of a wall have the pillar (and perhaps the pillar on its own to use as needed) or keep the wall and corners/pillars separate. ## Creating the Assets In the examples above a *single* texture for walls, wood, rock detail, metal and roof tiles was used in order to reduce filesize and drawcalls. High polygon assets were created before baking them into a single square to create the trim sheet texture. The modular assets were then created with this trim sheet. As noted, Trim sheets are covered in the [Asset Creation Approaches](/create/creating-assets/asset-creation-approaches)documentation. Building a full building with a few modular assets is quick and easy. That said, the above is a simple example but could be extended to something much more complicated and varied with more parts and variations. {% endtab %} {% tab title="Instanced Assets" %} Instanced Assets is an approach to making assets that you will use more than once in a space such as environment assets like trees and bushes or generic furniture such as simple tables and chairs. As each experience is different you will need to set up the polycount, material count, and texture resolution accordingly depending on your target platform. Depending on the platform you are using, you can load the one asset into the space and adjust the position, rotation and even scale of the copied assets and the engine will optimise the asset to count as one drawcall (if it has one material), improving the performance of the assets considerably. Unity has lots of tools such as batching to optimise an environment. For more information on this, check out the [Optimizing your Space](/create/building-spaces/optimise-your-space/optimizing-your-space)doc. Some dedicated WebGL platforms may not. A dining table might be used two or three times in an environment at most, therefore could have more polygons. A tree could be used considerably more, so the polycount should be considerably lower, depending on the target platform. There is no single answer to optimization as the range of platforms and styles is endless. But sticking to the Excellent and Good categories in [Asset Requirements](/create/creating-assets/asset-requirements)is a good idea to make sure your assets work well on all platforms in cluding Mobile and Standalone VR. {% endtab %} {% tab title="Centrepiece objects" %} Centrepiece Assets are an approach to making assets that you will use fewer times in an experience. These are important or key assets in the space. Characters or environmental assets that a player would interact with or tell part of the story. Or perhaps an art piece that stands out (although an art gallery full of centrepiece objects may push lower end devices if not optimised well simply due to file size). As the asset is important, it can take up a little more resources such as higher polycount, and texture resolution. But due to the higher polycount, you shouldn't use these too often in order to reduce rendering high polycount and materials (therefore increased drawcalls) in the experience. Depending on the target platform, these assets could lean into the maximum category mentioned in the [Asset Requirements](/create/creating-assets/asset-requirements), but if you are aiming for Mobile devices, you may need to optimise further. Optimisation always comes down to the target platform and result. If the experience is small and there will be few users at any given time (therefore less VRMs to load in) you could easily go over the maximum requirements without much issue, especially for desktop experiences. But if the space is large, and/or has many users, or is meant to run *well* on mobile or standalone VR experiences, then you will need to keep the assets as optimised as possible. {% endtab %} {% endtabs %} ### Summary In this tutorial we looked at the different types of assets and the pros and cons of each. With those approaches in mind, let's get into making the assets! # Asset Creation Approaches Assets can be made in many different ways and usually depends on things such as your target platform, style, and deadlines. The following categories are covered below and cover some of the most common ways to make assets. ### Palette Texturing Palette Texturing is using a simple texture of color to apply to an entire model. You would assign the polygons of your model onto the specific areas on the texture. In exceptionally optimised examples, the texture could be 16x16 pixels, with a small number of color options. This is great for creating relatively simple assets with a number of colors at a *very* small filesize. ### Trim Sheets Trim sheets are a common technique to increase your texture quality on 3D assets while at the same time reducing the number of materials/textures on them. The Trim Sheet process is basically creating a more complex texture that allows you to apply different details (from the same texture) to a model by unwrapping the model in interesting ways. This texture can be used on multiple objects, or even just one large one, with fantastic quality results. ### High Polygon Assets High Polygon assets are a fantastic *start* to asset creation, but due to the limitations of many platforms such as WebGL, Mobile or Standalone VR these assets need to be optimised in order to make sure they look good *and* run well. Having the best asset in the world won't matter if it runs at 10 frames per second. This topic will go over the two main methods of creating High Polygon assets such as Sculpting and subdivision. AI Tools, also known for creating poorly optimised assets (at least for now), will be looked at in the next tab. ### AI Tools It is possible to create 3D assets with AI such as [Stability.ai](https://stability.ai/), or [Luma AI](https://lumalabs.ai/). At the moment the assets may not be that optimised. This doc goes into some of the issues with AI 3D Creation tools, and approaches to working around them. {% tabs %} {% tab title="Palette Texturing" %} ## Palette Texturing Palette texturing is a technique that allows you to add color to an entire asset with an extremely small texture by applying the UVs into the small texture. The texture being used in the example below is a 16x16 pixel image which comes up to a whole *1Kb* of filesize.

Example Asset with a 16x16 pixel texture. Created by TheMattEmpire.

Depending on the asset in question, you can increase the polycount (within reason) to add more color definition. It uses polygons in order to create the ink lines, rather than relying on textures to do so. That said, a VRM has a little more room to move on poly count than a simple asset in a space. In the case of extremely small textures like this one, you may need to make sure the texture turns the filtering off in the target platform (the Imported Unity texture for example) otherwise the platform may add a blend between colors automatically (unless you want that of course!).

Turn off Texture Filter in the texture...

## Gradient Texturing The evolution of this is creating a texture of number of gradients that you can use to texture your asset. This allows some extra detail in the color, but keeps the filesize quite low. The following comes in at 12.6Kb in total. If you made all your assets with this one material, your total experience would have a *significant* file size decrease.

Example 256x256 Gradient Texture...

It is surprising the results you can get with this when using the gradients and UVs in interesting ways. As you are using significantly less resources in filesize/materials, you can push the polycount a little further in order to apply the texture creatively. The following example takes a very simple gradient like texture and applies it to three different assets. The Rectangular door is the top, Arch the middle, and Oval the bottom UV example. As you can see in the oval example, it uses only flat UVs. Only the corner gradients (on the Rectangular and bottom of the Arch) require the full texture, most of it could be done with a single pixel gradient. That said, the corners could also be done the same way with a little more creative use of UVs.

Using UVs in interesting ways...

## PBR Functionality The next version would be to have the same colors, but different finishes such as matte, polished or metallic. Allowing one model to have a large number of colors and finishes but using one texture. All assets in the room below, and the room itself, use the same single material. This includes the metallic sink assets through to the matte bed spread. You could of course add Emissive elements as well in order to have all the possible features in your space.

Example of multiple finish textures...

## Decal Texturing Decal texturing (not an official label, just the best we could come up with!) is a mix of Palette texturing and trim sheets in a way. Part of the texture is the Palette, Gradient, or PBR texture approach, and part of the texture includes art are that can be placed on the asset like a decal. This approach would allow for a lot of colors and finishes, but also allow for key art, logos or data in the asset as well.

Gradient + Decal Texturing example...

## Summary Palette Texturing is a fantastic approach to asset creation, especially if you are creating a lot of assets to use in a Mona Space as Unity can combine all your resources together if they are using the same material, reducing draw calls, and therefore running the space better. As they are all using a texture that is very small, the filesize is also quite small in comparison. For more information on Unwrapping UVs, check out the [Applying Materials & Unwrapping UVs](/create/mona-crash-course/applying-materials-and-unwrapping-uvs) doc. {% endtab %} {% tab title="Trim Sheets" %} {% embed url="" %} Trim Sheet Video Tutorial {% endembed %} In a Mona space, reducing materials is a very important approach to improving how a space works in a browser as this reduces drawcalls. A drawcall is the number of things that the computer has to call on the computer to draw something. This includes things like models and materials. So trying to create assets with as few materials as possible is a great technique for optimisation. Most AAA games use this technique a lot on environment assets in order to have fantastic quality, save time on development, keep assets together with a set theme, and many other reasons. ### The Trim Sheet Texture As an example, lets look at a simple texture that was made in less than an hour using Blender for the base shapes, then Substance Painter for the textures, as a quick example of how to use it in interesting ways. This texture has diffuse (2048x2048), metallic/smoothness(1024x1024), and normal maps (2048x2048). Of course how you create your Trim Sheet is up to you. Some people use ZBrush, others use the 3D Creation tool such as Blender, Maya etc. entirely. Whatever creates the assets that you want to add to your 3D asset. ![Creating a base asset in Blender](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FGBndQ50mdDmeRPPZqb8F%2Fimage.png?alt=media\&token=24ec7a2f-7361-45ef-bc67-ec27840cc5dd) ![Adding some texture in Substance Painter](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FdLcnmmjD42JCi1r8s4IU%2Fimage.png?alt=media\&token=9119b1f3-7dd8-4a1c-bbb4-f9b613d057df) ![Final Maps to use as a Trim Sheet](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F0Lj6ArxDPe7C0Nyxp3yZ%2FTrimSheetExamples_01.png?alt=media\&token=ab6b4aa3-95ef-428f-9a1b-30ab46bd979e) The main thing to consider is that if you are tiling in any direction such as vertically or horizontally, the edge will tile smoothly. This will allow you to extend your 3D asset polygons across that border without issue. Assets do *not* need to be in the 0-1 area (the square that most 3D applications use when unwrapping objects) of a UV map, so by positioning / rotating / scaling the UVs in interesting ways you can create fantastic assets with a lot less information. That said, a texture could tile vertically, or not at all, depending on your needs as a trim sheet. ### Applying the trim sheet Once you have one or more trim sheets to apply to your asset we can unwrap the asset UVs to assign the texture to the polygons on the object. By doing this we can use the one texture to create entire assets without too much hassle. ![The result in Unity](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FqlKur2hfEekRMbvEuAYB%2Fimage.png?alt=media\&token=9c265cbd-3c5a-4fa9-a41b-5095cfcf9d3c) If you look at the unwrapped UVs of the asset it does not look like it makes much sense, but in this approach the result is more important. And each section of the asset needs to be considered separately. ![The Unwrapped result in Blender](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F9xNnBTG2z0EMf0mi6CZr%2Fimage.png?alt=media\&token=30468084-55b5-4f87-a8ce-1dc46d44b70b) This is of course a very different process than that used for 'hero' assets that have all of the asset within the 0-1 area of the model. This approach allows for more unique assets, but requires a lot more time in creating those assets from both the modelling, unwrapping, baking etc. Every asset requires consideration on what is the best technique for that asset. Things like buildings and simple props in a space are fantastic use cases of using Trim Sheets. Things like characters, statues, and unique assets with custom details are usually created with their own textures as Hero assets. ### Examples For an example of professional use of trim sheets you can look at the following example by Tor Frick. This takes trim sheets to the next level using very few textures to make whole environments! {% embed url="" %} Tor Frick example of Trim Sheets {% endembed %} ### Resources #### GrabDoc A useful tool that allows you to bake trim sheets within Blender is GrabDoc which you can find [here](https://razed.gumroad.com/l/grabdoc). \ For more information, including how to sculpt the trim sheet details, check out the YouTube video [here](https://www.youtube.com/watch?v=7pMoSrkd1FQ\&t=948s). {% endtab %} {% tab title="High Polygon Assets" %} ### Sculpting Digital Sculpting is possible in applications like [ZBrush](https://www.maxon.net/en/zbrush) and [Blender](https://blender.org). It can create amazing assets much like traditional sculpting, the catch is it is done with *millions* of polygons therefore the final result would need to be optimised for use in target Platforms like WebGL, Mobile and standalone VR/XR. Optimisation approaches for sculpted asset usually include tracing the asset as a low poly model (also known as retopology) and then baking the high polygon detail into the Normal Map texture. More information on this approach can be found at [Optimizing your Mesh](/create/creating-assets/optimizing-your-mesh).

Sculpted Model VS Retopology Model VS Retopology with Normal Maps Model...

### Subdivision Subdivision is an extension of Sub-D modelling in that you model an asset but then add subdivision to make it super smooth. Along with sculpting, this will usually end up with millions of polygons and therefore require optimisation approaches. As the original model is already made, there is a reasonable change that you could utilise the unsubdivided model and bake the high polygon details into the low polygon Normal texture. The result *looks* the same, but has significantly smaller polycount for a larger filesize (due to the included normal map texture). One thing to note is that the layout of polygons plays a significant role in the result of the higher subdivision and can be a whole skill in itself. {% endtab %} {% tab title="AI Tools" %} It is possible to create 3D assets with AI such as [Stability.ai](https://stability.ai/), or [Luma AI](https://lumalabs.ai/). At the moment the assets may not be that optimised for a WebGL space, so this doc will go over some considerations when using AI based 3D assets. Stability AI has the advantage of utilising images to create assets. So with a good reference images, either created yourself or using 2D image generation you can get better results. If you want a tutorial on how to set up[ Stability.ai 3D Assets](https://stability.ai/stable-3d), you can go [here](https://youtu.be/jaRr5W80N8E?si=Jv0sVQWdqoUsb40J) for more information. Do note that you will install it on your own computer, and a 24Gb VRam graphics card is recommended (but not required). ## AI Assets As you can see in the examples below the assets look great from a distance, but once you get up close the quality starts to break down. The following examples use Luma AI, but similar considerations should be looked at with any AI generation tool.

AI generated assets using Luma AI.

The texture is also less optimised with wasted space on the texture, wasting valuable filesize.

All the black areas are wasted space - Luma AI

The polycount and edgeloops are not really considered in the creation of the assets, and can therefore be significantly optimised in order to reduce the filesize and improve how they work in a space.

Very high polycount - Luma AI

That said these assets can be fantastic reference, and depending on the quality of the original asset, there are a number of approaches you could use to create the optimised version. ## Reference The first approach that will usually create better results but over a longer time frame, is use the AI generated 3D asset purely as reference. You can use the asset to help guide the creation of a better high polygon asset, or a refined version of a low polygon asset. Basically, this would speed up the creative process so you have to spend less time figuring out what you *want* to do, and get to the *doing* part. A benefit of this approach is that you can then take the time to improve on the design of the asset as you go, focusing less on the general details and really refine the details. This also means that the end result is more yours rather than just the AI's (or the original artists in the database more the point). ## Optimising the mesh If the AI Generated asset is exactly what you want, but you still need to optimise it, the approach would be to create an optimised asset and projecting the original asset data onto the optimised mesh. The approaches to this are covered in the next tutorial category, and cover Decimation, Remeshing, Retopology, and Baking.

Optimised versions of the AI Asset

This asset example used retopology and baking the diffuse and normal map to get the polygon count from 9089 down to 52 (in the lowest example). the lowest polygon asset would look fine from a distance, but you could use the higher polygon assets with Level of Detail tools in Unity. If you save the assets like the following : * Temple1\_LOD1 * Temple1\_LOD2 * Temple1\_LOD3 When you import all three fbx files as one model into Unity it will automatically create a Level of Detail asset, and switch between them at different distances from the camera. So at the cost of filesize for the extra meshes, the asset will be significantly more performant at distance. {% endtab %} {% endtabs %} # Optimizing your Mesh This doc is an overview of the documentation within the category covering different ways to optimise your assets. As MONA works on WebGL/Browser it is important to get your asset polygon count as low as possible while keeping it looking the quality that you would like. There are many ways to do this depending on the 3D Tools you have access to and willing to learn, as well as the time you have to do it. The tutorials within this category will go over various approaches to optimising your assets. {% tabs %} {% tab title="Retopology" %} Retopology is the approach of basically tracing the high polygon asset manually and creating a low polygon model. You have complete control where every polygon goes and you can make it 'neatly' with good edge loops so you can add/reduce polygons as needed much more easily. This also makes it *much* easier to unwrap for texturing. This approach is basically required for characters as posing and animation usually plays a part, and the edge loops play an important role in how easy it is to rig, or apply to a skeleton, as well as how good it looks when posed or animated. So keep this technique in mind if you are looking to create VRM Avatars. The simplest way to do this is by creating a separate model, a simple box or a single polygon plane for example, and then use the snap tools to place and extend polygons over the high polygon manually. This does take longer but the results are also *much* better and cleaner than using decimation or remesh tools. As this is a more complicated approach, I will add two videos below. One is reducing a curved asset made in Rhino in Blender, and the other is one of the Workshops that cover optimizing Photogrammetry. In some cases you may just want a lower polygon asset, but in other cases you may want to project they high polygon information onto the low polygon asset as a normal map texture, basically a texture that implies bump detail. This is covered in more detail in the next tab. {% embed url="" %} Optimizing an architectural asset in Blender. {% endembed %} {% embed url="" %} Optimising a complex Photogrammetry asset {% endembed %} {% endtab %} {% tab title="Baking" %} *Baking* will take the detail of the high polygon asset and project them onto the low polygon texture. This way the polycount can be considerably lower, while keeping the quality of the high polygon asset at the cost of filesize (due to the texture). There are many ways to do this in several different applications such as Blender (free), Substance Painter (Adobe subscription or on [Steam](https://store.steampowered.com/app/2718190/Substance_3D_Painter_2024/)) and [Marmoset Toolbag](https://marmoset.co/toolbag/). The following tutorial will go over using Blender. ## Prerequisites * High polygon Assets such as a sculpt or subdivided mesh. * Can be single or multiple meshes. * Low polygon asset for use in the Mona space. * Has to be a Single mesh. * UVs should be unwrapped correctly. * Blender or Substance Painter. ## Baking In Blender In your blender scene you should have all your high polygon assets and your low polygon asset. The low polygon asset can only be a single mesh, so join your meshes into one asset if you need to. ### Setting up the Texture and Material First, we need to create a material and texture for us to bake onto. This could be done first or before baking. * Select the low polygon asset. * Go to the 'Material Properties' panel in Blender.

Setting up the Low Poly texture and material...

* Assign a new material. * With the asset selected, go to the Shading menu at the top of the window. * In the Shader Editor or node graph section, go to 'Add / Texture / Image Texture' to add a new Image Texture node. Place it in the node graph. * You do not need to connect this node to anything unless you want to see the result in Blender. * Select '+ New' in the Image Texture node to make a new texture. Set to 1024x1024 or below (as a power of 2. eg. 512x512, 256x256 etc.) * Make sure the Image Texture node is selected on this Material before Baking later in the process. ### Baking the High poly asset onto the low poly

Setting up the Cycles renderer...

* Go to the Render Properties tab at the bottom right. * Change the renderer to '*Cycles'*. * Blender defaults to using 'Eevee'. * This will enable the Bake tab in the options below. * Change the 'Device' to 'GPU Compute' if you have a good Graphics Card as this may be faster. * Expand the Bake tab in the Render Properties section. * Change the bake type to what you would like to bake from the high polygon assets. * 'Diffuse' or 'Normal' are two common examples but depends on what you need for asset creation. * 'Combined' is good to bake all the information into a single texture. * Select if you would like Direct or Indirect lighting. This considers the lighting in the scene. * Enable the 'Selected to Active' property, then expand the tab. * This bakes all of the selected high polygon assets into the *last* selected objects (such as your low polygon asset) texture that we created previously. * Adjust the 'Extrusion' and 'Max Ray distance' as needed. * These depend on your asset sizes, and adjust how the information is projected. * If the settings are incorrect you may get passthrough or incorrect bake information.

Baking the Normal map...

* Select all your high polygon assets using 'shift' or 'ctrl'. * Select your low polygon asset *last* using 'shift' or 'ctrl'. * Select the 'Bake' button at the top of the Bake section in Render Properties. * Go to the Shading Menu and select the Image Texture Node (if you haven't already) you should see the bake results. * If you get any baking issues or mismatches, you can adjust the Extrusion and Max Ray Distance to improve the result. * Make sure that the high and low poly Normals are facing the right direction. You can check this by enabling the 'Face Orientation' option in the 'Overlays' menu at the top left of the viewport. Blue is the correct facing color. * Make sure that your low poly asset is *smoothed.* * If creating a single asset with a single texture, make sure that your low poly asset only has one Material. The bake will only apply to the selected Image Texture Node. You can utilise this for multi object/materials if needed. * Once you are satisfied with the results, go to the Image Editor in the bottom left window, and select the three lines at the top to show the 'View | Image' pulldown. * Go to 'Image / Save as...' in order to save your baked image to edit in your Image Creation software.

Applying the normal map to the material...

* If you want to see the textures on your asset, connect the nodes to their respective parameter in the 'Principled BSDF' node. * Note if you are connecting the Normal map, you will need to add a 'Normal map ' node between the texture and the Normal parameter. This can be found in the 'Add / Vector/ Normal Map' menu. * Make sure to set the Viewport Shading to 'Material' or 'Rendered' at the top right in the Viewport to see the material result. {% endtab %} {% tab title="Decimation and Remeshing" %} Many 3D Creation tools have added these features in one way or another. Zbrush, Blender, even Rhino (since version 7.0 with the Quad Remeshing tool) have tools that allow you to *quickly* reduce the amount of polygons on a mesh. The main issue with this approach is that the result is not 'clean'. So in some cases texturing or modifying the asset *may* be more difficult, and the result is possibly not as optimised as it *could* be. So it depends on how important and big is the asset (at least to start) and how much time you are willing to spend on it. The Decimate and Remesh modifier can be applied in the Modifier panel in Blender after selecting the model in *Object* mode. Once applied you can play with the large number of parameters to get the best effect on your mesh. ![Adding a Decimate or Remesh modifier to your asset.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FFVSMg0dDiPE96L8DWcof%2FBlender_AddModifier.gif?alt=media\&token=ce31fbd0-e762-45a9-b2d4-0e6b6dad7846) #### Decimate Modifier examples Here are some examples of what Decimate modifier does to simple shapes. ![Using the Decimate Modifier in Blender](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FhVzO8PP8CWe1XzKIpL2y%2Fimage.png?alt=media\&token=de09dd89-b868-47aa-8bfe-63836933cc68) #### Remesh Modifier Examples And some more examples using the Remesh Modifier. ![Using the Remesh Modifier in Blender](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FAuwAlSf7kgEiwaQzoLTC%2Fimage.png?alt=media\&token=3960c608-a1f5-463d-b36a-53d27aff8a7c) #### Remesh Examples (Object Data Properties panel) The Remesh tool is in the Object Data Properties panel after selecting the mesh you'd like to remesh. it is sometimes more accurate than using the Remesh modifier. ![Using Blenders Remesh settings](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Fvzprlsn3GY2QoruHGtRb%2Fimage.png?alt=media\&token=67ea8c6b-1e2f-4380-9424-0285b7fcfa74) Note the Sphere on the Remesh tool doesn't look any different as this asset did not work with the Remesh method. The state of the original asset will usually decide which method is the best to use. #### Decimation/ Remesh Summary These basic shapes are not the best examples of assets you would want to Decimate or Remesh, but they do show the results very clearly. And each asset requires it's own approach. There is rarely one method that suits *all* assets. The goal *is* the same however, your want the polygon count as low as possible, while keeping the shape of your asset. {% endtab %} {% endtabs %} # GLB Considerations This page goes into how to create GLB Materials in Blender including ways to optimise texture to export as glbs... {% embed url="" %} Glb Materials in Blender Video Tutorial... {% endembed %} GLB assets have certain things to do in order to have textured materials appear how you want within Unity. This document will go over different material setups using the Blender Node graph. For more information you can go to the [Blender documentation](https://docs.blender.org/manual/en/latest/addons/import_export/scene_gltf2.html). All of the following material examples are created in the Blender 'Shading' menu at the top of the window. You'll have your File Browser (Top left), 3D viewport (Top Middle), the Image Editor (Bottom left), and the Shader Editor (Bottom middle). Along with the Outliner and Properties tabs to the right. * Make sure that the Render Mode is set to Material or Rendered at the top right of the 3D Viewport so you can see the results as you update the node graph. * Make sure that the material that you are modifying is selected as well in the Material Properties panel after you have selected the asset that uses it.

Blender Shader Graph...

## Diffuse + Normal Map The most common type of material would be a Diffuse, also known as color or Albedo, for color and a Normal map which offers bump details on your asset. You could also skip either of these if you don't want to use it. Note that the Normal map texture requires a specific Normal Map node to work correctly.

Adding a Diffuse and Normal Map...

### Adding a Diffuse Texture * In the Shader Editor at the bottom, go to the 'Add / Texture / Image Texture' menu , use 'Shift + A', or Right click on the Shader graph background, to add an Image Texture node. Move it to where you like and left click to place it. * Use the 'Open' button to load your desired diffuse texture from your computer. * Make sure it is the correct size. For *important* assets we recommend 1024x1024 or less, for smaller assets use 512x512 or less. * Connect the yellow 'Color' dot on the 'Image Texture' node to the Yellow color dot on the 'Color' Parameter on the 'Principled BSDF' node. ### Adding a Normal Map Texture * Either add another 'Image Texture' Node, or select the previous one and use 'Shift + D' to duplicate it. * Use the 'Open' button to load your desired normal map texture from your computer. * Make sure the texture resolution is as small as possible. For *important* assets we recommend 1024x1024 or less, for smaller assets use 512x512 or less. * Add a 'Vector/Normal Map' mode from the Add menu or 'Shift + A' hotkey. * Connect the Yellow 'Color' dot on the 'Image Texture' node to the Yellow color dot on the 'Color' Parameter on the 'Normal Map' node. * Connect the purple Color dot on the 'Normal Map' node to the Purple color dot on the 'Normal' Parameter on the 'Principled BSDF' node. * Change the 'Color Space' parametter from sRGB to 'Non-Color'. ## Metallic and Smoothness GLB/GLTF has specific requirements for texture use much like the Unity Standard Materials shader. When it comes to Smoothness, GLB actually uses *Roughness* instead. So White on the texture makes the asset *not* smooth, and Black on the texture is very smooth and polished. Both Metallic and Roughness are combined into one texture : * Roughness - Green channel. * Metallic - Blue channel. With your textures created in your texture creation tool (such as photoshop or substance Painter) : * Load the Image Texture node with your Roughness Metallic texture. * Add a 'Converter/Separate Color' node and connect your image texture * Make sure to set the Roughness/Metallic node 'Color Space' parameter to 'Non-Color'. * Connect the Green channel to Roughness * Connect the Blue Channel to Metallic.

Adding a Roughness/Metallic texture to keep with the GLTF 2.0 standards...

## Using Alpha as transparency It is possible to use transparency by setting the 'Materials Properties / Settings / Blend Mode' to 'Alpha Blend' shown below with the green box under 'Backface Culling'. It is best to have Backface Culling *enabled*. If Backface Culling is disabled you will have semi translucent results even where it should be solid.

Enable transparency by Setting the 'Blend Mode' to 'Alpha Blend' and enable 'Backface Culling'.

If you are having issues with your assets transparency as one material, you may need to split the Transparency and Opaque areas of your asset into two separate materials. ## Double Sided materials If you want your material to show the texture on the front *and* the back, you can enable/disable Backface Culling to do so. You can find this setting in the Material properties / Settings section.

Enable / Disable Backface culling

## Emissive textures It is possible to use emissive textures on your asset but the bloom effect within Mona (the glow effect on Unity materials with high emissive strength) will not be applied for now. That said you can use the emissive channel to apply bright areas on your asset. You can either change the color property, or set the Color parameter to its own emissive texture.

Using a texture or color for emissive...

## Mirrored Polygons & Overlapping UVs Depending on how you are creating and optimising your asset you may be using Mirrored assets and/or Overlapping UVs. If these assets are placed in Unity you may find there are some issues with the mirrored/overlapped UV polygons as a GLB, whereas an FBX would work without issue. One approach around this is : * Import your asset as an FBX into Unity so that the mirrored/overlapping UV polygons look correct. * Add the GLTFast Package, this is covered in [Useful Unity Packages](/create/resources/useful-unity-packages). * Export the FBX as a GLB from the 'Gameobject / Export GLTF / GLTF-Binary (.GLB)' menu. * Import this GLB into Blender and update all the Maps with your original textures, as exporting from Unity as GLB seems to reduce the quality of the textures. * *Make sure to update the 'Color Space' property to 'Non-Color'* in the texture node on the Normal, Metallic/Roughness, and Emissive texture. This can be found under the Shading category at the top.

Make sure the Color Space property is set correctly...

* Reimport your asset into Unity to see the result.

Results of GLBs with Mirrored / Overlapping UV polygons...

## Troubleshooting #### Materials don't look right... A common issue is that in some cases the material doesn't look correct in comparison to the settings of the material. eg. The material looks matte where the roughness/metallic settings imply otherwise.\ Make sure that the Specularity parameter is set to non zero in Blender, this may apply to other parameters as well. #### Opacity looks broken... A pretty common issue is with Opacity settings making the asset look broken. First, make sure that the Opacity Blend Mode is set to Alpha Blend, and that Backface Culling is on. If this still doesn't work, you may need to separate the opaque material and the transparent material into two differnt materials so there are no conflicts between the two material types. ## Summary As always it is better to use *less* textures as possible, both in number and in filesize. So if you can use a parameter on its own rather than a texture channel, don't use the texture to create the result. # Example - Cyberpunk Car This document shows how to make a great asset from start to finish. It's more of a general guide than a step-by-step how-to. ## Planning {% embed url="" %} Planning, Story and Reference Video... {% endembed %} In web3, it's better to have assets that are easy to use. Wheels make development more complex, so we chose a hover car. This way, it works as a vehicle without needing extra functionality. The best-known hover car is the Delorean from Back to the Future, but we can't use it due to copyright. Instead, we can draw inspiration from Cyberpunk or The Fifth Element. By gathering references following this idea, we can gather the following things : * Cyberpunk (Game, art, everything) * The Delorean (Future version) * The Fifth Element (Had some great flying/hovering vehicles) * Styles (Borderlands, Cyberpunk, Valorant, Arcane, etc) * Cars (Lamborghini, McLaren, Ferrari, Audi, concept, etc) To make my asset work on all platforms, including WebGL, Mobile, and Standalone VR/XR, we need to keep the polycount and texture size low. This helps reduce the file size. There are various ways to achieve this, and we can explore them if we start with a high-polygon asset. This asset can either be baked down to a low-polygon version or used as a reference for palette texturing. ### Story A story or background can bring your creation to life, influencing both the asset and its promotional material. We don't just want a car; we want a car that represents its driver, showcasing speed, wealth, or history. Alternatively, it could just look cool. We'll let the references guide me. You can create your story in two ways: preplanned or developed during the process. Both have pros and cons, so it's good to start with a basic idea and let it evolve. For this project, we want a cyberpunk futuristic car that looks beat up. The idea of a future car that feels old is interesting. ### Reference Using [PureRef](https://www.pureref.com/), begin compiling all the resources we mentioned that grab our attention. Using google search, but you could also try some AI tools such as Midjourney, Stable Diffusion or even Co-pilot and Firefly. Keep in mind optimization approaches to save texture resources and time, such as mirroring the asset or using duplicate elements like thrusters. The final step is to get a basic orthographic view of the desired car model, such as a 1966 Ford Shelby Mustang. One could draw their own reference with all planned details or even a rough sketch to start. In this case, there is enough reference material and a clear idea of the goal, along with sufficient experience to execute it.

Reference for the Cyberpunk Car ...

## Asset Creation The first step is to create a high-polygon asset to optimize. Here is an example of the end result. This can be done through various methods, such as digital sculpting, AI asset creation, or, in this case, Hard Surface Modeling.

Hardsurface Result - Turnaround

As you can see, the polycount is significant, which is not ideal for optimized experiences like WebGL, Standalone VR/XR, or mobile. We will need to optimize the asset later, but for now, that isn't a concern. {% embed url="" %} Hard Surface Modelling Video... {% endembed %} ### Approach As the asset is primarily a hard surface, Sub-D modeling techniques will be used. There are many resources available on asset creation; search "[Hard Surface Modelling](https://www.youtube.com/results?search_query=hard+surface+modelling) " on YouTube or online for the latest information. There are various approaches to making assets: * **Primary to Tertiary Approach**: Start with basic shapes to get an overall feel, then add details. This method is efficient but may lack immediate feedback, which can affect motivation. Trusting the process can help, but it can be challenging, especially for beginners. * **Detail-Oriented Approach**: Add details from the beginning. This can be motivating but often leads to changes later, wasting time as you find better ways to approach elements or prefer different results. However, this process can be educational and may balance out the time spent.\\ The Primary to Tertiary approach is faster and more efficient but harder to maintain motivation. The Detail-Oriented approach is slower and may waste time but can be more motivating. Each method has its pros and cons, and the choice depends on personal preference and experience. ### Considerations With experience, you start to identify potential issues and find better or faster ways to achieve the same results. Each asset you create enhances your workflow. Here are some key points to keep in mind: * **Optimization Balance**: Optimization is as important as the final result, especially for mobile or standalone VR/XR. Balance the details accordingly. * **Design Considerations**: Keep potential optimizations in mind throughout the process, such as using duplicate or mirrored assets to save time and resources. * **UV Space Utilization**: Consider overlapping UVs to maximize UV space on the texture. Techniques to improve the result will vary. * **GLB Specifics**: If creating a GLB, additional steps may be needed for compatibility with engines like Unity. This will be covered later. * **Low Poly Target**: Always consider if high-poly details will transfer well to a low-poly version. Opt for designs that are equally good but more optimized. * **Baking Challenges**: Understand what details are difficult to bake into a normal texture. Texture resolution is crucial, and some details may need redesigning or creation workarounds. * **Normal Map Details**: Some elements are better added directly into the normal map during texturing. This varies case by case. * **Window Tinting**: Tinted windows can avoid the need for interior details, optimizing the asset. For transparent windows, use either one material with translucency or two materials (one opaque and one transparent). GLBs may have issues with transparency and opaque areas on the same material, so consider splitting transparent elements into their own material. By keeping these points in mind, you can create optimized assets efficiently while maintaining quality. ## Hard Surface Modelling Most of this asset was created using a few key tools in Blender. Besides the basic Position \[G], Rotation \[R], and Scale \[S], the following tools were essential: * **Delete \[Del]**: * **Dissolve Edge**: Used frequently to clean up unwanted edges. * **Delete**: Used for removing actual faces when needed. * **Limited Dissolve**: Useful for low-poly models, it cleans up unnecessary edges based on angle. * **Extrude \[E]**: * Used for quickly creating basic shapes. * Switch between Extrude Region, Extrude Normals, and Extrude Individual as needed. * **New Edge/Face from Vertices \[F]**: * Crucial for middle and detailed stages. * The 'Mesh: F2' add-on enhances functionality, allowing for quick addition of quads from three vertices or closing/joining loops. These tools streamline the modeling process, making it efficient and effective. #### Loop Cut / Slide \[Ctrl + R] With the primary shape created, loops are added and adjusted to fill out mid details. Clean loops make this process faster and easier, so edges are kept organized as long as possible. This is easier with high-poly assets since polycount isn't a concern, but it's more challenging with low-poly assets. Here are some additional tools and techniques used: * **Knife \[K] / Bisect \[Shift + 8]**: * **Knife**: Great for adding edges where needed after defining basic shapes. * **Bisect**: Useful for cutting across an entire asset, though used less frequently. * **Inset \[I] / Bevel \[Ctrl + B]**: * Used less often but very useful when needed. * **Loop Tools Add-on**: * Found in Blender's default installation, it allows setting selected edges/vertices to a circle or other shapes. * **Mark / Unmark Sharp**: * Sometimes used to visualize edges better. Edge weights with the Subdivision modifier are often used instead to achieve desired bevels in the high-poly result. * **Bridge Edge Loops / Bridge Faces**: * **Bridge Edge Loops**: Connects several edges neatly. * **Bridge Faces**: Creates a tunnel between two internal faces. These tools and techniques help streamline the modeling process, making it efficient and effective. ### Modifiers Modifiers are tools you can apply to your model to achieve various useful effects. In this case, three modifiers were used: * **Mirror**: Duplicates and mirrors the geometry across a specified axis, saving time and ensuring symmetry. * **Bevel**: Adds beveled edges to the model, creating smooth transitions and rounded corners. * **Subdivision**: Increases the mesh's resolution by subdividing faces, resulting in a smoother and more detailed model. #### Mirror Modifier The Mirror modifier is frequently used in asset creation, especially at the start, since most things are symmetrical. However, to create more interesting assets, making them asymmetrical by the end is a common approach. How long you keep the asset mirrored depends on the specific project. In this case, the asset

Mirror Modifier...

#### Bevel Modifier The Bevel Modifier, combined with the Subdivision Modifier, speeds up the hard surface modeling process. It adds extra bevels to the low-poly asset, resulting in clean high-poly assets and saving a lot of time. * **Bevel Modifier**: * Set the 'Limit Method' to 'Weight'. * This allows precise control over which edges have a sharp bevel. * Select an edge, choose 'Edge Bevel Weight', and adjust as needed. This method ensures efficient and clean results in your high-poly models.

Bevel Modifier...

#### Subdivision Modifier This is where the high polygons come into play, resulting in a super smooth finish. If your computer starts to lag due to the high subdivision polycount, reduce the subdivisions to speed up the process. Occasionally increase the subdivisions to check if the asset looks as expected

Subdivision Modifier...

#### Edge Loop Control Depending on how sharp certain edges need to be, it is often necessary to add more edges in some areas to clean up or sharpen details. In the picture below, extra loops have been added to make the edges crisper. This approach can be applied to achieve various desired results. If you decide to use the original mesh for your low-poly model instead of retopologizing from scratch, you will need to manually clean up all these extra edges. Otherwise, they will add unnecessary polygons to the result without any benefit.

Added loops for a sharp result...

#### Result With all these techniques and considerations in mind, the following asset was created: * **Mirror Modifier**: Used for symmetry, saving time and ensuring consistent design. * **Bevel Modifier**: Applied with 'Weight' limit method to add sharp bevels where needed. * **Subdivision Modifier**: Increased mesh resolution for a smooth, detailed finish. * **Edge Loops and Knife Tool**: Added extra loops and edges to sharpen details. * **Optimization**: Kept potential optimizations in mind, such as reducing subdivisions to manage performance and cleaning up unnecessary edges for low-poly models. The result is a well-optimized, detailed asset ready for use across various platforms.

Hard Surface Modelling result...

When 'Optimal Display' is turned off on the Subdivision modifier, the asset shows 769,352 triangles. This high polycount is not recommended for most ecosystems, except for high-end gaming desktops. Therefore, an optimization pass is necessary.

769,352 triangles in total...

### Optimization With the asset made and looking great, we can now focus on the optimization process. Here is an example of the end result, showing a considerably lower polycount compared to the high-polygon model displayed above.

Low polygon Turnaround...

Optimizing assets is crucial for performance on platforms like Mobile, standalone VR/XR, or WebGL. In this case, two approaches were used: Recycling Previous Assets and Retopology. {% embed url="" %} Optimization Video... {% endembed %} #### Recycling Previous Assets The main method used in this case was to optimize the original mesh after removing the Bevel and Subdivision modifiers. This involved manually going over the entire asset to remove all the edge loops added to sharpen bevel data. While this method is faster since the main model is already made, it may be less optimized compared to manual retopology. It's easy to miss polygons that could be removed or not achieve the same level of optimization. The most common element of this optimization process is selecting the edges to remove and using **Delete > Dissolve Edges**. This command removes the edges from the mesh while keeping the faces intact when possible. #### Retopology You can start tracing the asset manually, considering each and every polygon. This approach is slower but can result in significantly more optimized assets. It is the better approach if you are designing for low-end devices such as Mobile, standalone VR/XR, and WebGL. Retopology is indeed a straightforward process, though it can be time-consuming. The results are usually worth the effort, and with more experience, the process becomes faster and more efficient. #### Retopology Overview **Duplicate the High-Polygon Assets**: * Create a duplicate of the high-poly assets to keep an original backup. * Move elements apart to improve organization and baking results. **Trace the High-Polygon Asset**: * Use retopology techniques to trace the high-poly model. * Enable the **Snap** tool with the **Face** setting selected to ensure new geometry adheres to the surface of the high-poly model.

Enable the Snap tool at the top of Blender and use the 'Face' Setting...

* Using the standard Sub-D modelling tools such as extrude, knife, and add edge loop with the Snap tool on to rebuild a low poly asset over the top of the high polygon asset with as few polygons as possible. When creating a low-poly asset, it's essential to focus on the silhouette and utilize normal maps (or advanced bump maps) to capture finer details.

Retopologised Low Poly Asset...

#### Duplicate Asset Optimisation To optimize the asset and facilitate baking, certain elements were separated and duplicated. This approach not only saves time but also enhances texture quality by increasing the size of the assets in the texture map. 1. **Separate Key Elements**: * **Thruster**: Separated to avoid interference during baking. Can be duplicated to all four wheel slots. * **Rear Window Cover Slat**: Separated for easier baking and can be resized to fit the window. * **Underside Detail**: Separated and can be duplicated multiple times underneath the car. 2. **Duplication Strategy**: * **Thruster**: Duplicate to all four wheel slots. * **Window Cover Slat**: Duplicate and resize to fit the window. * **Underside Detail**: Duplicate multiple times as needed. 3. **Texture Considerations**: * Avoid very clear details that make duplicates look identical. * Be cautious with unique dirt and damage features to prevent obvious repetition. 4. **Final Polycount**: * After creating and duplicating all the assets, the final polycount is 7,034 triangles. * This is a significant improvement from the original 769,352 triangles.

The resulting low poly asset.

#### Decimation & Remeshing While there are quicker ways to optimize an asset, such as remeshing or decimation, these methods are generally not recommended for hard surface modeling or assets that require rigging. Here’s why: 1. **Remeshing**: * **Pros**: Quick and easy to apply. * **Cons**: Poor at preserving hard surface details and clean edge loops. Results in a less optimized mesh that can be problematic for detailed models. 2. **Decimation**: * **Pros**: Reduces polycount quickly. * **Cons**: Often results in uneven and messy topology, which is unsuitable for hard surface models and rigged characters. It can create artifacts and make the mesh difficult to work with. ### Unwrapping UVs With the asset completed, the next step is to unwrap the UVs. This allows for the application of 2D textures onto the 3D asset. For this asset, the goal is to use a single material to minimize draw calls and improve overall performance. {% embed url="" %} Unwrapping UVs Video... {% endembed %} ### Steps for UV Unwrapping and Texturing: 1. **Initial UV Unwrapping**: * Perform a quick unwrap to get an initial layout of the UVs. * Use tools like **Smart UV Project** or **Mark Seams** and **Unwrap** in Blender to start. 2. **Quick Bake for Testing**: * Perform a quick bake using software like Substance Painter. * This helps to check how well the high-poly details transfer to the low-poly texture. * Identify and fix issues such as flipped normals or misaligned polygons. 3. **Refine UV Layout**: * Adjust the UV layout based on the results of the quick bake. * Ensure that the UVs are properly aligned and scaled to maximize texture space. 4. **Consider Mirroring and Overlapping**: * **Mirroring**: Mirror the UVs down the middle to make them significantly bigger, allowing for more detail. However, this can make textures look repetitive, especially with dirt or damage details. * **Overlapping**: Overlap UVs for symmetrical parts to save texture space but avoid obvious repetitive details. 5. **Optimized UV Layout**: * Flip and mirror parts of the asset, such as the underside, to optimize UV scale while maintaining some asymmetrical detail. * Ensure that the UV layout balances detail and texture space efficiently.

Different approaches to mirrored polygons.

In the case of the UVs and polygons shown in the picture above, the orange UVs and red polygons have been duplicated and overlapped. This approach allows for higher quality textures at the cost of more repetitive elements. 1. **Duplicating and Overlapping UVs**: * **Duplicated UVs**: The orange UVs and red polygons are duplicated and overlapped to maximize texture detail. * **Higher Quality**: This method increases texture resolution for these areas but can lead to repetitive patterns. 2. **Adjusting UV Layout for Key Elements**: * **Rearrange UVs**: Adjust the UV layout to position key elements (like the top and sides of the car) in a way that makes it easier to edit car paint styles later. * **Ease of Editing**: This adjustment facilitates easier texture editing and potential variations in the future. 3. **Maximizing UV Space**: * **Utilize UV Space**: Ensure that as much of the UV space as possible is utilized to get the best results from your texture space. * **Avoid Wasting Space**: Large areas of unused UV space can waste file size and reduce potential texture quality. ### Baking Textures {% embed url="" %} Texturing Video... {% endembed %} The next step is to take the high-poly assets and the low-poly assets with the final UVs into a baking tool such as Substance Painter. While Blender can also handle baking, [Substance Painter](https://store.steampowered.com/app/2718190/Substance_3D_Painter_2024/) provides better results and more advanced texturing tools. #### Issues with Baking When baking high-poly details onto a low-poly mesh, you may encounter issues such as mismatched details due to incorrect projection distances. Here are some techniques to address these common problems: **Adjust Projection Distance**: * **In Baking Tools**: Depending on the baking tool (Substance Painter, Blender, Marmoset Toolbag, etc.), adjust the projection distance settings. * **Quick Fix**: Increase or decrease the projection distance to see if it resolves the issue. **Create a Cage Mesh**: * **Duplicate Low-Poly Asset**: Create a duplicate of your low-poly asset. * **Push Vertices Outwards**: Use Alt+S in Blender to push all vertices outwards, creating a cage mesh. This is different from scaling and allows for more precise control. * **Use Cage for Baking**: Use the cage mesh as a reference during the baking process to ensure accurate projection distances. **Split Detail into Different Meshes**: * **Separate Meshes**: Split the high-poly model into different meshes based on detail areas. * **Control Baking**: This approach gives you more control over how specific details are baked but is dependent on the specific issue. Fixing the problem depends on the issue. In this particular assets case I found the following : Fixing baking issues depends on the specific problem encountered. Here’s how the issues were resolved for this particular asset: 1. **Overall Projection Distance**: * **Issue**: The overall projection distance needed adjustment. * **Solution**: Reduced the projection distance slightly to clear up issues in all areas. 2. **Spoiler Stand Projection**: * **Issue**: The spoiler stand had difficulty projecting correctly. * **Solution**: Split the spoiler and stand mesh from the main mesh (without moving it) to ensure clean projection distances for each element. This prevented the projection from shrinking around the asset. 3. **Pre-Moved Elements**: * **Issue**: No issues with the thrusters, window cover, and underside detail since they were already moved. * **Solution**: No further action needed for these elements. 4. **Using Substance Painter’s Mesh Labeling Feature**: * **Feature**: Substance Painter allows baking meshes separately using labels. For example, any asset with `_high` would bake detail against `_low`. * **Application**: This feature prevents unwanted ambient occlusion or asset overlap during baking. * **Current Case**: Did not use this feature as the assets were already moved away from others, but it is useful in other scenarios.

Using Substance Painter to texture the car...

### Steps for Baking, Texturing, and Exporting: 1. **Bake High-Poly Details**: * Use your chosen baking tool (e.g., Substance Painter) to bake the high-poly details into the low-poly textures. * Ensure all necessary maps (e.g., normal, ambient occlusion) are baked correctly. 2. **Start Texturing**: * Use the texturing tools in applications like Blender, Substance Painter, or Marmoset Toolbag. * Apply materials, paint details, and add effects such as dirt, scratches, and wear. 3. **Export Textures**: * Export the textures with the appropriate settings for your 3D creation tool. * Keep roughness/metallic settings in mind for different platforms. ### Essential Texture Maps: * **Diffuse Map**: Contains the base color information. * **Normal Map**: Adds surface detail by simulating small bumps and grooves. * **Roughness/Metallic Map**: * For GLBs: Roughness (Green Channel) / Metallic (Blue Channel). * For Unity: Smoothness (Alpha Channel) / Metallic (Red Channel). ### Optional Texture Maps: * **Ambient Occlusion Map**: Adds shading to crevices and recessed areas. Can be included in the Metallic/Roughness map for GLBs. * **Emissive Map**: Adds glow effects to parts of the model. * **Opacity Map**: Controls transparency. Often included in the Diffuse map. ### Texturing Process and Final Adjustments The texturing process involved a mix of experimentation and reference checks, with a focus on achieving a cohesive and detailed final asset. Here’s a breakdown of the approach and key considerations: 1. **Experimentation with Smart Materials**: * **Approach**: Played it by ear, experimenting with different smart materials in Substance Painter. * **Reference Checks**: Occasionally referred to the original reference for elements like lights and thrusters. * **Exploration**: Explored various smart materials and found some nice results through trial and error. 2. **Custom Smart Materials**: * **Limitation**: Wanted more custom smart materials but decided against it due to time constraints. * **Focus**: Concentrated on available materials and made the best use of them. 3. **Adding Dirt and Muck**: * **Importance**: Adding dirt was crucial for the final look. * **UV Duplication**: Only duplicated the side UVs to avoid repetitive dirt patterns on the top of the asset. * **Detail Placement**: Ensured dirt flowed naturally from insets, enhancing realism. 4. **Thoughtful Detail Placement**: * **Reasoning**: Thought through the approach to detail, ensuring each element had a purpose. * **Dirt and Bolts**: Dirt flowing from insets and bolts around the car added life and attention to specific areas. 5. **Handling Difficult Elements**: * **Side Lights**: Initially wanted LED lights but couldn’t achieve the desired finish. * **Alternative**: Switched to metal bars for simplicity and to avoid transparency issues in GLBs and Unity. * **Future Considerations**: Might consider multi-layered elements with transparency in future updates, despite the added complexity.

The end result in Blender...

### GLB Materials When creating a GLB file, the materials need to be set up according to specific standards. Here’s how to configure the required texture maps and use them in Blender or any 3D creation tool that supports the GLB format, which is covered in [GLB Considerations](/create/creating-assets/glb-considerations). ### Required Texture Maps: 1. **Diffuse (RGB) + Alpha (A)**: * **Diffuse Map**: Contains the base color information in the RGB channels. * **Alpha Channel**: Contains transparency information. 2. **Roughness (G) + Metallic (B) + Ambient Occlusion (R)**: * **Roughness Map**: Stored in the Green channel. * **Metallic Map**: Stored in the Blue channel. * **Ambient Occlusion Map**: Stored in the Red channel. 3. **Normal Map (OpenGL)**: * **Normal Map**: Contains surface detail information. Ensure it is in OpenGL format. 4. **Emissive (RGB)**: * **Emissive Map**: Contains glow information in the RGB channels. ### Refinement & Polish Refining and polishing your asset is a continuous process that extends to the final stages of development. Here are some key steps and considerations to ensure your asset looks great across different platforms: ### Continuous Refinement: 1. **Iterative Testing**: * Test the asset in Blender to ensure it looks as expected. * Import the asset into your target platform (e.g., Unity) to check for any discrepancies. * Each platform may render the asset differently, so it's crucial to test in all intended environments. 2. **Manual Adjustments**: * **Texture Cleanup**: Manually clean up textures, such as the normal map, in Photoshop or another image editing tool. * **Mesh Updates**: Make small updates to the high-poly or low-poly mesh if needed. * **UV Adjustments**: Fix any small overlaps or issues in the UV layout that become apparent during testing. ### Platform-Specific Considerations: 1. **Roughness vs. Smoothness**: * Blender and most other platforms use a roughness texture by default, while Unity uses a smoothness texture. * **Export Specific Textures**: Export the necessary textures for each platform. * **Invert Roughness**: Invert the roughness texture in an image editing tool to create a smoothness texture if needed. 2. **Handling Mirrored Polygons and Overlapping UVs**: * **GLB Format**: GLBs may not handle mirrored polygons or overlapping UVs as well as FBX files. * **FBX Format**: Consider using FBX if you encounter issues with GLBs.

Stages of approaches to GLB Mirrored polygon/Overlapping UVs...

When we imported the GLB file, it didn't look good because some parts were flipped, even though it looked fine in Blender.Here's a simple fix: 1. **Import into Unity**: First, save the model as an FBX file and import it into Unity. 2. **Export as GLB**: Use a tool called GLTFast in Unity to export the model as a GLB file. 3. **Reimport into Blender**: Bring the new GLB file back into Blender. 4. **Reapply Materials**: In Blender, add all the textures again. Make sure all textures except the Diffuse map are set to 'Non-Color'. ## Promotion Once your asset is complete, it's time to share it with the world. To make it look as good as possible, you'll need some renders and promotional content. Here's how to do it: ### The Bare Minimum (Preview Render) 1. **Preview Render**: * **Purpose**: A simple render to show off your asset on the marketplace. * **Specifications**: For the Mona Marketplace, this should be a 2000x2000 pixel image. * **How to Create**: Use your 3D creation program to render the image. It's best to use a transparent background. ### Promotional Material (Social Media) 1. **Promote on Social Media**: * **Platforms**: Share your content on Instagram, TikTok, Twitter (now called X), etc. * **Content**: Use text to promote the story and background of your asset. But to make it more engaging, consider creating a video. 2. **Create Engaging Content**: * **Think Like a Movie Trailer**: Use the story behind your asset to create a short video with both visuals and audio. * **Target Audience**: Consider who will be interested in your asset and tailor your content to them. This will also help you decide where to post your content. 3. **Use a Mix of Media**: * **Images**: Take high-quality images of your asset and use them in your promotions. * **Text**: Write engaging descriptions and stories about your asset. * **Videos**: Create short, exciting videos that showcase your asset in action. By following these steps, you can effectively share your completed asset with a wide audience, making it look as good as possible and generating interest in your hard work. # Creating Avatars Custom Avatars using VRM assets. ## What is a VRM Avatar? **VRM is a 3d file format** that is designed to allow creators to build and use **custom 3D Avatars** in a growing ecosystem of virtual spaces. **VRM Avatars can be just about anything**, from a photorealistic human to a grocery shopping cart. Creating Avatars for the metaverse though has certain elements to keep in mind due to the number of platforms that they can be on. Many metaverses such as Mona use web, VR or Mobile devices and therefore the VRM needs to be designed in a way that will work smoothly on *all* of those devices with the one Avatar. ## Creating a VRM Avatar Creating a VRM is a lot of fun and you can get some amazing results if you are willing to learn all the ins and outs of asset creation. That said, it is still possible to get great results if you think within your current skill set! Generally, you will go through the following sections of the process, and each is covered in the following tutorials. ### Creating the Avatar model As noted, due to the platforms that these VRMs are to be used on you will need to keep in mind the requirements of the lowest common platform which is standalone VR and mobile devices. Things like the polycount, number of meshes, material count, and texture size all play a significant part in how well your avatar works in these spaces. Understanding these elements will sometimes affect the design and creation of your character. There are *many* ways to create a character asset. Some will use a sculpting tool like ZBrush or Blender to make a high polygon character. If you use this technique it will be very important to get the polycount down to the required specifications through methods like Retopology and baking the high polygon detail into the low polygon asset using normal maps. If you do not know what these elements means that's not a problem! It is possible to design their asset to be low polygon from the start. This is recommended if you are starting to create VRM Avatars as the learning curve for high polygon assets can be quite steep. For more information, go to [Getting Started with VRM](/create/creating-avatars/getting-started-with-vrm) Following that tutorial we cover different pipelines for Avatar asset creation ranging from the relatively simple to more advanced avatars. ### Rigging the Avatar *Rigging* means applying the asset to a skeleton. Once you have modelled and textured your avatar you will need to rig the avatar in order to make it move properly. All VRMs require a bipedal skeleton at the moment, that said, how you rig your asset is completely up to you. It is possible to have an entire car be rigged to the pelvis bone for example. It is possible to use applications such as [Mixamo](https://www.mixamo.com/) or [Accurig](https://actorcore.reallusion.com/auto-rig) to speed up the rigging process significantly, or you can manually create it. There are plenty of different ways to create your assets, finding the process that works for you is part of the fun. For more information, go to [Using Mixamo for Rigging](/create/creating-avatars/vrm-creation/using-mixamo-for-rigging) ### Refining the Rig As an option, it is possible to create a more complex rig/skeleton that can support secondary motion on your asset such as cloth, tails, ears etc. For this you can use *Spring bones* within the VRM system, but you will need to manually add the bones and then paint the *weights.* Weight painting defines how much each vertex is applied to a bone. For more information, go to [Adding Custom Bones to the Rig (Optional)](/create/creating-avatars/vrm-creation/adding-custom-bones-to-the-rig-optional) ### Creating the VRM Once you have a rigged model that suits the target platform you need to create the VRM itself. There are a number of ways to do this, but two that are covered in the following tutorials are : * UniVRM - This uses an addon for Unity. It has the benefit of being able to see the Spring Bones in action without having to build the VRM and test it in Mona. For more information, go to [Broken mention](broken://pages/r5rNiH5lLx9JkBZvNpqR) * VRM for Blender - This is an addon for Blender, that allows you to export the asset as a VRM directly from Blender itself. For more information, go to [Creating your Avatar using 'VRM for Blender'](/create/creating-avatars/creating-your-avatar-using-vrm-for-blender) Adding Spring bones and Collider Groups, or elements that spring bones can collide with, would be done in this stage. These are completely optional however. For more information, go [Adding Spring Bones in UniVRM (Optional)](/create/creating-avatars/creating-your-avatar-using-univrm/adding-spring-bones-in-univrm-optional) ### Using or Selling the VRM Once you are happy with your VRM you can then upload it on a host such as Github or Web3.Storage to use it as you see fit. For more information, go [Uploading your VRM](/create/creating-avatars/uploading-your-vrm) It is also possible to upload it on the Mona VRM Marketplace to sell! In order to do this however you will need to pass QA in order to make sure it is suitable for the target platform otherwise it may slow down the space, especially when it is possible to have up to 100 users in a space! For more information, go [Submitting your VRM to the Mona Marketplace](/create/creating-avatars/submitting-your-vrm-to-the-mona-marketplace) # Getting Started with VRM ## VRM requirements When designing a VRM, especially if you plan to mint it with the Mona Marketplace, you will want it to work on as many platforms as possible including Mobile and/or Standalone VRM spaces. For this we are recommending creating your assets for a mobile/VR specification. If your VRM has a high polygon/material/model count or significant texture size, it will affect how the space will run, especially seeing as there can be up to 100 users in a space at a time! So, make sure to keep within the recommended specifications. {% hint style="warning" %} The Maximum specs below will still pass QA, but would not be considered a good avatar for a Mobile/Standalone VR experience (depending on the space and number of VRMs in the space). {% endhint %}
Excellent VRM SpecsGood VRM SpecsMaximum VRM Specs
Less than 8Mb in totalLess than 10MbLess than 12Mb
Less than 2m in unit heightLess than 2m in unit height.Less than 2m in unity height
Less than 7,500 polygons (15,000 triangles)Less than 10k polygons (20,000 triangles)less than 12.5k polygons (25,000 triangles)
1 Meshes1 Meshes1-2 Meshes
1 material 1 material1-2 materials
1024 x 1024 total textures *1024 x 1024 individual textures *2048x2048 total textures *
\*Note how the textures differ from *Total* and *Individual*. Total means that all your textures *add up to* the target textures. So instead of having a diffuse, normal, smoothness/Metallic, and emissive texture at 1024x1024, they would actually be 512x512 each to add up to a 1024x1024. Individual would be 1024x1024 for each texture type. Textures play the largest part in file size and affect how performant a VRM is in a space, which is very important when it comes to Standalone VR and Mobile platforms. ## Creating the Asset To get started building a VRM Avatar, you will first need to create a Character. A Character model typically is in a humanoid form but could also be as wild or crazy as your imagination. With Mona, we don't prescribe form. You will need to model your character in 3D modelling software like Blender, 3DSMax, Maya, etc. Most of this documentation will assume you already have a character made and ready to add a skeleton, also known as *rigging*. ## Tools Required for VRM Creation There are a number of different methods to create a VRM. The following are two methods that are well documented. #### Using Unity * 3D Creation tool ([Blender](https://www.blender.org/download/), 3DStudioMAX, Maya etc.) * [Mixamo](https://www.mixamo.com/) or [Accurig](https://actorcore.reallusion.com/auto-rig) (Optional for fast rigging) * [Unity 2020.3](https://unity3d.com/unity/qa/lts-releases?version=2020.3) + [UniVRM](https://github.com/vrm-c/UniVRM) #### Using Blender * [Blender](https://www.blender.org/download/) * [Mixamo](https://www.mixamo.com/) or [Accurig](https://actorcore.reallusion.com/auto-rig) (Optional for fast rigging) * [VRM for Blender addon](https://vrm-addon-for-blender.info/en/) ## Avatar Requirements Your avatar is recommended to be in a T-Pose before rigging. This will reduce issues with the animation of your avatar. It is possible to set your character as a T-Pose using Mixamo (described in the following doc), however it may not look as accurate. ![T-Pose Example](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FyN9jKRlvE70GgWmEQJy0%2Fimage.png?alt=media\&token=cd9b7504-e286-4948-aad5-76078e9e3e63) {% hint style="danger" %} **Remember if you are submitting VRMs to the Mona Marketplace, it is important to keep *****under***** the requirements specified above otherwise your avatar will potentially slow down a space and/or fail QA.** As there can be a large amount of avatars in a space, it is necessary for avatars to have reasonable specifications. Especially if those assets are going to be used on low end devices such as standalone VR or mobile. {% endhint %} ## Notes to consider ### One Sided Materials Materials are one sided, meaning a dress would only be visible from the outside, and invisible underneath. One way around this would be to create a simplified mesh going up on the inside so the mesh is double sided. It may be possible to create a custom shader for VRMs that supports double sided materials, but this is also more expensive to compute. ### Nudity It is recommended not to have nudity on your base character mesh. This applies if your character has a dress and underwear hasn't been considered. The model will probably be seen underneath (when jumping or in high places), so this should be considered when designing your character. ### Parallel Edgeloops As your model will be animated you will need to consider how the model is created so that the key joints in the body can animate well. This will also improve Mixamo/Accurig process for improved results with fast rigging methods. Decimation will not create clean edgeloops and therefore the character will not animate well. Key areas that need clean edge loops include : * Neck (top/bottom) * Shoulders * Elbows * Wrists * Finger joints * Hips * Knees * Ankles * Toes ## Advanced VRM Functionality ### Blendshapes As Mona does not currently use blendshapes this tutorial will skip that functionality (for now), however if you want to use your avatar in platforms that do (such as VRChat) then you can learn more at the following : * [From Blender to VRM : Prepare your own VTuber Model](https://youtu.be/i2pOourRdFU) (Youtube) * [UniVRM Manual](https://vrm.dev/univrm/) # VRM Requirements As noted in the previous doc, when designing a VRM, especially if you plan to mint it with the Mona Marketplace, you will want it to work on as many platforms as possible including Mobile and/or Standalone VRM spaces. The Maximum specs below will still pass but would not be considered a good avatar for a Mobile/Standalone VR experience (depending on the space and number of VRMs in the space). That said, it should work well enough in a desktop environment. Textures play the largest part in *file size*. Material count and Polycount play the largest part in *performance*, which is very important when it comes to Standalone VR and Mobile platforms. * File type: VRM * Materials : 1 Recommended (*2 maximum*) * Textures: * One 1024 x 1024 single texture / 512 x 512 multiple textures per material *Recommended*. * One 2048 x 2048 single texture / 1024 x 1024 multiple textures per material *Maximum*. * Smaller size is recommended for more than one material. * Optional - Diffuse may include alpha for transparency. * Optional - Normal map. * Optional - Roughness/Smoothness & Metallic map. * Optional - Emissive map. | Excellent VRM Specs / All platforms | Good VRM Specs / Most platforms | Maximum VRM Specs / Desktop | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |

Less than 8Mb in total

Less than 2m in unit height

Less than 7,500 polygons (15,000 triangles)

1 Mesh

1 Material

1024 x 1024 Total textures \*

|

Less than 10Mb
Less than 2m in unit height.

Less than 10k polygons (20,000 triangles)

1-2 Meshes

1-2 Materials

1024 x 1024 Individual textures \*

|

Less than 12Mb

Less than 3m in unity height

Less than 12.5k polygons (25,000 triangles)

1-2 Meshes

1-2 materials

2048x2048 Total textures \*

| \* Note how the textures differ from Total and Individual. Total means that all your textures add up to the target textures. So 1024x1024 total textures would be 512x512 versions of Diffuse, Normal, Smoothness/Metallic, and Emissive texture. 1024x1024 total textures would be 512x512 versions of diffuse, normal, Smoothness/Metallic, and emissive texture. 1024x1024 *Individual* texture would be 1024x1024 for *each* texture type. # VRM Creation As with any asset creation pipeline there are many different approaches to it depending on your resources, time, and overall preference. This doc will go over some common pipelines that people use to create their avatars. What you choose is completely up to you depending on which tools you are comfortable with. You can even mix and match as you see fit. ### Pipeline 1 - Quickest and easiest * Create the *final* low polygon Avatar asset in your 3D Creation tool of choice such as Blender, Maya, 3D Studio MAX, etc. This would include the following : * Modelling * Unwrapping UVs * Texturing * Rig using Mixamo or Accurig * [Using Mixamo for Rigging](/create/creating-avatars/vrm-creation/using-mixamo-for-rigging) * Create VRM using UniVRM * [Importing UniVRM into Unity](/create/creating-avatars/creating-your-avatar-using-univrm/importing-univrm-into-unity) * [Creating the VRM using UniVRM](/create/creating-avatars/creating-your-avatar-using-univrm/creating-the-vrm-using-univrm) ### Pipeline 2 - Blender only * Create the *final* low polygon Avatar asset in Blender * Modelling * Unwrapping UVs * Texturing * Rig using the 'VRM for Blender' skeleton base and manual weight painting * [Adding 'VRM for Blender' into Blender](/create/creating-avatars/creating-your-avatar-using-vrm-for-blender/adding-vrm-for-blender-into-blender) * [Using 'VRM for Blender' for Rigging](/create/creating-avatars/creating-your-avatar-using-vrm-for-blender/using-vrm-for-blender-for-rigging) * Create VRM using 'VRM for Blender' * [Adding a Material](/create/creating-avatars/creating-your-avatar-using-vrm-for-blender/adding-a-material) * [Assigning VRM Details](/create/creating-avatars/creating-your-avatar-using-vrm-for-blender/assigning-vrm-details) * [Exporting the Avatar](/create/creating-avatars/creating-your-avatar-using-vrm-for-blender/exporting-the-avatar) ### Pipeline 3 - Advanced Avatars * Create a high polygon asset using your 3D Creation tool of choice such as ZBrush, Blender, Maya, 3D Studio MAX, etc. * Sculpting / Modelling * Unwrapping UVs (optional) * Texturing (optional) * Use Retopology to create the *final* low polygon Avatar asset based on the high poly asset.\ This would include the following : * Modelling via retopology * Unwrapping UVs * Baking the high poly details onto the low poly asset (using normal maps) * Texturing * Rig using Mixamo or Accurig (as a starting point) * [Using Mixamo for Rigging](/create/creating-avatars/vrm-creation/using-mixamo-for-rigging) * Add custom bones for use with Spring Bones for secondary motion in your 3D Creation tool * [Adding Custom Bones to the Rig (Optional)](/create/creating-avatars/vrm-creation/adding-custom-bones-to-the-rig-optional) * Create VRM using UniVRM in Unity * [Creating the VRM using UniVRM](/create/creating-avatars/creating-your-avatar-using-univrm/creating-the-vrm-using-univrm) * [Adding Spring Bones in UniVRM (Optional)](/create/creating-avatars/creating-your-avatar-using-univrm/adding-spring-bones-in-univrm-optional) # Using Mixamo for Rigging {% embed url="" %} Rigging the VRM in Mixamo Video Tutorial {% endembed %} There are many ways to rig your character depending on which application you are using. The quickest way is to use [Mixamo](https://www.mixamo.com/), with a very fast system to rig a character that may be less accurate. It is possible to improve the rig and skinning in your 3D application. An alternative to Mixamo, that allows for more accurate joint positions but takes a little longer to do, is [Accurig](https://actorcore.reallusion.com/auto-rig) by Reallusion. You can use any system that best suits the Unity Humanoid Avatar system. ### Rigging in Mixamo * **Go to the Mixamo websit**e [here](https://www.mixamo.com/). * **Use the Upload Character button** on the right. *If your .fbx does not work, it may work better using a .obj instead.* ![Upload Character on Mixamo](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F0JepwVnpuPupnowRWTe5%2FMixamo_UploadCharacter.gif?alt=media\&token=88eeca2b-8ad1-4edd-8f5a-2f3e45efd40a) * **Select Next** * **Position the key points on your avatar** as needed. The points will include the following : * Chin * Wrists * Elbows * Knees * Groin Note how in this model the points were on the knees and not the coat, otherwise the position would be incorrect ![Position the key locations on your character](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F84533mGZ9y2ncIikZDeG%2FMixamo_Keypoints.gif?alt=media\&token=1e436e68-c37d-4fdf-8ef9-9f7dd017c011) * You can **turn symmetry on/off as needed** at the bottom * Once done, **use the Next button** at the bottom for processing (which will take a minute or two) * Your can see the results before you **select the Next button** once again ![Results of Mixamo rigging!](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FTcDXn14ZhDkyqf5uhm8L%2FMixamo_Process.gif?alt=media\&token=3d8aef2d-09a9-48da-b5b6-d6c95f704793) * You can **test other animations in the Mixamo library**, this can give you a good idea of if you need to do any cleaning up in your 3D application ![Test Animations on your rig](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FZnWzILg8spgBH27rDQUx%2FMixamo_AnimationTest.gif?alt=media\&token=edea56d2-8f1c-455e-a015-edd69d555fd2) * If you are happy with your avatar you can **download the result at the top right Download button** * **Make sure to remove any animations** that you tested with before exporting the file as this will export the animation, not the avatar itself. * When exporting, **select .FBX for Unity.** Selecting T-Pose on Download is optional, if you plan on importing the avatar directly into Unity after this, then a T-Pose is recommended. Otherwise the original pose may be better for further refinment in your 3D asset creation tool. ![Downloading your rigged avatar](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FKgy9MbKOPppecdhg3fQt%2FMixamo_Download.gif?alt=media\&token=30ba2a1b-d941-49d3-a2ac-a870ba9992a2) Now that you have a rigged avatar you can either import this directly into Unity, or clean it up further in your 3D application of choice. # Adding Custom Bones to the Rig (Optional) {% embed url="" %} Refining your VRM Rig in Blender Video Tutorial {% endembed %} It is certainly possible to rig your avatar in your 3D Asset creation tool of choice from scratch such as Maya, Blender etc. Note that it is not possible to add unique animations to your character though, as Mona will use standard animations for all characters. It is possible to add bones *after* using Mixamo, and then continue refining the rig afterwards for use with a VRMs Spring Bones. This is completely optional however. ### Spring Bones Some of these bones may be used for avatar elements that sway or move as secondary motion such as hair, clothes, etc. This can be done using a UniVRM tool in Unity called Spring Bones. These do not need to be manually animated as the tool adds a spring effect to the bones themselves. It is also possible to have these bones have colliders that interact with your character. We will go into this feature later in the VRM tutorials, but you do need the bones for the VRM process to use as Spring Bones. Therefore they need to be made in the 3D Asset creation tool. For more information you could go to the UniVRM manual for more information [here](https://vrm.dev/en/univrm/springbone/univrm_secondary.html). ### Adding Bones Each 3D Creation tool approaches adding bones differently. This tutorial will cover Blender. There are many tutorials on YouTube or using the tool documentation to find out more using your preferred method. This tutorial uses a rig created using Mixamo. 'VRM for Blender' also has a tool that quickly creates a skeleton, or *rig*, you could paint the weights to manually. The easiest way to add bones in Blender is to go into 'Edit' Mode on the armature/rig and use duplicate and extrude on bones. Make sure that all the bones are part of the *one* rig. If they are separate rigs then it will not work. * Select the Armature/rig/skeleton * Go into Edit mode, or press tab to enter Edit mode. ![Select Armature / Rig and Edit.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FpqJ0XV6te9Rdy2Pcvj6N%2FBlender_EditArmature.gif?alt=media\&token=6a6c8b6d-ec99-41f5-b798-3707f3fa5398) * Select a bone and use 'Shift + d' to duplicate it. Use a bone under the parent you would like you new bones to be under. eg. if you want something parented to the spine, select the upper arm. \ \ After duplicating you can easy position the bone using the usual 'G' to position, 'R' to rotate, and 'S' to scale. ![Duplicate Bone on rig.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FyV6Z0eGc19F0X3eW0S4f%2FBlender_DuplicateBone.gif?alt=media\&token=8282f724-47a5-4a85-8d78-519e2f9f224e) * If you want to reparent a bone, select the bone, then shift + click the parent bone. Right click and select 'Parent > Make > Keep Offset/Connected'. ![Reparent bone if needed.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FasPxLuHLVssgYxgeP2wj%2FBlender_ReparentBone.gif?alt=media\&token=5bcbd359-b989-4ebb-b845-ca141dd3407f) * Add extra bones if needed by extruding a current bone. Press 'E' to extrude (recommended) or use the Extrude button on the left of the viewport. You can select the end of the bone, or the bone itself. ![Extrude bones as needed.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Fc5n37gX7GnLAsRfK0ktl%2FBlender_ExtrudeBone.gif?alt=media\&token=b7685c86-59ea-45e6-97a3-4b30d81d0a52) Once you have added all the bones you will need to make the model move with the new bones. For that you can use Weight Painting. ### Weight Painting {% embed url="" %} Weightpainting in Blender (Intermediate) Video Tutorial {% endembed %} Each 3D Creation tool has it's own approach to weight painting. The following tutorial continue with Blender. Weight painting tells each vertex on your model which bone it needs to move with. If it is set to 0, then the bone will not affect it. If it is set to 1, the vertex will align to the bone 100%. If a vertex has 0.5 on one bone, and 0.5 on another, both bones will affect the vertex. This tutorial will be an *extremely simplified* method to do so using Blender as there is a *lot* to understand, but this may get you started at least. There are a lot of Tutorials on Youtube or resources for your preferred tool to look into it in depth as needed. * Select your Rig first, then Shift + Click the avatar model. At the top right of the viewport, select the Weight Paint.\ \ Selecting the rig first will allow you to select the bones directly while Weight painting. ![Select the Weight Paint mode.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FKXKx13yuLqFP3aPdIWOm%2FBlender_SelectWeightPaint.gif?alt=media\&token=10640772-501c-44a1-bec1-800d37c5831b) * Make sure that Auto Normalize button is *on* under the Tool button*.* This will improve your weight painting so that weights will always equal 1 regardless of how many bones affect them, rather than having multiple bones adding to more than 1. This makes understanding the result *much* easier. ![Set Auto Normalize to On.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FZbuHtxniyGJxGF4ITu6X%2Fimage.png?alt=media\&token=4c88ca68-b1f8-4cba-bce6-c40e83ba59ea) * Use Ctrl + Click to select the bone you would like to apply some of your model to. If you have imported your model from rigging in Mixamo, many of your bones will already have weights. ![Select Bone to Weight.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FEYs5j8QRHwvzBWkeHlMV%2FBlender_SelectBonetoWeight.gif?alt=media\&token=60f6ea3c-3b3f-4c57-85cd-7ef53436ef65) * Paint the weights on the model. Note that it is quite easy to paint the wrong areas, so you can either use Undo or Adjust the weight to Zero (at the top left of the viewport) and adjust.\ \ Adjust the weight of, radius and strength of your brush to affect the vertices as needed. ![Paint Weights of the model.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FBS74gkIkqBu49KfM6Taf%2FBlender_PaintWeights.gif?alt=media\&token=e86d9354-3574-4cb5-9c60-f88a049bc04e) * It is possible to hide meshes, or parts of meshes, using the 'H' hotkey. Use the Paint Mask tool at the top with the Select box tool selected to select polygons or meshes to hide. \ \ You can use 'Ctrl + L' to select the entire mesh after selecting part of it.\ \ To Unhide, you can use 'Alt + H'.\ \ Note that hiding assets is on a mode level (eg. Weight Paint, Edit, etc.) so if you were to go to Edit mode the polygons would be visible again.\ \ In the Paint Mask mode, make sure to select the mesh you want to paint after hiding the polygons. If you have not selected the polygons, you will not be able to paint them. ![Hiding polygons for easier Weight Painting](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FiwEK1F89eLCLbUNlvmIg%2FBlender_HideMeshes.gif?alt=media\&token=45cc8f16-8251-4de7-9f2e-25c76c72f7e6) * You will need to deselect the Paint Mask mode if you want to select a different bone to weight paint. * Use other tools like Blur, Average, Smear or Gradient found on the left of the Viewport to adjust your weights as needed. * Select the Rig and models to Export your rig and avatar as an fbx. Make sure to have 'Selected Objects' selected on export. Once again, this tutorial is quite simplified in comparison to the many ways you can apply your weights. More tutorials will be added in the future. With rigging done, you can we can now take the Avatar into Unity to create the VRM! # Creating your Avatar using UniVRM There are two common methods to create a VRM, UniVRM and the 'VRM for Blender' add-on. As noted in the [VRM Creation](/create/creating-avatars/vrm-creation) doc, there are multiple ways to create your avatar, rig, and then create the VRM itself. Generally speaking, UniVRM is an easier approach that also allows you to test the spring bones (if you decide to add them) in Unity directly. It also seems easier to add materials using UniVRM. The only catch is you have to use it within Unity. The following tutorials assume that you already have an optimised character ready to rig and create the VRM with. # Importing UniVRM into Unity {% embed url="" %} Importing UniVRM into Unity Video Tutorial {% endembed %} If you haven't already, UniVRM will need to be installed in Unity so we can use that to create the VRM. If you have already installed it, you can skip this page. * **Download the** [**UniVRM**](https://github.com/vrm-c/UniVRM/releases) **package** [here](https://github.com/vrm-c/UniVRM/releases) from the link that has .unitypackage at the end. Make sure to get the latest version however. {% hint style="warning" %} Make sure to get the ***UniVRM*** unitypackage and ***not*** the VRM unitypackage as these are different assets. {% endhint %}

Get the UniVRM unitypackage

* **Open a new Unity Project.** Note this does ***not*** require the Mona template as we a creating the VRM only. ![New Project Settings](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FIe7DLvaFGdnPfOl4QiKn%2Fimage.png?alt=media\&token=5decd8ab-fc88-4c94-828c-15081977ebf5) * Import the UniVRM asset using Assets / Import Package / Custom Package... ![Import UniVRM Package](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FtW7N3aQlXvxJk9mndvaq%2FUnity_ImportPackage.gif?alt=media\&token=cc800a90-a048-432c-b664-7750617664f6) * Make sure to set the project to Linear Space (if the default is Gamma) on the window that comes up ![Set Project to Linear using the window (on package import)](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FjTmUmPGoiJPeHdQP4juA%2FUnity_SetLinear.gif?alt=media\&token=3d3be05a-461c-4252-b5f9-dde1ab6e619b) * Once your package has been imported, you should have two new menus at the top : \ VRM0 and UniGLTF. ![VRM Menus that are now available](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FMpVmtjTutnUoXYhjsw1c%2FUnity_ImportedPackage.gif?alt=media\&token=9a838e41-8300-4ea0-a28f-e5f92cab0b6a) # Creating the VRM using UniVRM {% embed url="" %} Exporting a VRM with UniVRM in Unity Video Tutorial {% endembed %} * If you haven't already, **create a new Unity Project and add the UniVRM assets** (shown in the previous document), ![Create a new 3D project (Not URP or HDRP)](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FIe7DLvaFGdnPfOl4QiKn%2Fimage.png?alt=media\&token=5decd8ab-fc88-4c94-828c-15081977ebf5) * **Add your assets to the project** by copying or dragging your .fbx and any textures you may need into your project. Note that this asset uses the Mixamo rigged character, exported as '.fbx for Unity'. * **Create the required Materials** ![Import and create the .Fbx, textures, and Material](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FtVmjuTSKbLtZfu36NMqj%2Fimage.png?alt=media\&token=0e62ee56-ecbb-417c-83ab-cccdd5cd40ba) {% hint style="info" %} Note that Shader support on VRMs is limited. Transparency is only supported on Unlit Shaders, however Standard shader (without transparency) is supported. For more information you can go [here](https://vrm.dev/en/univrm/shaders/). {% endhint %} * Select the imported fbx, go to the Materials tab in the Inspector and **assign your materials** ![Assign your materials to the model](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FBGNn0fG3WAtkyVpx2v1w%2Fimage.png?alt=media\&token=3dcbd395-7d40-40d6-b537-4827fd1c9f14) * Go to the 'Rig' tab in the Inspector, and **set 'Animation Type' to 'Humanoid**, before selecting 'Apply' ![Set your avatar rig to Humanoid](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FEyn1kKiQ5O6Tr07TwRAv%2FUnity_SetHumanoid.gif?alt=media\&token=9a2cae00-845c-41cd-9830-717902b718e9) * We can then **make sure that the rig is correct** by selecting the 'Configure' button. In this case all of the bones are green (as I used the Mixamo '.fbx for Unity' export option), however I am missing certain bones that may be useful such as Eyes (which Mona uses for natural looking around) and a jaw. These could be added in my 3D Application (such as Blender, Maya etc.) between the Mixamo and Unity stage.\ \ It is possible to drag and drop, or use the circle at the end of the parameter, to select different bones into the required slots if you have any issues. ![Check the Humanoid rig](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FvwVfMPHI8G1EA66xnkBS%2FUnity_CheckHumanoid.gif?alt=media\&token=6425d013-a366-458d-9df6-9268d9b9ac59) * Once done, **drag your model into the scene.** I used the 'F' key to focus on the asset. ![Add model to scene](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FYV747nZjtbb8tXi2XABs%2FUnity_AddFBX.gif?alt=media\&token=396988c6-5cd1-4d5b-af27-964887806062) * Use the 'VRM0 > Export to VRM 0.\*' menu item to export your asset. Select your asset by either drag/drop the asset or using the circle in the parameter at the top.\ \ You can change the Language from Japanese to English at the top next to 'lang'. ![Export VRM using the VRM0 / Export to VRM 0.\*](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FfCkC8sG0MKmrGmYhTNT2%2FUnity_ExportVRM.gif?alt=media\&token=c5f281bd-e85c-4cf3-8780-e1531a8d3c3b) * Fill in all the information as needed. I also imported a profile picture into the project to use as the thumbnail. \ \ Note that you can set permissions here such as who can use the avatar, if it can be used in violent or sexual acts, if it can be used for commercial purposes, and adding a license type. ![Fill in as much of the information as possible](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FafGIglQHOfvTDoRqmlpA%2Fimage.png?alt=media\&token=c8e8f8ed-4020-40ea-b9f6-7429a66dd01d) * As this mesh is not using any blendshapes or more complex elements, the Mesh, Blendshape, and Export Settings tabs are not needed. * You may want to use the 'Make T-Pose' button if you feel it helps create a more accurate T-Pose. If it does not suit your needs you can Undo the action. This depends on how you have rigged your character etc. * Once complete, use the 'Export' Button at the bottom right and save to your desired destination. ![Export your VRM Avatar](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F4FejuHRt4km4zw3VbqlF%2Fimage.png?alt=media\&token=a2d564bb-c827-43a5-b8a1-c7b6950f3ad6) * Once saved you can upload your VRM to a public URL that Mona can use! # Adding Spring Bones in UniVRM (Optional) {% embed url="" %} Adding Spring Bones and Collider Groups Video Tutorial {% endembed %} As noted it is possible to add certain elements to your VRM to improve the overall result such as adding secondary animation automatically. If you are using the VRM in other platforms other aspects such as blend shapes for lip sync, Look at functionality, and blinking are some other examples you can add. For *all* the added features I recommend looking into the VRM documentation [here](https://vrm.dev/en/univrm/index.html) or check out VRM tutorials on YouTube such as [this one](https://www.youtube.com/watch?v=i2pOourRdFU\&list=PLK9fc4OdHNpA9KTDjcTd8Ry0AQqvSa8jQ\&index=2) by Priichu. ### Importing the VRM To further develop the VRM we need to *import* the VRM that we exported in the last tutorial. By exporting and importing the asset we can easily set up all the elements needed for the VRM Avatar. Depending on the use of the avatar, some of the elements are optional. Mona does not support the LookAt functionality or use blend shapes *at the moment*, but this may change in the future. That said, other platforms that you may want to use the Avatar on do (such as VRChat etc.) so it is up to you in regards to how far you take the functionality of the Avatar. As you can see below, there are a lot of scripts added to the avatar in order for it to work as a VRM Avatar. So exporting and importing the asset saves a bit of time. As noted, we won't need some of these for now this is just an example. ![Some of the elements added to create the VRM Avatar.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FIodxKAUY8XqxDomQYUFX%2Fimage.png?alt=media\&token=9396bfa2-601a-4944-810a-a3c09b613251) So to get your basic VRM Avatar made so that we can modify it, do the following : * **Use Export to VRM 0.x to export your VRM Asset** as per previous tutorial. * In the same menu, **use Import from VRM 0.x to import your premade VRM**, and then save the prefab to the desired location in your project. It is recommended to place it in a separate folder, so you can easily track which is your original files and which are the final VRM Avatar files. * You can then **place the new VRM Prefab in your scene.** ### Spring Bones As noted in a previous doc, Spring Bones add a secondary motion to certain bones in your avatar. This could be used for things like hair, clothes, or anything else you can think of. * Expand the VRM asset in the Hierarchy so you can see all the children, and **select the 'secondary' asset**. This asset has the VRM Spring Bones script. ![Select the Secondary asset to see the Spring Bones Script](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F2olACffK0AfZjZHxSREr%2Fimage.png?alt=media\&token=31636f10-64c2-4748-ac2e-b4cddf07f583) * Depending on how many *sets* of bones you want to have secondary motion is how many Root Bones we have to add. So if you have a three bone chain, you need to add the root bone, or start bone, in this list. **Use the '+' button to add the amount of bones/bone chains you may have**. Use the '-' button if you add too many. ![Add Spring Bone slots](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FqZZNGDyyKJCswk84dJAO%2FAddSpringBoneSlots.gif?alt=media\&token=8be35984-d5c4-4ffa-958e-32066f194055) * **Drag/Drop the root bones of your VRM asset to use as secondary motion from the Hierarchy panel.** You could use the circle at the right of the parameter as well if you want. Note that the naming of these bones could be a lot better. This would be done in the 3D Creation tool, Blender in this case. ![Add Bone group root to Spring bone script](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FtgwVaykK5gEzjRe32kIQ%2FUnity_ApplySpringBonesasSecondary.gif?alt=media\&token=20ae24ed-62a0-4780-9538-79dffc0c8c5b) * You can test the effect if you press Play at the top, go to the Scene window (as it will open the 'Game' viewport automatically), and move the parent object. ![Test the Spring Bones in Unity](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FNe6Z7mK5pVC5w7Ce4K2L%2FUnity_TestSpringBones.gif?alt=media\&token=f02e3153-66fc-4cb4-a975-ec76ef443fac) * It is possible to export your VRM again and use it in a space. You can of course play with some of the features of the Spring bone such as Stiffness, Gravity, Gravity Direction, Drag Force, and Centre as needed. You may want your spring bones to interact with other elements of your character such as clothes not going into the character etc. For that you will need to create Collider Groups. ### Collider Groups A Collider group is a type of collider on a bone that the Spring Bones will not pass through. That said each collider group is quite CPU intensive, so it is recommended to keep these as low as possible. One or two would be a good recommendation. * Select the bone you would like to put a collider on. Add the 'VRM Spring Bone Collider Group' script. Adjust the offset and Radius as needed.\ \ Usually this may be a head, spine or pelvis. As noted, having a collider on each body part would be quite intensive and is not recommended.\ \ In this Avatar's case, I don't want the books or the scarf to go through the main body, and this would require two *lower* colliders. One around the stomach and one around the pelvis. ![Apply the Collider Group Script](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FzAt6uYbRNXcsYZbrYKAY%2FUnity_SetColliderGroup.gif?alt=media\&token=b047b0c3-ea8c-4d8b-9a40-8cba89d07214) * Once the collider group scripts have been applied, add the Collider Group bones at the bottom of the Spring Bone script. ![Add Collider Groups to Spring bone script.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Fm6fkjTKG0JY74Jr2Vk0M%2FUnity_AddColliderGrouptoSpringBone.gif?alt=media\&token=e5c79790-08b5-4d57-b7fe-834b80c472b2) * Once again you can test the Spring Bones with Collider groups by selecting the Avatar, pressing 'Play', and test in the Scene viewport. ![Test the Collider Groups](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Fd5DNq7kdrTourkOfKWsx%2FUnity_TestColliderGroups.gif?alt=media\&token=2d9b95a1-0162-4a83-b9ff-fac60667bdf0) * Sometimes you may find that the Collider Group bone may be too small to affect the spring bones, so refine as needed for the best results. And that finishes your VRM! You can then export it once again and upload it to be used in Mona. # Creating your Avatar using 'VRM for Blender' It is possible to create VRMs using different methods. UniVRM and 'VRM for Blender' are two commonly used tools to create the VRM itself. 'VRM for Blender' is an add-on for Blender that allows you to create a VRM without needing to install Unity at all. One disadvantage to this however is that if you are planning on using Spring Bones, you will not be able to see the results of this without uploading it to a VRM platform. Materials are also a more difficult using VRM for Blender. UniVRM can easily test the Spring Bones as well as add materials easily within Unity. #### Rigging using the 'VRM for Blender' Skeleton 'VRM for Blender' offers a skeleton to use for your asset rather than making your own. You would need to manually rig, or paint the weights, of the mesh vertices to the skeleton bones yourself. #### Rigging using an automatic tool such as Mixamo or Accurig. [Mixamo](https://www.mixamo.com/) or [Accurig](https://actorcore.reallusion.com/auto-rig) allows you to save a lot of time on rigging your character, at least as a starting point. That said, you will need to make sure that 'VRM for Blender' understands the rig bone setup that Mixamo or Accurig uses before exporting. This can be done with the Bone Assignment tools in 'VRM for Blender' covered quickly in [Exporting the Avatar](/create/creating-avatars/creating-your-avatar-using-vrm-for-blender/exporting-the-avatar). # Adding 'VRM for Blender' into Blender Before using 'VRM for Blender' you will need to add it as an Add-On to Blender itself. * Download [VRM for Blender](https://vrm-addon-for-blender.info/en/) from the VRM for Blender [website](https://vrm-addon-for-blender.info/en/). * Open Blender, and go to Edit menu / Preferences / Add Ons section. There you can use the 'Install' button at the top Right to install the Vrm for Blender Add on.\ \ Once installed, make sure that it is turned on using the Search field to find 'VRM Import / Export'. This is the VRM for Blender addon. You can confirm it has been installed by a new tab on the main viewport labelled 'VRM'. * ```

Install the VRM for Blender Addon

``` * Once done you are ready to start creating your VRM Avatar in Blender. # Using 'VRM for Blender' for Rigging If you have a complex character or don't want to use the autorig tools like Mixamo or Accurig, 'VRM for Blender' has a rig you can use to speed up the skeleton creation process for use to export the VRM. ## Adding the Rig * Select the 'VRM' tab at the top right of the viewport. If it is not visible, press 'N' or use the arrow at the top right.

Open the 'VRM' tab

* Select the 'Create VRM Model' at the top of the 'VRM' tab. It may take a moment to display, you do not need to click or drag in the viewport.

Create VRM Model

* Scale the rig to your model to get a good starting point using the Scale tool or 'S'. One approach is to place the pelvic bone within the pelvis region of your avatar.

Scale rig to mesh

* Go to Edit mode on the rig and adjust the bones to their rightful position using the Position tool or 'G'. Use the 'Use X Mirror' in the Tool tab at the top right to mirror each side.

Edit Rig to fit the Mesh

{% hint style="warning" %} If you use 'Symmetrize' to copy bone positions to the opposite side of the rig, the VRM Bone labeling breaks. {% endhint %} * Use the 'Snap' tool set to 'Volume' at the top of the viewport to help position joints in the centre of a mesh. This is especially useful for the fingers.

Use the Snap to Volume tool

* You may want to confirm the orientation of your bones are correct, otherwise it may not animate correctly. To display the Axes, go to the 'Object Data Properties' with the rig selected and turn on 'Axes' (Red box below).\ You can then use the 'Roll' tool in the 'Item' tab to adjust as you need to (Green Box below).

Display Axes to make sure bone orientation is correct

## Rigging the Avatar * Once you rig is complete you can apply it by parenting the mesh to the rig. * Select the mesh first * Hold shift and select the rig * Right mouse click and select 'Parent > Armature Deform > With Automatic Weights.

Parent Mesh to Rig

* To test your results, go to Pose mode at the top left of the viewport with the rig selected and rotate the bones.

Test using Pose Mode

* You can adjust the rig itself and/or update the weight paints as needed. This is covered in [Adding Custom Bones to the Rig (Optional)](/create/creating-avatars/vrm-creation/adding-custom-bones-to-the-rig-optional) # Adding a Material {% hint style="info" %} Setting up materials in VRM for Blender may be more difficult to get the results you want in comparison to UniVRM. If you prefer using Blender, you could apply materials in UniVRM and then import that into VRM to continue in Blender. {% endhint %} If you are wanting to use the MToon shader for your avatar you can do so with the following techniques. * Make sure that your display mode is on 'Material Preview' or 'Rendered' in order to see the result.

Make sure the Shading is on the correct mode to display the result.

* Go to the Shading tab at the top and make sure your model is selected. Also make sure that your model has a material applied.

Go to the Shading Tab

* Add the 'MToon\_unversioned' shader into the bottom node graph. You can use the Search tool to find it easily.

Add the MToon_unversioned node to the node graph

* Reconnect the nodes so that the MToon node replaces the Principled BDSF node, and add your images/settings as needed. * You can drag and drop textures from your explorer into the graph instead of using the Add / Texture / Image Texture > Open texture approach. * Make sure to add a light into the scene to see the results more clearly

Add images to the shader

# Assigning VRM Details VRM export in both UniVRM and VRM for blender allow the creator to assign details to the meta data, or information within the digital asset, that platforms may display so it's good to get these added. Recommended settings are in bold, but set as you like. * For VRM for Blender, expand the 'VRM 0.x Meta' panel under the VRM tab on the right side and fill in the details as needed. * Profile picture - see below * Title - Name of your VRM avatar * Version - 1.0 is common * Author - your prefered tag / name * Contact Information - any info such as twitter, email or website * Reference - *optionally* add any reference that you used * Allowed User - Only Author / **Explicitly Licensed Person** / Everyone * Violent Usage - Allowed / Disallowed * Sexual Usage - Allowed / Disallowed * Commercial Usage - Allowed / **Disallowed** * Other Permissions URL - *optional* * License - ***Redistribution Prohibited*** / CC0 / CC BY / CC BY NC / etc.

Add VRM Details as needed

## Setting the Thumbnail To set the thumbnail you will need to import an image to apply. * Go to the UV Editing tab at the top * Select the 'Open' icon at the top of the left viewport * Select the image you would like to use. 2048x2048 is recommended. * Once added, you can go back to the Thumbnail parameter in the VRM0.x Meta panel and select your image.

Adding a thumbnail to the details

# Exporting the Avatar To correctly export your VRM the 'VRM for Blender' add on needs to make sure that all the bones are correctly assigned. ## Assigning VRM Bones * Expand the VRM 0.x Humanoid panel in the 'VRM' tab. You can adjust the width of the panel at the left. You can scroll down using the scroll button. * Make sure that all the Bone assignments are correct. If you see any red there may be an issue, you can adjust the bone assignments manually by clicking on the slot for each bone. This may be needed if you have created your own rig, or used Mixamo/Accurig to rig your character.

Check that all the bones are assigned correctly.

* Select the model and armature/rig and go to File / Export / VRM and save it where you like. It is recommended to select the assets you want to export and use the 'Export Only Selections' to make sure that other assets like cameras or lights aren't exported.

Export your VRM

* For more information on uploading the VRM to test it, go to [Uploading your VRM](/create/creating-avatars/uploading-your-vrm),\ or submitting to the Mona Marketplace at [Submitting your VRM to the Mona Marketplace](/create/creating-avatars/submitting-your-vrm-to-the-mona-marketplace) # Uploading your VRM VRM avatar files must be stored on a public host. We recommend using [GitHub](https://github.com/) or [Web3 Storage](https://web3.storage/) as these are the easiest to set up. [GitHub](https://github.com/) is like a standard web host, whereas [Web3 Storage](https://web3.storage/) uses the blockchain. GitHub is free, whereas Web3.storage is moving to a paid service. Note: It has been found that using a '#' in your VRM filename may not work. Be sure to use simple characters in filenames to reduce any issues. {% hint style="warning" %} Other VRM hosting methods may or may not work. This document will be updated with additional storage options in the future. Currently tested (and working) hosts include : * [GitHub](https://github.com/) * [Web3 Storage](https://web3.storage/) * [AWS](https://aws.amazon.com/) (although a little complicated to set up) {% endhint %} ## Hosting on Web3 Storage {% embed url="" %} Uploading your VRM Asset to Web3 Storage {% endembed %} * You can create an account easily on [Web3 Storage](https://web3.storage/) * If not already, go to the Manage Files section ![Go to Manage Files](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FlQr1r1gIGKfB4ci0Bvw5%2FWeb3_ManageFiles.gif?alt=media\&token=b2149dd5-8eb3-4567-b0a8-fdca3b20e7c4) * Add files to your folder using either of the links to do so. Note the information under the panel. ![Add files to the folder.](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Fz5XqLEEkpvxtgT09TDEr%2FWeb3_AddFiles.gif?alt=media\&token=9cd35979-0e07-4c97-867e-367395466b0a) * Grab the VRM link to use in Mona by clicking on the IPFS link, and then right-click on the file to use the 'Copy link' to the VRM. ![Copy the VRM Link for use in Mona](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FrtEWaGJdZbfjrzVlA9CM%2FWeb3_Storage_load.gif?alt=media\&token=15efd476-7265-4e7f-b93a-c443cbcc7d18) ## Hosting on GitHub {% embed url="" %} Uploading your VRM Asset to Github {% endembed %} Once you have acquired or made your VRM asset, you can do the following : * Sign up to GitHub, if you haven't already : [https://www.github.com](https://github.com/) * Sign up on the main page with your username, email, and password. * Prove you are a human (bot check) * Go through a survey * Verify your account with your email address. * Once logged in, click on the Create Repository at the top left to create a place for your VRM files ![Create your Repository](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Fc9drIE65U48EFxwdIJoX%2Fimage.png?alt=media\&token=0581e86e-38c3-4419-aad4-9e6a1b73072c) * Input the information as you see fit including name, description (optional), and license. **Make sure to make it a public repository.** If this is not set, your VRM will not work.\ \ It is possible to set a repository to public after you have created the folder in the 'Danger Zone' section in the Repository settings at the bottom. ![Setup your Repository](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2F1Bq1GNBXOC2GkkIrZCI7%2Fimage.png?alt=media\&token=99eb384e-5076-4edc-a1ed-63be3af73497) * **Select the 'Add File' button at the top, then 'Upload Files'.** ![Add your VRM file](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2Fuc3klDl4EFDspW07hDcM%2Fimage.png?alt=media\&token=3bb5e844-4677-4467-856e-4e646826b4cc) * **Upload your files** by drag/dropping or selecting your file/s. {% hint style="warning" %} Certain naming conventions are not supported on GitHub files in Mona. It is best to use standard characters only such as letters and numbers to reduce issues. Special characters and spaces have been known to make files not work. {% endhint %} * Once uploaded, **select Commit Changes** at the bottom {% embed url="" %} Upload your VRMs to the Repository {% endembed %} {% hint style="warning" %} The default github permalink will *not* work within Mona. is an example link that will not work. **You will need to change the URL of your VRM to what Mona can use.** The easiest approach is to use the following link to get the public link : {% endhint %} * A manual approach is converting your GitHub link to the following example: \ \ `https://raw.githubusercontent.com/GithubUserName/RepoName/branch(main or master)/file.vrm`\ \ So in my case, the VRM link would be : \ \ `https://raw.githubusercontent.com/discmage/VRMs/main/Human_1.vrm`\ \ To find if your link requires main or master you can click on the file and see what the top right of the asset has defined. This is both visible on the Repository and the file. ![Find if your link requires 'main' or 'master'](https://3438761929-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgZbQzoznBJC_ld633%2Fuploads%2FheEXzje44oOrBtlpOyur%2Fimage.png?alt=media\&token=cfbda206-402f-4292-b22e-ef3dc613c1b1) * Once you have your address you can use that in the VRM Importer using the 'Avatar' button at the bottom or the '4' hotkey in a Mona Space. # Using Avatars in WebAR How to view your avatar in the real world with WebAR... It is possible to view and capture your avatar in the real world using WebAR on a mobile phone. {% embed url="" %} Using Avatars in Web AR {% endembed %} ### Uploading your Avatar * Upload your avatar to your Mona wallet using the Create > Avatar option in your drafts. * Add in your Avatar details such as Author, title, and description.

Create a new Avatar on your Wallet...

* Drag and drop (or select file of) your .vrm in the Mintable file category.

Upload your avatar to the Mintable File section...

### Using the WebAR tool * Go to the following address on a desktop browser to get the QR Code or just type in the address (with the correct avatar title) using a browser on your phone or tablet : /ar {% hint style="warning" %} * Make sure to use the title of your avatar in the address, not the filename of the .vrm. * Change any spaces in your avatar name to a dash '-' when typing in the address.\ ' Thornbug/ar' should be\ '; * Special characters are not recommended. {% endhint %}

Go to the link on desktop to get the QR Code...

* You may need to allow the Mona WebAR Tool to access your camera. * Once the page is loaded, find where you would like to place the Avatar in the world and select 'Tap to Place' to load your avatar. Once loaded, you can control your avatar and capture images. * Select anywhere apart from the capture button at the bottom and drag to move the avatar. * Click on the Capture button at the bottom to take an image, or hold the Capture button to take a clip. * Select Share or Download to save the content. # Submitting your VRM to the Mona Marketplace {% hint style="info" %} After submitting your files for VRMs, make sure to fill out the following submission form. We will either notify you if you avatar has Failed or Passed QA : {% endhint %} With the Mona VRM Marketplace it is possible to sell VRMs to users with the following royalty system : Primary Sale : 85% Creator + 15% Mona Secondary Sale : 85% Seller + 12% Creator + 3% Mona To submit your VRM you will need the following information : * Artist Name * Title * Description * Properties / Genre * Preview Image (2000x2000) * Mintable File (.vrm) First you submit the initial details in your Wallet (Artist, Title, Description, and Properties)

Enter your Avatar details

After that you can upload the following : * Preview Image - For best results use the following guidelines : * 2000x2000 resolution. * Make sure that the Preview image uses a white background. * The Avatar should be centered. * Avatar should be a full body shot. * Should *not* contain logos or branding not on the VRM itself. * Should *not c*ontain any assets, colors, textures, or 3D objects that are not in the VRM itself. * Should *not* be posed in a way that is vulgar, inappropriate, or offensive against any group or individual or is otherwise objectionable.

Example image

* Mintable file is the vrm file you are submitting.

Submission assets

## QA Process Your submission will go through a QA process to make sure that it is ready for use in the metaverse. The order in which the avatars are approved is at the discretion of the Mona team. **If it is your first time submitting a VRM, you will need to submit your wallet address on the QA Submission form in order to be put on the Allow list for minting purposes.** Make sure that your VRM is within the following requirements otherwise it may fail QA as there can be a large number of Avatars in a space. {% hint style="warning" %} The Maximum specs below will still pass QA, but would not be considered a good avatar for a Mobile/Standalone VR experience (depending on the space and number of VRMs in the space). {% endhint %}
Excellent VRM SpecsGood VRM SpecsMaximum VRM Specs
Less than 8Mb in totalLess than 10MbLess than 12Mb
Less than 2m in unit heightLess than 2m in unit height.Less than 2m in unity height
Less than 7,500 polygons (15,000 triangles)Less than 10k polygons (20,000 triangles)less than 12.5k polygons (25,000 triangles)
1 Meshes1 Meshes1-2 Meshes
1 material 1 material1-2 materials
1024 x 1024 total textures *1024 x 1024 individual textures *2048x2048 total textures *
\*Note how the textures differ from *Total* and *Individual*. Total means that all your textures *add up to* the target textures. So instead of having a diffuse, normal, smoothness/Metallic, and emissive texture at 1024x1024, they would actually be 512x512 each to add up to a 1024x1024. Individual would be 1024x1024 for each texture type. Textures play the largest part in file size and affect how performant a VRM is in a space, which is very important when it comes to Standalone VR and Mobile platforms. Once passed the QA Process, and been added to the Allow list, you can mint your VRM and sell it! # Mint Your Avatar Information about minting avatars on the Mona Marketplace. Minting allows you to sell your avatar to a collector, as well as be visible on the Mona website. * Once all the files have been submitted accurately, your avatar will then enter our QA process. If it is your first time submitting a VRM, you will need to submit your wallet address on the QA Submission form in order to be put on the Allow list for minting purposes. Make sure to check out [Submitting your VRM to the Mona Marketplace](/create/creating-avatars/submitting-your-vrm-to-the-mona-marketplace) if you haven't already. * As soon as your avatar passes QA, you will be notified, and the Mint button on your Avatar Draft page will be enabled. You will need either ETH or Matic in your wallet for the gas fees. * Click the Mint button to begin the process. Please note Minting does not set the price of your avatar. You will still need to list your avatar’s price once it has been approved to mint. * You will have a choice between minting on either Ethereum or Polygon * There are several things to consider when choosing between Ethereum and Polygon, but one of the main factors is the gas fees. ### Gas Fees Over the process of minting on the Mona Marketplace and selling your avatar there will be a number of gas fees, or the fees related to the amount of electricity the transactions require. You have the *option* to list your avatar, and this will include further gas fees. Some of these fees will be one time only per wallet. This will allow you to set a price for your avatar which a collector can purchase. If the avatar is unlisted, a collector can make an offer on the avatar but no price will be set.

Unlisted VS Listed Spaces

The fees for minting include the following : * Minting gas fee * Listing gas fee (optional : if you want to set the price as above) The *first time* you decide to *list* your avatar would require the following : * Mona Permissions gas fee (one time per asset type per wallet) * Marketplace Permissions gas fee (one time per wallet) {% hint style="info" %} Asset types would include Spaces or Avatars. The first time you want to list an avatar you would pay this fee, but all following avatars would not. {% endhint %} Permissions fees are about 1/6th the amount of the minting fee. The amount that each Gas fee costs depends on the Blockchain you use and can vary *significantly* over time. Ethereum and Polygon MATIC are currently supported and are compared below. As much as MATIC has smaller gas fees, if you don’t have MATIC it is possible to have a bridging fee which is based on an Ethereum gas fee. There are many web resources that display the current Gas prices for Ethereum such as [UseWeb3.xyz](https://www.useweb3.xyz/gas). ### Commission fees When selling directly on the Mona Marketplace, Creators receive 4.5% more on Secondary Sales versus selling on a 3rd party marketplace like OpenSea. Primary Sale : 85% Creator + 15% Mona Secondary Sale : 85% Seller + 12% Creator + 3% Mona ### Ethereum * [Ethereum](https://ethereum.org/en/) is where most NFTs (including high-end art and collectibles) are currently minted. Ethereum is more popular than Polygon, and NFTs minted on Ethereum are ***easier to sell and re-sell***. With that popularity comes more network traffic and higher gas prices. * Ethereum has higher gas fees. This means that in order to mint your space on Ethereum, you will be prompted to pay a fee in order to do so. The amount varies greatly, from $25-30 (Feb 2022) up to $300-$500 (October 2021) per transaction. Unfortunately, this is the norm for minting on Ethereum, for any platform right now. The gas fees fluctuate wildly throughout the day, so if you're seeing high fees now, you can check back an hour later or even in another few minutes and you might see them a bit lower (or higher). * While the gas fees are high, the financial upside for an artist minting on Ethereum is ***significantly higher*** than minting on Polygon. ### Polygon * [Polygon](https://polygon.technology/) (previously known as Matic) is a proof-of-stake chain, which is built on top of Ethereum. While not as popular as Ethereum, Polygon has gained a lot of traction in the community. NFT artists seeking a cheaper, more environmentally friendly solution have been turning to Polygon to mint their work. * Polygon has ***significatly lower gas fees*** when compared to minting directly on Ethereum. Fees are typically less than $1. * [Follow this guide](https://docs.polygon.technology/docs/develop/metamask/config-polygon-on-metamask/) to add the Matic network to your MetaMask Wallet. * While Polygon is cheaper for those who are less familiar with crypto, keep in mind that saving money upfront on minting fees may not balance out with the possible resellability of a space. So, consider all the factors when choosing which chain to mint on. ### What about other chains? * Currently, we only support minting on Ethereum and Polygon. We are working on supporting other chains, especially those that are *carbon negative*, such as Algorand. If you'd like to recommend a certain chain, please send us a message in our [Discord](https://discord.gg/Ad7hBzCqwV). # Troubleshooting FAQs for all issues relating to Avatar Creation. ### My avatars arms/legs move the wrong way Animation of avatars is usually based on rotation, and if the bone direction on your avatar rig is incorrect they will animate the wrong way. Most applications allow you to rotate the bones so the normals are facing the right way. In blender you can adjust the 'Roll' of a bone easily in edit mode.

Adjusting the bone angle using Roll in Blender.

### My Avatar polycount is too high Polycount is an important element for performance of a space. So getting the polycount down is a good skill to have. If you have a high polygon character you could use retopology to 'trace' the object with a low polygon object, and bake that high polygon information onto the low polygon using textures (like normal maps). ### My avatar material count is too high Material count is an important element for performance of a space, as each material is a drawcall. So reducing materials as much as possible is important. There are some plugins for 3D Creation tools that allow you to compress materials into one material. You could also bake multiple materials into one using blender, substance painter etc. ### My Avatar texture filesize is too large These should be resized in the image editing application before exporting your VRM from Blender, Unity etc. We recommend having no more than 1024x1024 textures, less if possible. ### My Avatar doesn't have any metadata/details Depending on how you create your VRM, there are methods to create the Metadata on your VRM. UniVRM forces you to add this information when exporting it. VRM for Blender does not. However this can be added in the VRM tab.

VRM for Blender Meta tab

# Resources Further resources to help you make the best space possible. The Resources section goes over a number of resources that are useful to Creators. ## Mona Playground The Mona Playground is a Mona Space that showcases the features of Mona and how to get the best results from your creations. It includes simple examples of colliders and lightmapping, through to a lot of the Mona Library assets in world to see how they work.

The Mona Playground

This space is available to download so you can pull it apart and learn to help take your own space to the next level. For more information, check out the [MONA Playground](/create/resources/mona-playground) doc! ## Mona Tutorials The Mona Tutorials section is a selection of tutorials that cover specific examples or spaces, rather than the more general tutorials found in the previous categories. One example is the [Retrowave Modules](/create/resources/mona-tutorials/retrowave-modules) series, that goes over making assets for an interactive obstacle course! ## Asset Resources The Asset Resources category has a ton of linked resources that can help populate your spaces from 3D Assets, textures, shaders, audio, external tutorials, among others. ## Mona Library The Mona Library is a fantastic resource for people to utilise when creating spaces within Unity. It has a bunch of resources that can help understand using Reactor, through to previous challenge assets to add to your space submitted by Creators. # MONA Claim Asset Requirements The Maximum specs below will still pass but would not be considered a good asset for a Mobile/Standalone VR experience (depending on the space and number of VRMs in the space). That said, it should work well enough in a desktop environment. Texture size plays the largest part in *file size*. Material count and Polycount play the largest part in *performance*, which is very important when it comes to WebGL, Standalone VR and Mobile platforms. For more information on Polycount, materials, and textures go to [Asset Requirements](/create/creating-assets/asset-requirements). ## 3D Assets * File type: GLB * Materials : 1 Recommended (*2 maximum*) * Textures: * One 512 x 512 single texture / 256 x 256 multiple textures per material *Recommended*. * One 1024 x 1024 single texture / 512x 512 multiple textures per material *maximum*. * Smaller size is recommended for more than one material. * Optional - Alpha for transparency (inc. in Diffuse texture). * Optional - Normal map. * Optional - Roughness (G) / Metallic (B) map. * Optional - Emissive map. * All material settings should be set correctly in the Asset Creation program.\ For more information on materials in Blender -[ glTF 2.0 - Blender 4.1 Manual](https://docs.blender.org/manual/en/latest/addons/import_export/scene_gltf2.html) * Positioning and Scale: * Object should be positioned at the origin of the scene * Object should be a reasonable scale (not extremely large) so it looks good in AR. * Additional file types: * Optional - USDZ (Enables QuickLook on Mobile Safari and Vision Pro) | Excellent GLB Specs / All platforms | Good GLB Specs / Most platforms | Maximum GLB Specs / Desktop | | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | |

Less than 5Mb in total

Less than 750 polygons (1,500 triangles)

1 Mesh

1 Material

512 x 512 Total textures \*

|

Less than 8Mb

Less than 1,750 polygons (3,500 triangles)

1-2 Meshes

1-2 Materials

512 x 512 Individual textures \*

|

Less than 10Mb

Less than 5,000 polygons (10,000 triangles)

1-4 Meshes

1-2 Materials

1024x1024 Total textures \*

| \* Note how the textures differ from Total and Individual. Total means that all your textures add up to the target textures. 512x512 total textures would be 256x256 versions of diffuse, normal, Smoothness/Metallic, and emissive texture. 512x512 Individual texture would be 512x512 for *each* texture type. ## Asset Image PNG Image to use for Promotion + Claim. * 2000x2000 resolution * Asset on transparent background (or white if need be) * No branding, tags or labels in background or foreground * Entire asset within the image (no closeups etc).

Image Examples...

--- [Next Page](/llms-full.txt/1)