1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

WebGL超ことはじめ(1)

Last updated at Posted at 2019-12-13

#WebGL
ついに勉強したくなってしまったので1からやってみる!
BlenderインストールからThree.jsで表示させるまでを行う.

#Blenderのインストールから
ひぇ、英語だぁ…
とりあえず日本語にしてみたい
スクリーンショット 2019-12-13 17.44.13.jpg
スクリーンショット 2019-12-13 17.44.34.jpg
スクリーンショット 2019-12-13 17.44.45.jpg

#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」部分にさきほどの場所を指定する
スクリーンショット 2019-12-23 11.56.54.jpg

変更はデフォルトでオートセーブにチェックが付いているっぽい。
スクリーンショット 2019-12-23 11.59.16.jpg

(4)「Add-ons」タブに移動、検索ボックスに「glTF」を検索して
「Import-Export: glTF 2.0 format」にチェックが入っていることを確認する

スクリーンショット 2019-12-23 12.00.32.jpg

(5)「Export」に「glTF」が出現したら完了!

スクリーンショット 2019-12-23 12.03.06.jpg

ってここまでやって思ったけど最新のBlenderってデフォルトで選択でき…る…だ…と…。
べっ、別に悔しくなんかないんだからね...?

▼参考記事
https://jp.ubunifu.co/blender/gltf-gl-transmission-format%E3%82%92-blender%E3%81%A7%E4%BD%BF%E3%81%86

#PBRマテリアル に触れる
PBRマテリアルとは、
物理ベースレンダリング
Physically-Based Rendering
現実世界を模倣した、光学的に正確なレンダリングのこと。

#Three.jsでglTFを読みこみ
▼参考記事
https://codelabo.com/1192/

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?