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.
t 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
t 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).
t 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.
t 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))
mesh_data['vertices'] = vertices
mesh_data['normals'] = normals
mesh_data['uv_coordinates'] = uv_coordinates
mesh_data['vertex_colors'] = 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'] = 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
t 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 ]
mesh_data['vertices'] = sum( mesh_data['vertices'], [] )
mesh_data['normals'] = sum( mesh_data['normals'], [] )
mesh_data['uv_coordinates'] = sum( mesh_data['uv_coordinates'], [] )
mesh_data['vertex_colors'] = sum( mesh_data['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)
def write_some_data(context, filepath, use_some_setting):
print("running write_some_data...")
export_json( filepath )
return {'FINISHED'}
# 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,
)
type: EnumProperty(
name="Example Enum",
description="Choose between two items",
items=(
('OPT_A', "First Option", "Description one"),
('OPT_B', "Second Option", "Description two"),
),
default='OPT_A',
)
def execute(self, context):
return write_some_data(context, self.filepath, self.use_setting)
# 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)
def unregister():
bpy.utils.unregister_class(ExportSomeData)
bpy.types.TOPBAR_MT_file_export.remove(menu_func_export)
if __name__ == "__main__":
register()
# 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.
n>// 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();
console.log('vertices:', json.vertices.length );
console.log('faces:' , json.faces.length );
console.log('normals:' , json.normals.length );
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]
Extend the previous version but also include at global material index list - each face has a material index. Shapes with the same material have the same index.
