オブジェクト作成~描写編2024/10/30に公開AndroidKotlinAR個人開発ARCoretech完成イメージAR空間にメッセージを投稿でき、投降した内容を自身と他者が端末を介して見ることが出来るという完成イメージをしています。Studioを使い、言語とDBは気分です。APIを利用する想定です。ユーザが入力した文字列は画像化してオブジェクトに張り付けるので、Canvasも利用します。必須機能1ユーザがポストしたい内容を入力できる。2画面をタップしたらオブジェクトを描写できる。3入力された内容が記載されたオブジェクトを描写できる。4入力された内容(文字列)の長さによってオブジェクトを伸び縮みできる。5作成されたオブジェクトの絶対位置をデータベースで永続化できる。6永続化されたオブジェクトから自身の現在位置の周辺にあるものを取得して描写できる。7現在位置が一定数以上変わったら再度永続化されたオブジェクトを取得して描写できる。他にも実装したい細かな機能はありますが、利用可能な状態だけを考えるのであれば上記の機能で十分かなと考えています。作成途中なので、上記の各機能の説明は数記事に分割して投稿しようと思います。今回の記事では1~4について説明します。ユーザにポストしたい内容を入力させるこの機能に関しては単純にEditTextを持つActivityを作成するだけ、特に言うこともないので詳細な説明は省きます。AR画面から遷移でき、以下の「メモする」をタップしたら、ARの画面に戻り入力した内容のオブジェクトが描写できるようになるイメージです。画面をタップしたらオブジェクトを描写されるAR空間にオブジェクトを配置する上で必要な要素として以下があります。・オブジェクトAR空間に配置するもの。物体の表面を構成する点の集合。平面が検出できない複雑な形状の物体に有効。オブジェクトを配置するための基盤になる。・アンカーオブジェクトを現実世界の特定の位置に固定するためのもの。上記の要素を使いAR空間にオブジェクトを配置していきます。平面、点群の検出を行い視覚化することで、オブジェクトが配置位置を明確にします。平面、点群の検出自体はデフォルトで有効になっていると思うので、検出した結果を受け取り、画面に描写を行います。AR空間への描写はOpenGLを利用するのですが、一から書くと分けわからないので、公式が用意しているサンプルコードを利用します。複雑なところは隠蔽してくれています。https://github.com/google-ar/arcore-android-sdk/tree/main/samples/hello_ar_kotlinこのサンプルコードで内の「HelloArRenderer」クラスの「onDrawFrame」にて平面と点群の描写を行っています。このメソッドはフレーム毎で呼び出されるため、常に適した平面と点群が描写されます。pointCloudShader)}この描写をすると以下のようになります。白色の三角形が平面で青色の点が点群です。次にオブジェクトの描写です。これも先ほどのサンプルコードを見ていきます。サンプルコードではMeshクラス、Shaderクラス、Textureクラスを利用してオブジェクトの描写を行っています。Meshクラスオブジェクトの形状の情報を持つクラスです。サンプルコードだと以下のように定義されています。ここで渡しているobjファイルを変えれば好きな形のオブジェクトを配置できます。objファイルはBlenderなどで作成できます。"models/pawn.obj")Textureクラステクスチャ(オブジェクトに張り付ける画像)を作成、保持するクラスです。サンプルコードだと以下のような画像をテクスチャとしてして設定していると思います。3Dオブジェクトの場合、単純に画像を張り付けることが出来ないため、UV展開したものに画像を貼り付けます。サンプルコードのオブジェクトのUV展開図が以下であるため、上記のような画像をテクスチャとして設定しています。ShaderクラスOpenGLのシェーダーを扱うためのクラス。バーテックスシェーダー(頂点ごとに実行)やフラグメントシェーダー(ピクセルごとに実行)の設定や、uniform変数(シェーダープログラムに渡す値)を設定します。基本的に上記3つのクラスを使いオブジェクトの生成、描写を行います。出力するオブジェクトを変えたいだけであれば、Meshクラスに渡すobjファイルとTextureクラスに渡す画像を差し替えれば変わります。話がやや脱線しましたが、今回のサブタイトルにある「画面をタップしたらオブジェクトを描写される」について進めていきます。これはそこまで複雑ではなく、タップ時にアンカーを追加し、そのアンカーにオブジェクトを固定すれば良いです。サンプルコード上の「handleTapメソッド」がタップからアンカーを追加する処理で、onDrawFrameにてアンカー分だけオブジェクトが作成されます。これで画面をタップしたら以下のような形でオブジェクトが描写されます。入力された内容が記載されたオブジェクトを描写する入力される内容は日本語の文字列です。ひらがな、カタカナ、漢字が存在するため、文字をオブジェクト化して描写するというのは難しいです。したがって文字列を画像化してオブジェクトにテクスチャとして張り付けるという方法を取ります。}}テキストを受け取ったら文字数、行数に応じて画像のサイズを動的に設定します。実行すると以下のような画像ができます。次にテクスチャを張り付けるベースとなるオブジェクトを作成します。右がオブジェクトの形で左がテクスチャ座標です。テクスチャ座標は0~1の相対距離で計算されます。オブジェクトの表面のテクスチャ座標はテクスチャの全体を張り付けられるようにして、オブジェクトの裏面のテクスチャ座標はすべて0,0座標に置いてテクスチャの端の色が適用されるだけにしています。このオブジェクトに先ほどの画像をテクスチャとして貼り付けると入力された内容が記載されたオブジェクトを描写できます。今のままではオブジェクトの大きさが固定なので入力された文字数が長かったり、改行があった場合、画像がオブジェクトのサイズにスケールされてしまいます。入力された内容(文字列)の長さによってオブジェクトを伸び縮みする次に画像サイズに合わせてオブジェクトのサイズも動的に変更します。全角の一文字が丁度よく収まるサイズのオブジェクトを作成します。次にこのオブジェクトを入力された文字列の画像サイズに合わせて動的に大きさを変えていきます。objファイルはテキストベースで情報を持っています。テキストファイルとして読み込み、書き換えて再度保存するという方法を取ります。{y}」の形で持っています。この{x}と{y}を変えることでオブジェクトをX軸Y軸に伸び縮みさせることができます。objファイルは頂点座標の他にもテクスチャ座標の情報なども持っていますが、テクスチャ座標は上述した通り相対距離で持っているため、オブジェクトを伸び縮みさせるだけなら何も変えなくて大丈夫です。objファイルを書き換えるコードは以下の通りです。}}全角一文字の時の画像サイズが50×60なので、それをベースサイズとして、入力された文字列の画像がベースサイズから縦横それぞれ何倍の大きさになっているかを求めます。求められた倍率をobjファイルの頂点座標のX、Yにそれぞれ乗算します。これによってオブジェクトが動的に大きさを合わせてくれます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。