Blender Web Pipeline

概要

Blender Web Pipeline スキルは、Blender から Web 最適化フォーマット（主に glTF 2.0）へ 3D モデルとアニメーションをエクスポートするためのワークフローを提供します。バッチ処理用の Python スクリプティング、Web パフォーマンスの最適化テクニック、Three.js や Babylon.js といった Web 3D ライブラリとの統合をカバーしています。

このスキルを使用する場合：

• Web アプリケーション用に Blender モデルをエクスポート
• 複数の 3D アセットをバッチ処理
• Web 配信用のファイルサイズを最適化
• 反復的な Blender タスクを自動化
• 3D Web コンテンツ用の本番パイプラインを作成
• レガシーフォーマットを glTF に変換

主な機能：

• glTF 2.0 エクスポート（最適化付き）
• Python（bpy）自動化スクリプト
• テクスチャ焼き付けと圧縮
• LOD（Level of Detail）生成
• バッチ処理ワークフロー
• Web 用のマテリアルとライティング最適化

コアコンセプト

glTF 2.0 フォーマット

Web で glTF を使用する理由：

• Web の業界標準 3D フォーマット
• 効率的なバイナリエンコーディング（.glb）
• PBR マテリアルサポート
• アニメーションとスキニング
• カスタムデータで拡張可能
• 幅広いライブラリサポート（Three.js、Babylon.js など）

glTF vs GLB：

.gltf = JSON + 外部 .bin + 外部テクスチャ
.glb  = 単一バイナリファイル（Web に推奨）

Blender Python API（bpy）

Python で Blender データと操作にアクセス：

import bpy

# シーンデータにアクセス
scene = bpy.context.scene
objects = bpy.data.objects

# オブジェクトを修正
obj = bpy.data.objects['Cube']
obj.location = (0, 0, 1)
obj.scale = (2, 2, 2)

# glTF をエクスポート
bpy.ops.export_scene.gltf(
    filepath='/path/to/model.glb',
    export_format='GLB'
)

Web 最適化の目標

ターゲット メトリクス：

• ファイルサイズ：モデルあたり <5 MB（理想は <1 MB）
• ポリゴン数：リアルタイム用 <50k トライアングル
• テクスチャ解像度：最大 2048x2048（推奨 1024x1024）
• ドローコール：テクスチャアトラスで最小化
• 読み込み時間：平均接続で <2 秒

一般的なパターン

1. 基本的な glTF エクスポート（マニュアル）

# Blender Python コンソールまたはスクリプト

import bpy

# エクスポートするオブジェクトを選択（オプション - 選択なしの場合は全てエクスポート）
bpy.ops.object.select_all(action='DESELECT')
bpy.data.objects['MyModel'].select_set(True)

# GLB としてエクスポート
bpy.ops.export_scene.gltf(
    filepath='/path/to/output.glb',
    export_format='GLB',                # バイナリフォーマット
    use_selection=True,                 # 選択されたもののみエクスポート
    export_apply=True,                  # モディファイアーを適用
    export_texcoords=True,              # UV 座標
    export_normals=True,                # 法線
    export_materials='EXPORT',          # マテリアルをエクスポート
    export_colors=True,                 # 頂点カラー
    export_cameras=False,               # カメラをスキップ
    export_lights=False,                # ライトをスキップ
    export_animations=True,             # アニメーションを含める
    export_draco_mesh_compression_enable=True,  # ジオメトリを圧縮
    export_draco_mesh_compression_level=6,      # 0-10（6 推奨）
    export_draco_position_quantization=14,      # 8-14 ビット
    export_draco_normal_quantization=10,        # 8-10 ビット
    export_draco_texcoord_quantization=12       # 8-12 ビット
)

2. バッチエクスポート用 Python スクリプト

#!/usr/bin/env blender --background --python
"""
ディレクトリ内の全ての .blend ファイルを glTF にバッチエクスポート
使用方法: blender --background --python batch_export.py -- /path/to/blend/files
"""

import bpy
import os
import sys

# -- の後のコマンドライン引数を取得
argv = sys.argv
argv = argv[argv.index("--") + 1:] if "--" in argv else []

input_dir = argv[0] if argv else "/path/to/models"
output_dir = argv[1] if len(argv) > 1 else input_dir + "_gltf"

# 出力ディレクトリを作成
os.makedirs(output_dir, exist_ok=True)

# 全ての .blend ファイルを検索
blend_files = [f for f in os.listdir(input_dir) if f.endswith('.blend')]

print(f"Found {len(blend_files)} .blend files")

for blend_file in blend_files:
    input_path = os.path.join(input_dir, blend_file)
    output_name = blend_file.replace('.blend', '.glb')
    output_path = os.path.join(output_dir, output_name)

    print(f"Processing: {blend_file}")

    # blend ファイルを開く
    bpy.ops.wm.open_mainfile(filepath=input_path)

    # 最適化付きで GLB としてエクスポート
    bpy.ops.export_scene.gltf(
        filepath=output_path,
        export_format='GLB',
        export_apply=True,
        export_draco_mesh_compression_enable=True,
        export_draco_mesh_compression_level=6
    )

    print(f"  Exported: {output_name}")

print("Batch export complete!")

バッチスクリプトを実行：

blender --background --python batch_export.py -- /models/source /models/output

3. Web 用モデルを最適化（Decimation）

import bpy

def optimize_mesh(obj, target_ratio=0.5):
    """Decimation モディファイアーを使用してポリゴン数を削減。"""

    if obj.type != 'MESH':
        return

    # Decimate モディファイアーを追加
    decimate = obj.modifiers.new(name='Decimate', type='DECIMATE')
    decimate.ratio = target_ratio  # 0.5 = 元のポリゴンの 50%
    decimate.use_collapse_triangulate = True

    # モディファイアーを適用
    bpy.context.view_layer.objects.active = obj
    bpy.ops.object.modifier_apply(modifier='Decimate')

    print(f"Optimized {obj.name}: {len(obj.data.polygons)} polygons")

# 選択された全てのメッシュを最適化
for obj in bpy.context.selected_objects:
    optimize_mesh(obj, target_ratio=0.3)

4. Web 用テクスチャ焼き付け

import bpy

def bake_textures(obj, resolution=1024):
    """全てのマテリアルを単一テクスチャに焼き付け。"""

    # 焼き付け設定をセットアップ
    bpy.context.scene.render.engine = 'CYCLES'
    bpy.context.scene.cycles.bake_type = 'COMBINED'

    # 焼き付けイメージを作成
    bake_image = bpy.data.images.new(
        name=f"{obj.name}_bake",
        width=resolution,
        height=resolution
    )

    # 焼き付けマテリアルを作成
    mat = bpy.data.materials.new(name=f"{obj.name}_baked")
    mat.use_nodes = True
    nodes = mat.node_tree.nodes

    # Image Texture ノードを追加
    tex_node = nodes.new(type='ShaderNodeTexImage')
    tex_node.image = bake_image
    tex_node.select = True
    nodes.active = tex_node

    # マテリアルを割り当て
    if obj.data.materials:
        obj.data.materials[0] = mat
    else:
        obj.data.materials.append(mat)

    # オブジェクトを選択
    bpy.context.view_layer.objects.active = obj
    obj.select_set(True)

    # 焼き付け
    bpy.ops.object.bake(type='COMBINED')

    # 焼き付けたテクスチャを保存
    bake_image.filepath_raw = f"/tmp/{obj.name}_bake.png"
    bake_image.file_format = 'PNG'
    bake_image.save()

    print(f"Baked {obj.name} to {bake_image.filepath_raw}")

# 選択されたオブジェクトを焼き付け
for obj in bpy.context.selected_objects:
    if obj.type == 'MESH':
        bake_textures(obj, resolution=2048)

5. LOD（Level of Detail）生成

import bpy

def generate_lods(obj, lod_levels=[0.75, 0.5, 0.25]):
    """ポリゴン数を段階的に減らした LOD コピーを生成。"""

    lod_objects = []

    for i, ratio in enumerate(lod_levels):
        # オブジェクトを複製
        lod_obj = obj.copy()
        lod_obj.data = obj.data.copy()
        lod_obj.name = f"{obj.name}_LOD{i}"

        # シーンにリンク
        bpy.context.collection.objects.link(lod_obj)

        # Decimate モディファイアーを追加
        decimate = lod_obj.modifiers.new(name='Decimate', type='DECIMATE')
        decimate.ratio = ratio

        # モディファイアーを適用
        bpy.context.view_layer.objects.active = lod_obj
        bpy.ops.object.modifier_apply(modifier='Decimate')

        lod_objects.append(lod_obj)

        print(f"Created {lod_obj.name}: {len(lod_obj.data.polygons)} polygons")

    return lod_objects

# 選択されたオブジェクトの LOD を生成
if bpy.context.active_object:
    generate_lods(bpy.context.active_object)

6. テクスチャ圧縮付きでエクスポート

import bpy
import os

def export_optimized_gltf(filepath, texture_max_size=1024):
    """ダウンスケールされたテクスチャで glTF をエクスポート。"""

    # 全てのテクスチャをダウンスケール
    for img in bpy.data.images:
        if img.size[0] > texture_max_size or img.size[1] > texture_max_size:
            img.scale(texture_max_size, texture_max_size)
            print(f"Downscaled {img.name} to {texture_max_size}x{texture_max_size}")

    # Draco 圧縮でエクスポート
    bpy.ops.export_scene.gltf(
        filepath=filepath,
        export_format='GLB',
        export_apply=True,
        export_image_format='JPEG',  # ファイルサイズを小さくするため JPEG（品質は PNG）
        export_jpeg_quality=85,       # 0-100
        export_draco_mesh_compression_enable=True,
        export_draco_mesh_compression_level=8,  # 最大圧縮
        export_draco_position_quantization=12,
        export_draco_normal_quantization=8,
        export_draco_texcoord_quantization=10
    )

# 最適化されたファイルをエクスポート
export_optimized_gltf('/path/to/optimized.glb', texture_max_size=512)

7. コマンドラインの自動化

#!/bin/bash
# GUI を開かずに Blender ファイルを glTF にバッチエクスポート

SCRIPT_DIR="$(dirname "$0")"

# 現在のディレクトリ内の全ての .blend ファイルをエクスポート
for blend_file in *.blend; do
    echo "Exporting $blend_file..."

    blender --background "$blend_file" --python - <<EOF
import bpy
import os

# 出力ファイル名を取得
filename = os.path.splitext(bpy.data.filepath)[0]
output = filename + '.glb'

# エクスポート
bpy.ops.export_scene.gltf(
    filepath=output,
    export_format='GLB',
    export_apply=True,
    export_draco_mesh_compression_enable=True,
    export_draco_mesh_compression_level=6
)

print(f'Exported to {output}')
EOF

done

echo "All files exported!"

統合パターン

Three.js を使用

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

const loader = new GLTFLoader();

// 圧縮されたモデル用に Draco デコーダーをセットアップ
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/');
loader.setDRACOLoader(dracoLoader);

// Blender エクスポートを読み込み
loader.load('/models/exported.glb', (gltf) => {
  scene.add(gltf.scene);

  // アニメーションを再生
  if (gltf.animations.length > 0) {
    const mixer = new THREE.AnimationMixer(gltf.scene);
    const action = mixer.clipAction(gltf.animations[0]);
    action.play();
  }
});

React Three Fiber を使用

import { useGLTF } from '@react-three/drei';

function Model() {
  const { scene } = useGLTF('/models/exported.glb');
  return <primitive object={scene} />;
}

// パフォーマンス向上のためプリロード
useGLTF.preload('/models/exported.glb');

Babylon.js を使用

import * as BABYLON from '@babylonjs/core';
import '@babylonjs/loaders/glTF';

BABYLON.SceneLoader.ImportMesh(
  '',
  '/models/',
  'exported.glb',
  scene,
  (meshes) => {
    console.log('Loaded meshes:', meshes);
  }
);

最適化テクニック

1. ジオメトリの最適化

Decimate モディファイアー：

# ポリゴン数を 70% 削減
obj.modifiers.new(name='Decimate', type='DECIMATE')
obj.modifiers['Decimate'].ratio = 0.3

距離でマージ：

# 重複した頂点を削除
bpy.ops.object.mode_set(mode='EDIT')
bpy.ops.mesh.select_all(action='SELECT')
bpy.ops.mesh.remove_doubles(threshold=0.0001)
bpy.ops.object.mode_set(mode='OBJECT')

フェースを三角化：

# 全てのフェースが三角形であることを確認（一部のエンジンに必須）
bpy.ops.object.mode_set(mode='EDIT')
bpy.ops.mesh.select_all(action='SELECT')
bpy.ops.mesh.quads_convert_to_tris()
bpy.ops.object.mode_set(mode='OBJECT')

2. テクスチャの最適化

画像圧縮：

# テクスチャを JPEG で保存（ロスレスだが小さい）
for img in bpy.data.images:
    img.file_format = 'JPEG'
    img.filepath_raw = f"/output/{img.name}.jpg"
    img.save()

テクスチャアトラス：

# 複数のテクスチャを 1 つのアトラスに結合
# 自動アトラス化に Smart UV Project を使用
bpy.ops.object.mode_set(mode='EDIT')
bpy.ops.mesh.select_all(action='SELECT')
bpy.ops.uv.smart_project(angle_limit=66, island_margin=0.02)
bpy.ops.object.mode_set(mode='OBJECT')

3. マテリアルの簡略化

PBR に変換：

# マテリアルが Principled BSDF を使用していることを確認（glTF 標準）
for mat in bpy.data.materials:
    if not mat.use_nodes:
        mat.use_nodes = True

    nodes = mat.node_tree.nodes
    principled = nodes.get('Principled BSDF')

    if not principled:
        principled = nodes.new(type='ShaderNodeBsdfPrincipled')
        output = nodes.get('Material Output')
        mat.node_tree.links.new(principled.outputs[0], output.inputs[0])

よくある落とし穴

1. ファイルサイズが大きい

問題： エクスポートされた .glb ファイルが 20+ MB

解決方法：

• Draco 圧縮を有効化（60～90% 削減）
• テクスチャ解像度を削減（2048 → 1024 または 512）
• テクスチャに PNG ではなく JPEG を使用
• ジオメトリを Decimation（ターゲット <50k トライアングル）
• 未使用のマテリアル/テクスチャを削除

2. エクスポート時にテクスチャが失われる

問題： Web ビューアーでテクスチャが表示されない

解決方法：

• 全てのイメージが保存されていることを確認（パックされていない）
• テクスチャに相対パスを使用
• 「Export Images」を有効化してエクスポート
• イメージフォーマットの互換性を確認（PNG/JPEG）

3. アニメーションが再生されない

問題： アニメーションがエクスポートされない、または再生されない

解決方法：

• アニメーションがタイムラインにあることを確認（NLA ストリップではない）
• 「Export Animations」を有効化してエクスポート
• アニメーションアクションがオブジェクトに割り当てられていることを確認
• 複雑なリグには「Bake Actions」を使用

4. マテリアルの見た目が異なる

問題： Blender での描画と Web での描画が異なる

解決方法：

• Principled BSDF を使用（glTF PBR にマップ）
• カスタムシェーダーノードを使用しない（エクスポートされない）
• サポートされているテクスチャタイプのみ使用（Base Color、Metallic、Roughness、Normal、Emission）
• デプロイ前に glTF ビューアーでテストする

5. エクスポート時間が遅い

問題： エクスポートに 10+ 分かかる

解決方法：

• エクスポート前にモディファイアーを適用（非破壊的なエクスポートをしない）
• ジオメトリの複雑性を削減
• 未使用のデータを削除（孤立クリーンアップ）
• GUI エクスポートではなくコマンドラインでエクスポート（高速）

6. ブラウザでのパフォーマンス問題

問題： ブラウザでモデルがカクカクする

解決方法：

• LOD（Level of Detail）を生成
• 繰り返されるオブジェクトには Instancing を使用
• ドローコールを制限（オブジェクト結合、テクスチャアトラス）
• ポリゴン数を削減（<50k トライアングル）
• シェーダーを最適化（透明度/屈折を避ける）

ベストプラクティス

エクスポート前チェックリスト

☐ 全てのモディファイアーを適用
☐ 頂点をマージ（重複を削除）
☐ フェースを三角化（必要な場合）
☐ ポリゴン数を最適化（<50k トライアングル）
☐ 全てのメッシュに UV アンラップ
☐ マテリアルを焼き付け（複雑な場合）
☐ テクスチャをリサイズ（最大 2048x2048）
☐ Principled BSDF マテリアルを使用
☐ 未使用のデータを削除（孤立クリーンアップ）
☐ オブジェクトに説明的な名前をつける
☐ オリジン点を正しく設定
☐ トランスフォーメーションを適用（Ctrl+A）

エクスポート設定

# 推奨される glTF エクスポート設定
bpy.ops.export_scene.gltf(
    filepath='/output.glb',
    export_format='GLB',                # バイナリフォーマット
    export_apply=True,                  # モディファイアーを適用
    export_image_format='JPEG',         # ファイルサイズを削減
    export_jpeg_quality=85,             # 品質 vs サイズ
    export_draco_mesh_compression_enable=True,  # 圧縮を有効化
    export_draco_mesh_compression_level=6,      # 速度/サイズのバランス
    export_animations=True,             # アニメーションを含める
    export_lights=False,                # ライトをスキップ（コードで再作成）
    export_cameras=False                # カメラをスキップ
)

リソース

このスキルには以下が含まれます：

scripts/

• batch_export.py - .blend ファイルを glTF にバッチエクスポート
• optimize_model.py - Web 用のジオメトリとテクスチャを最適化
• generate_lods.py - LOD コピーを自動生成

references/

• gltf_export_guide.md - glTF エクスポートの完全なリファレンス
• bpy_api_reference.md - Blender Python API クイックリファレンス
• optimization_strategies.md - 詳細な最適化テクニック

assets/

• export_template.blend - 事前に設定されたエクスポートテンプレート
• shader_library/ - Web 最適化 PBR シェーダー

関連スキル

• threejs-webgl - エクスポートされた glTF モデルを Three.js で読み込みと描画
• react-three-fiber - React アプリケーションで glTF モデルを使用
• babylonjs-engine - Web の代替 3D エンジン
• playcanvas-engine - glTF インポートに対応したゲームエンジン