Bezier Curves OpenGL Move 3d Space According to 2d space

Question

I am trying to think about the following problem logically:

Move an object in the 3d space in a fashion that represents a 2d user-generated bezier curve.

As of right now, the user can create his own bezier curve (Which can be seen on the right - I render it via a shader and have access to the x,y of each control point) . As of right now it has 4 control points that are moveable.

I can't seem to think of a way to convert this 2d curve into 3d space movement. Trying to achieve the following:

From a lot of googling, I did find some resources but they all had info about how to convert the 2d point into 3d space and that is not what I want.

Thanks to whoever tries to help, currently lost. I don't need code but more of actual help in approaching such a problem.

Great day.

Answer 1

In a two-dimensional plane, a point is defined by one or more combinations of its two basis vectors. (More combinations are possible if the two basis vectors are not orthogonal)

To project a point onto a three-dimensional plane, you need to embed the two-dimensional vectors b1 and b2 into three-dimensional space and apply a translation t (if needed). In general, this matrix looks like:

[ b1x b2x tx ]
[ b1y b2y ty ]
[ b1z b2z tz ]

and you multiply (x,y, 1 ) by the matrix above. If you multiply by (x,y,0) the translation is ignored which is not what you want in general.

Luckily, if you stick to an axis-aligned plane this is a lot simpler. If we pick the z=0 plane, then the basis vectors are (1,0,0) and (0,1,0) and the translation is (0,0,0). The matrix then becomes

[ 1 0 0 ]
[ 0 1 0 ]
[ 0 0 0 ]

and (x,y,1) times that matrix is just (x,y,0).
In other words, you can simply do:

vec2 bezier_2d = bezier(t);
vec3 bezier_3d = vec3(bezier_2d.x, bezier_2d.y, 0);
vec3 box_pos = original_pos + bezier_3d * scale;

where bezier(t) computes the value of the bezier function for a given timestep.