Any good bezier spline editors?

Any good cubic bezier spline editor that can export raw control points? I want to be able to define curves for data and possibly use THREE.CubicBezierCurve(s) (or write my own) to process them.

I’m looking for something like Blender’s Graph Editor, or Unity’s curve editor that allows you to create a cubic bezier spline (multiple cubic bezier curves pieced together). But one that can export the control points (unsampled) directly.

Some references:
Blender’s Graph editor

Unity’s Curve editor

I’ve seen https://cubic-bezier.com/ already, its a great tool, but its only useful for a single bezier curve, not a spline.

EDIT: To clarify, I’m looking for a 2D editor, like the kind of animation curve editor you would find in game engines or rendering engines (see references)

There is an editor in the examples which can actually export. It isn’t working with tangent-control points, but you could easily extend it for this case if needed.
https://threejs.org/examples/#webgl_geometry_spline_editor

1 Like

Thanks for the response, I should have mentioned that its a 2D editor I’m looking for (see references). It looks like it would be a lot of work to extend that 3D catmull spline editor to a 2D bezier animation curve editor.

Been searching around for some more solutions and I’m thinking the best solution might be to use Blender’s Graph Editor to create the curves and write a Blender add-on to export the raw control points instead.

2D is very simple to make with a canvas, you can literally just use points you pass through bezierCurveTo. That is quiet less effort than writing a blender plugin, but you know best what you need.

I’m also quite sure there is an editor like the one you linked for full paths. From a quick search: http://jsfiddle.net/halfsoft/Gsz2a/

1 Like

Ah yeah, that looks like a great tool. It seems to be a pain UI-wise compared to Blender’s editor (need to specify starting points manually instead of clicking at a location) but maybe with a bit more work it can be enough for what I need. Thanks again!

1 Like

Yeah it’s just a fiddle, i’d always go with a canvas implementation since you have more easier control over automation. And it’s really not much work, i’ve implemented bezier editors several times just as they mostly have a specific use case, recent one was for facial morph animations for my game.

For basic path data you don’t need to calculate anything, just apoints to add and remove, maybe automatically mirror tangent points only break with holding shift for example.

4 Likes

Wow, that looks really amazing

And yeah agreed, it definitely would be better in the long run to make a custom bezier editor. I’ll keep this thread updated with the solution I end up going with

1 Like

Provotis: = Spline Editor + Line Segmentation
Demo: https://mbostock.github.io/protovis/ex/splines.html
image


Bezier vs Spline
https://richardfuhr.neocities.org/BusyBCurves.html

YouTube


D3 Spline Editor
Demo + Code: https://observablehq.com/@mbostock/d3-spline-editor


JSFiddle
http://jsfiddle.net/bobcook/ax1aLm8q/


JSFiddle
Uses Raphael 2.1.0
http://jsfiddle.net/cordesmj/4e2am/
image

Stackoverflow


JSBin
https://output.jsbin.com/ApitIxo/2/

Stackoverflow


Cardinal spline for canvas
Github = curve.js


Related:
Github repo for epistemex no longer exists with the original, this appears to be the original article related to curve.js


Possibly moved to Gitlab:
gitlab.com/epistemex/cardinal-spline-js


Demo:
https://zz85.github.io/threejs-path-flow/flow.html

Github:


Demo
https://nylki.github.io/fit-bezier-3d-visualization/

Github


Articles:
https://pomax.github.io/bezierjs/

Github


Spine editor have to pay for this one
Features: http://esotericsoftware.com/spine-in-depth
Demo(s): http://esotericsoftware.com/spine-demos


References

7 Likes

hey! I needed this pretty badly for a project and hacked something together, based off of https://mbostock.github.io/protovis/ex/splines.html

My hack was to export the curve directly into a THREE.SplineCurve constructor, and also set up the initial spline so that it is more useful for creating easing curves (ranged 0-1 & linear to begin with).

Hope it is helpful, link is here : https://sneha-belkhale.github.io/threejs-spline-exporter/index.html

4 Likes

Nice one.
This, however, cannot export or locate the coordinate points.

Hm, what do you mean by export? The coordinate points are exported as Vector2’s