Polygonal Mind
  • Home
  • SERVICES
  • Projects
  • Decentraland
  • Blog
  • Assets
  • / CryptoAvatars

Blog

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

    Categories

    All
    Decentraland
    Decentraland En Español
    Maya
    Mixamo
    Morphite
    Substance Painter
    Totally Reliable Delivery Service
    Unity 3D
    Updates
    VRChat

    Archives

    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-2020 POLYGONAL MIND LTD. ALL RIGHTS RESERVED.
  • Home
  • SERVICES
  • Projects
  • Decentraland
  • Blog
  • Assets
  • / CryptoAvatars