The json file format is a great! Not just for 3d data but for lots of things. It's very popular for web-based systems (storing and transfering data).
The file format itself is text-based and easy to read - but even greater - lots of languages (Java, Python, JavaScript, ..) all have builtin or free packages for parsing or creating json files! So you don't need to do the work of processing each character.
The file format is simple enough - as it's just text.
Blender Exporter (Vertices and Faces)
A few cool little things - in blender you can export your data as 'json'. Just open up Blender (3.x), select the object you want to export - select the
Scripting
tab at the top - and you can write/run small python programs.
The following is a juicy little python script for Blender that exports the mesh data.
import bpy import json
def export_mesh_data(obj): mesh_data = {}
vertices = [] for vertex in obj.data.vertices: vertices.append((vertex.co.x, vertex.co.y, vertex.co.z)) mesh_data['vertices'] = vertices
faces = [] for face in obj.data.polygons: faces.append([v for v in face.vertices]) mesh_data['faces'] = faces
return mesh_data
def export_json(filename): scene = bpy.context.scene selected_objects = [obj for obj in scene.objects if obj.select_get() and obj.type == 'MESH']
exported_data = {} for obj in selected_objects: exported_data[obj.name] = export_mesh_data(obj)
# Specify the full path where you have write permissions with open(filename, 'w') as file: json.dump(exported_data, file, indent=4)
# Change the path to your desired export location export_json("C:/exported_temp.json")
The json file for a cube.json from the above exported script looks like:
The Blender window with the cube and the script should look something like this:
Full window screenshot showing Blender, script, cube model. Red circles show the cube mesh (selected), scripting tab, script and the run button.
Triangles - Only Triangles (NO QUADS)
The previous example worked - but the exported data kept the format that Blender was using - so if it was storing surfaces as quads the exported JSON contained quads! But most of the time we want triangles!
So a few extra lines - we convert any quads to triangles
import bpy import json
def export_mesh_data(obj): mesh_data = {}
vertices = [] for vertex in obj.data.vertices: vertices.append((vertex.co.x, vertex.co.y, vertex.co.z)) mesh_data['vertices'] = vertices
faces = [] for face in obj.data.polygons: if len(face.vertices) == 4: # Check if the face is a quad # Convert quad to two triangles faces.append([face.vertices[0], face.vertices[1], face.vertices[2]]) faces.append([face.vertices[0], face.vertices[2], face.vertices[3]]) else: faces.append([v for v in face.vertices]) mesh_data['faces'] = faces
return mesh_data
def export_json(filename): scene = bpy.context.scene selected_objects = [obj for obj in scene.objects if obj.select_get() and obj.type == 'MESH']
exported_data = {} for obj in selected_objects: exported_data[obj.name] = export_mesh_data(obj)
# Specify the full path where you have write permissions with open(filename, 'w') as file: json.dump(exported_data, file, indent=4)
# Change the path to your desired export location export_json("C:/Pro2/exported_cube.json")
This is what the modified export look like now (3 indices per face - triangle):
Taking the simple example from previously further - you can export lots of other mesh data (e.g. UVs and Colors).
import bpy import json
def export_mesh_data(obj): print("Exporting mesh data for object:", obj.name) mesh_data = {}
vertices = [] for vertex in obj.data.vertices: vertices.append((vertex.co.x, vertex.co.y, vertex.co.z)) mesh_data['vertices'] = vertices print("Vertices exported:", len(vertices))
faces = [] for face in obj.data.polygons: faces.append([v for v in face.vertices]) mesh_data['faces'] = faces print("Faces exported:", len(faces))
# Check if vertex colors are present if obj.data.vertex_colors: vertex_colors = {} for layer_name, color_layer in obj.data.vertex_colors.items(): vertex_colors[layer_name] = [] for loop_index, loop in enumerate(obj.data.loops): color = color_layer.data[loop_index].color vertex_colors[layer_name].append((color.r, color.g, color.b, color.a)) mesh_data['vertex_colors'] = vertex_colors print("Vertex colors exported for layers:", list(vertex_colors.keys()))
# Check if UV coordinates are present if obj.data.uv_layers: uv_coordinates = {} for layer_name, uv_layer in obj.data.uv_layers.items(): uv_coordinates[layer_name] = [] for loop_index, loop in enumerate(obj.data.loops): uv_coordinate = uv_layer.data[loop_index].uv uv_coordinates[layer_name].append((uv_coordinate.x, uv_coordinate.y)) mesh_data['uv_coordinates'] = uv_coordinates print("UV coordinates exported for layers:", list(uv_coordinates.keys()))
return mesh_data
def export_json(filename): print("Starting JSON export...") scene = bpy.context.scene selected_objects = [obj for obj in scene.objects if obj.select_get() and obj.type == 'MESH'] print("Selected objects for export:", [obj.name for obj in selected_objects])
exported_data = {} for obj in selected_objects: exported_data[obj.name] = export_mesh_data(obj)
with open(filename, 'w') as file: json.dump(exported_data, file, indent=4)
print("JSON export completed.")
# Change the path to your desired export location export_json("C:/modelwithvfuvc.json")
If yoyu open the json file in your favorite text editor (like notpad++) you can view the structure/layout. For example:
Exported json file - viewed in notepad++ but have minimized the numbers so you can see the overall structure.
You need normals! Without them how do you add lighting?
So let's extend the json file exporter so it includes normal data.
import bpy import json
def export_mesh_data(obj): mesh_data = {}
vertices = [] normals = [] # New list to store vertex normals uv_coordinates = [] # New list to store UV coordinates vertex_colors = [] # New list to store vertex colors
for vertex in obj.data.vertices: vertices.append((vertex.co.x, vertex.co.y, vertex.co.z))
# Extract vertex normals for loop in obj.data.loops: normals.append((loop.normal.x, loop.normal.y, loop.normal.z))
# Extract UV coordinates uv_layer = obj.data.uv_layers.active.data if obj.data.uv_layers.active else None if uv_layer: for loop in obj.data.loops: uv_coordinate = uv_layer[loop.index].uv uv_coordinates.append((uv_coordinate.x, uv_coordinate.y))
# Extract vertex colors color_layer = obj.data.vertex_colors.active.data if obj.data.vertex_colors.active else None if color_layer: for loop in obj.data.loops: color = color_layer[loop.index].color vertex_colors.append((color.r, color.g, color.b, color.a))
faces = [] for face in obj.data.polygons: if len(face.vertices) == 4: # Check if the face is a quad # Convert quad to two triangles faces.append([face.vertices[0], face.vertices[1], face.vertices[2]]) faces.append([face.vertices[0], face.vertices[2], face.vertices[3]]) else: faces.append([v for v in face.vertices]) mesh_data['faces'] = faces
return mesh_data
def export_json(filename): scene = bpy.context.scene selected_objects = [obj for obj in scene.objects if obj.select_get() and obj.type == 'MESH']
exported_data = {} for obj in selected_objects: exported_data[obj.name] = export_mesh_data(obj)
# Specify the full path where you have write permissions with open(filename, 'w') as file: json.dump(exported_data, file, indent=4)
# Change the path to your desired export location export_json("C:/modelwithvfuvcn.json")
Bringing it all together - Adding Export Button
In Blender, as you must already know, there is an 'export' option in the File menu. So let's take the 'json' exporter and build it into an export button.
JSON Exporter Button
import bpy import json
def export_mesh_data(obj): mesh_data = {}
vertices = [] normals = [] # New list to store vertex normals uv_coordinates = [] # New list to store UV coordinates vertex_colors = [] # New list to store vertex colors
for vertex in obj.data.vertices: vertices.append((vertex.co.x, vertex.co.y, vertex.co.z))
# Extract vertex normals for loop in obj.data.loops: normals.append((loop.normal.x, loop.normal.y, loop.normal.z))
# Extract UV coordinates uv_layer = obj.data.uv_layers.active.data if obj.data.uv_layers.active else None if uv_layer: for loop in obj.data.loops: uv_coordinate = uv_layer[loop.index].uv uv_coordinates.append((uv_coordinate.x, uv_coordinate.y))
# Extract vertex colors color_layer = obj.data.vertex_colors.active.data if obj.data.vertex_colors.active else None if color_layer: for loop in obj.data.loops: color = color_layer[loop.index].color vertex_colors.append((color.r, color.g, color.b, color.a))
# Flatten the ararys - instead of = [ [2,3], [2,1], [2,4,5] ] - you have - [2,3,2,1,2,4,5] mesh_data['vertices'] = [ list(i) for i in vertices ] mesh_data['normals'] = [ list(i) for i in normals ] mesh_data['uv_coordinates'] = [ list(i) for i in uv_coordinates ] mesh_data['vertex_colors'] = [ list(i) for i in vertex_colors ]
faces = [] for face in obj.data.polygons: if len(face.vertices) == 4: # Check if the face is a quad # Convert quad to two triangles faces.append([face.vertices[0], face.vertices[1], face.vertices[2]]) faces.append([face.vertices[0], face.vertices[2], face.vertices[3]]) else: faces.append([v for v in face.vertices]) mesh_data['faces'] = [ list(i) for i in faces ] mesh_data['faces'] = sum( mesh_data['faces'], [] )
return mesh_data
def export_json(filename): scene = bpy.context.scene selected_objects = [obj for obj in scene.objects if obj.select_get() and obj.type == 'MESH']
exported_data = {} for obj in selected_objects: exported_data[obj.name] = export_mesh_data(obj)
# Specify the full path where you have write permissions with open(filename, 'w') as file: json.dump(exported_data, file, indent=4)
# ExportHelper is a helper class, defines filename and # invoke() function which calls the file selector. from bpy_extras.io_utils import ExportHelper from bpy.props import StringProperty, BoolProperty, EnumProperty from bpy.types import Operator
class ExportSomeData(Operator, ExportHelper): """This appears in the tooltip of the operator and in the generated docs""" bl_idname = "export_test.some_data" # important since its how bpy.ops.import_test.some_data is constructed bl_label = "Export Some Data"
# ExportHelper mix-in class uses this. filename_ext = ".json"
filter_glob: StringProperty( default="*.json", options={'HIDDEN'}, maxlen=255, # Max internal buffer length, longer would be clamped. )
# List of operator properties, the attributes will be assigned # to the class instance from the operator settings before calling. use_setting: BoolProperty( name="Example Boolean", description="Example Tooltip", default=True, )
# Only needed if you want to add into a dynamic menu def menu_func_export(self, context): self.layout.operator(ExportSomeData.bl_idname, text="JSON Exporter (XBDEV)")
# Register and add to the "file selector" menu (required to use F3 search "JSON Exporter" for quick access). def register(): bpy.utils.register_class(ExportSomeData) bpy.types.TOPBAR_MT_file_export.append(menu_func_export)
# test call # bpy.ops.export_test.some_data('INVOKE_DEFAULT')
The export example has some redundant options for the popup dialog - quick and dirty example to give you something that works and lets you focus on the JSON format for you cool demos! Feel free to use it and tidy it up - adding other features/options (e.g., add menu options to the exporter to enable/disable things in the output JSON file)
To give you an example of how you might use the JSON 3D file format in WebGL or WebGPU API. Just the loading and getting the data ready.
// get some model data (use json as it's easy to load/setup) let response = await fetch('./var/scripts/cube.json'); // parse json file let json = await response.json();
const positions = new Float32Array( json.vertices ); let normals = new Float32Array( json.normals ); const indices = new Uint16Array( json.faces );
// ready to go! use vertices/faces in webl or webgpu api - so easy!!
Things to Try
Extra things to do:
• Add version and signiture to the json file (when the json file is loaded you can check which version/type it is - in case it's another json file that isn't supported by your loader)
• Add a dialog that pops up for the exporter to give extra options (e.g., triangles, UV coordinates, colors, ...)
• Debug information if no object is selected (e.g., dialog that informs the user) - basically extra help to make the export script more friendly :)
Other Resources
• Visit https://free3d.com/ for lots of free test models (load in Blender - import) [LINK]
• WebGPU Demo (WebGPULab) - loads json file and renders the model (in the Web Browser) [LINK]
• Example 'cow.json' [LINK]
color_layer = obj.data.vertex_colors.active.data if obj.data.vertex_colors.active else None
for face in obj.data.polygons: if len(face.vertices) == 4: # Check if the face is a quad # Convert quad to two triangles i0 = face.vertices[0] i1 = face.vertices[1] i2 = face.vertices[2] i3 = face.vertices[3]
color_layer = obj.data.vertex_colors.active.data if obj.data.vertex_colors.active else None
for face in obj.data.polygons: if len(face.vertices) == 4: # Check if the face is a quad # Convert quad to two triangles i0 = face.vertices[0] i1 = face.vertices[1] i2 = face.vertices[2] i3 = face.vertices[3]
