SlideShare a Scribd company logo
1 of 19
Download to read offline
Blender+αの大発表会3
「WebGLアドオン作り始めました」
2015.08.29
自己紹介
  名前  : なおたろー
  twiter : @naotaro0123
・Live2Dという2.5D〜3Dソフト会社のプログラマー
・blender歴は2年(3DCGMeetupやblender会でLTしたり)
最近の興味あるもの
 Natve WebGL!!(生WebGL)
three.jsなどライブラリを使わないやつです
生WebGLで学んだこと
シェーダーが書けるようになってポストエフェクトとか
オフスクリーンとか色々わかってきた!
 (以下はLive2D WebGL版)
生WebGLで学んだこと
blenderで3Dモデルをインポートして、WebGLで表示が
できた!(obj形式なのでアニメーションはしない)
これを参照しました → 生WebGL入門:初音ミクの美麗3Dモデルを表示する(前編)
                htp://nmi.jp/archives/582
blenderのWebGLアドオン
・blend4web
  個人的には超お手軽でハイクオリティなWebGLアドオン。
  テクスチャなどbase64形式に変換するのでwebサーバー不要
・three.js
  WebGLの定番アドオン!objやstlなど幅広い3Dファイルの
  ロードに対応してる。fx変換やmayaからthree.js形式(js)
  に出力するプラグインも入ってた
  (utls/coverters/fx, utls/exportes/maya配下にある)
blenderのWebGLアドオン
これらを使えば、WebGL出力できるけども・・・
生WebGLに対応したものはないのか!?
要するに生データで出したいっ!
blenderのWebGLアドオン
ググったら生WebGLプラグインがありました!
こっちにも別のものが
公開されてた
blenderのWebGLアドオン
だがしかし、動かない...(; >_<) /
blender2.49対応なので、pythonバージョンも違う
せい!?
Python2.xと3.x系で
PGの書き方も違う?
blenderのWebGLアドオン
まぁ、これをベースに修正すれば簡単に
プラグイン更新できるんじゃね??
         ↑
       (1週間前)
blenderのWebGLアドオン
そんな甘くはなかった・・・。
import Blenderとかなくなってる?
Draw.Create()とか何なんだ〜!?
それ以前にpython経験なくてよくわからず...orz
blenderのWebGLアドオン
じゃあ、1から自分で作るか!
自分で作った方が最新Ver対応できるし、
勉強になるし!
という訳でpython勉強とblenderアドオンの作り方を調べる
blnederのアドオン開発
親切な方が作り方を示してくれてた♪
・Blender アドオンの作り方
 htp://matosus304.blog106.fc2.com/blog-entry-257.html
・Qita – Blenderプラグインの作り方
 htp://qiita.com/nut/items/a836391723bd28cd3e4c
・最新にも対応してる公式もわかりやすい(英語)
 htp://www.blender.org/api/blender_python_api_2_75a_release/contents.html
blnederのアドオン開発
<開発環境>
sublime textとblenderのコード補完アドオンで開発
 → Auto Cmpleton in Blenders Text Editor
簡単なコードテストは、pythonコンソールで動作確認。
参考ソースは既存のアドオンを見た方が早かった。
blnederのアドオン開発
とりあえず、簡単なExportはできるのでデモします!
  (blenderから出力 → WebGLで表示)
blnederのアドオン開発
<今回の仕様>
 ・頂点の位置情報をjsファイル出力
 ・js内は配列宣言
 ・出力したjsをscriptタグで参照
<今後の予定>
 ・インデックスバッファ対応(同じ頂点を結んで無駄を省くやつ)
 ・マテリアルやテクスチャマッピング、モディファイア対応
  <---------- ここまでできたら公開します ---------->
 ・リグやアニメーション書き出し対応など
 ・バイナリデータ化など
blnederのアドオン開発
<開発について聞きたいこと>
・コード修正後、blender再起動しないと修正が反映されない?
 (addonの再チェックや更新してもダメだった)
・デバッグの仕方をprint文やpythonコンソールで確認してた
 (効率的でなさげ)
誰か良いデバッグ方法やエディタなど知ってたら教えて下さい!
blnederのアドオン開発
<開発について聞きたいこと>
・公式のAPI Documentの見方がいまいち分からない
   例えば頂点数を取る以下のコード
   len(bpy.data.objects['Cube'].data.vertces)
Bpy.data.objectsまでは辿れるけど
その下のdataがドキュメントにない?
ありがとうございました!

More Related Content

What's hot

Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみたLive2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
kazuya noshiro
 
日曜プログラマーとigoogle先生
日曜プログラマーとigoogle先生日曜プログラマーとigoogle先生
日曜プログラマーとigoogle先生
Yuusuke Takeuchi
 
2015/02/21 GDG神戸 Go on Android ハンズオン&もくもく会
2015/02/21 GDG神戸 Go on Android ハンズオン&もくもく会2015/02/21 GDG神戸 Go on Android ハンズオン&もくもく会
2015/02/21 GDG神戸 Go on Android ハンズオン&もくもく会
Satoshi Noda
 
C# から Ruby に乗り換えた
C# から Ruby に乗り換えたC# から Ruby に乗り換えた
C# から Ruby に乗り換えた
Hideaki Miyake
 

What's hot (20)

Live2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみたLive2Dでユニティちゃんを微妙に動かしてみた
Live2Dでユニティちゃんを微妙に動かしてみた
 
flip the chabudai
flip the chabudaiflip the chabudai
flip the chabudai
 
Live2Dモデリング部
Live2Dモデリング部Live2Dモデリング部
Live2Dモデリング部
 
Blenderとコード
BlenderとコードBlenderとコード
Blenderとコード
 
手乗りちょまぎょアプリ開発で学ぶ MRTK 入門 (MRTK 2.5 対応)
手乗りちょまぎょアプリ開発で学ぶ MRTK 入門 (MRTK 2.5 対応)手乗りちょまぎょアプリ開発で学ぶ MRTK 入門 (MRTK 2.5 対応)
手乗りちょまぎょアプリ開発で学ぶ MRTK 入門 (MRTK 2.5 対応)
 
ノンエンジニアが手探りでシューティングゲームを作った話。Swiftで。その入り口部分。
ノンエンジニアが手探りでシューティングゲームを作った話。Swiftで。その入り口部分。ノンエンジニアが手探りでシューティングゲームを作った話。Swiftで。その入り口部分。
ノンエンジニアが手探りでシューティングゲームを作った話。Swiftで。その入り口部分。
 
2020年8月_HoloLens 2 アプリ開発入門
2020年8月_HoloLens 2 アプリ開発入門2020年8月_HoloLens 2 アプリ開発入門
2020年8月_HoloLens 2 アプリ開発入門
 
From A to B
From A to BFrom A to B
From A to B
 
(たぶん)やさしいUnity
(たぶん)やさしいUnity(たぶん)やさしいUnity
(たぶん)やさしいUnity
 
2012.7.31 第二回 Stage3D 勉強会「モデリングを始めてみよう」
2012.7.31 第二回 Stage3D 勉強会「モデリングを始めてみよう」2012.7.31 第二回 Stage3D 勉強会「モデリングを始めてみよう」
2012.7.31 第二回 Stage3D 勉強会「モデリングを始めてみよう」
 
Iotlt 28 HoloLensに日本語聞いてもらいたい
Iotlt 28 HoloLensに日本語聞いてもらいたいIotlt 28 HoloLensに日本語聞いてもらいたい
Iotlt 28 HoloLensに日本語聞いてもらいたい
 
今更GWTで遊ぶぜ!
今更GWTで遊ぶぜ!今更GWTで遊ぶぜ!
今更GWTで遊ぶぜ!
 
Grimoire.js + HoloLens
Grimoire.js + HoloLensGrimoire.js + HoloLens
Grimoire.js + HoloLens
 
Nullから始めるlive2 d初心者講座
Nullから始めるlive2 d初心者講座Nullから始めるlive2 d初心者講座
Nullから始めるlive2 d初心者講座
 
日曜プログラマーとigoogle先生
日曜プログラマーとigoogle先生日曜プログラマーとigoogle先生
日曜プログラマーとigoogle先生
 
マイクロソフト企業紹介 at clusterGAMEJAM 2020 in Winter
マイクロソフト企業紹介 at clusterGAMEJAM 2020 in Winterマイクロソフト企業紹介 at clusterGAMEJAM 2020 in Winter
マイクロソフト企業紹介 at clusterGAMEJAM 2020 in Winter
 
2015/02/21 GDG神戸 Go on Android ハンズオン&もくもく会
2015/02/21 GDG神戸 Go on Android ハンズオン&もくもく会2015/02/21 GDG神戸 Go on Android ハンズオン&もくもく会
2015/02/21 GDG神戸 Go on Android ハンズオン&もくもく会
 
C# から Ruby に乗り換えた
C# から Ruby に乗り換えたC# から Ruby に乗り換えた
C# から Ruby に乗り換えた
 
Java event impression
Java event impressionJava event impression
Java event impression
 
ちょっとGoogle Analyticsの話しようぜ
ちょっとGoogle Analyticsの話しようぜちょっとGoogle Analyticsの話しようぜ
ちょっとGoogle Analyticsの話しようぜ
 

Viewers also liked (8)

【Unite2014】誰でも出来る!MayaLTを使ったUnityアセット制作ワークフロー
【Unite2014】誰でも出来る!MayaLTを使ったUnityアセット制作ワークフロー【Unite2014】誰でも出来る!MayaLTを使ったUnityアセット制作ワークフロー
【Unite2014】誰でも出来る!MayaLTを使ったUnityアセット制作ワークフロー
 
MayaLT勉強会
MayaLT勉強会MayaLT勉強会
MayaLT勉強会
 
Blenderゆるゆる勉強会1回目
Blenderゆるゆる勉強会1回目Blenderゆるゆる勉強会1回目
Blenderゆるゆる勉強会1回目
 
スマートフォンゲーム企画書制作のポイント
スマートフォンゲーム企画書制作のポイントスマートフォンゲーム企画書制作のポイント
スマートフォンゲーム企画書制作のポイント
 
スマホアプリ企画書
スマホアプリ企画書スマホアプリ企画書
スマホアプリ企画書
 
スマホゲーム企画書
スマホゲーム企画書スマホゲーム企画書
スマホゲーム企画書
 
【ゲーム企画】「あなた採用、お前不採用っ。」
【ゲーム企画】「あなた採用、お前不採用っ。」【ゲーム企画】「あなた採用、お前不採用っ。」
【ゲーム企画】「あなた採用、お前不採用っ。」
 
スマートフォンアプリ企画書ver.0.1
スマートフォンアプリ企画書ver.0.1スマートフォンアプリ企画書ver.0.1
スマートフォンアプリ企画書ver.0.1
 

Similar to Blender+αの大発表会3-WebGLAddon

明日から使えるgradle
明日から使えるgradle明日から使えるgradle
明日から使えるgradle
kimukou_26 Kimukou
 
blockdiagの上手な使い方 2011/04 #ssmjp
blockdiagの上手な使い方 2011/04 #ssmjpblockdiagの上手な使い方 2011/04 #ssmjp
blockdiagの上手な使い方 2011/04 #ssmjp
Takeshi Komiya
 

Similar to Blender+αの大発表会3-WebGLAddon (20)

Wcan 2013 autumn_trident_mizuno
Wcan 2013 autumn_trident_mizunoWcan 2013 autumn_trident_mizuno
Wcan 2013 autumn_trident_mizuno
 
WebGLことはじめ
WebGLことはじめWebGLことはじめ
WebGLことはじめ
 
Visual Studio 2017 で Azure Functions の開発
Visual Studio 2017 で Azure Functions の開発Visual Studio 2017 で Azure Functions の開発
Visual Studio 2017 で Azure Functions の開発
 
明日から使えるgradle
明日から使えるgradle明日から使えるgradle
明日から使えるgradle
 
Gcdについて?
Gcdについて?Gcdについて?
Gcdについて?
 
Gcdについて?
Gcdについて?Gcdについて?
Gcdについて?
 
blockdiagの上手な使い方 2011/04 #ssmjp
blockdiagの上手な使い方 2011/04 #ssmjpblockdiagの上手な使い方 2011/04 #ssmjp
blockdiagの上手な使い方 2011/04 #ssmjp
 
Visual Studio 2010で楽しくデバッグ
Visual Studio 2010で楽しくデバッグVisual Studio 2010で楽しくデバッグ
Visual Studio 2010で楽しくデバッグ
 
Ms build 触ってみよう
Ms build 触ってみようMs build 触ってみよう
Ms build 触ってみよう
 
(IDEユーザのための) ClojureのEmacs開発環境について
(IDEユーザのための) ClojureのEmacs開発環境について(IDEユーザのための) ClojureのEmacs開発環境について
(IDEユーザのための) ClojureのEmacs開発環境について
 
Android6.0の機能まとめ 実機でサンプルを動かしてみた
Android6.0の機能まとめ 実機でサンプルを動かしてみたAndroid6.0の機能まとめ 実機でサンプルを動かしてみた
Android6.0の機能まとめ 実機でサンプルを動かしてみた
 
Azure Function GAした!Visual Studio Tools for Azure Functions もプレビューだ!
Azure Function GAした!Visual Studio Tools for Azure Functions もプレビューだ!Azure Function GAした!Visual Studio Tools for Azure Functions もプレビューだ!
Azure Function GAした!Visual Studio Tools for Azure Functions もプレビューだ!
 
Nodeにしましょう
NodeにしましょうNodeにしましょう
Nodeにしましょう
 
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
 
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とはがんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
 
HTML5 のお話
HTML5 のお話HTML5 のお話
HTML5 のお話
 
エンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったことエンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったこと
 
WebGLとvideoを組み合わせるおもしろい
WebGLとvideoを組み合わせるおもしろいWebGLとvideoを組み合わせるおもしろい
WebGLとvideoを組み合わせるおもしろい
 
Blenderで作成したデータをMinecraftにぶっこむ
Blenderで作成したデータをMinecraftにぶっこむBlenderで作成したデータをMinecraftにぶっこむ
Blenderで作成したデータをMinecraftにぶっこむ
 
three.jsで作る3Dの世界
three.jsで作る3Dの世界three.jsで作る3Dの世界
three.jsで作る3Dの世界
 

Blender+αの大発表会3-WebGLAddon