どうもこんばんわ
アマエミ -longing for you- 攻略しました。
絵がめっちゃかわいい!!!シナリオも重くなくあまあまなお話です。
3人並ぶといいな...まぶしい
かわいい!
この子が特に可愛かったです
↑この目すき
どうやらルート分岐で選んだ回数によって 告白される or する のどちらかになるっぽいです。すごい
あと曲がいい。これだけで予約確定。
おすすめです(アルテミスエンジンくんお願いだからクリックしたらオート解除するのやめて)
本題
GitHub Skyline
っていうGitHubの草を3Dモデルで表示できるサービスがあるのですが、これARで見れたら面白いのではと思ったのでやります。
3Dプリンターで印刷するためのものなんでしょうが持ってないので...
AR Core
といえば、簡単に使えるSceneform
ってライブラリがあったと思います!
大昔に試してそんなに難しくなかった記憶
https://takusan23.github.io/Bibouroku/2020/04/06/ARCore/
それを使いたい、、、のですが、
なんと!使えなくなっていました!数年前は使えてたのですが...!おいGoogle!
うーんしゃあない最新のAR Core
調べるか... → https://github.com/google-ar/arcore-android-sdk/tree/master/samples/hello_ar_kotlin
Kotlinのサンプルコード、とりあえず実行できたけどどこで何やってるのかマジで分からん!!!!
なんか内容が難しい!!!
というわけで、今回は3Dモデル (GitHub Skyline)
を表示させるまで上記のサンプルをパクってやってみようと思います。
環境
なまえ | あたい |
---|
端末 | Pixel 6 Pro (Google Tensor / RAM 12GB) / Pixel 3 XL (SDM 845 / RAM 4GB) |
Android | 13 |
minSdk | 24 ? |
OpenGL ES | 3.0 たと思う |
今回はDepth API
(現実と同じように手前にものがあれば隠れんぼする機能)を使います。
(てか Pixel 3 XL 物理的に軽くね?いや 6 Pro が重いだけか...)
ARCore
ARCore
には描画するための機能は持ち合わせてません。(Sceneform
にはありましたが、ARCore
の機能ではありません。)
そのため描画するための技術(OpenGL
)と組み合わせて利用する必要があります。
ながれ
- GitHub Skyline の3Dモデル
.stl
をAR Core
で利用できる.obj
に変換する
- ついでにサイズを小さくします。
- Blender 使います
AR Core
を利用するための用意
- カメラ映像の描画
- 平面の描画
- 3Dオブジェクトの描画
Blender をいれる
.stl
を.obj
にするために使います。
あとサイズを小さくするためにも使ってます。
使う機会なければPortable
の方でも良いんじゃないでしょうか(よく分からん)
GitHub Skyline のオブジェクトを読み込む
GitHub Skyline
のデータはここからダウンロードできます。
Blender
を開き、最初からある立方体はいらないので選んでDeleteキー
押して消しちゃいましょう。
ファイル > インポート > STL を選び、ダウンロードしたオブジェクトを選んで取り込みます。
で、これそのまま使うとクソデカいので直します。
ちなみにどれぐらいクソデカいかというと、サンプルコードで使われているオブジェクトがこのくらい小さいです。
サイズを小さくする
キーボードのN
を押すことで、トランスフォーム
を表示させる事ができます。
で、スケール
の部分を全部0.005
ぐらいにします。
これでサンプルと同じぐらいの大きさぐらいに出来ました。保存しましょう。
保存
オブジェクトを選択した状態で、
ファイル > エクスポート > Wavefront OBJ を選びます。
選択物のみにして、適当な場所に保存します。
これでファイルの用意は終わりです。
公式のサンプルコードをダウンロードします
今回はGoogleのサンプルコードを8割ぐらい使います(Apache License Version 2.0
)。ので以下のリポジトリをzip
で落とすなりgit clone
するなりしてローカルに保存して下さい。
これAR Core
のライブラリとして提供してほしいぐらいですよ。
https://github.com/google-ar/arcore-android-sdk
アプリを作る
Android Studio を開きます。
適当なプロジェクトを作成
minSdk
は24
です。
AndroidManifest.xml
カメラ権限
が必要です。また、uses-feature
をサンプル通り書いておきましたが無くても動くかもしれないです。
あともう一箇所、application
の中にmeta-data
を一つ書きます
build.gradle
AR Core
のライブラリとobj
ファイルを扱うライブラリと公式のライフサイクルのライブラリ、あと権限取るのでActivity Result API
を入れます。
あ、ついでにtargetSdk
を33
にしておきます。なんか32
のままだったので
あとViewBinding
も有効にします。
公式のサンプルコードをコピペする
hello_ar_kotlin
のapp/src/main/java/com/google/ar/core/examples/java
の中にあるcommon
をAndroid StudioのMainActivity.kt
と同じフォルダにコピーします。
はい。import
の部分でエラーが出ると思いますので、エラーの部分を消してAlt+Enter
してインポートし直せば治ると思います。
公式のアセットをコピペする
今回はOpenGL
のGLSL言語
で書かれたシェーダー
もパクることにします。まあ後で少し手直しをしますが。
1から書くとかはちょっと分からん...
assets
フォルダを作成して
hello_ar_kotlin
のapp/src/main/assets
のmodels
、shaders
から以下のファイルをコピーしてきます。
- models
- shaders
- background_show_camera.vert
- cubemap_filter.frag
- cubemap_filter.vert
- environmental_hdr.frag
- environmental_hdr.vert
- occlusion.frag
- occlusion.vert
- plane.frag
- plane.vert
- point_cloud.frag
- point_cloud.vert
こうなってれば良いはず
オブジェクトファイルを入れる
さっき作ったmodels
にBlender
で保存したobjファイル
をコピーします。
これでアセット編は終わりなはず..
activity_main.xml
GlSurfaceView
を置きます。ずっとJetpack Compose
だったので懐かしいですね(?)
ARCore を使う
ARCoreのセッションを管理するクラスを作ります。
ほぼサンプルコードそのままですが
MainActivity.kt
ではこんな感じに使います。
ついでにカメラ権限ない場合はリクエストするようにしました。
ViewBindingするクラス
このレベルだとそのまま使ったほうが良さそうまであるけど一応
MainActivity.kt
でsetContentView
します。
描画するクラス
いよいよ描画するクラスを作っていきます。
ARCoreOpenGlRenderer.kt
です。
これをMainActivity
でこうやって使います
そのまえに Toast を出すだけのクラスを作る
カメラ映像を描画する
まずはカメラ映像を描画するようにしましょう。
後は実行してカメラ映像が描画されていれば成功です!
平面とクラウドポイントを描画する
平面はこの白色の三角形のタイルみたいなやつです。
クラウドポイントってのはこの青いてんてんのことです。
オブジェクトの描画の際に使うFloatArray
も今回まとめて書いちゃいます。
オブジェクトを描画する (多分最後)
ついにGitHubの草をARに登場させます!!!
今回はテクスチャを用意しないので、単色で塗りつぶすようフラグメントシェーダ
にも手を加えます。
面倒なのでここまで全部張ります。
ARCoreOpenGlRenderer
environmental_hdr.frag
この3Dオブジェクトに色を付けるのが、environmental_hdr.frag
って名前のフラグメントシェーダです。
少し手を加えます。
以下の3行を
こうします
次にここを
こうします
関数呼び出しも直します。
以下の部分を
こうします
Pbr_CreateMaterialParameters
関数から引数を消して直します。
何してたの?
公式のサンプルコードでは、テクスチャ画像を読み込むような実装でした。
今回はテクスチャ画像無しで、単色で塗りつぶすようにするため上記の修正が必要になりました。
environmental_hdr.frag 全体
ほとんど変えてませんが
完成品
スクショ下手くそ選手権
ざっくり OpenGL
それぞれの関数がなんかWin32 API
みたいでなんか慣れない (-1を返したら失敗とか)
フラグメントシェーダ / バーテックスシェーダ
バーテックスシェーダってのは頂点をセットするやつらしい。
フラグメントシェーダはそれに色を付けていく。
Uniform
を使うと、CPU
からGPU
へ値を渡すことができます。(今回ではKotlin
からOpenGL
へ値を渡すことができる)
o_FragColor
ここに vec4 型
で色をセットすることで反映されます。
グローバル変数
vec4
色の指定とかで使う。
色の場合は 0f から 1f までの RGBA だと思います。
書き換えて遊ぶ
例えば、頂点のつなぎ方を変更することで塗りつぶさない。なんかも出来ます。
Mesh.java
ソースコード
多分動く。コミット一応分けておきました。
https://github.com/takusan23/ARCoreGitHubSkyline
とりあえずAPK
欲しい場合はGitHub Releases
においておきました。
https://github.com/takusan23/ARCoreGitHubSkyline/releases/tag/1.0.0
おわりに
近くで見るとちゃんと凸凹してる
Depth API
写真下手くそですがちゃんと物を検知するようになってます。
(机の下に置いたらちゃと机の下まで潜らないと描画されない)
OpenGL要素えぇ
シェーダーすらパクってきたのでほぼKotlin
しか書いてないです。
もしかしたら Unity
とかのゲームエンジンがわかる人のほうが使いこなせそう!
デバッグしんどくない?
シェーダー
、これコンパイル(GLES30.glCompileShader
)の際に使われない変数を消すのですが、これのせいで実行時にUniform
変数が無いよ!って言われてしまうんですよね。
あとprintf
みたいなのも(多分)ない(GPUで動いてるので...)のでまじで大変そう。
一応GLSLで書かれたシェーダー
をminify (最適化)
するツールがあるみたいなので、どの変数が要らなくなるかとかをコンパイル前に見ることはできるのかな...?
おわりに2
そういえば、今無き とらのあな秋葉原店A でやってたこれ、行ってきました
以上です。お疲れ様でした ノシ 888
追記 2023/05/05
回転しないでほしい場合は、ARCoreOpenGlRenderer.kt
へ以下のようなコードを描くと良いです。
Pose#extractTranslation
で回転を考慮しない行列を作ってくれます。