Trying to load a Bezier Curve in the BabylonJS viewer from a glTF file (from Blender)

Questions
1

Hello,

I created a bezier curve in Blender and I exported the file as a glTF file which I dragged and dropped in the BabylonJS Viewer webpage.

There seems to be 2 issues occuring:

  • I get a message that says that there is a validation error in my glTF file (see the validation results below)
  • the glTF file is nonetheless loaded and I can see the BezierCurve in the Scene Explorer, however I can’t see it in the scene (see the screenshot below)…

Validation results:

image
image.png426×881 13.7 KB

Screenshot of BabylonJS Viewer:

image
image.png1169×487 22.9 KB

Original Scene in Blender:

image
image.jpg1142×596 186 KB

2

I’m not sure, but I think glTF specification doesn’t include curves (and so, not the exporter). I can’t see any mention of that in the specs or in the sample models.

In any way, just a raw curve couldn’t be visible, it’s a mathematical object, not a mesh (try render it in Blender, you can’t until you tell Blender to generate geometry from that curve, in the geometry panel of the curve property for example).

If you just need vertices once in BJS, maybe you can convert to mesh the raw curve, then exporting. But it will still not visible.

3

Or you can recreate the Bezier curve directly in BJS from the initial parameters

4

@Vinc3r yes indeed, it seems to be the case: Support for Curve Data · Issue #1258 · KhronosGroup/glTF · GitHub . I think that the Blender exporter does not support Bezier curve neither, right?

In fact, I need the actual curve I think, because it is to be used as a path to direct a camera (the player camera).

Also, I wanted to create this curve outside BabylonJS and preferentially in Blender, because I want my client to be able to tweak the curve (which will be part of a tile in a set of 3D tiles).

So I may need to find a curve exporter or write one for Blender, then import the file in BabylonJS and create the curves from the parameters found in the file :smiley: fun ahead!

5

It may be not too complicated, if you use in Blender the Object > Convert to > Mesh technic, and then once in BJS generate your path checking the curve-mesh vertices position (I saw this playground from the old forum and that makes me thinking about that). However I don’t know how to get vertices positions of a mesh, but it’s probably possible.

6

Just tried that and it does not work, the path converted into a mesh does not get exported. I need to extrude the path of vertices to a ribbon in order to get the mesh exported. I guess this is because the glTF format wants meshes with faces.

NOTE: this behaviour occurs with the Blender Exporter too (which I reported here: Blender 6.0 exporter for Blender 2.80).

7

I wonder if you can add a mesh to follow that curve in an animation, export to glTF, import to Babylon, then use the data from the animation?

8

Looks like simple & efficient solution indeed

9

Ok so, in fact, it was not too hard to write a Blender Script that export the coordinate of the points and their handles into a json file!

Here is my code, just copy paste it in Blender’s script editor:

import bpy

output = {}
output['curves'] = []
for curve in bpy.data.curves:
    print('Adding the curve: {}'.format(curve.name))
    control_points = curve.splines[0].bezier_points
    scale = bpy.data.objects[curve.name].scale[0]
    
    output['curves'].append({
        'name': curve.name,
        'points': []
    })
    
    out_points = output['curves'][-1]['points']
    
    for p in control_points:
        coord = p.co * scale
        l_handle = p.handle_left * scale
        r_handle = p.handle_right * scale
        print("\t - add points, coord: {}, left_handle: {}, right_handle: {}".format(coord, l_handle, r_handle))
        out_points.append({
            'coord' : coord[:],
            'right_handle' : r_handle[:],
            'left_handle' : l_handle[:],
        })
        
import json, os
filename = bpy.path.basename(bpy.data.filepath).split('.')[0]+'_curve_data.json'
with open(bpy.path.abspath('//'+filename), 'w') as f:
    print('\nWriting the output in:{}'.format(bpy.path.abspath('//'+filename)))
    json.dump(output, f, ensure_ascii=False)

import pprint
print('\nOutput preview:')
json_output = json.dumps(output)
pp = pprint.PrettyPrinter(indent=4)
pp.pprint(json_output)

The output will look like this:

{
	"curves": [
		{
			"name": "BezierCircle",
			"points": [
				{
					"coord": [
						-1.9336860179901123,
						3.6524300575256348,
						0.0
					],
					"right_handle": [
						-1.9362720251083374,
						5.938126087188721,
						0.0
					],
					"left_handle": [
						-1.931984543800354,
						2.148655414581299,
						0.0
					]
				}, ...
        }
    ]
}

Hope that can help some other people!

5 Likes
10

1.first create curve using path and profile in blender.
2.go to nurbes path in tree and check object selected or not.
3.try by increasing depth of profile.
4.convert that curved object into mesh.
5.load it into babylon.js sandbox.

1 Like