Blender のライティング効果をそのままブラウザに移植することは難しい。
代わりに、Three.js のライティングで再現しようとすると以下の問題が生じる。

• Blender の質感を再現できない
• 陰影づけの計算負荷が増し、ブラウザでのパフォーマンスが低下する

質感の再現が難しい理由は、Blender と Three.js の光の計算方式やレンダリング方式の違いによるところが大きい。
一方で、シーン内の光源やオブジェクトが固定されている場合は、必ずしも Three.js 側でライティングや陰影を計算する必要はなく、Blender 側でライトベイクを行うことで軽量に再現できる。

以下の例では、Blender でライティング効果を含めてテクスチャにベイクし、それをオブジェクトに貼り付けて Three.js で表示している。
なお、Three.js 側ではアンビエントライト（白色光）のみ使用した。

（比較）Blender の表示

ベイクしたテクスチャ画像

若干の色味の違いはあるものの、概ね Blender の質感を再現できていることがわかる。

Demo

https://koji014-blender-light-baking.vercel.app

参考

• ブラウザ上でも 3D モデルを綺麗に表示！Blender×Three.js でテクスチャベイクをやってみた
• 軽くリアルに！ベイク処理で 3D モデルを Web サイトに描写する方法
• Blender ライトベイクの結果が何をしても暗かった時の対処
• 法線と面の向きを理解してシェーディングを最適化しよう！

glTF は、多くの頂点データやテクスチャ画像を含むため、得てしてファイル容量が大きくなりやすい。

ここでは、以下の2つの圧縮を行い、その圧縮効果を評価する。

• メッシュや点群データを圧縮する「Draco 圧縮」
• テクスチャ画像の圧縮 or 軽量化（WebP 変換）

評価内容

上記圧縮について、以下の4パターンで比較する。

1. Blender から glb 形式でエクスポートしたファイル
2. Blender から glb 形式でエクスポートし、Draco 圧縮を行ったファイル
3. Blender から gltf 形式でエクスポートし、テクスチャの軽量化を行ったのち、glb 形式に変換したファイル
4. Blender から gltf 形式でエクスポートし、テクスチャの軽量化を行ったのち、glb 形式に変換、Draco 圧縮を行ったファイル

	テクスチャ画像軽量化	Draco 圧縮
1	×	×
2	×	○
3	○	×
4	○	○

3D モデルは、書籍『10日で Blender 練習帳』で作成したものを使用する。

評価結果

	ファイル容量 / MB	読み込み時間 / ms
1	50.6	153
2	10.2	50
3	44.3	127
4	3.9	23

※ 但し、上記結果は次の条件に基づく。

• Draco 圧縮におけるデコード処理時間は測定対象外
• ローカル開発サーバー上での測定結果

-- -- --

1. Blender から glb 形式でエクスポートしたファイル

2. Blender から glb 形式でエクスポートし、Draco 圧縮を行ったファイル

3. Blender から gltf 形式でエクスポートし、テクスチャの軽量化を行ったのち、glb 形式に変換したファイル

4. Blender から gltf 形式でエクスポートし、テクスチャの軽量化を行ったのち、glb 形式に変換、Draco 圧縮を行ったファイル

結論

テクスチャの軽量化を行ったのち、Draco 圧縮を行うことで、ファイル容量を 46.7 MB 削減（50.6 MB -> 3.9 MB）することができた。
両圧縮を行うことで、ファイル容量の大幅な削減が期待できる。

但し、下記を留意する。

• Draco 圧縮では、頂点の定義が最も効率よく圧縮されるため、頂点の数自体が少ない場合には圧縮効率は低い（WebGL School より）。
• Draco 圧縮をした場合、圧縮したファイルをブラウザ上でデコードする必要がある。そのデコーダのファイル容量が 1 MB ~ 2 MB 程度あるため、（圧縮後の 3D モデルのデータ容量）+（デコーダの容量）>（圧縮前の 3D モデルのデータ容量）とならないよう注意する。
• テクスチャ画像の圧縮・軽量化は、3D モデルの品質を損なわない程度に行う。

Demo

「4. Blender から gltf 形式でエクスポートし、テクスチャの軽量化を行ったのち、glb 形式に変換、Draco 圧縮を行ったファイル」を使用。

https://koji014-blender10days.vercel.app

参考

• DRACO圧縮を行なった3Dサイトの実装方法
• 【WebGL / three.js】DRACO＆Basis圧縮でWebに最適なレベルまで3Dモデルを圧縮する
• 【WebGL/WebAR】テクスチャをWebPに変換するモデル圧縮術
• gltf-pipeline
• DRACOLoader
• WebGL School 2024 第4回講義
• 10日で Blender 練習帳 - あかりの灯るお部屋 -

2025.11.17 ~ 2025.11.27 の学習記録。
書籍『10日で Blender 練習帳』で Blender の学習を行った。

制作物

1日目：スイーツセット

2日目：テーブル

3日目：ベッド

4日目：望遠鏡

5日目：キャンドルとランプ

6日目：自転車のオブジェ

7日目：デスクセット

8日目：観葉植物と本

9日目：猫のキャラクター

10日目：部屋（完成）

Demo

https://koji014-blender10days.vercel.app

参考

• 10日で Blender 練習帳 - あかりの灯るお部屋 -

関連

• https://x.com/_koji014/status/1994048397146509352

Blender で作成した 3D モデルを Three.js を用いてブラウザ上で読み込み、インタラクションを加えて動かす練習を行った。

Demo: https://koji014-laptop.vercel.app

• 天板部（液晶ディスプレイを除く）をクリックすると、PC が開閉する
• 電源ボタンをクリックすると、PC の電源が ON になる

参考

• Web Designing 2025年6月号

WebGL オブジェクトと DOM 要素の位置を同期した際、モバイルデバイスのネイティブスクロールで両者の位置がずれることがある。2025年4月4日に Lusion が公表した投稿によると、Canvas を ページコンテンツに追従させ、Canvas の位置を translateY で補正することで、このずれを解消できるという。この効果を確認すべく、デモを作成した。なお、この方法を理解する上で、長谷川巧さん（@_unshift）の図解を大いに参考にした。

Demo: https://koji014-webgl-scroll-sync.vercel.app

以下、上から順に（1）固定していない状態、（2）固定して Padding をつけていない状態、（3）固定して Padding をつけた状態。（2）の Padding をつけない場合、上へ戻ろうとする際に Canvas が見切れている（画像の表示が欠けている）ことがわかる。（3）では Padding をつけることで、これが改善されている。

参考

• “Solution” to Connect WebGL Visuals to Multiple DOM Elements with One Canvas - Without Scroll-Jacking
• 長谷川巧さんの図解

同期していた DOM と板ポリゴンの関係を非同期遷移前に破棄し、遷移後に再び同期する。

WebGL School プラスワン講義回で Taro Yoshimura さん（@ysmrt6）が解説した内容を参考に、Three.js を使わずに実装した。

Demo: https://koji014-dom-gl-sync.vercel.app

参考

• WebGL School 2024 プラスワン講義回 Taro Yoshimura さんの Three.js を用いた実装