#WebGL
ついに勉強したくなってしまったので1からやってみる!
BlenderインストールからThree.jsで表示させるまでを行う.
#Blenderのインストールから
ひぇ、英語だぁ…
とりあえず日本語にしてみたい
#3Dデータを取り込んでjsonで吐き出したい
エキスポーター(?) (→エクスポーターw)なるものが必要らしい。
だが該当フォルダ内には不穏なREADME.mdがぽつり…
↓
three.js-master/utils/exporters/blender/README.md
開いてみるとなんと!
注意: Three.js JSON形式のBlenderエクスポーターは、glTFワークフローのより良いサポートに焦点を合わせるために削除されました。
推奨される代替案については、[3Dモデルのロード]
https://threejs.org/docs/#manual/introduction/Loading-3D-models
ガーン!!!!
でも調べるとglTFのほうが今後主流(?)になりそうだったので
こちらで進めることにします。
#glTFとは「3DにおけるJPEG」
glTF (GL Transmission Format)
3Dといえば拡張子大戦争的なイメージがあった。
こいつの一強になっていくのかしら…。
拡張子はやはりロマンがありますね。生まれ変わったらpngになりたい。
#glTFエクスポーターを導入する
(1)GitHubでzipインストール
https://github.com/KhronosGroup/glTF-Blender-Exporter
(2)「glTF-Blender-Exporter-master」を解凍、任意の場所に格納
(3)Blenderを起動して「Edit」 > 「Preferences」 > 「File Paths」で
「Scripts」部分にさきほどの場所を指定する
変更はデフォルトでオートセーブにチェックが付いているっぽい。
(4)「Add-ons」タブに移動、検索ボックスに「glTF」を検索して
「Import-Export: glTF 2.0 format」にチェックが入っていることを確認する
(5)「Export」に「glTF」が出現したら完了!
ってここまでやって思ったけど最新のBlenderってデフォルトで選択でき…る…だ…と…。
べっ、別に悔しくなんかないんだからね...?
#PBRマテリアル に触れる
PBRマテリアルとは、
物理ベースレンダリング
Physically-Based Rendering
現実世界を模倣した、光学的に正確なレンダリングのこと。
#Three.jsでglTFを読みこみ
▼参考記事
https://codelabo.com/1192/