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

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.

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.

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.

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.

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:

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.

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.

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:

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.

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.

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.

Once you have done this, you can start to create and edit your water animation in the Animation Window (CTRL+6).

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.

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!

Momus Park was the first time we tried this with surprising results. For those who don't know, the majority of the textures used are based on the The Starry Night from Van Gogh. Trying to imitate the spirals and the brush strokes from the sky and the city on the models.

In this project, we took these ideas and methods a step further, by not only trying to recreate the texture but also the looks inside the painting. Creating in that way a world in which wherever you went or looked, you experienced the sensation of being inside a painting, uniting 2D and 3D.
​
Actually, this is not a new concept, however most of the 3D works that try this method are static images or videos, an impressive technique and design without a doubt but it's a shame that you can't go around the world they created.

Once we have limited what we want to do and the feeling we want to get, it's time to gather references and styles.

In this case, we were looking for artists that had painted open aired spaces and gardens, since the main theme of this world it's called Avatar Garden. Meaning that the player have to have places to walk throught, select the different avatars and relax zones where the players can meet with other people.
​
The other condition that we put ourselves was that it had to be a classical painting, since we were connecting the 3D and the 2D, we thought it will be interesting to join a classic art medium with a new one. Putting this two things together inmediatly gave us the thought of the impresionist movement, with artists such as Claude Monet or Édouard Manet.

This style has a lot characteristics that make it ideal for this, the textures have a lot of personality with a strong presence of brush strokes and spots of colours, making it really easy to create tileable textures. Finally after reviewing a few artists, we decanted ourselves for Gauguin and his tahitian landscapes.

Once we have an artist selected, it's important to take notes. Each artist has a particular style that took years to develop, and if we want to recreate their paintings or artworks, it's a must to try to imitate these details. In this case we can pinpoint a few things from the get go that will helps us in order to recreate it:
​

• the colors are saturated and very strong (red, greens and yellows predominate in the scene)

 

• the brush stroke is visible, characteristic of the impresionist movement.

 

• the shapes are represantive, not a literal representation of the object (as the impresionists said, recreate the impression the object left)

 

• the cool colors are used very scarcely and in zones that is inevitable their use, for example the sky or the darker parts of the jungle.

​
When we have these main points clear it's time to prepare the props and the assets. To get started, we created some of the most basics props to fill a simple scene. That way we can define more details and polish the models even more.

This also helped us to develop a pipeline that allowed us to work more efficiently, which more or less consists of this:

• create a list of models and textures you will need.

 

• try to use tileable textures, it will be preferible to use that as base for the models, for example in this world, we created a single texture with colour variants from green, red and yellow.

 

• create the models and try to reuse the textures, if a texture is required, ask yourself if it will be possible to repeat it, if it's possible make the texture tilebable so that it can be reused, if not, paint the model in Substance to recreate the strokes more faithfully.

 

• we can use the transparencies to add more details on the models and recreate the texture of the bushes and trees (more of that in the next point).

Finally, in the spirit of Gauguin, we decided to change the world to an island instead of a garden.

Creating this pipeline gave us an idea about what we will need to make, however it's not as easy as that. As always happens in these kind of projects, we found a series of problems. Especially when adapting some of the assets into the paintings style.

There were times when we had to reject some models because even though the final result may look impressive, the time spend on it, the resources it took or the number of tris, made the process not worth it.
​
For example this tree below (reference on the left), to recreate it we put a base on the leaves with a green texture, and them we recreated the yellow strokes with transparent planes. On the right you can see the tree in the process. Sadly we had to drop it because of the reasons stated above.

Other example comes from the vegetation, in particular from the bushes, since the forms are not very detailed, if took a lot of tries until we achieved a satisfying shape, it was a difficult time to make because a lot of times they resembled deformated spheres. Since this was a necessary model, we repeated the model until we achieved the desired result.

The most important lesson from this point is that not everything comes as one imagines it, so when you arrive to this, is important to stop and think about it. It is necessary? it is taking a lot of your time? how can I change it? This is normal, so it's important to improvise, adapt and overcome.

If you keep going you can finally obtain the desired results, as you can see:

While working on this project we discovered that it was a good way to test our limits, and what we can do inside an enviroment project. We tried to recreate a paradise that Gauguin viewed when he first traveled to Tahiti. All in all, I hope to see you there.

Of course, first of all you need to have the SDK imported into the project in order to upload your content. Never mix the SDK2 or SDK3 in the same project, do clean uninstalls of the sdk prior to uploading or migrating the projects as it can corrupt your data. Currently (22/June/20) the most stable SDK is the VRCSDK2 as it contains the legacy inputs and triggers for worlds.
​
As the official page says: "Choose wisely."

Worlds with cross-platform support share the same "seed" or "world-id" provided by VRChat once you upload the world for the first time. There is no real limitation for the PC version more than having a thought on lower pc machines and not to overload the scene with RT events or graphics that require real-time processing.

To start the port to the Quest version, first of all duplicate the project as a way of back up and also to make the convenient tweaks you think you have to do to match the hardware limitations of the platform. The Unity profiles is a great help to know what is loading and how much is taking to render each frame of the camera.


As a creator, you should keep an eye on the performance of your world:

• Tweak and polish performance, learn to know how the Unity Engine behaves itself with the data you are giving:
  • "Static" gameObjects in scene help Unity improve framerate by freezing their render batching.
  • Use the less shader passes as possible. (Keep transparency usage low)
  • Bake lights and avoid real-time lighting for Quest
  • Use only one Directional Light in mixed mode to fake normals into bakes and to give Avatars detail and light direction (as it was a "sun" light).

 

• Set up an Occlusion Culling matrix and optimize it to make the engine only render what it has to be visible on screen.

​

• Keep the collision complexity as simple as possible, avoid using mesh colliders and instead recreate your scene with box colliders or other primitive shapes that grant fast-loading and good player interaction with it.

For the Quest version (which is the version that is going to run on an Android platform with graphical limitations), keep in mind the following hard specifications:

• Keep the build file around 30 mb. All worlds that exceed 50 mb won't run on Quest.

 

• Texture size space should be kept the lower the better, pack atlas and keep it as a square 1024px texture when possible as they are read faster than higher texture sizes.

​

• Keep the material list low.

Once you have this basic setup, you now can press the big button and upload your content for the first time!

If you want your World to be public you must have at least "Known User" to be able to send it to Community Labs and let VRChat review if your World is good to be Public.

Next steps are important, first of all duplicate your project, this way one project (development ended) will be the PC version and the other will be the Quest/Android version. I usually make use of the PC version as the master and the Quest version a semi-automatic downgrade.

Once duplicated, open the project with Unity. We are going to need the project in Android, once its open, go to File > Build Settings. You will see a list of diferent platforms to build your project with. Click on the Android platform and next click "Switch Platform".

Click on Switch Platform and wait until the process ends. It may take some time, depending on the size of your project. Once ended the platform switch, the Unity environment will be set with Android.

With the change of environment, you will no longer be able to do local tests so keep in mind to do "core" stuff on the pc build prior to duplicate the project. Use this project as a downgrade on texture sizing, high level compression and low-near-zero dynamic or real-time events being displayed on screen. With the same scene, the descriptor will be mantaining its World ID and with the upload the World will be updated with Quest support.
​
During the upload keep all info input the same as the PC version: name, tag, description...

That's it, we hope to see your amazing world over VRChat!

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:

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:

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.

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.

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

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.

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.

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.

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.

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.

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:

Click your character in the Project Tab > Rig and change the Animation Type to Humanoid.

Go back to the VRChat Tab.

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.

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.

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!

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.

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:

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

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.

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.

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.

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.

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.

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.

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.

Once that's done, export as fbx.

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.

With the character imported, we will add a new component called VRC_Avatar Descriptor.

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.

Like this.

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:

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!

Mixamo is an automatic rigging website tool that allows you to create quick humanoid for free.
​As long their shapes are not complicated.
​
If you are already familiar with this tool you can skip to the next part.
To log in you can use your Google Account.

For a VRChat avatar you want to use at least 3 Chain Fingers because is the minimum that the game needs to detect correctly all the basic movement of your hand.
​
If Mixamo doesn't detect 3 "fingers" it will create less chains and you will have issues later.
Once everything is placed correctly just click Next and the autorigger will do his work. If you are satisfied with the result, click Next again. Now you can see the character in different animations to ensure the quality of the rig.

Before downloading your character from Mixamo, we strongly encourage you to run the following animations to test if there is going to be any problem with the avatar beforehand. Some of these problems can be solved after downloading the rig, but others cannot.

Mixamo's automatic skinning and rigging can work. But more often than not, your characters will encounter different problems that only can be fixed manually using a 3D software.
​
What went wrong? What do I do? These are questions that I made myself while working on these characters and I hope I can answer them here. Not all models are the same. Some have special characteristics and you have to look out for those.
​
These next examples will help you to identify and fix problems that could happen.

This is the kind of stuff we should be aware of. For this particular case, removing all the influence of the shoulder bone will be enough to lead to some better results.
​
Removing all the influence sometimes is not the best idea so you can also reduce the amount of influence the shoulder makes on that part of the body for different results.
​
In this pictures you can see how the bone influence should look for both cases.

One particularly annoying problem that I personally found while making visemes for the avatars with Maya LT, was that even when the character was in T pose, if I tried using the blend shapes, the model will return to its original pose before the rigging. You can check what I'm talking about on the gif below.

Select the old mesh, then the new one. Go to Skin > Copy Skin Weights.
You can delete the old mesh, since it has no use.

Now all the blend shapes will work perfectly!

Like any automatic tool, Mixamo is a great time cutter that provides an easy way to go with decent results, but problems can arise, we covered some of the most annoying ones and hopefully this blog post helped you somehow.