Creating a Granite-Tiled Wall Corner in Blender Using Python API and Displaying It in the Browser with Model-Viewer
In this tutorial, we will learn how to use Blender’s Python API to create a simple tiled wall corner with a granite texture, lighting it using an HDR image from the Courtyard EXR in Blender 4.5 LTS. We will also explore how to export the model to a format that can be easily displayed in the web browser using the <model-viewer> element. This approach will allow us to visualize 3D models directly in the browser, providing an interactive experience for website visitors.
1. Setting up Blender for Python Scripting
First, ensure that you have Blender installed on your machine. Blender 4.5 LTS is the latest Long-Term Support release, and for this tutorial, we will use the Python API to create a tiled wall corner and apply a granite texture. To begin, open Blender and start a new project.
2. Generating a Tiled Corner Using Blender Python API
Blender provides a comprehensive Python API that lets us automate the creation of 3D models. Below is a simple Python script that generates a tiled corner wall and applies a granite texture. This script should be run from the command line within Blender’s scripting environment.
import bpy
# Clear existing objects in the scene
bpy.ops.object.select_all(action='SELECT')
bpy.ops.object.delete()
# Create the corner base
bpy.ops.mesh.primitive_cube_add(size=2, location=(0, 0, 1))
wall = bpy.context.active_object
wall.name = 'Wall'
wall.scale = (1, 0.1, 3)
# Create the second wall
bpy.ops.mesh.primitive_cube_add(size=2, location=(0, 1, 1))
wall2 = bpy.context.active_object
wall2.name = 'Wall2'
wall2.scale = (1, 0.1, 3)
# Apply a granite texture to the walls
# Load a granite image or procedural texture
granite_texture = bpy.data.textures.new('GraniteTexture', 'IMAGE')
granite_image = bpy.data.images.load('path/to/granite_image.jpg')
granite_texture.image = granite_image
# Create material and assign it to the walls
material = bpy.data.materials.new(name='GraniteMaterial')
material.use_nodes = True
material.node_tree.nodes['Principled BSDF'].inputs['Base Color'].default_value = (0.3, 0.3, 0.3, 1)
material.node_tree.nodes['Principled BSDF'].inputs['Roughness'].default_value = 0.7
material.node_tree.nodes['Principled BSDF'].inputs['Specular'].default_value = 0.5
wall.data.materials.append(material)
wall2.data.materials.append(material)
# Add HDR Lighting (Courtyard EXR)
bpy.context.scene.world.use_nodes = True
world = bpy.context.scene.world
node_tree = world.node_tree
bg_node = node_tree.nodes['Background']
bg_node.inputs['Color'].default_value = (1, 1, 1, 1)
bg_node.inputs['Strength'].default_value = 1.0
env_texture = node_tree.nodes.new('ShaderNodeTexEnvironment')
env_texture.image = bpy.data.images.load('path/to/courtyard.exr')
node_tree.links.new(env_texture.outputs['Color'], bg_node.inputs['Color'])
# Save the scene as a .glb file for web use
bpy.ops.export_scene.gltf(filepath='path/to/exported_model.glb')
3. Exporting to GLTF for Browser Use
The GLTF (GL Transmission Format) is an open standard file format for 3D models that is widely supported across web applications. Once you’ve generated the model, export it in .glb format using the command provided in the Python script. The .glb format is great for web browsers since it is optimized for fast loading and can include textures, animations, and materials.
bpy.ops.export_scene.gltf(filepath='path/to/exported_model.glb') GLTF files can be viewed directly in the browser with <model-viewer>, an easy-to-use web component that supports various 3D formats, including .glb files.
4. Displaying the Model in the Web Browser with <model-viewer>
To display your model in a web browser, embed it using the <model-viewer> tag in an HTML document:
<h1>Granite Tiled Corner Wall</h1>
<model-viewer src="path/to/exported_model.glb" alt="Granite Tiled Corner" auto-rotate camera-controls></model-viewer>
Be sure to replace path/to/exported_model.glb with the actual path to your .glb file.
5. Supported File Formats for Web Browsers
When working with 3D models for the web, it’s important to choose a format that is well-supported across all browsers. Here’s a breakdown of some common formats:
- .hdr and .exr: These are high dynamic range image formats, commonly used for environment maps (HDRI). While supported by some web tools, these formats are not as widely supported directly in web browsers.
- .ktx and .ktx2: These formats are great for storing textures in compressed form. KTX2 has better support for modern web browsers, and can be used with WebGL for efficient texture mapping. However, it still requires a bit more setup than .glb.
- Open-source alternatives: The glTF format is highly recommended for 3D models on the web, and is open source, lightweight, and efficiently supported by browsers.
For best results and browser compatibility, I recommend using the .glb (binary glTF) format for model display in the browser.
6. Running the Python Script on the Command Line
To run the Python script from the command line, open a terminal and execute the following command (make sure Blender is installed and added to your system path):
blender --background --python path/to/your/script.py This command runs Blender in the background and executes the Python script, automatically generating your 3D model and exporting it in the desired format.
📸 Screenshots & Screencast
Conclusion
With this tutorial, you’ve learned how to create a tiled granite corner wall in Blender using Python, apply HDR lighting with an EXR image, and export your work to a web-friendly GLTF format for display in the browser. This technique is useful for web developers and 3D artists who want to bring their creations to life on the web with minimal hassle.
Additional Resources
For more information on Python programming, check out my books:
You can also explore my course Learning Python, which is perfect for beginners looking to dive into Python programming.
If you’re looking for personalized instruction, I offer one-on-one Python tutorials, including topics on Blender Python scripting.
