モーダルを開く 2025-12-03 Blender ライトベイクしてブラウザで質感を再現する モーダルを閉じる ライトベイクしてブラウザで質感を再現する Blender Three.js WebGL Blender のライティング効果をそのままブラウザに移植することは難しい。代わりに、Three.js のライティングで再現しようとすると以下の問題が生じる。Blender の質感を再現できない陰影づけの計算負荷が増し、ブラウザでのパフォーマンスが低下する質感の再現が難しい理由は、Blender と Three.js の光の計算方式やレンダリング方式の違いによるところが大きい。一方で、シーン内の光源やオブジェクトが固定されている場合は、必ずしも Three.js 側でライティングや陰影を計算する必要はなく、Blender 側でライトベイクを行うことで軽量に再現できる。以下の例では、Blender でライティング効果を含めてテクスチャにベイクし、それをオブジェクトに貼り付けて Three.js で表示している。なお、Three.js 側ではアンビエントライト（白色光）のみ使用した。（比較）Blender の表示ベイクしたテクスチャ画像若干の色味の違いはあるものの、概ね Blender の質感を再現できていることがわかる。Demohttps://koji014-blender-light-baking.vercel.app 参考 ブラウザ上でも 3D モデルを綺麗に表示！Blender×Three.js でテクスチャベイクをやってみた 軽くリアルに！ベイク処理で 3D モデルを Web サイトに描写する方法 Blender ライトベイクの結果が何をしても暗かった時の対処 法線と面の向きを理解してシェーディングを最適化しよう！
モーダルを開く 2025-11-29 Blender 3D モデルのデータを圧縮する モーダルを閉じる 3D モデルのデータを圧縮する Blender Three.js WebGL glTF は、多くの頂点データやテクスチャ画像を含むため、得てしてファイル容量が大きくなりやすい。ここでは、以下の2つの圧縮を行い、その圧縮効果を評価する。メッシュや点群データを圧縮する「Draco 圧縮」テクスチャ画像の圧縮 or 軽量化（WebP 変換）評価内容上記圧縮について、以下の4パターンで比較する。Blender から glb 形式でエクスポートしたファイルBlender から glb 形式でエクスポートし、Draco 圧縮を行ったファイルBlender から gltf 形式でエクスポートし、テクスチャの軽量化を行ったのち、glb 形式に変換したファイルBlender から gltf 形式でエクスポートし、テクスチャの軽量化を行ったのち、glb 形式に変換、Draco 圧縮を行ったファイルテクスチャ画像軽量化Draco 圧縮1××2×○3○×4○○3D モデルは、書籍『10日で Blender 練習帳』で作成したものを使用する。評価結果ファイル容量 / MB読み込み時間 / ms150.6153210.250344.312743.923※ 但し、上記結果は次の条件に基づく。Draco 圧縮におけるデコード処理時間は測定対象外ローカル開発サーバー上での測定結果-- -- --Blender から glb 形式でエクスポートしたファイルBlender から glb 形式でエクスポートし、Draco 圧縮を行ったファイルBlender から gltf 形式でエクスポートし、テクスチャの軽量化を行ったのち、glb 形式に変換したファイル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-27 Blender 『10日で Blender 練習帳』 モーダルを閉じる 『10日で Blender 練習帳』 Blender Three.js WebGL 2025.11.17 ~ 2025.11.27 の学習記録。書籍『10日で Blender 練習帳』で Blender の学習を行った。制作物1日目：スイーツセット2日目：テーブル3日目：ベッド4日目：望遠鏡5日目：キャンドルとランプ6日目：自転車のオブジェ7日目：デスクセット8日目：観葉植物と本9日目：猫のキャラクター10日目：部屋（完成）Demohttps://koji014-blender10days.vercel.app 参考 10日で Blender 練習帳 - あかりの灯るお部屋 - 関連 https://x.com/_koji014/status/1994048397146509352
モーダルを開く 2025-10-11 Three.js Blender で作成した 3D モデルをブラウザ上で動かす モーダルを閉じる Blender で作成した 3D モデルをブラウザ上で動かす Three.js WebGL Blender Blender で作成した 3D モデルを Three.js を用いてブラウザ上で読み込み、インタラクションを加えて動かす練習を行った。Demo: https://koji014-laptop.vercel.app天板部（液晶ディスプレイを除く）をクリックすると、PC が開閉する電源ボタンをクリックすると、PC の電源が ON になる 参考 Web Designing 2025年6月号