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 to learn from our amazing community and have a look at our YouTube 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! We also have a ton of workshops and tutorials on the Mona YouTube 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.
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 Trim Sheets.
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.
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.
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.
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 Probesto 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).
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!
Last updated
