Metaverse / WebGL Limitations
Considerations to have when making a space using WebGL.
Last updated
Was this helpful?
Considerations to have when making a space using WebGL.
Last updated
Was this helpful?
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.
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.
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.
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.
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.
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.
