Unity VFX Graph - Portal Effect

1. Introduction: On these lessons, let's see how to create these two amazing portals. One looks like an entry to hell, and the other one looks like it came out from a Sci Fi game. Hi I'm Gabriel Aguiar, founder of the Gabriel Aguiar Prod YouTube Channel, where we teach Visual Effects for games, Unity in real and GoTo. And we also have one of the biggest libraries of visual effects assets ready to be used in games. I'm also the founder of Golden Bug studios, where we are developing rabbit still. Today, let's create this from scratch with Unity VFX Graph and Shader Graph. We're also going to use Blender and material making for textures. We will show you how to build everything. So without further ado, let's get on with it. 2. Portal Textures, Otherside and Particles: Our scene, we have this beautiful portal. It's brutal, it's godic and it's from reversed interactive from the asset store. It's free and it's awesome. And we are going to create a portal for it. So let's begin by creating with R click a Visual Effect Graph. A minimal system and we can rename it to VFX Graph square Portal, open it up, and this is what we got. We want to begin by creating the ring on fire inside the portal, right? We can rename it to Portal text or ring on fire. Let's make sure bounds mode is set to manual with the size of 100 and X, Y, and Z, so it's visible even if the camera is not pointing directly at portal. Then we want to spawn one particle with a single burst and the magic happens down here. We don't want this output particle. We want instead an output shader graph mesh. We are going to use a shader and a mesh. Let's first drag and drop our VFX Graph to the portal and place it in a proper position. Yeah, we have a cube, but we need a circle, and it's a very simple mesh. If we open up Blender, we can guide you through. And basically, in an empty scene, we want to add with Shift A, a UV sphere. And down here on the left, you can control the segments and rings in case you want to make it smaller or bigger because this increase the polycunt. Basically, we want 20 segments, and with tab, we can enter in edit mode. Let's select these faces right here, and then with Control I, we want to select the invert and delete faces because we only need this part right here. The idea now is to select everything with A and with scale it on the Z axis, a value of zero, so it becomes flat, as you can see. Then let's get out of edit mode with tab again. In objects, we want to do a set origin to geometry. So the origin goes to the geometry itself. And now with shifts, we want to say selection to cursor, which is down there at the center of the world. We are doing this so the Pivot is perfectly aligned with the center of our circle. And it's very important that it is aligned. Let's scale it a little bit more. I should be bigger, something like this. Yeah, not that big. In terms of UVs. We want to make sure that we have constrained to image bounds first because we need to make a few adjustments here and we don't want to get out of this square. We want to sect this edge and push it all the way down. Sect the next edge and push it more or less around here. And then the next edge are spreading these edges, basically. And then we want to rotate this with R -90 degrees because those triangles right there on the right now represent the center. And if we pin a texture to the right, it feels like the text is being sucked into the center of this circle, and you will notice it with the shader. And finally, all we need now is to apply Al transforms with Control A, here we go, and then rename this to something like circle, for example, 01. With the circle selected, let's go to File Export as an FBX. Make sure selected objects is on and enable applied transforms right here. Once you have done it, you can assign the new circle to VFX Graph in Unity and then adjust the size with a set size. Let me just remove this text right here so it's easy to visualize. And now we can reposition this so it matches the position of our portal, of our TD model. Here we go. Much better looking nice. Now we can create some magic with this. So we need a Shader Graph a very simple Shader, not that arc. Right click Shader Graph URP and lead Shader Graph. It doesn't need to be affected by the lights of the scene and double kick to open it up. First thing we want to do on the graph inspector is allow material overt, so we can control the settings, all of these settings directly in the inspector. And then support VFX Graph is extremely important. So it works on VFX Graph. To be transparent and additive. And for now, that's it on the graph inspector. From here, basically what we need is to sample a text to two D. It has an input for a texter. So let's create a text two D property and call it main text where we are going to assign a specific text. And we can show you how to create it's a noise. And if you go and get material maker, it's extremely useful and we can show you how to create one. It's also very simple because it's text is done with nodes. So let's begin by searching for shard FBM noise. You select it, you can preview it on the two d window right there. We can increase its sharpness to 08 and then play with a scale, something like ten on the X and on the Y. How many times does it fall? Well, you can test it. We are going to say one time with four iterations and a little bit more persistent. Now, in our case, it will be useful if we increase the dark values, the dark areas. Let's use a colorized node and push this black y to the right. This way, we have more dark spots, and we can do something else, which is mix another noise. In this case, a dirt noise with a huge scale like three, and then we can use a math node to combine these two but instead of adding these two together, let's divide A with B, and it will create this very interesting texture. And if we try to invert it with an invert node, we get this kind of fiery texture with all of these details, and it will look awesome in our portal. We already test these parameters and noises, but feel free to test different nodes and stuff like that. It will come up certainly with interesting texts as well. Material Maker is awesome. To export this, all we need is to go up here, rename this sector resolution, select image and export as a PNG. And if we go back to Unity, we can assign it right here and then connect to our sample text to D. Other input sample texto today can receive is a UV, and we have this tiling and offset node, which is extremely useful, and it will allow us to create another property, a vector two for the main text tiling, which by default should be one by one. This control the scale of the text, essentially. And if you want to stretch it on the X on the Y, and then we can create another vector two for the main text speed to control our fast pans. If we want this to automatically pan, we need a time node. We can multiply these two together and connect to the offset. And here we go. From here, we can connect this to the base color. And now let's see how it looks with our Vfx graph. We can assign it right here. If you go to the scene, this is the kind of effect we get at this point. It's an interesting one, but what we are trying to achieve is a ring on fire. So essentially, we need to mask out what's in the center. Create another simple text to D, create another text to the property and call it mask text. We need a texture. Let's go back to material make. It's a very straightforward one. We can use a gradient. Rotate it 180 degrees, so it matches our UVs. Remember, the right side represents the center of the circle, which means if we had a key more less around here and push it to the right and then push the black key to around 02, we are enlarging the emptiness at the center. And in this case, we don't want the black values, so let's use a colorized node and on the black key, say the Alpha is zero, so it becomes transparent. Export this. And if we go back to Unity, we can assign it right here to a mask text of property, dragon drop it, sample and there's another thing we can do first is connect the main text to a power node, which allows us to control how much dissolves the main text, basically. We can create a fat property and call it power, the default value of one connected right here. And if we increase or decrease, as you can see, we can make it less or more visible the main text. Now, let's multiply these two together, and we are almost done. We just need to make sure that the color works with this shader. In other words, we need a vertex color. Multiply it with the mask text. And then create a color property with the mode set to HDR and white as default color and multiply these together as well. And up here, we are going to connect to the base color and down here to the Alpha. And this is the end result we get. It's empty on the center, as you can see, we still have the fiery text going on. And now, if we go back to VFX Graph, we can choose an orange color leaning to the red side and increase the intensity to around five, six, till we get this awesome feeling. Plus we can decrease the tiling on the X to zero dot two, so the texture isn't so squashed. We want to stretch till a bit. In terms of speed, it doesn't need to be that fast on the X, something like minus zero dot 15 feels right, and we can add a spin if we say the Y is zero dot one on the main text spin. And here we go. We get this awesome feel it looks like we are opening a portal to hell. This first output, we can call texter one bright because we need another output, which we can copy Control C and Control V for text to bright. Let's connect the update particle to the output. Feel free to disconnect the text of one bright output, so you can see what's happening on the text too bright. We are going to go with a reddish color but lower intensity, and the tiling is going to be zero at four, and it's going to move a little bit faster. If you disconnect it, this is what it looks like. It adds a little bit more depth just by doing this. And let's copy this output for the textaT in this case, dark, where the color is going to be completely black. I connect it right here, And disconnect the other outputs. We need to change the shading mode to Alpha. And now that we have these dark shadows going on, we can add a different feeling by just changing the texture. For example, if you go back to material maker and use a wavelet noise, we can change the type to two, increase a little bit the scale on the X and Y to three, leave the durations as it is, but set persistence to one, so it becomes a little bit more definite and not so frequent, and we can decrease the frequency to one. And then we can blur these out with a Gaussian blur, but not that much. We can increase the grid size to 2048 by 2048, and that's it. We get this critical noise. Increase its intensity in terms of whiteness by pushing this key to the left with a colorized node and clip some of the gray values by pushing this black key to something like zero dot one. And then we can export it, and that's it. Back in Unity, we can assign it right here. In terms of tilling, let's increase it on the X and just make it spin a little bit faster on the y axis. We can make it more visible by decreasing the power value to zero at five and here we go. Let's just make sure that this dark output is rendered below everything. If you select the output in the inspector on the advanced options, we can say the sorting priority is minus two. Here we go. Looking good. Now, as for the other side, the cube map, wherever you want this part to take you, we can copy this entire system, rename it to something like other side. Remove texta one and texa three. Call this one the other side. And in terms of Shader, we need something new. It's super simple. Let's create an unleaded Shader Graph. Call it other side Shader, for example. And if we open it up, you can say it's transparent and enables support VFX Graph. And the way this works is by getting the view direction, and connect it to a sample reflected cube map. This node has all the functions we need. We just need to fit it correctly. For the cube, we can create a cube map property and call it the other side text, for example, and assign it a cube map. In this case, we are going to use this HDRI that you can get from this side. There's some very cool and free texts here. Once you get the texter, you will need to set to cube in texto shape and then press Apply. Connect the property to the cube. And connect this note to the base color, and that's it. If you save it, go back to VFX Graph. Ukraine replace this Shader Graph and here we go. Here this awesome portal. We just need to adjust the sorting priority to minus two. So we are going to push this dark one to minus one. So it's in front of the cube map. And here we go. We have a beautiful portal to hell kind of vibe going on. We can polish this even further by adding a few more details like particles orbiting. Let's copy and paste this other side VFX Graph, call it ParticlesOrbit. Instead of a single burst, we want a constant spa rate of 100, which means we need to increase the capacity to at least 100. We don't need this output. It's too complex. We just need a few particles. So an output particle it is enough, a quad. And we can say they have a lifetime, indeed, a random lifetime 1-3 seconds. We want to make sure they bound in a circular shape. So let's use a set position, sphere. We can switch it to a circle in the shape, and we can adjust its radius so it matches our portal. And if we want them to go towards the center on the update particles, which happens continuously every frame, we can use an attractor shape sphere with a small radius like 02, for example, and we can push the center back there with minus two and Z. And we can decrease the attraction speed to one, as well as the attraction force to three. Stick distance and stick force, we can leave it at one. Feel free to play these values, you will notice how they interact with the particles. In terms of output or rendering, we want these particles to be oriented to the camera, otherwise, there are sideways. And if we want to rotate them as they go, we can go up here to the update particles and set their position. Why we do this because we are going to use a rotate three D node back here, and this works by getting the current position, which is an attribute of each particle. And then we can add a random float to the angle. But it must be a very tiny valley like zero.001 and zero.003. We can switch the rotation axis to be Z, which is depth, and they rotate beautifully. You can also use the linear drag to slow them down, not that much, just a little bit. And now, in terms of aspects since we have the motion pretty much there, we can say they are in additive blend mode, and we can choose a color that matches our feeling, right, the orange one. We can increase their brightness a little bit. And yeah, they are huge. So let's take care of that by using a set size random between zero at one and 03, and they become even more huge. Don't worry. We are going to switch the texto in a moment. What we need is to make sure that they scale down as they die with this curve from big to small and the composition set to multiply. As for the texture, we can use this beam 01, which we are going to show you how to create with material maker. It's extremely simple. If you begin with a shape set it to circle, decrease its radius to zero at eight and increase the feather to zero at seven. We can then blur this with a Goshen blur and use a colorized node to remove the background by saying the Alpha of the black key is zero, and then we can export it. We can rename this output to particles orbit, and that's it. We have this beautiful particles going on, and it will adds a nice touch. So that's it for this first part, on our second part, we are going to improve this and see how to create the space portal. 3. Stretched Particles and Space Portal: Let's imagine that this particle is sucking a few particles from this world to the other one and it's stretching those particles. Let's copy these particles orbit and call it stretched particles. They don't need to be that much, ten for the rate is enough, and they can have a constant lifetime of one, but they are going to spawn in a sphere shape and only on the volume of that sphere. Off of that sphere. We can decrease the arc. It's going to be animi sphere. And then we can rotate this because as you can see on the Gizmus it doesn't match our portal. So on the angles, we can say -90 on the Y axis. And if you push this outwards as you can see on the Z axis, by the way, you can expose this value so you can control this via script or wherever you want. Then we can also increase the radius, and you could leave it just like that, and it would be awesome. But let's do one more thing, which is remove this set position, the rotation entirely. You can leave the tractor as it is, but increase the radius to two. Now you can see the particles are going towards the portal. We can increase the traction speed and attraction force, so they go a bit faster. Let's just rename this output to stretched particles. Make sure the col is a little bit more reddish. And increase intensity as well, almost double their size, but if we want them to be stretched, we need a set scale so we can squeeze them on the X. We just need first to say the composition is multiply, otherwise it overwrites previous values of the set size. And on the X, we can say it's zero dot one and on the Y two, one dot five, and they are vertical. They are not following their velocity vector. It's a very easy fix on the orient, we can say it's a long velocity. And here we go. Beautiful. Now if you want, you can make sure they start small and then they get bigger because they are being sucked into the portal. You can play with that and then they can shrink down again, for example. We can also make sure that they fade, with the set color of life with a gradient similar to this one where they are visible in the beginning. We just need to make sure that composition is multiply, otherwise, it overwrites the set color we have above. And here we go. We have some stretched particles being sucked into the portal. But if we wanted to create a different portal from the same VFX Graph, for example, a space Portal, fortunately, that's very easy. We just need to expose a few properties. For example, for the texter one bright, the color, let's call it something like texter one and the scare color. Let's give it the same color we are currently using. Connect it right here and then create another property for a text two D. It's going to be our texter one. Use the same noise we are using right here and then connect it to the main text. You can do the same process for the text to Bright and then create another texta two D for the text three and the square dark. Then what we really need to expose is the cube map that we are using for the other side. Let's create a property for that. Call it text to other side. On that cube map, assign the current text that we are using and connect it right here. Other properties that we need to expose are the particles color and the stretched particles scholar. That's just a few. You can expose sizes and whatnot. But basically, once you have done it, you will have all of these parameters in the inspector. Let me just create a prefab out of this first portal. And then I'm going to enable, for example, this model for a space version. We can dragon drop the VFX Graph, make sure it's placed on the right position, and then it's just a matter of adjusting these properties. So for example, the first color can be blue. We can use the other texture we created. And if you want to adjust the tiling of this texture, you can expose that vector. Texter two color can be purple, and we can create a completely different texture for this texter two. We want to begin by searching for shape because with the shape, we can say it's a circle. As you can see on the preview to the window, we get a preview of the node you are selecting. First parameter is for size count, and the second one is control the size. We want to begin with something small like Zoda two, and last parameters control the fade. Let's set it to one. We get this tiny circle, this tiny blob of light, and there's a cool trick if we connect this to a tiler node. I will tie this in whatever way we want. I've tested a couple of values, and these are the ones that are best for the text we are going to create. Feel free to test different values, but essentially the tile X and the tile Y, you can set it ten by ten, so we can increase in density. Overlap is up much they can overlap with each other. Let's set it to four and I'll scale them up with 07 on the X and on the Y. Fixed offset to one, so we move horizontally, but most importantly random offset. All crazy and we break that grid pattern. Random rotation, since there are circles, we don't notice it, but random scale of Zillot eight and we get some circles that are bigger, others that are smaller, and that's great, because this will allow us to invert this gray scale, and we get a pretty cool texture. It looks like skin under microscope or some kind of weird component under a microscope. But we can go even further and use a blur, a Gosen blur, for example. Increase the grid size first so it has a better resolution, and that will fix it. Or you can play with the Sigma. To finish off a colorized node, we'll do the trick just fine if we push the black key to the right. As you can see, we get even more darker values, and that creates a pretty interesting contrast. And then we can export it. Let's assign this new text right here, and then we can change the cube map with something that looks like space like a galaxy. And then it's just a matter of changing the particle's color and the stretched ones as well. And here we go. We get a space like portal. Just going to create a prefab out of this. So that's it. We have two awesome working portals, very distinct from each other, and the result is amazing. Plus we have seen no properties can be super useful with VFX Graph, and we hope you guys have enjoyed this. Feel free to check out our profile. There's plenty more of this exercise coming up. So thanks for watching and see you on the next one.