Blender でガラス風の質感を得る練習。

Memo

• 「サーフェス」を「グラスBSDF」に設定し、「粗さ」の数値を下げることでガラス風の質感が得られる

  

  ライティングを施すことで、ガラスが透過して中身が見えるようになる（「Cycles」に設定する）

• 「シェーダーミックス」で2つの質感を混ぜ合わせた表現が作れる

  

• モディファイアーで「ソリッド化」を適用している場合、テクスチャを貼ると内側にも表示されてしまう

  理想 ↓

  

  現実 ↓

  

  これを解消するには、新たなマテリアルを追加した上で、[モディファイアープロパティ] > [Solidify] > [マテリアル] > [マテリアルインデックスオフセット] を 1 に設定する。この値は設定しているマテリアル群の先頭を 0 とし、適用するマテリアルが何番目に当たるかを指す。

  

  

• 平均クリース：サブディビジョンサーフェスをどのくらいの強さでかけるか
  • 値が 0 の時に影響が最大、1 の時に影響がゼロ
  • サブディビジョンサーフェスで潰れてしまった角を部分的に調整できる
  • N キーでメニューパネルを開き、[アイテム] > [トランスフォーム] > [辺データ] > [平均クリース] から設定可能
  • ショートカット：Shift + E

  

• HDRI はビューが「透視投影」の場合にのみ確認できる
• [レンダープロパティ] > [カラーマネジメント] > [ルック] からコントラストを調整できる

  

• Ctrl + I：選択の反転

参考

• 【blender4.4】ジャム瓶を作ろう【初心者向けチュートリアル】
• ICOON MONO

Blender で金属風の質感を得る練習。

Memo

• 「メタリック」の数値を上げ、「粗さ」の数値を下げることで金属風の質感が得られる

  

• [レンダープロパティ] > [アンビエントオクルージョン], [スクリーンスペース反射]
  • アンビエントオクルージョン： 陰影を表示して立体感や接地感を向上させる
  • スクリーンスペース反射： 光の屈折や反射を表現できる
  • これらは Blender v.4.2 以降では削除され、以下で代替できる
    • スクリーンスペース反射 ⇒ [レイトレーシング] > [方式: スクリーントレース]
    • アンビエントオクルージョン ⇒ [レイトレーシング] > [高速GI近似] > [方式: アンビエントオクルージョン]

    

• 環境テクスチャで HDR 画像を設定する
  • [ワールドプロパティ] > [カラー]
  • HDR 画像を設定することで、光源で光をあてるよりもリアルな質感を表現できる。設定する画像によって反射の具合が変化する。

  

参考

• Blenderで鍵をモデリングしよう【初心者向けチュートリアル】
• 【Blender】v.4.2で無くなったレンダープロパティ項目の代替機能は、何？
• Poly Haven

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月号

Web Designing 2025年6月号 p.36 ~ p.49 の内容を参考に Blender の学習を行った。
基本的な操作方法や、モデリングからレンダリングまでの一連の流れを把握することができた。

以下、モデリングしたラップトップのデモ動画。

参考

• Web Designing 2025年6月号