How to convert 2d lines in to a same exact shape of a 3d object.

Hi everyone,
Currently, I’m looking out for developing a game where I need some help from any of you guys.
What I’m looking for is, in unity if I draw a line on the screen then how can I turn that line into the exact shape of a 3d object (which has a width and able to add colliders to it). lines drawn are user-specific, I mean a user can draw any shape of 2d lines(but the user will draw only a continuous single line, not multiple lines) on the screen and that line I wanted to convert it to a 3d shape. any kind of help is appreciated.
Below here I’m attaching 2 reference images of an existing game in play store (where users can draw any shape of single line and that shape will be instantiated as climbing tire of the cube) in which they have already implemented the above-required feature so anyone can decode this, please.




1 Like

Yes, I have the same doubt if anyone is aware of how to implement this it would be of great help. I can get the 2D drawing input from user using LineRenderer but unable to change it to 3D object. Can anyone help?

I haven’t looked into this much, but could you keep it 2d and use a polygon collider 2d by passing Line Renderer points to it?

Ya, that we can do but in my case game is the 3D one.

@ysshetty96 you need a 2D line that has some thickness in 3D? You can’t obviously draw a “3D” shape… (x,y,z changes in position.)

You could just extract the points of your swipe and then procedurally build a mesh out of those.

EDIT: This Unity answers post seems to have something similar, which you could repurpose for your use-case:

1 Like

I have ended up doing something similar to this.

can you share the code.

Are you working on a 2d game or 3d game? because if you are working in a 2d game then easily you can convert image drawn on the screen into a mesh using unity internal function “LineRenderer.BakeMesh()”. My requirement was a 3d game so this was not working for me.
What I have done for 3d game is when the user was drawing the line on screen I was recording the position of each touch and then I was instantiating a cube in point and I was scaling it in a such a way that it will scale in the only one direction (z-axis) till the next consecutive point. but this is not an accurate way of doing this, but it is one of the ways, if you know how to generate mesh then you can go with that for accuracy. if you still need code let me know, I will share my project link here. it will take some time to upload:)

I am working on a 3d game. I am able to create the mesh from line renderer but now I want to increase its width. Can you suggest any way to do so.

Did you try with increasing its transform scale?

It will not work for me any other solution.

Are you two the same person? Or are the two usernames just oddly similar?

1 Like

:smile::smile:We are different, even I got surprised!!

In unity for scaling objects that is the only component we have if it is not working, I wanted to know your use case here so that I or someone else can give you a better solution.

I just want to build a clone of draw climber can you suggest any method to build the draw mechanism.

Hi , you can use the asset to create something same
VIDEO EXAMPLE

I am working on kinda similar project, trying to turn drawn line into 3d object, since 2d line renderer will not collide with 3d object. Can you help me on that?

I was working on a prototype project so while doing that I came across this, there are 3 ways to convert 2d lines to 3d.

  1. you have to create a drawn line mesh by code.

  2. or else there is a hacky way of doing this but it won’t be a perfect idea. but it depends on the situation, in my case I was okay with 2nd method so I did that.

  3. The last method is, LinerRenderer.BakeMesh(),
    to create 2d lines to mesh. but it wasn’t creating a mesh with depth so that wasn’t useful in my case. but you can try that once if it is helpful for you then you can proceed with that.

What I did in my second method is.

Step 1: Drawing on screen.
For this you can easily use line renderers, you can get a lot of youtube videos out there to draw a line using swipe.

Step 2: Convert drawn line to wheels of the moving object.
Here is the tricky part, in order to accomplish this you have 2 ways they are as follows

=> You can store user finger position on each frame while they are swiping on the screen, and then in order to construct mesh out of it what you can do is whatever the finger position you have stored in a list/array till the completion of the swipe(once they move up there finger) you can instantiate a cube/capsule/cylinder(whichever is preferable for your case but I have used cube) object in between each of these swipe and scale it in each so that its length will be equal to the distance between each consecutive finger positions what you have stored in your list/array. so this will construct a similar object to what the user has drawn on the screen(but it will consist of multiple cubes as you are going to instantiate cubes between each consecutive touch positions but you can combine it to a single object of a single mesh using unity internal function I,e “CombineMesh” about which you can get a lot of info on google).

=> The above method will work fine if you are just looking for a prototype unless you are looking for production then for a cleaner process what I suggest is to learn how to generate mesh using the finger positions array.

I hope you got some idea now!.

I actually once made a “cutout sprite extruder” in order to draw the classical minecraft item sprites in 3d (like the pickaxe you hold in your hand). For the top face I literally just used the normal cutout texture (so a single quad). In addition I created a mesh of the “boundary pixels” and aligned it properly with the sprite so it looks like a perfect 3d mesh even though it was a composite of a large point filtered sprite and the boundary mesh. This can be done in a single mesh. So you can have the front and back face be the same texture and just build the edges in between based on the texture pixels. The result looks like this:

The script is available over here (download). In this gif I switch to a non cutout shader for demonstration so you can see the actual mesh. Of course in order to use this script the used shader has to be a cutout shader and the used texture need to be point filtered and readable.

Of course this approach isn’t meant for “hand drawn lines”, but could in theory be used for that as well.

Unrelated to the question but related to my example: I created a very simple json based mesh format which was used to create the computercraft turtle in this example. The loader can be found here. It requires my SimpleJSON parser with the Unity extension. Link is in the header. The mesh file can be found here.

2 Likes