How to Draw in VR - Unity Tutorial

there is something so cool and immersive when you draw in VR from Elf life Alex to non-gaming app like Horizon workspace I've always loved messing around with these features and today I have the pleasure to show you how you can make it for your own VR game immunity so in this video we are going to see how to set up a drawing canvas make marker of different color and even write on transparent surface but that's not it a second secret part of this video will be uploaded on my patreon where we will set up a mixed priority game on a surface and use this exact technique to paint on my desk so if you'd like to learn how to do this yourself and get access to the source code of this project you can join us on patreon link in the description below but without further Ado let's get started okay so I'm inside a new Unity project I'm using urp for this one but this skin works also for the standard pipeline as well and before recording I quickly made the VR setup with this XR rig and made this marker of different color grabbable but of course this wrong technique can work with any game not just in VR so the first thing that we are going to do is create a plane to write on so I'm going to right click in the ER Key 3D object plane we can rename it draw canvas so you can actually scale This Plane as you want in my case I will scale it to 0.1 on all axis and then move it next to our table perfect next I'm going to create a new camera as a child of this plane we can right click on it select camera and we can rename this camera draw camera and move it to face in the direction of the plane now we can remove its audio listener and finally let's set this camera from perspective to autographic project now the next step is to create a render texture in the project folder so let's right click create render texture we can rename it draw canvas render texture and on this render texture we can set the resolution we want for the drawing so pick Evol here do not set it too low otherwise the drawing will be pixelated or 2i for optimization reasons so in my case I think I will set it to 2048 and 2048. now it is not worthy that if your draw canvas is not a square ratio you need to set the resolution of the render texture accordingly so for example if the plane was two times bigger on the x-axis we would need to write 2048 times 1024 or 4096 times 2048 here or anything else that has a two to one ratio so in my case I will keep everything simple and keep a square draw canvas and a 2048 resolution now that we have a render texture we can simply drag it to the output texture of our draw camera there we can see that the camera has now the same ratio as the draw canvas and now we are almost done with the camera setup what's left is to use the projection size and the clipping plane here to make the camera fit the exact same shape as the plane so for this let's set the size to 0.5 and the near Play 2 2 minus 0.04 and far20.01 and there you go and also make sure that the position of the draw camera is at zero zero zero just like this perfect now as you can see the zoom that the camera will see is just a little bit in front of this canvas and this is the old point of this awesome technique right there now using this orthographic camera everything that touch the plane will be seen by the camera and then sent to the render texture now maybe you are starting to see where I'm going now if we create a new material by right clicking into project create material call it draw canvas material we can assign it to our draw canvas plane and now use the render texture from earlier on this base map already we can see some things that are happening if I approach one of the marker you can see that it not appear on the plane as well so to sums up when the marker entered the plane it's seen by the camera and then send to the render sure that is used on the texture of the plane now we can make the color show exactly where the marker is by rotating here the camera 180 degrees okay so now we can see a kind of protection on the plane which is already super cool by the way and this is a technique that you can use to quickly create some quick Shadow for example but now what we want to do is to keep the color on the cannot vest when we move the marker to create the drawing Behavior so for this we simply need to go back to our orthographic camera and here on the background type set it from Skybox to uninitialize now if we move the marker well it does not seem to do anything but it is working it's just because the camera is also seeing here the Drew canvas material itself and overriding it on top of what we draw so a fix to this problem is to create a new layer by clicking here on layer add layer add a marker layer and assign this new layer on all of our marker and now in draw camera we can go to cooling mask first on nothing and then only set it to marker so that the camera will only see the marker and nothing else and now the magic happened if I try to move the marker on the canvas it is working we are now able to draw on the canvas this is awesome okay so at this point we can draw on the canvas with this marker but the good use is that this also works with any other marker of different color basically the drain just copy what the camera sees so if we change the material of the marker like here set it to transparent and reduce its opacity we can have a nice feeling effect this is pretty cool now in my case I will leave everybody to a pack now you can of course experiment on your end with any marker that you want you can use even some different texture for different brush but it is important here to set the material to two-sided this way the color will still show even if the camera see inside of the marker and also if you feel like the camera is not precise enough or too precise you can tweak the near and fair play Lane of the camera okay so at this point we still have one little issue which is I can try to change the color of the draw canvas as much as I want but nothing happens and the reason is simple it's because it's used the background color of the orthographic camera so to fix this we are going to make a custom Shader ourselves for the true canvas and that we will be able to use to create some cool transparent surface so let me show you to create a custom Shader with Shadow graph let's right click in Project create Shader Universe Airbender pipeline lit cheddar we can call it draw canvas Shader now if you are not familiar with new t-shadow graph don't worry I will try to give you an idea of what is going on so the idea of custom Shader is to say our texture color lighting influence the look of our object so in our case we are going to need three parameters a color for the color of the background of the canvas called color a texture 2D called cam texture for what the camera will see so basically where we will draw and finally a float value called Alpha pressure which I'm going to talk about in a minute now my technique will be to find where the plane has terrain on it and where it has not so to know this we can drag our cam texture give it as an input to the sample texture to the node now simply to know if there is paint on the texture or not I'm going to create a new node called comparison and drag there the alpha of the texture and the alpha threshold parameter and select greater or equals next we can add a branch node and drag there or comparison so what we made here is compare if the texture has paint or Not by looking at its Alpha value and if it's greater than a certain threshold in this case it means true and we want to use our sample texture but if it is not we can use the color parameter of the canvas this way it will be used as the background now simply we can drag this in the base color of our Shader say go back to Unity go back to RC and now assign this Shader to the draw canvas we can redrack the render texture in the cam texture of there set the alpha threshold to 0.1 and there you go already we can have a look at the result Now using this Shader we have separated the drain from the color and we can change the background as we want but that's not it we can use the same technique for the transparencies as well so let's go back to our Shader in the graph setting we can set the surface to transparent and now we can use the alpha value of the color and the cam texture by adding a split node drag there or result and connect it to the alpha parameter but now if we save as you can see it works I can change the alpha of the color and it will not change the alpha of the drawing this make this string looks really good on this plane but this is not it because with what we made we have also used the opacity of the marker itself so if we reduce their Alpha value as you can see we can draw with a certain opacity on the canvas and the opacity of where the marker is drawn is different from the background this looks awesome and using this exact same think we can actually make an eraser simply by setting the alpha to zero and now as you can see with Alpha of zero it erase and show the background instead and there you go guys from there you can build upon this Shader to create more realistic look for your game for example in my case to create this cool realistic class look I've simply added a normal map on the true canvas to create this kind of dirty window and set the color to something a bit bluish and just like this we get the same result as in Alpha life Alex now what's left is to grab the VR headset take the marker and have some fun with this result and there it is hope you guys enjoyed this tutorial I think the result turned out so cool don't hesitate to leave a like And subscribe down below and of course to grab the source code on my patreon if you'd like to support my work this really means a lot don't forget that an exclusive content will be available soon on patreon where we will use this exact technique on a real desk so if you have to learn how to do this yourself join us Link in the description below and thank you for watching see you soon bye [Music] foreign [Music]

Channel: Valem Tutorials

Views: 20,433

Keywords: vr drawing, whiteboard vr, vr drawing unity, how to draw in vr, draw canvas unity, half life alyx drawing, workspace horizon drawing, draw on surface unity, transparent surface drawing unity, valem, valemvr, how to make a vr game, valem tutorials, valem tutorial, beginner xr tutorial, how to make a virtual reality game in unity, introduction to vr development, unity xr toolkit, virtual reality, virtual reality unity tutorial, vr tutorial beginner, vr unity basics

Id: VAnBM18Q5Ow

Length: 10min 5sec (605 seconds)

Published: Sun Oct 23 2022