Polygonal Mind
  • Home
  • Metaverse Builder
  • CryptoAvatars
  • MegaCube
  • Blog
  • Decentraland
  • Projects
  • Assets

Blog

How to build modular Props from a few pieces. From modelling to Game Engine.

10/21/2020

0 Comments

 
The Mission
Resources

Understand how to build a modular prop system from a few pieces. Using these pieces to build multiple props.
  • Maya LT or your preferred 3D software
  • ZBrush
  • Substance Painter
  • Unity Editor
How to build modular props from a few pieces by Polygonal Mind
First Steps: What are we looking for?

In order to begin the process, we need to define what we want to do. From a medieval wagon to a SciFi antenna, the desired item we want will define all the work we must do. Its not the same to build an item from an apocalyptic world or an object from the far future. All the workflow, from texturing to modelling will change depending on what are we looking for.​
​

In this case, our choice is gonna be a Cliff Scaffold. For this purpose, we are gonna use a concept. This is not our goal, its just a support image to define the pieces that we need.
Adrien Girod 3d concept wood docks
Pic by Adrien Girod (https://www.artstation.com/artwork/xQG1Y)
Adrien Girod 3d wood docks
At first sight we can break down groups of pieces and we can add some more:
​
  • Wooden Planks/Platform
  • Basement (Rocks)
  • Metalworks

​After the break down, we need to think how this will be build. We are gonna make a few pieces from each group to achieve some variations. But first, we need to talk about this damn materials.
Materials or "How trim textures make us happy"

Its time to talk about materials. With all the above in mind, we need to define how our textures will work and look alike. How many textures do we need? A texture for every channel in every material? NO. Instead we will "combine" all the materials in one by doing a clever use of the UV space. 

We are gonna choose a trimmed texture instead of some unique textures. If you haven't worked previously with any texture of this kind, you can take a look on how to create a Trim Texture by reading the Trim Textures: Making Of article.
​
With a quick previsualization on "what" do we want and "how" to do it, you should be able to anticipate all your visual needs and material count.
Texture separation
texture separation wood, metal and rocks
The core idea is to use this Trim Texture to texture almost everything by UV tiling one of the two axis (U or V). You can see that our texture consist in three types of wooden planks, for all the wooden pieces that we got made after the reference inspiration; a metal section for details and to add some more style to our props (for example for ends and decorations); and a rock section for the basement and maybe some big pieces. All of these three types of "material" are going to be tiled in the U axis of the UVs. With only this three layers we can texture all of our asset. In order to achieve this goals, we are gonna keep in mind this texture in the modelling phase. 

​Also you should keep in mind the Texture usage and Model visibility. When texels come into scene, you will need that the textures match the mesh need of texture, having a healthy texel space ratio is a good way to make your models look nice wherever they are placed in scene. Here you can see that we have dedicated almost 2/3 of the texture for wood. Meanwhile rocks and ironworks remain in smaller space.

​​Last but not least, this small guide is focused on a material that only uses the color/albedo channel, we have baked the AO, bumps and made some light details but it can work well also with a full PBR material (Albedo, Normal, Metal/Rough, AO, Height, Emission). You will just have to do the texture work for every channel matching their space and watching out to not overlap the information between channels. Also a good workaround for bigger environments would be packing the trim textures by material, specially the ones that use specific information extensively like the emission or metal channel.
Modelling our pieces.

With our texture already done, we have to create all the pieces of our asset with our modelling toolkit. The core idea of modular environment design is to create the less models possible and give a unique look to each one. 
Props in 3d Maya LT
The objective is to get a group of diferent pieces like pillars, planks or decoration. Three variations from each type of item should be enough for avoiding repetition. Don't create 3 exact same pillars, instead do shape variations or even small compositions to match your reference moodboard. After modeling our assets, our scene should look like this.
Props painted in Maya LT
We have build different pieces. Some short and long pillars. Some planks. Some decoration. In conclussion all the things that we need for build different structures. We should work in the UVs for texturing. If you dont know how Trim Textures Work, you should read the Article of Trim Textures: A New Hope
With all the modelling done, its time to import everything to our Game Engine. Here we use the Unity Engine but the process is similar in Unreal, Blender, CryEngine etc. 
Building Props from pieces on Unity 3D.

Props of wood docks in Unity 3D
The final step of our work has come. By importing our assets to Unity, we begin to build our props.
In Unity you can get your hands on prefabs for your environment compositions or just keep them tied together in scene by parenting, the choice is yours!

Prefab design will keep your assets interoperable between scenes without the need to rebuild them from scratch but they will be likely harder to modify once they are built. Prefabs store the transform and all component data for each gameObject in the prefab parent. But this make it more sensible to mesh editing after building.

On the other hand keeping your assets parented but not prefab-ed will make them more tedious to modify (specially if you have different scenes) but easier to mesh modify them.
​
By prefab-ing we can build dozens of props that in the end are calling the same meshes and doing the same material batching. This will heavily optimize the runtime stability and scene load. Just parent some of them to the transform point you want and drag them from the Hierarchy to your Project / Prefabs folder!
With our pieces already in unity, we must invest time in build some PropsBy investing more time we can create some more assets to fill our scene but in this case we only want to show the idea of building a modular asset.
​
By spending some time on composition we can achieve our goal to set a scene from our modular asset. In this example we have build a hut, a platform with a ladder and some boxes that use the same material and meshes. All wooden, all optimized.
Wood house in Unity 3D
Conclusion

In conclusion, with this workflow you can build a wide range of props
that ​in fact are using a few models.

​ In this case we have created a simple asset with some wood, metal and rock but applying this workflow to other styles or goals, we can get quick and complex models to use it in our projects. The mastery resides in creating a balance between generic and modular props to create the general look and composition and create a layer over it of specific content, for example to add a Boat, a fishing net or by just creating something that doesn't match the trim-material features but fit in our environments.

​Dominating this workflow will allow you to create
​quick scenarios without much effort and a good optimization.

Picture
Artal
3D GENERALIST
​3d Generalist and makeshift artist. Trying to improve my skills and complete the life.
ArtStation
Picture
Kourtin
ENVIRONMENT ARTIST
I purr when you're not looking. I'm passionate about environments and all the techie stuff to make them look rad. Learning and improving everyday to be a better hooman.
Twitter
0 Comments

Creating water rivers in VRChat

8/7/2020

0 Comments

 
Premise
With the continuous rising popularity of VRChat and its standardisation as a virtual meeting point, Polygonal Mind contributed to its growth by creating 100 avatars available in the platform. This took the team to think about a "room" in the virtual world of VRChat where you could hang out with friends and change your avatar to one of our creations.
Creating water rivers for VRChat
The mission

Creating animated flow effects is not a difficult issue to achieve if you organise your project correctly in order to simplify resources and maximise its utility.
Resources

  • Maya LT 2019
  • Unity 2017.4.28f1
  • VRChat SDK
  • Photoshop CC
*Please note that the SDK has been recently updated and so the specifications have changed to Unity 2018.4.20f1. This change has not a direct impact in this guide.
Background of the issue

Creating a visually impressive scenario need the use of a high dose of creativity. And so Laura Uson lead the visual development of the scene, taking the impressionist painter Gauguin as the main inspiration for our environment. The vivid colors of the paintings and the simplicity of the shape direction and vague definition is one of the main highlights of our environment.
gauguin painting
Conceptualisation of the environment, shape simplicity and colour usage.
gauguin painting
General composition reference, shape definition guidelines and colour palette
Avatar garden vrchat shore
Vrchat world Avatar Garden
Late development shots
Vrchat world Avatar Garden
In this project I took the lead in general composition and technical development, this meant to be in charge of all the optimisation and general look alike by compositing and creating a good looking environment by level design, lighting and colour harmony. And one of those tasks to perform was to have a water flowing among all the static-ish environment.
​
To do so we heavily relied on Seamless textures getting animated to simulate water flowing.
#01 - Seamless textures can create flowing rivers

It is true that seamless textures are a great way to achieve massive texture distribution without feeling that there is some kind of repetition grid and everything looks overall uniform. This type of textures also work great to make flowing rivers or fluid movement. Said so make shape direction your main ally for flow movements, think about a "starting quad" and an "ending quad" where water will flow along the loop.
Seamless textures as flowing river
The 3D quad adaptation to an square texture also gives you the ability to shape the “stress” of the water flow by enlarging or stretching its area in the UV space. If you stretch the quad in the UV space you will get a quicker and stressed water flow. On the other hand if you enlarge its length, you will get a calm and slower flow of the water path.
​
This technique can be applied to a wide range of standard water flows like broken pipes or waterfalls.
Seamless textures as flowing river
In order to achieve this, we created a seamless square texture along the Y/V axis so the river would follow this pattern vertically, and so the animation goes from a Texture tile offset from 0 to 1 during X time. This way your "simple trick" animation will be always flowing seamlessly.
​
Although in the previous texture tile preview you can notice the "square" repetition due to small details in the texture, this cannot be appreaciated in the river mesh, as its quads only match the X/U vertical straight boundaries, while the horizontal edges mantain an unfolded freedom. This makes the texture to not necessarily match the whole square as its texel density is uniform along all the mesh. Of course this was our desired approach, you can always match the full square for different visual appealing results.
Flowing river in vrchat Avatar's garden
#02 - Seamless textures can create flowing oceans

The river came firstly, as its a simple UV animation logically made and thought, but we faced that the ocean couldn't be animated the same way as its flow doesn't behave the same way. The main issue was to "imitate" and do a visual ressemble of the ocean waves in a calmed way, without creating wave meshes. The attained look was inspired by the following Gauguin painting:
Gauguin ocean as vrchat world: avatars garden
From the picture from above we can already see how the ocean shape and look a like was made, each "wave" was made by creating a river that went along the shore to the limits of the map, creating a water flow that ressembled to the sea.
​
At this point you can already guess that you cannot animate it the same way as it is animated the river, in this case the animated axis is the X/U axis, moving the foam closer to the shore.
Avatars garden ocean in vrchat
This could be achieved by doing a seamless connection between all the faces, this time each quad occupies the whole UV region, creating a seamless mesh deformed by its own mesh. The stress points now are made when there are more (and smaller) polygons instead of smaller UVs.
​
And that's all about the project breakdown regarding this particular environment effect and animation. The next two points are going to be focused on creating this effect step by step.
#P1 - Ok I made a river, How do I create proper UVs?

Once you have the initial River mesh you will probably have a UV mess. Because how Maya behaves, UVs get deformed as the Maya engine performs the commanded operations. My recommendation is to delete all the UVs and select the path loop the river will follow, you should get something like this by using a contour stretch:
UVs for flowing river
As you can see, with the Maya History deleted and the shape Frozen, an one-opened loop will be displayed like this when performing a Contour Stretch. You can say that it still doesn't look right (because the whole mesh has been stretched to the coordinates 0,1 in the UV axis) but it has the water flow direction already. From this point the best forward step to do is to scale in the V axis the whole UV shell until finiding the desired texture stretching.
UVs for flowing river
Remember rotate the sheel and align the last quad of the river as the highest point in the UV coordinates, this way the animation value towards a positive axis will get displayed properly. Otherwise the river would be climbing up the waterfall.
With the UV length expanded along the V axis you now have a proper seamless water flow in a river, good job! Now let's take a look to the next point.
#P2 - Now I want it to flow, Animation.

One of the many benefits of Unity is its simplicity when it comes to animation. Unity is an engine capable of animating through its animation engine almost any public property or value displayed in the inspector of a gameObject in scene. All you need is to create an Animation Controller in one of your Assets folder, create a default State and create an Animation clip assigned to it.
Animating a flowing river in Unity
Once you have done this, you can start to create and edit your water animation in the Animation Window (CTRL+6).
For this river I set two keyframes, one at the start point of zero frames, and the other at the frame 120 (2 seconds@60fps). The values are zero and one respectively.
Animating a flowing river in Unity
Because you are animating a texture tile, when the texture offset reaches 1 it will be at the starting point (visually). It would be like having an sphere rotating 360 degrees, when it does a full turn around, being at 360 in the Y axis is like being at the starting point of 0.
Animating a flowing river in Unity
The interpolation between the start point and the end point can be done however you want to make feel like the water, but I recommend doing a lineal interpolation as it wont have any moment of frame acceleration or deceleration and the "speed" part will always be performed by the UV space in the texture. This approach will make it look natural.
Animating a flowing river in Unity
In the Unity Editor, the affected value by the animation clip are highlighted in red. This is pretty useful as it indicates that the value will always be override by the incoming animation clip on play.
With all these Unity basics you will have a beautiful (and maybe simple but effective) water flow. From this point everything is ad-on and there are infinite ways to keep experimenting and improving this workflow, it will always depend on the artistic and visual approach you are trying to get.
#04 Conclusion

With all the things said, I will pack my tools and do my last paragraph as a farewell. This was my very first time doing a river flowing, sea waves approaching and a waterflow being alive, but I have been already experimenting with texture offsets for a wide range of other applications. Because it's more important to know the useful basics and tech tricks instead of very particular cases of technology and graphics applications. Experimentation is key in this world!

That's all you need to start experimenting with simple water flows, there is no real need to use Particle Systems or complex Shaders, with the correct texture and clever usage of UVs you can achieve amazing results that at the same time will do a less impact in performance.
​
You are more than welcome to drop any question or your try-out and results!
Join us:
https://discord.gg/UDf9cPy

Picture
Kourtin
ENVIRONMENT ARTIST
I purr when you're not looking. I'm passionate about environments and all the techie stuff to make them look rad. Learning and improving everyday to be a better hooman.
Twitter
0 Comments

Upload Avatars to VRChat Cross-Platform (PC and Oculus Quest)

6/3/2020

7 Comments

 
The Mission

Upload to VRChat a character to use it as an avatar can be a bit difficult or messy to do, even more if you want it to be Cross-Platform, here we are learning how to do it.
Resources

  • Unity latest stable version
  • Mixamo
Picture
Before doing anything, is my character compatible
​to be a Cross-Platform Avatar?

For a character to be able to be Cross-Platform it requires to be optimized for mobile devices:
​
  • Maximum size of 5-8 MB.
  • Have less than 5.000 triangles.
  • Only 1 Skinned Mesh.
  • 1 Material for each Avatar, 2 only when neccesary.
  • Textures should be 1024x1024 at maximum.
​
For more information about what you can and can't do with your avatar visit this website:
https://docs.vrchat.com/docs/quest-content-optimization
Prepare Unity to be able to upload Avatars to VRChat

You will need these things to upload your own Avatars to VRChat:
​
  • A VRChat Account (The Steam account doesn't allow to upload custom characters).
  • Unity latest estable version
  • VRChat SDK

In the following link they explain the requirements and how to set up the SDK:
https://docs.vrchat.com/docs/setting-up-the-sdk
In my personal experience It worked when I didn't installed Unity Mitigation Tool, so I don't recommend installing it. Maybe it's just a coincidence. To import the SDK you have to go to Assets > Import Package and select the SDK in the folder.
CAUTION: Importing the SDK will only affect the current Unity project. You will need to import it in every Unity project in which you want to upload something to VRChat.
If its the first time you log in with an account in the SDK you will have to wait until you are able to upload anything to VRChat.
Setting up the Character in Unity

Once you have the Unity Project with the SDK and your rigged character its time to put it on a scene.
​To import the fbx model go to Assets > Import New Asset.
​
You will have to do the same to import the texture (Another way to import them is draging them into the Project Tab).
Picture
Once you have imported both, drag the model into a new Scene. To create a new Scene you can go to File > New Scene; Right Click on the Project Tab > Create > Scene; or simply type Ctrl + N.
1. Change the Scale

To be able to see how big is your character with respect to the world, go to GameObject > 3D Object > Cube. A cube of 1x1x1 will appear in the Scene so you can compare it with your character.

​If you need to change the Scale of the character DON'T DO IT ON THE TRANSFORM COMPONENT OF THE CHARACTER IN THE SCENE, this could create unwanted errors in the future.

​To modify this parameter the best option is to click the character in the Project Tab and in the Inspector Tab > Model change the Scale Factor value until you have the size desired. You will need to Apply to see the change in the Scene.
Picture
2. Create a Material

To create a new material in the Project Tab, Right Click > Create > Material. Left Click in the New Material and in the Inspector Tab should appear the configuration of the material.
Left Click in the circle between the square and Albedo. A new window should appear, showing all your textures in your project, you have to select the one you want for the model. Once you have done this, drag the Material from the Project Tab to the model of your character in the Scene Tab. If everything is ok the model will show now the texture correctly.
Picture
Another option is to click your character in the Project Tab > Material and there click in the circle in the list of materials and choose the material you have created previously.
Picture
Quick Tip: If you want to change the name of something in the project, for example, a material, in this version of Unity you can press F2.
3. Add the VRC Component

Now you click the parent object of your character and look at the Inspector. Click in Add Component, search VR and add the VRC_Avatar_Descriptor.
​
In this component change the parameters of View Position to align it in front of the character. This is where the First Person Camera will be when playing with this character. In theory this would be enough to upload the character, but for caution lets check that there isn't any big problems.

Go to VRChat SDK > Show Build Panel Control, popping up a small window. You have to look at the messages below the button Build & Publish.
Picture
If you want to add Visemes to your character so it can move their mouth when you talk I recommend you to check our Visemes Guide:
https://www.polygonalmind.com/blog-posts/create-and-upload-a-vrchat-avatar-with-blend-shapes-visemes

TIP
Enable Legacy Blend Shape Normals in Unity 2018. Or your character will have weird shading when talking. It can also make your upload a lot larger and so, prevent you to upload since over 10 mb.
Picture
thanks to @franadaVRC for the tip
4. Fix the Rig

Click your character in the Project Tab > Rig and change the Animation Type to Humanoid.
Picture
Go back to the VRChat Tab.
Picture
If you have this problem you have to click on Rig > Configure and select None in the UpperChest box and change the Chest bone to Spine2. Make sure that you have at least 3 fingers rigged:
​Thumb, Index and Middle to have Full IK and Tracking later.
Picture
Picture
Picture
If there is no Red Errors it should be fine. Then click Build & Publish. The build can take some time depending on your computer and the model you are uploading.
Picture
This should appear in the Game Tab. Here you can name the avatar, give a description, indicate if there is any content warning and if you want it to be able to be shared. Make sure to check that you own the rights of the characters. If for some reason in the future you upload a character you dont own you can have legal problems later.
​
To change the preview image you have to go to the Scene Tab and move the new VRCCam in the scene.
When you are done, click Upload and wait for the process to end!

Still have doubts?

Reach us on Discord!
Discord

Picture
Alejandro Peño
Technical artist
Videogame and animation enthusiast. I aspire to become a great videogame artist and developer, providing enriching experiences for those who share my passion.
LINKEDIN
7 Comments

Create and upload a VRChat Avatar with blend shapes visemes

6/3/2020

2 Comments

 
The Mission

VRChat uses blend shapes to detect phonemes via a microphone, and adjust your character mouth to the correct shapes, giving the impression that you character is talking. Let's learn how to do it.
Resources

  • MayaLT 2018
  • Blender 2.79b
  • Unity 2017.4.15f1
Blend shapes visemes in vrchat turorial
Premise

Isn't it great when you talk with somebody online and you see his mouth moving while he talks? It really add ups to the experience, specially in Virtual Reality.

That's what this is about. Creating different shapes so you can see yourself talking when you look at a mirror.
It's the little touches that makes something good to something better.
Starting

Let's say you already have your model done, it's also rigged and skinned so its ready to go. But, you want to make some blend shapes because in-game they look neat and funny.

Well, let's make them!
​

First, we need to know how many blend shapes we need to make. VRChat uses 17 different blend shapes. These are:
  • ​Blink left
  • Blink Right
  • Lower lid left
  • Lower lid right
  • aa
  • ch
  • dd
  • ee
  • ff
  • ih
  • kk
  • nn
  • oh
  • ou
  • pp
  • rr
  • ss
  • sil (silence)
  • ss
  • th
It's important to know that these shapes that we are going to make will need to have a very specific name. For example, aa is called vrc.v_aa; ch is called vrc.v_ch; etc...
​
The only exceptions to this rule are the first 4 of the list. Their names will be vrc.blink_left, vrc.blink_right, etc...
Visemes vrchat list
As you can see in the image, there is no "." in any of the names, and that's because Maya doesn't let you write dots in the names. We will roll with it for the moment.
​
Duplicate your character and move it to a side. Hide what is not necessary and show what it is.
Use an image of reference to know how to shape the mouth depending on the shape you need.
eyes and mouth expressions visemes
3D model with different face expressions
This gives you a general idea of how I made the different shapes of the mouth depending on the viseme.
​
You can see that there is not any vrc.blink_right or vrc.lowerlid_right, but I will talk about that later.
​
Another thing to keep in mind is that even if vrc.v_sil doesn't change the shape whatsoever, you must change something regardless. When we use Blender later, when exporting, if Blender detects that "sil" it's the same as the base form, it will remove "sil" from the blend shapes. Move a vert a little bit, one that no one will see, on the back of the mouth, for example.
​
Now that we have every shape done, we will use the Shape Editor.
Open the Shape Editor in the sculpting tab in Maya. Or going to Deform>Blend Shape.
Maya 3D Deform Blend
Now, select one shape that you created and then select the original model. Go to the Shape Editor and click on "Create Blend Shape". Repeat this with all the 17 shapes.
Picture
Before, I said that I didn't have any blink_right nor lowerlid_right and that's because you dont usually need them. If the character is symmetric, you can duplicate your blink_left, select the new target and in the Shape Editor go to Shapes > Flip Target.
​
This will create a mirror effect and making the right eye to blink. You should change the name once it's done.
Export and Import

We have every shape ready, so now we will export all the package. Select all the shapes, meshes and bones and go to export.
​
Be mindful of checking in the box of Animation and making sure that Blend Shapes is activated too, because if it's not, it wont export correctly.
Picture
Write the name you want and export it.

Now we will open Blender, where we will change the names of the shapes to the correct one.
Open a new scene and delete the objects that get created all the time. Camera and light too.
​
Then, import the file we made earlier.
Navigate through the menus to find the Shape Keys sub-menu.
Picture
Here you can change the names of all the shapes. Delete the first "_" and replace it with a "."
​
The last thing you have to do is to re arrange all the shapes to be in order. The order is the same as the list that I wrote at the beginning.
Picture
Once that's done, export as fbx.
Upload

You should have your Unity latest stable version already set up. If you don't, check this guide out made by my friend Alejandro Peño where he explain how to set it up.
Upload Avatars to VRChat Cross-Platform (PC and Oculus Quest).
With the character imported, we will add a new component called VRC_Avatar Descriptor.
Picture
We will draw the mesh into the "Face Mesh" section. All the visemes should appear below there.
Now just click on each section and select the corresponded viseme.
Picture
Like this.
Picture
Once it's finished, you can upload the character like you usually do. Again, if you don't know how, you can check this guide:
Upload Avatars to VRChat Cross-Platform (PC and Oculus Quest).
Conclusion

Blend shapes visemes are a great way to give life to your avatars in VRChat.
​I would 100% recommend using them in your future avatars.

Depending on the model it takes around 30 min to an hour to create all the shapes needed, and they look great.
​
It's a lot of fun making these, so give them a try!

Picture
Pedro Solans
3d animator
​Junior 3D Animator improving every day possible. Videogame and cat enthusiast.
Twitter
2 Comments

How to optimise VRChat avatars for Quest

10/3/2019

0 Comments

 
Premise
Back in May Oculus quest was released, it is a standalone device that allows you to use VR without needing to use any PC or wires. Until then you needed a high end computer to run games or experiences on VR so developers and creators didn't had to reduce as much when creating content or avatars for VRChat.
The Mission
The Quest has proven to be a very successful headset so far so there're new Quest users on VRChat, we'll use our 100 Avatars to show you how we reduce and optimise our avatars so Quest users can use them in VRChat.
Resources
  • MayaLT
  • Zbrush
  • Photoshop
  • Mixamo
  • Unity (latest stable version)
Butter avatar in vrchat 7eleven
Before starting

During 2018 Q4 Polygonal Mind's team made a challenge of making 100 characters in 100 days, you can check more about it here.
Me and my friend Alejandro Peño joined the studio as interns and were tasked with a project where we had to prepare, optimise and upload over 100 characters to VRChat for the Oculus Quest.
It was challenging workload but through consistent job, we were able to transform this characters into optimised avatars for VRChat.
Skull avatar selfie into vrchat
Some characters have proven to be more difficult than others, so I will make sure to explain you what problems I faced when fixing non optimal characters and how I managed to solved them. Even though we used Maya in the studio, any of this knowledge is applicable to any 3D modelling software.
​
So I'll recap a series of problem I faced when setting them for VRChat.
Lets start optimizing

Initially most of the models weren't created with VRChat in mind, and even less with the Oculus Quest.

Thankfully, all the characters were already modeled and texturized, so we only had to rig and upload them.


Or that's what I thought...
Cool Choco selfie into vrchat
VRChat team provided the following rules to follow when it comes for Quest avatars:
​
  • 1024x1024 texture
  • Less than 5000 tris
  • Preferably only 1 material
  • Around 5 or 8 MB uncompressed
Step 1 - Reducing Textures

This might be the easiest of all steps.
​
All the characters used 2048x2048 textures. So we had to reduce them to the desirable size.
In Photoshop, we created a new project with 1024x1024 pixel resolution. And then we imported all textures. Once they were all in and adjusted to the box, we exported each layer as an independent PNG.
1024 textures edit into Photoshop
Export texture images as PNG
Since they already had the appropriated name, we had 100 textures ready to go.
100 texture files png
Step 2 - Polycount reduction

Most of the models had the right poly count, but some others didn't. 
​Franky's head is a clear example, it had 12572 triangles.
It is tempting to use an automatic tool to reduce the polycount such as decimation, but we do NOT recommend this at any cost. It will likely destroy your edgeflow and also can destroy the shape of the model, also can break UV layouts, so please think it twice before using it.
Franky frankenstein avatar by polygonal mind

Here are some rules we follow when it comes to reducing polygons:
​
  • Always keep the shape intact. In this case the head must keep being a head with it's rectangular silhouette. After deleting an edge, zoom out and rotate the model to check if everything keeps looking good.
​
  • Don't delete edges where there is a texture seam. This will cause the UV map to go bananas, and that can take a lot of time to get it fixed, and even then, the results can look really bad.
​
  • It's crucial to reduce trying to keep the same edgeflow that the model already has, deleting edge loops left and right without paying attention to the edgeloop will lead you to sub optimal results.
Franky avatar high poly
Franky avatar low poly vrchat
... wait... What if the maps seams are non optimal?

What can you do when there are map seams literally everywhere? That's what happened to the 50th character, Samuela.
Samuela avatar polycount vrchat
As you can see on the left no matter what edge loop you tried to select, there was always a seam. We couldn't find a way to reduce the number of tris (7.5k) without having to re-do the texture again.
​
But, thankfully we learned a workaround for this model.
We duplicated the model, and started deleting edges without thinking too much about the seams or texture, since we were going to make a new UV layout once the model is reduced.
Once the poly count was around 4.5k, we made the new UVs. Now that's all done, we exported each separated part (eyes, hair, ponytail and hair) of both, the new and the old model.
3d files obj export
Once in Zbrush with every mesh and the old texture imported, we took the old Samuela model, subdivided it and made the texture to be poly paint.
Picture
Beware, Zbrush applies color to the model's vertex, so you will need to subdivide your model until it reach a million of points so you can keep as much detail as possible of the texture.
Time for to project the high model polypaint into the new one by subdividing the number of polys of the new to match the old one and now simply project the old Samuela to the new one. Repeat this part for every subdivision you have until you get enough texture detail on the new model.
zbrush divide
Samuela textures UVs
zbrush project all
Samuela vrchat texture uv
Note that projection might not be precise and you might have to improve the texture in Photoshop.
Adding mouth and eyes into an existing model for Visemes

This part is completely optional. But it really gives your characters life when they are in game.
VRChat allows you to add facial expressions to your avatars so we had to add a mouth and eyes for every character so we can make them blink and talk using blend shapes.
​
Some characters already had eyes and mouth, but others, like Manuela had them embed on the texture, so we had to create them.
Samuela eyes and mouth add
For a quick turnaround what we did was:
​
  • Extrude the mouth inside to make a hole
  • Modify topology if needed
  • Adjust UVs maps to match the lips and the mouth's insides
  • Add some teeth and tongue to the insides
  • Please keep in mind the 5k tris limit.
Rig

For the rig, we used Mixamo. Mixamo is a web page that rigs and skins automatically given some variables like the position of the wrists, elbows, knees, chin and groin. For the most part, Mixamo did a pretty good job, specially for all the humanoid characters. But for the not-so-human, you had to edit the skin to have a great result. How to fix those is a topic for a different dayone .
We'll talk about this deeper in a future post.
Materials

Like many of you reading this we firstly uploaded the characters to VRChat thinking only for PC users so all the materials were left with the Unity's default shader, but Quest avatars requires a mobile diffuse shader, so we had to change them.
​
If you have followed a good naming convention, this will only take 1 minute. For example we add a mtl_ prefix to all our materials. In Unity type the material prefix to quickly select and change them all at once.
Unity 3D textures avatars vrchat
Unity material
Conclusion

100 characters are a lot. But like I said earlier, with some structure and consistent work after 3 weeks, we made this happen. At Polygonal Mind, we use Notion.so to have all our projects and task organised.
​
With that being said There were a bunch of characters that needed little to no optimisation, but some others that needed almost a full rework. This stuff takes time. Especially if you count them by the hundreds.
​
I hope this guide helped you to optimise your avatar for Quest users, it was a challenging project for us, but the work pays off very quickly once you see players wearing them in game.
​
So sit back, put on some music, and start working. It's been really fun making these and the paid-off of seeing avatars you've been working on being used by other people is a great feeling.
Hot Dog avatar VRChat 7eleven
Post by:

Pedro @05predo

Pedro Solans was an intern and now junior animator working at Polygonal Mind's in-house team.
Animation film lover, Tekken player and animal huger .

Daniel @toxsam

Daniel García (aka Toxsam) is the founder and creative director at Polygonal Mind.
In love with videogames since he can remember, passionate about geometry,
​VR addict and energetic persona.

0 Comments

I'm LODing it (Level of Detail)

9/16/2019

0 Comments

 
The Mission
Resources
Creating LOD meshes for game engines
​in a fast and reliable way.
  • MayaLT 2019
  • Unity 2019
  • A mesh you want to LOD
First of all, what's a LOD?

LOD (Level Of Detail) is a method of game optimization that decreases the complexity of a 3d mesh (or lately even shader, textures, etc.) as it gets further away from the player, and it's usually used in conjunction with other optimization techniques like culling. The most common execution of this method consists of utilizing a secondary mesh, which replaces the original with a lower resolution one at a certain distance to avoid having too much unnecessary detail. The initial mesh can be generated automatically, but you will have to fix stuff manually!
LOD levels into Maya 3D
Using MayaLT to create automatic LODs

Maya has a built-in tool that lets you create automatic LODs based on either camera distance or % of the total poly count. You can access it in Edit > Hierarchy > LOD (Level of Detail) > Generate LOD Meshes. Click the box right next to this last button to get access to the options instead of the defaults.
generate LOD meshes with Maya
These are the settings we've been using for our latest project, which you'll know more about soon!
In many cases (most of the time, to be honest) you'll just use this as a kickstart and improve upon the automatically generated mesh.
Maya generate LOD meshes options
General Workflow

1. ​First, duplicate the mesh we are going to LOD and hide it. This is the equivalent to duplicating the background layer and working in a regular layer in Photoshop, just to make sure we keep the original material in case something went wrong.
Boat mesh into Maya
2. ​Then use the tool to create as many LODs as you need.
Maya tool to create LODs
3. ​Extract the meshes from the LOD group by unparenting them to examine and fix any problems
​you could find, individually.
Maya extract LOD meshes
4. Apply the material of the original mesh to the LODded one, so you can see how close to the original mesh's look it is.

5. After that, follow the troubleshooting steps below to fix the problems you caught.
​
6. Finally, when you're happy with the result, rename everything to your chosen naming convention
​and export.
Troubleshooting

  • Imperfect autoLODs: As I said before, the automatic tools are not perfect. Thus, is up to us to fix the computer-generated errors. Specially round or cylindrical surfaces are very hard to get right on the first try, and are what usually will need some more love from the human side.
Original LOD mesh
Original
Maya automatic LOD mesh
Automatic LOD
Modified LOD mesh maya
Modified fixed LOD
  • UVs got distorted: automatic LODding usually maintains the UVs for the most part, but if you have to make any manual changes to improve it (SPOILER: YOU WILL) you'll need to ​fix the UVs to match the original mesh's, especially when utilizing Target Welds, Merges and some other similar operations.
UVs automatic LOD Maya
UVs LOD modified
  • Popping: When a LODded mesh is very different from the original one, you can see what's called pop, or popping. Our job is to make this transition as seamless and smooth as possible, by using more LOD levels. The idea is to balance optimization with good looking LODs (so the player doesn't notice the lowpoly model too soon).
LOD change when camera go further
Using LODs in Unity 2019

Unity has a built in LOD system. First, you need to have the correct hierarchy for it to work correctly. Import your mesh and the LODs of that mesh to the scene, create a new empty GameObject, put the original mesh and its LODs inside the empty GameObject. Then select the parent > go to the Inspector Panel > Click on Add Component > search for "LOD Group"
LOD groups into Unity
LOD group Unity 3D
You'll then see 4 slots, for different LODs. You can add and delete as many as you want by right clicking over them and selecting "Insert before" or "Delete", respectively.
Edit LOD group into Unity
You can now assign a mesh you have prepared before to every LOD by clicking on the big square "Add" button by having previously clicked on the desired LOD.
LOD example into Unity 3D
Also, by dragging between the transition of the LODs from left to right, you can set up the separation of the different LODs based off the distance. By dragging the camera icon you can preview the system working as it would happen in real time when the player was getting closer or further from the mesh.
Camera movement for LOD meshes into Unity 3D
The Conclusion

As it happens with any tool, if you just leave the results that got automatically generated the result is going to be a lot worse than if you tweak it a bit to fit your needs (for example, just drag and dropping Smart Materials vs actually understanding material layering and utilizing Smart Materials to accelerate your texturing process in Substance Painter or Quixel).
​
The beauty of this is the combination of the automatic process and the human input, generating a faster mesh than doing it all manually, but getting a better result due to the fixes done by the user.
Post by:

Alex @Vontadeh

Alejandro Bielsa is a junior 3D artist working at Polygonal Mind's in-house team.
Passionate about videogames, vivid tutorial drinker and cat lover.

0 Comments
<<Previous
Forward>>

    Categories

    All
    Blender
    CryptoAvatars
    Decentraland
    Decentraland En Español
    Maya
    Metaverse
    Mixamo
    Morphite
    Substance Painter
    The Sandbox
    Totally Reliable Delivery Service
    Unity 3D
    Updates
    Vrchat

    Archives

    March 2022
    July 2021
    June 2021
    May 2021
    April 2021
    March 2021
    February 2021
    January 2021
    December 2020
    October 2020
    August 2020
    July 2020
    June 2020
    May 2020
    April 2020
    March 2020
    February 2020
    December 2019
    October 2019
    September 2019
    August 2019
    June 2019
    May 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2016

    Picture
Home
Projects
Assets

Picture
Crypto
Friendly
Picture

Subscribe to get some 💚 in your inbox once in a while.

Follow us and your visit will never be forgotten!
Picture
Picture
Picture

 © 2015-2022 POLYGONAL MIND LTD. ALL RIGHTS RESERVED.
  • Home
  • Metaverse Builder
  • CryptoAvatars
  • MegaCube
  • Blog
  • Decentraland
  • Projects
  • Assets