一般男性が趣味を晒していくだけ

社会人をしながら趣味で人生を謳歌している。。。はず

UnityとBlenderでAR家具配置検討アプリを作ってみる#8~UnityでUIを作ってみよう①~

前回ではUnityのAR環境を作って、適当に配置したオブジェクトをスマホを利用して現実に表示するところまでやりましたね。

ちなみに前回↓

hinunun.hatenablog.com

 

さぁ、今回はUnityでアプリに必要となるUIを作っていきます。

。。。といっても、しっかりしたUIを構築するのは後でにして、

とりあえず先にUnityのUI作成はどんな感じなのか触れるくらいにしましょう。

 

※今回は練習なので、今までのプロジェクトではなく、新規プロジェクトでUIだけを作っていきます。新しいプロジェクトを作ってね。

 

 

新規プロジェクトを作成する

それでは、練習用に新規プロジェクトを作成します。

Unity Hubでプロジェクトを新規作成する

プロジェクトを開く際にいつも起動してきたUnity Hubを起動して、新規プロジェクトを作成しましょう。

f:id:hinunun:20211202142835p:plain

f:id:hinunun:20211202151614p:plain

UIって2Dじゃん!!!ってなるとは思いますが、今回の家具配置アプリは3D空間を使用するものなので、3Dのプロジェクトを作成します。

名前は適当に。自分が後で見てわかりやすい名前を付けてください。

テキトーに名前を付けると、数か月後に後悔することになります(笑)

「このプロジェクトなんやっけー?」と言いながら、一つ一つ開いて確認するという地獄が体験できます。

名前はちゃんと付けようね。

あともう一つ。

名前は英数字とアンダーバーかハイフンのみでつけましょうね。

いろいろあるんですよ。いろいろ。

 

UnityでUIを使うための知識を得る

さぁ、UIを配置してみましょう!!!

ヒエラルキービューで右クリックをすると、メニューが表れてUIを追加できます。

とりあえずテキトーに配置してみましょうか。

Imageを選んで作ってみてください。

f:id:hinunun:20211202151745p:plain

f:id:hinunun:20211202151415p:plain

ImageのUIが追加された

配置されました。

配置されたと同時に、ヒエラルキービューに

Canvas

・EventSystem

が追加されたはずです。

まずは、これらの説明をします。

 

Canvasについて

簡単に言うと、”UIを配置するための領域”です。

UIを配置するときは、すべてCanvasの子じゃないとだめです。

今回はいきなりImageを作成したので、Canvasが自動生成されました。

もちろん、Canvasを最初に生成して、その中にImageを配置しても全然OKです。

 

Canvasが生成されると、自動的にコンポーネントが付いてきます。

 

それぞれについて説明していきます。

 

Canvasコンポーネントで設定すること

Canvasコンポーネントでは、主に

  • UIの描画方法の設定
  • 描画するカメラの割り当て

が行えます。

それらは、Render Modeプロパティから設定できます。

Render Modeプロパティには

  • Screen Space - Overlay
  • Screen Space - Camera
  • World Space

があります。

Screen Space - Overlay

f:id:hinunun:20211202162316p:plain

カメラに関係なく、直接画面にCanvasが描画されます。

カメラに関係ないので、常に正面からCanvasが表示されます。

そして、どのオブジェクトよりも前面に表示されるので、3Dオブジェクトが隠れてしまいます。

 

Screen Space - Camera

f:id:hinunun:20211202162411p:plain

RenderCameraに設定したカメラにCanvasが描画されます。

この場合は、カメラに合わせてCanvasも動きます。

カメラに合わせて動くので、これも常に正面からCanvasが表示されます。

これはカメラに合わせて動くので、Canvasより前に他オブジェクトがある場合はCanvasの前にあるオブジェクトがきちんと表示されます。

 

World Space

f:id:hinunun:20211202163331p:plain

EventCameraに設定したカメラにCanvasが描画されます。

これは、Canvasが他の3Dや2Dオブジェクトとして扱われるので、カメラに合わせて動かず、カメラの姿勢によって見え方が変化します。

 

Canvas Scalerコンポーネントで設定すること

Canvas Scalerでは

  • 画面サイズに合わせたUIの拡縮設定

を行えます。

それらは、UI Scale Modeプロパティから設定します。

UI Scale Modeプロパティには

  • Constant Pixel Size
  • Scale With Screen Size
  • Constant Physical Size

があります。

Constant Pixel Size

f:id:hinunun:20211202165104p:plain

画面サイズによらず、UI作成時に設定したPixelサイズで表示されます。

どんな画面でも、UIのPixel数は変わりません。

なので、解像度が変わると、表示サイズが拡縮されます。

 

Scale With Screen Size

f:id:hinunun:20211202165640p:plain

画面サイズに合わせて、UIが拡縮されて表示されます。

画面サイズが小さいほど小さく見えて、画面サイズが大きいほど大きく見えます。

複数の画面サイズで、画面に対して同じ割合でUIを表示したいときにこれを使いましょう。

 

Constant Physical Size

f:id:hinunun:20211202170751p:plain

画面サイズや解像度によらず、実単位で物理的に同じサイズに合わせます。

なので、単位をcmやらinchで指定します。

これで大切なのは、DPI(Dots per Inch)で、1インチ中にどれだけドットが並んでいるかの値です。

DPIさえ正確に入力できれば、画面に表示されているUIを現実世界の実寸法で表示できます。

ものさしアプリとかに使えそうですね。

 

GraphicRaycasterコンポーネントで設定すること

GraphicRaycasterでは

  • Canvas内のUIへの当たり判定

を行います。

レイキャストとは、ある地点から特定の方向にレーザービーム(光)を出したみたいに直線を引いていくことです。その引いた直線がUIに当たったことを判定するって感じですね。

このコンポーネントが、ボタン操作などといったUIを使った操作を受け付けます。

当たり判定の制御は、GraphicRaycasterプロパティの

  • Ignore Reversed Graphics
  • Blocking Objects
  • Blocking Mask

から行います。

Ignore Reversed Graphics

f:id:hinunun:20211202173239p:plain

レイキャスターから反対方向のUI面を考慮するかを設定できます。

どんな時に使うかわからぬ。。。すみません。

 

Blocking Objects

f:id:hinunun:20211202173913p:plain

レイキャストをブロックするオブジェクトのタイプを設定できます。

レイキャストによって処理する要素の優先順位を制御するようです。

使ったことないや(笑)

 

Blocking Mask

f:id:hinunun:20211202174100p:plain

レイキャストをブロックするオブジェクトのタイプを設定できます。

レイキャストによって処理する要素の優先順位を制御するようです。

使ったことないや(笑)

 

UIを使ったアプリの操作で大切なGraphicRaycasterを使うために、絶対に外せないのがImageを追加したときに勝手に生成されたEventSystemです。

 

EventSystemについて

これがないとUIによる操作ができません!!!

めっちゃ大切!!!私は知らぬ間に消していて地獄を見た。

これは、Unityがユーザーからの操作(タッチパネルのタッチ入力、キーボードの入力、コントローラーからの入力等)を受け取って、Unity内のオブジェクトへイベント送信するものです。

とりあえず何かしらの操作をしたいときはつけておくといいですね。

何かしらの操作をしたときに動かなかった場合は、まずこのEventSystemがヒエラルキービュー内にあるかを確認しましょう。

 

ボタンを作ってみる

とりあえずお試しにボタンを作ってみましょう。

ボタンを作る

ヒエラルキービューにボタンを追加しましょう。

ヒエラルキービューで右クリックでメニューを出して、Buttonを選択します。

f:id:hinunun:20211202180534p:plain

f:id:hinunun:20211202180625p:plain

もうボタンできちゃった

はい。終わりです。ちょー簡単ですね。

Buttonの意匠が気に入らぬという方もいらっしゃると思うので、

意匠の変えて、書いてある文字も変えちゃいましょう。

 

ボタンの意匠を変える

では意匠を変えましょう。

意匠を変えるには、使う画像を用意しなければなりません。

かっこいいボタン画像をいらすとやさんからもらってきました。

f:id:hinunun:20211202181801p:plain

これを挿入しましょう。

まず、画像をUnityのプロジェクトビューへドラッグ&ドロップします。

f:id:hinunun:20211202182128p:plain

画像をUIとして使用するには、Spriteという2Dのオブジェクトに変換しなければ使えないので、追加した画像を選択し、インスペクタからTexture TypeをSpriteへ変更します。

f:id:hinunun:20211202182510p:plain

Applyを押すのを忘れずに。

これで、追加した画像をUIとして使用できるようになりました。

これをButtonにあてはめます。

ヒエラルキービューのButtonを選択し、Buttonのインスペクタを表示します。

f:id:hinunun:20211202182921p:plain

 

インスペクタのSourceImageから先ほど追加した画像を選択します。

f:id:hinunun:20211202183306p:plain

f:id:hinunun:20211202183334p:plain

ほそながっ

アスペクト比を合わせたい場合は、

Buttonのインスペクタ内にある、Preserve Aspectのチェックをつけるといいです。

f:id:hinunun:20211202183608p:plain

ボタンのサイズを調整したい場合は、インスペクタからWidthとHeightを変更します。

f:id:hinunun:20211202184535p:plain

さて、これでボタンの意匠変更ができました。

では、文字を変更しましょう。

 

ボタンの文字を変える

ボタンの文字を変えるには、ヒエラルキービューのButtonの子のTextを変えればOK。

f:id:hinunun:20211202183955p:plainf:id:hinunun:20211202184131p:plain

インスペクタから文字の書体は変えられるので、自由に変えちゃってください。

文字の場所もインスペクタから変えちゃってください。

f:id:hinunun:20211202184708p:plain

できました!!!

これでボタンは作れるようになりましたね!

 

最後に

これで、Canvasの設定と、ボタンの作り方わかりましたね。

ボタンの作り方は、Unityのデフォルトのグラフィックで作る方法をやりましたが、画像に後でButton機能を付ける方法もあります。それはおいおい紹介しますね。

 

次は、ボタンを押したときのアクションの付け方と、スクリプトを埋め込んで、ボタンに役割を持たせていきましょう。

 

さぁ、UIももりもり作っていきますよー!!!

 

ではではー!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

UnityとBlenderでAR家具配置検討アプリを作ってみる#7~ARを使えるようにしてみよう~

前回ではスクリプトを作成してUnity上でモデルに機能追加をして動かしてみましたね。

ちなみに前回↓

hinunun.hatenablog.com

 

さぁ、次はUnityにキットを読み込ませてできることを増やしていきましょう。

今回追加するキットはARにまつわるものです。

※今回はAndroidで説明します。余裕があればiOSも。。。できれば。。。いいな。。。

 

 

AR用のパッケージを追加する

それではUnityプロジェクトにARを使うためのパッケージを追加していきましょう。

ARCoreのインストール(iOSの場合はARkit)

上のメニューバーからWindowを選択し、その中のPackage Managerを選択します。

Package Managerのウィンドウが開くので、少し待ちます。

f:id:hinunun:20210727160619p:plain

f:id:hinunun:20210727160717p:plain

たくさんパッケージがあるから興味があるやつは試すと楽しい

たくさんあるパッケージの中から、Android用のARパッケージである「ARCore XR Plugin」を選択し、インストールします。

iOSの場合は「ARkit XR Plugin」です。

f:id:hinunun:20210727160948p:plain

f:id:hinunun:20210727161145p:plain

追加されればOK

ARFoundationのインストール

続いて、ARFoundationもPackage Managerからインストールします。

f:id:hinunun:20210727161800p:plain

インストール後に画面は変わりませんが、押した「Install」ボタンがグレーアウトされていれば入っています(笑)

 

これでARを使うパッケージはインストール完了です!

ではARを使うためにいろいろUnityをいじっていきましょう。

 

AR用に設定を変えていく

ではAR用に設定を変更していきましょう。

変更するものはカメラですね。

AR用のカメラに変更する

まずはAR用のカメラを用意しましょう。

ARFoundationには専用カメラがあるのでそれを使います。

今のプロジェクトで使用しているMain Cameraは不要なので消しましょう。

そしてヒエラルキービューからAR Cameraを追加します。

AR Session Origin とAR Sessionを追加しましょう。

f:id:hinunun:20210727162623p:plain

f:id:hinunun:20210727184900p:plain

f:id:hinunun:20210727184950p:plain

AR SessionとAR Session Originの両方がないとだめ

AR Session Originの中にAR Cameraが入っています。

これでAR用のカメラを使う準備はできました。

 

※今回はものが置けるかを見られれば良いので、AR Cameraの位置を動かして、モデルが見えるようにはしておいてください。

 

ARをするには地面を検出したいですよね。地面を検出する仕組みを入れましょう。

平面を検出する

ARアプリでは一般的にカメラから周辺の景色の特徴点から平面を検出します。

そのためには、AR Plane Managerというコンポーネントを追加します。

ヒエラルキービューのAR Session Originを選択した状態でインスペクタからAdd Componentを選択してコンポーネントを追加します。

f:id:hinunun:20210727163522p:plain

f:id:hinunun:20210727163652p:plain

f:id:hinunun:20210727163744p:plain

これが追加されればOK

平面検出には水平方向と垂直方向の両方を検出することができます。

今回は床に対してモデルを置きたいので、Detection ModeをHorizontalにしておきましょう。

 

Plane PrefabはNoneになっていますが、ここにオブジェクトをセットすると、平面検出をしたところにそのオブジェクトを描画してくれます。

 

Androidのアプリとして出力する

ではAndroidアプリとして出力して見てみましょう。

Platformの切り替え

メニュータブのFileからBuild Settingsを開きます。

f:id:hinunun:20210727164459p:plain

f:id:hinunun:20210727164551p:plain

Platformはたくさん選択できる。Unityをインストールするときにオプション設定を忘れずに。

最初はプラットフォームがPCになっていますが、今回はAndroidなのでAndroidを選択して、Switch Platformをポチします。

f:id:hinunun:20210727164744p:plain

Switch PlatformがBuildになればOK

このままでBuildボタンを押したくなりますが、まだ設定が必要です。

Player Settingsの設定

Player Settingsからもう少し設定をしていきます。

f:id:hinunun:20210727165118p:plain

f:id:hinunun:20210727165230p:plain

Other Settingsの中身をいじっていきます。

まずはGraphics APIsの中にあるVulkanをマイナスアイコンを押して削除します。

f:id:hinunun:20210727165433p:plain

マイナスアイコンを押すと削除される

次に、Minimum API LevelをAndroid 7.0以上にします。これはARCoreが対応しているAndroidのバージョンが7.0以降だからです。

私はAndroid9.0くらいにしています。

 

さて、これで設定が終わったのでBuild!!!。。。とはまだ行きません。

やってみるとわかりますが、エラーが出ます。

f:id:hinunun:20210727172618p:plain

なんと。。。

ではGradleを新しくしますか。

Gradleを新しくする

最新版のGradleをダウンロードしましょう。

下記サイトからダウンロードできます。

gradle.org

これの一番新しそうなものをダウンロードしてください。

そしてUnityに紐ついているGradleを新しくするための作業を行います。

UnityのメニューバーのEditからPreferenceを選択して、環境設定を開きます。

f:id:hinunun:20210727173411p:plain

そうすると、環境設定ウィンドウが開くので、そこからExternal ToolsのAndroidにあるGradle Installed with UnityにGradleのパスを設定します。

f:id:hinunun:20210727175044p:plain

適当なディレクトリに新しいGradleを格納し、そこにパスを通します。

私は C:\Users\yodai\Unity\Gradle に入れました。私の名前はYodaiです(笑)

そして、格納したパスをコピーして、Gradle Installed with Unityに貼り付けてパスを通します。

f:id:hinunun:20210727180513p:plain

さて、あとは先ほど開いていたPlayer SettingsのplayerのPublishing Settings内の設定を行います。

f:id:hinunun:20210727181650p:plain

いろいろ設定するのめんどいよねー

Custom Gradle系のものにチェックを入れます。

 

次に、

Assets\Plugins\Android\mainTemplate.gradle

Assets\Plugins\Android\launcherTemplate.gradle

のファイルの先頭に、下の行を挿入します。

ファイルはメモ帳やら何やらで開いてください。

// GENERATED BY UNITY. REMOVE THIS COMMENT TO PREVENT OVERWRITING WHEN EXPORTING AGAIN

↑この文言がある場合は消しましょう。

buildscript {
    repositories
{
        google
()
        jcenter
()
   
}
    dependencies
{
       
// Must be Android Gradle Plugin 3.6.0 or later. For a list of
       
// compatible Gradle versions refer to:
       
// https://developer.android.com/studio/releases/gradle-plugin
        classpath
'com.android.tools.build:gradle:3.6.0'
   
}
}

allprojects
{
   repositories
{
      google
()
      jcenter
()
      flatDir
{
        dirs
'libs'
     
}
   
}
}

f:id:hinunun:20210727182101p:plain

このファイルたちに挿入する。

よっしゃあああ!これでいけるぞおおお!

。。。となればいいのですが、まだです。

 

Android側の設定をしましょう。開発者モードにしていきます。

 

Androidを開発者モードにする

Androidの設定を開きます。

バイス情報を開いて、ビルド番号を複数回タップすると開発者モードに切り替わります。

f:id:hinunun:20210727183509p:plain

開発者モード!!!

あとは、開発モードのオプションからUSBデバッグをONにします。

f:id:hinunun:20210727183712p:plain

これでUSBをつないでアプリをビルドできる

ついに用意が整いました。

さて、AndroidスマホをPCに接続して、Build And Runしましょう!

 

ビルドする前に、Scenes In Buildでどのシーンをビルドするか指定しましょう。

Add Open Scenesをポチして、ビルドしたいシーンを選択します。

f:id:hinunun:20210727194039p:plain

必要なシーンの数だけ選択する。今回は画面一つだから一つだけ。

さて、これで満を持してBuild And Runをポチしましょう。

動きましたか?動いているといいなぁ。。。

 

iOSのアプリとして出力する

実機を持っていないのでちゃんとできるかわからないのでやり方だけになります。

・PlatformをiOSに変更する

・Player SettingsのOther Settingsの設定を行う

  ・Camera Usage Descriptionに適当なコメントを入れる

  ・Target minmum iOS Versionを11以上に変更する

  ・Require ARkit supportにチェックを入れる

  ・ArchitectureをARM64に変更する

f:id:hinunun:20210727190921p:plain

さて、あいぽんをPCに接続して、Build And Runしましょう!

 

動きましたか?動いているといいなぁ。。。

 

最後に

これでUnityでスマホのカメラを使ってAR表示することができるようになりました。

今回はほぼ作業みたいなものだったので、また次回はスマホ画面でモデルを操作できるボタン等を追加して遊んでみましょう。

モデルを動的に生成するスクリプトも書いてみましょうか。

さぁ、ここから面白くなってきます!頑張っていきましょう!

 

ではではー!

.

 

 

UnityとBlenderでAR家具配置検討アプリを作ってみる#6~キーボードでモデルを動かしてみる~

前回でBlenderで作成したモデルをUnityに取り込みましたね。

ちなみに前回↓

hinunun.hatenablog.com

 

さぁ、次は3Dモデルに”スクリプト”を追加して、機能を着けていきましょう。

今回追加する機能は、キーボードでの移動・回転の位置や姿勢の制御機能です。

 

 

モデルに機能をつける

それではモデルに機能を追加してみましょう。

機能はプログラム言語のC#で”スクリプト”に記述し、モデルに反映することで追加できます。

とりあえずやってみましょう。

空のスクリプトを追加する

スクリプトを新規追加するので、プロジェクトビューで右クリックをして、

Create → C# Script を選択します。

すると、C#スクリプトファイルが追加されます。

名前は適当でいいですが、私はMoveModelにしました。

f:id:hinunun:20210712155413p:plain

何をするかわかるネーミングがいい気がしてる

これでスクリプトの新規作成はおしまいです。

次に、中身をC#で書いていきましょう。

スクリプトを開く

では、先ほど作成したスクリプトをダブルクリックして開きます。

Visual Studioが立ち上がるので、少々待ちます。

立ち上がると、以下のような画面になっていると思います。

f:id:hinunun:20210712155717p:plain

f:id:hinunun:20210712160012p:plain

最初から何か記述してある

中身を本当に軽く説明すると、

using System.Collections

using System.Collections.Generic

これはC#の基本機能を使うための宣言です。

 

using UnityEngine

これはUnityで用意されている関数を使うための宣言です。

 

public class hogehoge : MonoBehaviour

これはクラスの宣言と継承ってやつです。C#の勉強をするときにまた詳しくやりましょう。

今回は最初にこれを書くんだって思っておいてください。

とりあえず、MonoBehaviourを継承するとUnityの機能を使えると思っておいてください

 

void Start() { }

これはスクリプトのプログラムが開始されたら働く部分です。

 

void Update() { }

これはframeといってゲーム内で画面更新があるたびに働く部分です。

 

さて、この基本部分に追記していく形で機能を記述していきましょう。

 

スクリプトにモデルを動かすための機能を記述する

今回はモデルを動かすために、Transformというクラスを使用します。

リファレンスを一応貼っておきます。 

docs.unity3d.com

では、変数の値を変えて動かすことと、用意されている関数を使って動かことをしてみましょう。

ちなみに記述したものは以下になります。

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class MoveModel : MonoBehaviour
{
    float speed;    // 移動調整量を毎度書くのが面倒くさいのでここで変数の定義をしておく

    void Start()
    {
        speed = 0.01f;    // 移動量の調整
    }

    void Update()
    {
        if (Input.GetKey("up"))
        {
            this.gameObject.transform.position += this.gameObject.transform.forward * speed;
        }
        else if (Input.GetKey("down"))
        {
                transform.position -= transform.forward * speed;
        }
        else if (Input.GetKey("right"))
        {
                transform.Translate(1.0f * speed, 0, 0);
        }
        else if (Input.GetKey("left"))
        {
                transform.Translate(-1.0f * speed, 0, 0);
        }
        else
        {
            // 何もしない
        }

         if (Input.GetKey("d"))
        {
                transform.Rotate(0, 5.0f, 0);
        }
        else if (Input.GetKey("a"))
        {
                transform.Rotate(0, -5.0f, 0);
        }
        else
        {
            // 何もしない
        }

    }
}

position変数で動かす

Transformクラスを使用するためには、

this.gameObject.transform.hogehogeと記述します。

this.gameObjectは、このスクリプトを適用しているモデルを指しています。

その後ろに、.transformと書いてTransformのコンポーネントを取得し、

その後ろに関数や変数を書くことでTransformクラスが使用できます。

 

なので、書き方としては

this.gameObject.transform.position += this.gameObject.transform.forward * speed

となります。

position変数をforward変数を使って変化させています。

モデルの前向きのベクトルを使った移動方法ですね。

Translate関数で動かす

変数ではなく関数も使ってみましょう。

Translate(x, y, z)で、移動方向と移動量を指定できます。単位はメートルです。

書き方としては、例えばx方向への移動であれば、

this.gameObject.transform.Translate(1, 0, 0)

となります。移

Rotate関数で回転させる

移動以外の関数も使ってみましょう。

Rotate(xAngle, yAngle, zAngle)で、回転方向と回転量を指定できます。単位は度です。

書き方としては、y軸中心で回転させるのであれば、

this.gameObject.transform.Rotate(0, 1, 0)

となります。

キーボードの入力を受け付ける

キーボードの入力を受けてみましょう。

Input.GetKey("hogehoge")で、キーボード操作を受けられます。

if文で条件分岐をさせる

たくさんのキーボード操作をしたい場合は、

〇〇キーが押されたら□□させるという処理をさせられればうれしいですよね。

そのためにif文というものを使います。書き方は、

if(条件1) { させたい処理1 }

else if(条件2) { させたい処理2 }

else { させたい処理3 }

と書きます。

 

日本語で書くと、

もし、条件1が成立しているならば、させたい処理1を実行

条件1が成立していなくて、条件2が成立しているならば、させたい処理2を実行

条件1も条件2も成立していないならば、させたい処理3を実行

 

こんな感じです。

これでキーボード操作による位置と回転制御部分は記述できましたね。

保存するのを忘れないようにしてくださいね。

次はスクリプトをモデルに適用していきましょう。

 

スクリプトをモデルに適用する

さぁ、あとはモデルにスクリプトを適用するだけです。

方法は簡単で、今作成したスクリプトのファイルをヒエラルキービューにある適用したいモデルにドラッグ&ドロップするだけです。

ドラッグ&ドロップしたのちに、左のインスペクタにスクリプトが表示されていることを確認してください。

f:id:hinunun:20210712163614p:plain

左のインスペクタにスクリプトが追加されてるはず

これで適用完了です!

さぁ動かしてみましょう!

 

実行してキーボードで動かしてみる

では再生ボタンを押してゲームを実行してみましょう。

f:id:hinunun:20210712171710p:plain

おすだけ

動きましたか?

私は動かなかったです。

正確に言うと、動いているけど動いてないように見えるです(笑)

原因は、カメラも一緒に動いているから。

Blenderからモデルを持ってくるときに、カメラも一緒に持ってきているパターンですね。

モデル側のカメラを消しましょう。

 

取り込んだBlenderモデルからカメラを削除する

削除しましょう。

削除の方法は、ヒエラルキービューにある取り込んだモデルのプレハブ上で右クリックし、Unpack Prefabを行い、消したいものをDeleteするです。

f:id:hinunun:20210712172351p:plain

f:id:hinunun:20210712172519p:plain

消すのわすれがち

さて、これで動くようになったはずです。

 

最後に

これでUnityでモデルに機能を持たせる方法ができるようになりましたね。

スクリプトC#で書くことになるので、もし興味がある人はC#を勉強してみてもよいのではないでしょうか。

このブログでは『必要な時に、必要なものだけ』をモットーに進めているので、C#をがっつりやることはないかもしれませんが、ちょこちょこ知識はたまっていくはずなので気長によろしくお願いします(笑)

さて、次回はAR表示の準備です。頑張っていきましょう!

 

ではではー!

 

 

UnityとBlenderでAR家具配置検討アプリを作ってみる#5~Unityを触ってみる、Blenderで作った3Dモデルを追加する~

今までBlenderで椅子と机を作りましたね。

ちなみに前回↓

hinunun.hatenablog.com

作ってきた3Dモデルを適当な背景においてレンダリングするとこんな感じになります。

f:id:hinunun:20210622170339p:plain

椅子と机を置いてレンダリングしたら何だかいい雰囲気になる

 

さぁ、次は作った3Dモデルを利用してUnityで家具配置アプリを作っていきましょう。

今回は軽くUnityに触るくらいにしておくつもりです。

次回からはがっつりやりますので!

 

 

Unityを触ってみる

Unityのプロジェクトを作ってみて、触ってみなけりゃ始まらないですね。Unityを立ち上げて適当に触ってみましょう。

UnityHubでプロジェクトを新規作成する

みなさま、UnityHubはインストールされていますよね。

UnityHubを起動しましょう。

するとこんな画面が出てくるので、右上の「新規作成」からプロジェクトを作っていきます。

f:id:hinunun:20210622173942p:plain

バージョンは2019.4.24で私はやります。

f:id:hinunun:20210622174059p:plain

バージョンが出てくるので複数ある場合はここで選べる

今回は3Dのプロジェクトを作ってみましょうか。

f:id:hinunun:20210622174329p:plain

ちなみに私のPC上の名前はyodaiです。以後お見知りおきを。

「作成」ボタンをポチすると、UnityHubの画面が消えて、Unity本体が立ち上がります。

Unityの画面構成を見てみる

立ち上がったらこんな画面構成になっているはずです。

f:id:hinunun:20210622175915p:plain

① シーンビュー、ゲームビュー

シーンビューでは素材を配置してシーンを作成します。上のタブでゲームビューに切り替えると、ゲームを実行したときの見え方を確認できます。

 

② 操作ツール

シーンビューに配置したオブジェクトを回転させたり操作するためのツール。

 

ヒエラルキービュー

シーンビューに配置したオブジェクトが一覧で表示されます。オブジェクトの階層構造の表示やら編集もできます。

 

④ プロジェクトビュー

プロジェクトで使用するオブジェクトやスクリプトなどといった素材を管理します。このウィンドウに素材をドラッグ&ドロップすることでプロジェクトに素材を追加できます。

 

⑤ インスペクタ

選択されているオブジェクトの詳細情報が表示されます。このインスペクタでオブジェクトの詳細情報や動きを設定します。

 

⑥ 実行ツール

プロジェクトの実行や停止を行うツール。

 

・・・つらつらと書きましたが、こんなの使っているうちに覚えるので、覚えようとしなくても大丈夫です(笑)

試しに立方体でもシーン上に置いてみましょうか。

 

シーンにオブジェクトを追加してみる

作った3Dモデルをプロジェクトビューにドラッグ&ドロップでオブジェクトを追加できますが、Unityで用意されているオブジェクトも追加して使うことができます。

ヒエラルキービューの左上の「+」ボタンをクリックするか、ヒエラルキービューの上で右クリックをするとオブジェクトをCreateできます。

f:id:hinunun:20210622182025p:plain

ヒエラルキービューで右クリックの方が速いと私は思ってる

このメニューからオブジェクトを追加できます。3DオブジェクトのCubeでも追加してみますか。

f:id:hinunun:20210622182250p:plain

f:id:hinunun:20210622182343p:plain

これでシーンにオブジェクトを追加できました。簡単ですね。

オブジェクトはドラッグで位置を動かすことが可能です。また、操作ツールを使って回転させたり拡縮させたりもできます。

オブジェクトの詳細設定をしたい場合は、オブジェクトを選択するとインスペクタが表示されるのでそこから設定できます。

オブジェクトを選択するときはヒエラルキービューの一覧から選択すると選択ミスが発生しないのでおススメです。

 

さて、次はBlenderで作った自分の3Dモデルを取り込んでみましょう。

 

Blenderで作った3DモデルをUnityに取り込む

よっしゃー取り込むぞー。プロジェクトビューにBlenderで作ったファイルをドラッグ&ドロップじゃー。

・・・とやりたいところですが、Blenderで作った時のファイルはそのまま取り込むことはできません。

Blenderのエクスポート機能を使って、3DモデルをUnityで読み込める形にしてあげる必要があります。

ではやっていきましょう。

Unityで取り込める3Dモデルのファイル形式について

3Dモデルにはたくさんのファイル形式があります。画像の拡張子のJPEGやらPNGとかそんなのりですね。

Unityでサポートされているファイル形式は

.fbx

.obj

.daeCollada

.3ds

.dxf

この5種類です。

この中で、Blenderからエクスポート可能なものは

.fbx

.obj

.daeCollada

の3種類です。

この3種類のどれを使ったらいいのかという話になると思いますが、それぞれ特徴があります。

.fbxの特徴

fbxはAutoDeskが公開したファイル形式です。

3Dモデルデータのリグ(骨/関節等の骨格のことで、3Dモデルの動く仕組み)のデータも含められます。

なので、動く3Dモデルの出力に適しています。

.objの特徴

objはWavefront Technologyが公開したファイル形式です。

3Dモデルデータの面やテクスチャといったモデル自体のデータのみ記録されます。

なので、動かない3Dモデルの出力に適しています。

.daeCollada)の特徴

daeSonyPS3PSP向けの開発用に策定したファイル形式です。

3Dモデルデータの陰影の設定や物理演算の設定などの多くの情報を保持できます。

ARやらVRで使用する3Dモデルによく使われています。

 

さて、どれを使うか。。。fbxでやってみましょうか。

 

Blenderで3Dモデルデータをエクスポートする

ファイル形式も決まったことですし、エクスポートしましょう。

椅子のBlenderプロジェクトを開きましょう。

そして、左上のファイルからエクスポートを選択します。

その中からCollada(.dae)をポチします。

f:id:hinunun:20210622191506p:plain

ファイル形式がたくさん。それぞれの特徴は興味があれば調べてみて。

適当に名前を付けて保存します。保存するときに左側にあるグローバル方向やテクスチャオプションやら色々設定できます。

※形状タブの「モディファイヤーを適用」を選択していないとモディファイヤーを使って作ったモデルはきちんと書き出されないので注意。

設定できたら「COLLADAのエクスポート」をポチしてエクスポートします。

f:id:hinunun:20210622193545p:plain

エクスポートのオプション設定は大切

これでエクスポート完了です。

あとはUnityのプロジェクトビューにドラッグ&ドロップすれば読み込んでくれます。

 

Unityにエクスポートした3Dモデルを読み込ませる

あとはプロジェクトビューにドラッグ&ドロップして、そのあとにシーンにドラッグ&ドロップすれば読み込み完了です。

f:id:hinunun:20210622192326p:plain

ヒエラルキービューじゃなくてプロジェクトビューにD&D

f:id:hinunun:20210622194041p:plain

f:id:hinunun:20210622194117p:plain

何だかカメラとライトもついちゃってるけどとりあえずヨシ

さて、これでUnityに読み込めました。

今後は、Blenderで作った3DモデルをUnityプロジェクトに取り込むことが多いので、この作業は忘れないようにしてください。

 

最後に

これでUnityプロジェクトの作成と、Blenderで作った3Dモデルの取り込みはできるようになりましたね。

次はUnityのスクリプトを使ってモノに機能を実装していきましょう。

ついにプログラミングですよ。ちなみに言語はC#です。

ちょっとずつ内容がヘビーになっていきますが、頑張りましょう!!!

 

ではではー!

 

 

 

 

UnityとBlenderでAR家具配置検討アプリを作ってみる#4~Blenderで椅子を作る③~

これまで、椅子の脚と座面背もたれ一体フレームを作ってきました。

あとはクッションを作れば椅子が完成。。。!

 

ちゃちゃっとやっていきましょう。

 

ちなみに前回↓

hinunun.hatenablog.com

 

 

椅子を作る

前回までの作業結果はこんな感じです。

f:id:hinunun:20210602080540p:plain

椅子の形はできた。もうほぼ椅子。

これに

  • 座面クッション
  • 背もたれクッション

をつけて、椅子を完成させていきます。

 

準備はいいですか?

Blenderを立ち上げて、前回保存したプロジェクトを読み込んでスタートしていきましょう!

 

座面のクッションを作る

では、クッションを作っていきましょう。

今回は、Blender画面の右にある「モディファイヤープロパティ」をある程度使って楽に作っていきましょう。

 

平面図がないので、座面のクッション形状は想像で作っていきます(笑)

 

平面を追加して座面クッションのサイズに合わせる

今までやってきた方法のどれを使ってもいいのですが、

私は平面を追加して、上に伸ばす形で座面クッションを作っていこうと思います。

「追加」ボタンか[Shift + A]で追加メニューを開き、「メッシュ」メニューから「平面」を選択します。

f:id:hinunun:20210602101559p:plain

f:id:hinunun:20210602101932p:plain

もうショートカットキーにも慣れた。。。よね?

この平面をコネコネして座面のサイズに合わせましょう。

編集モードへ切り替えて作業します。

切替方法は左上の「オブジェクトモード」をポチするか、ショートカットキー[TAB]です。

やることは

  • 座面の位置に合わせる(平面の移動、ショートカットキー[G])
  • 座面の角度に合わせる(平面の回転、ショートカットキー[R])
  • 座面の横幅を合わせる(平面のスケール変更、ショートカットキー[S])
  • 座面の縦幅を合わせる(平面や辺の移動、ショートカットキー[G])

です。

とりあえず座面の位置がずれているので、移動させて位置を合わせましょう。

f:id:hinunun:20210602102719p:plain

平面の移動、ショートカットキー[G]

座面が傾いているので、回転させて角度を合わせましょう。

f:id:hinunun:20210602102844p:plain

平面の回転、ショートカットキー[R]

座面に対して平面が大きいので、スケール変更してサイズ(横幅)を合わせましょう。

f:id:hinunun:20210602103023p:plain

平面のスケール変更、ショートカットキー[S]

座面に対して平面が長いので、辺を移動させてサイズを合わせましょう。

f:id:hinunun:20210602103657p:plain

辺の移動、ショートカットキー[G]→[Y]

見やすいシェーディングで作業しましょう。
シェーディングの切り替えは右上の丸が4つ並んでいる部分をポチするか、ショートカットキー[Z]です。

 

これでサイズは合いましたね。

 

平面にベベルで面取りをして座面の形に合わせる

ベベルして座面の形に合わせます。

左側の「ベベルアイコン」をポチするか、ショートカットキー[Ctrl + B]です。

f:id:hinunun:20210602105342p:plain

なんとなーくでよい。参照図はないし。。。

これでOKですね!

ちなみに、ベベル等のツールを使用しているときに画面の最下部にオプションが表示されます。どのキーボードを押せばベベルの何のオプションを変更できるのかが書いてあるので、それを見ながら操作できるようになると楽ちんです。

例えば、今回でいうと

ベベル開始 → 影響を辺から頂点に変更 → 幅を変更 → セグメントを変更

なので、キー操作でいうと

[Ctrl + B] → [V] → [A] → [S]

といった感じで操作しています。

 

あとはクッションに厚みを持たせていく作業です。

平面に細分化を行いながら(サブディビジョンサーフェイス)押し出してクッションを造形する

せっかくなのでふわっともっちりしたクッションにしたいですよね。

ただ押し出しただけではカッチカチのクッションになってしまうので、モディファイヤーの「サブディビジョンサーフェイス」を使って細分化しながら押し出して、なめらかなクッションを作っていきます。

 

まっすぐ上に押し出したいので、視点は側面図に向けておきます。

右上の「座標アイコン」かショートカットキーテンキー[1]か[3]です。

そして、右側の「モディファイヤープロパティアイコン」を選択し、その中から「サブディビジョンサーフェイス」を選択します。

f:id:hinunun:20210602111102p:plain

そして座面を選択し、伸ばしていきます。

伸ばしていくときは

平面の押し出し → 平面の拡縮 → 平面の押しだし → 平面の拡縮 → ・・・

といった感じで繰り返しながら少しずつ形を整えながら伸ばしていきましょう。

f:id:hinunun:20210602111458p:plain

押し出しショートカットキー[E]

f:id:hinunun:20210602111630p:plain

拡縮ショートカットキー[S]

f:id:hinunun:20210602111728p:plain

押し出しショートカットキー[E]

f:id:hinunun:20210602111829p:plain

拡縮ショートカットキー[S]

f:id:hinunun:20210602112023p:plain

押し出しショートカットキー[E]

f:id:hinunun:20210602112115p:plain

拡縮ショートカットキー[S]

f:id:hinunun:20210602112254p:plain

なんとなくできた。後は気に入った形になるまでやるだけ。

こんな流れです。押し出しと拡縮をうまく使って形状を作っていきましょう。

できるとこんな感じです。楽しくコネコネしてください(笑)

f:id:hinunun:20210602113441p:plain

それっぽい気がする。。。な?

これで座面もできました。後は背もたれだけですね。

 

背もたれのクッションを作る

さて、作っていきましょう。

作り方は何でもOKです。

今までやったことを生かして作っていきましょう。

やることは

平面を追加 → 形を合わせる(ミラーするので左側) → ミラーする → 細分化しながら押し出す

です。

 

平面を追加して背もたれフレームの形に合わせる

平面を追加して形を整えていきましょう。

左上の「追加」ボタンかショートカットキー[Shift + A]で追加メニューを開き、「メッシュ」メニューから「平面」を選択します。

f:id:hinunun:20210602115644p:plain

f:id:hinunun:20210602115804p:plain

平面をコネコネして、あとでミラーする作戦でいく

X軸を基準に90度回転させる。左のトランスフォームウィンドウに値を入力して回転させる。

f:id:hinunun:20210602115858p:plain

背もたれに向ける

オブジェクトモードに切り替えて、編集していく。ショートカットキー[TAB]。

形を合わせていきましょう。

平面を移動させて背もたれの位置に合わせていきます。

f:id:hinunun:20210602120203p:plain

移動ショートカットキー[G]

上辺と底辺を移動させて角度と長さを合わせます。

f:id:hinunun:20210602120547p:plain

移動ショートカットキー[G]

辺や頂点を移動させてサイズと大体の形を合わせましょう。

※正面図と側面図のサイズがずれているので、どちらに合わせていただいてもOKです。すみません。

f:id:hinunun:20210602121207p:plain

移動ショートカットキー[G]

ループカットや細分化、カットツールを使用して、形状を作っていきましょう。

とりあえず頂点が足りないので細分化を2回していきます。

f:id:hinunun:20210602142843p:plain

f:id:hinunun:20210602143034p:plain

右クリック「細分化」

頂点の位置を移動させて形に合わせていきます。

テクニックですが、移動ショートカットキー[G]を押した後にもう一度[G]を押すと隣接している辺に沿って移動させることが可能です。

f:id:hinunun:20210602143450p:plain

ショートカットキー[G]→[G]で辺に沿って動かせるから便利な場面もある

面取り部分の細かさが足りない気がするので、ループカットで補います。

f:id:hinunun:20210602143900p:plain

ループカットショートカットキー[Ctrl + R]

頂点を移動させて形を整えます。

f:id:hinunun:20210602144029p:plain

移動ショートカットキー[G]

少し面取りがカクカクしていますが、あとでモディファイヤープロパティのサブディビジョンサーフェイスを使ってなめらかにするのでカクカクでも大丈夫です。

横から見てもいい感じになってますか?なっていなければ直しましょう。

f:id:hinunun:20210602144442p:plain

いいかんじ

あとはミラーすれば背もたれクッションの形は完成です。

座面と背もたれの一体型フレームの時もやりましたが、重なり部分がなくなるようにオプション設定をしておきます。

f:id:hinunun:20210602144959p:plain

f:id:hinunun:20210602145033p:plain

二等分、反転を適用して重なりをなくしておくことが大切

さて、あとは押し出すだけですね。

平面を押し出して背もたれのベース部分を造形する

 

とりあえず、ストレートに押し出す部分だけは先に押し出してしましましょう。

f:id:hinunun:20210602161806p:plain

押し出しショートカットキー[E]

これはOKですね。

次が問題なのです。

平面を複製して分離し、それを用いて細分化しながら押し出してクッションを造形する

モディファイヤーの「サブディビジョンサーフェイス」を使って細分化しながら押し出して作っていきます。 

が、しかし。。。先ほどのようにやるとこんな感じになっちゃいます。

f:id:hinunun:20210602155637p:plain

なんだか違う

何がおかしいかというと、ミラーした元の面の中心を原点としてスケール変更が行われているからです。 

こうなっているとミラーした面が小さくなると、ミラーをしてくっついていた面が離れてしまいます。

では何とかしましょう。

今回は、ミラーしてできた面を複製して、その面を別のメッシュとして分離し、その新たなメッシュでクッションを作ることにしましょう。

平面を複製して一つのメッシュにする

では面を複製していきましょう。

左上の「メッシュ」ボタンをポチするか、ショートカットキー[Shift + D]で複製できます。

画面が何も変化ないように見えますが、大丈夫です。しっかり複製されています。

f:id:hinunun:20210602163600p:plain

ちょっと選択部分の色が変わった。。。ように思える

そのあとに、面を分離します。

右クリックで面コンテクストメニューを開き、「分離」から「選択」をポチするか、ショートカットキー[P]で分離メニューを開き、「分離」をポチします。

そして何も変化がないかもしれませんが、[Enter]で決定します。

f:id:hinunun:20210602163854p:plain

ショートカットキーで操作すると便利。(重要なので(略))

その後、面が赤くなり、右のシーンコレクションに平面が追加されていれば成功です。

f:id:hinunun:20210602164327p:plain

こんなかんじ

では一度、今複製した面を編集するために、オブジェクトモードに戻ります

そして複製した面を選択し、モディファイヤープロパティにミラーがあることを確認します。

確認後、ミラーのウィンドウ上で[Ctrl + A]を押して、ミラーをオブジェクトに適用します。

モディファイヤープロパティからミラーが消えればOKです。

f:id:hinunun:20210602170105p:plain

f:id:hinunun:20210602170152p:plain

ミラーが消えて適用されているはず

これでミラーした面が一体化した新しいメッシュができました。

ミラーが消えたのを確認して、編集モードに戻ります。

細分化しながら押し出してクッションを造形する

さて、あとは座面のクッションと同じです。

まっすぐ上に押し出したいので、視点は側面図に向けておきます。

右上の「座標アイコン」かショートカットキーテンキー[1]か[3]です。

そして、右側の「モディファイヤープロパティアイコン」を選択し、その中から「サブディビジョンサーフェイス」を選択します。

f:id:hinunun:20210602172238p:plain

サブディビジョンサーフェイスで細分化しながら押し出す

背もたれも面の押し出しと拡縮を行いながら形を作っていきます。

今度は面が一つになっているので、背もたれクッションに山が2つできることなんてないはずです。

f:id:hinunun:20210602172746p:plain

こんなかんじ

お疲れ様です!

これで椅子も完成です。

おまけ:手直し

作りが甘いところはたくさんあります。

 

例えば、脚の面取りがされていなくて角が立っているとか。。。

例えば、脚の曲げ部分がカクカクしているとか。。。

例えば、背もたれのベース部分が細分化されていなくてカクカクしてるとか。。。

 

などなど。思うように手直ししてみてください。

例えば、見た目上スムーズにする「スムーズシェード」を右クリックをして適用するとか。

例えば、スムーズシェードでは思った形ではないとなれば「ベベル」を追加するとか。

色々試してみてください。

 

最終的にはこんな感じになりました。

ベベルの追加を主に行いました。

f:id:hinunun:20210602193638p:plain

見た目はきれいになったはず

 

椅子に色を着けて遊ぶ

せっかく作ったモデルですから、ちょっとでも見栄えをよくしたいですよね。

よくしましょう!

 

色を着けるだけでかなり雰囲気が変わります。

色を着けるのは右側のプロパティウィンドウの「マテリアルプロパティ」から行います。

マテリアルプロパティの「新規」をポチするといろいろなプロパティが設定できる画面が出てくるので適当に触ってみてください。

f:id:hinunun:20210602193900p:plain

f:id:hinunun:20210602194957p:plain

f:id:hinunun:20210602195024p:plain

椅子っぽくなった。。。かな?

最後に

これで机と椅子が作れました。

次はUnityに取り込んで家具の配置を検討できるアプリ開発に着手します。

次も一緒に頑張りましょう!

 

ではではー!

 

 

UnityとBlenderでAR家具配置検討アプリを作ってみる#3~Blenderで椅子を作る②~

前回は椅子の脚を作りましたね。

 

今回は座面と背もたれのフレームを作っていきましょう。

 

※私の記事は実際にモノを作りながら片手間で書いています。体裁が整っていたいことが多々ありますがご容赦ください。

 

ちなみに前回↓

hinunun.hatenablog.com

 

 

椅子を作る

前回までの作業結果はこんな感じです。

f:id:hinunun:20210525161736p:plain

脚だけの椅子。まだ椅子ではないもの。

これに

  • 座面と背もたれの一体型フレーム
  • 座面クッション
  • 背もたれクッション

をつけて、椅子を完成させていきます。

今回は一体型フレームです。

 

準備はいいですか?

Blenderを立ち上げて、前回保存した脚のプロジェクトを読み込んでスタートしていきましょう!

 

座面と背もたれの一体型フレームを作る

では、フレームを作っていきましょう。

前回やったように、立方体を用意して作っていくのもいいのですが

今回はまた違った方法でやっていきましょう。

 

※講座の都合上、フレームは角柱ではなく、円柱として進行していきます。

 

ペジェ曲線を追加してフレームの形を描く

今回は、形状を描いて肉付けしていく手順で進めます。

「追加」ボタンか[Shift + A]で追加メニューを開き、「カーブ」メニューから「ペジェ」を選択します。

f:id:hinunun:20210525162449p:plain

f:id:hinunun:20210525162605p:plain

べじぇ。この曲線をコネコネしていく。

XY平面上に追加されます。

さて、この線でフレームを作っていきましょう。

線でフレームを作った後に、線を中心にした円柱を付けます。

 

ペジェ曲線を変形させて座面フレームの正面図に合わせる

オブジェクトモードから編集モードに切り替えて編集していきます。

左上の「オブジェクトモード」ボタンかショートカットキー[TAB]です。

とりあえず、参照図の形に合わせやすいように、視点を変えましょう。

右上の「座標アイコン」かショートカットキー[1]or[3]です。

f:id:hinunun:20210525163218p:plain

ここからコネていく。

コネる時のコマンドは以下です。

  • 移動 (左側の「移動アイコン」かショートカットキー[G])
  • 回転 (左側の「回転アイコン」かショートカットキー[R])
  • 拡縮 (左側の「スケールアイコン」かショートカットキー[S])
  • 押し出し (左側の「押し出しアイコン」かショートカットキー[E])
  • 細分化 (制御点を複数選択した状態で右クリック「細分化」)

このコマンドたちを使って、形状に合わせていきましょう。

フレームは左右対称なので、左側だけ作ってあとでミラーする流れでやりますか。

 

線を中心に円柱を生成するので、フレームの真ん中に線を合わせます。

まず、曲線全体をドラッグで選択して、[G]で移動させます。

f:id:hinunun:20210525164135p:plain

移動ショートカットキー[G]

長さを合わせます。

曲線の頂点(制御点)を選択して、[G]で移動させます。

平行移動させるために[X]を押してもいいかもですね。

 

f:id:hinunun:20210525164445p:plain

移動ショートカットキー[G]

座面の正面図はこれでよさそうですね。

ペジェ曲線を変形させて座面フレームの平面図に合わせる

平面図はありませんね。。。

想像で作っていきましょう(笑)

視点をテンキー[7]や「座標アイコン」で上から見た図に変えましょう。

f:id:hinunun:20210525165143p:plain

グニョングニョン

曲線の頂点(制御点)を選択して、[R]で回転させます。

f:id:hinunun:20210525165459p:plain

回転ショートカットキー[R]

では曲線をY方向に伸ばしていきましょう。

「押し出しアイコン」かショートカットキー[E]です。

f:id:hinunun:20210525170107p:plain

押し出しショートカットキー[E]

制御点の向きがおかしいので[R]で回転させて直します。

f:id:hinunun:20210525170257p:plain

回転ショートカットキー[R]

形状がおかしいので、[G]で制御点を移動させて形状を整えます。

f:id:hinunun:20210525170439p:plain

移動ショートカットキー[G]

制御点の強さが強すぎて、円弧が大きくなりすぎなので[S]でスケールを調整します。

f:id:hinunun:20210525170701p:plain

拡縮ショートカットキー[S]

何だか円弧が大きい気がするので、先ほど延長した制御点を移動させたり、押し出したりして形状を調整します。

f:id:hinunun:20210525170841p:plain

移動ショートカットキー[G]

f:id:hinunun:20210525170922p:plain

拡縮ショートカットキー[S]

f:id:hinunun:20210525171102p:plain

移動ショートカットキー[G]

f:id:hinunun:20210525171303p:plain

押し出しショートカットキー[E]

大体の座面の形はできましたね。

次に背もたれの形を作っていきましょう。

 

ペジェ曲線を変形させて背もたれフレームの側面図に合わせる

さて、背もたれを作っていきましょう。

視点を側面図に変えます。

「座標アイコン」かテンキー[3]です。

f:id:hinunun:20210525172105p:plain

盛大にずれてる

盛大にずれちゃっているので、直しましょう。(脚はずれてても気にしない。)

ここから、脚が見えていると作業しにくいので、非表示にしておくといいかもですね。

右のシーンコレクションのパーツ一覧から表示非表示を設定できます。

目玉アイコンをクリックしてみてください。

f:id:hinunun:20210525172301p:plain

よくある目玉アイコン

では見やすくなったところで、位置と形状を合わせていきましょう。

とりあえず線全体を選択し、[G]で移動させます。

f:id:hinunun:20210525172451p:plain

移動ショートカットキー[G]

傾けないとだめそうです。線全体を[R]で傾けます。

f:id:hinunun:20210525172606p:plain

回転ショートカットキー[R]

長さが足りません。[E]で押し出します。

f:id:hinunun:20210525172954p:plain

押し出しショートカットキー[E]

形状に合わせるように[E]で押し出していきます。

f:id:hinunun:20210525173057p:plain

押し出しショートカットキー[E]

f:id:hinunun:20210525173215p:plain

押し出しショートカットキー[E]

線がグニョングニョンなので制御点を[R]で回転や[S]で拡縮や[G]で移動したり
制御点が足りない場合は細分化したりして形を整えます。

f:id:hinunun:20210525173416p:plain

回転ショートカットキー[R]

f:id:hinunun:20210525173454p:plain

回転ショートカットキー[R]

f:id:hinunun:20210525173616p:plain

移動ショートカットキー[G]

f:id:hinunun:20210525173705p:plain

拡縮ショートカットキー[S]

形状が合うまで調整しましょう!

ある程度調整していると、いつか形状に合います(笑)

f:id:hinunun:20210525173812p:plain

形状に合った。

形状が合えばOKです。

次は正面図に合わせていきましょう。

 

ペジェ曲線を変形させて背もたれフレームの正面図に合わせる

さて、最後に背もたれを正面図に合わせて作っていきましょう。

視点を正面に向けましょう。

「座標アイコン」かテンキー[1]ですね。

f:id:hinunun:20210525174226p:plain

ずれとるやないかい!

正面図も同じです。形に合わせるようにコネコネしていきます。

まずは[G]で移動させて位置合わせですね。

f:id:hinunun:20210525174516p:plain

移動ショートカットキー[G]

f:id:hinunun:20210525174551p:plain

なんかばぐった。だけど落ち着いて。

なんだか線がはみ出ちゃいましたね。

こんな時は視点を変えて、どこが変になったか確認します。

f:id:hinunun:20210525174826p:plain

平面図(Z視点)の線が変形してはみ出しちゃってる。

座面の形状が変わってしまっていますね。制御点を[G]で移動させましょう。

f:id:hinunun:20210525174958p:plain

移動ショートカットキー[G]

それっぽい形になりましたね。

こういうことを確認しながら、全体形状を見ながら作っていきましょう。

f:id:hinunun:20210525175121p:plain

移動ショートカットキー[G]

背もたれは台形なので背もたれの線全体の傾きを[R]でつける。

f:id:hinunun:20210525175208p:plain

回転ショートカットキー[R]

f:id:hinunun:20210525175410p:plain

移動ショートカットキー[G]

f:id:hinunun:20210525175442p:plain

押し出しショートカットキー[E]

あとは形状を整えていってください。

。。。整えていく過程で、こんなこともあるかもしれません。

f:id:hinunun:20210525175611p:plain

制御点が足りないときもあせらない。

制御点が足りなくて形状がどうしても合わせられない場合は、

制御点を細分化して、制御点を追加することで乗り切りましょう。

制御点を細分化するには、細分化したい複数の制御点を選択し、右クリックでメニューを開き「細分化」を押します。

f:id:hinunun:20210525180116p:plain

f:id:hinunun:20210525180139p:plain

細分化により制御点が増える

選択した制御点の間に、新たな制御点が追加されます。

これらの機能を使って整えていくと。。。

f:id:hinunun:20210525180442p:plain

整ったのでは。

終わったー!

。。。まだです。いろいろな視点から形状を確認して、形を整えましょう。

 

ペジェ曲線を変形させて座面と背もたれ一体フレームの形を整える

やることは今までと同じです。

どの面からみても、形状が整うように調整します。

※今回は、参照図のサイズが合っていないので、正面図の長さに合わせるようにしてください。

f:id:hinunun:20210525181726p:plain

f:id:hinunun:20210525181526p:plain

f:id:hinunun:20210525181428p:plain

はみ出しているけど今回は気にしない。。。すみません。

できましたでしょうか?

今回は参照図が足りない&サイズが合っていないといったミスがありますが、

形状に合わせる練習ができればOKということで許してください。。。

 

さあ、あとは肉付けとミラーリングですね。

 

ベジェ曲線にオブジェクトデータプロパティを使って肉付けする

オブジェクトデータプロパティを使って肉付けしていきます。

右のプロパティウィンドウの「オブジェクトデータアイコン」をポチします。

その中の数値をいじることで、肉付けが可能です。

f:id:hinunun:20210525182137p:plain

このオプションで肉付けしていく

この中の「ジオメトリ」の「ベベル」にある、

「丸め」を選択し、「深度」を調整すれば肉付けができます。

f:id:hinunun:20210525182540p:plain

f:id:hinunun:20210525182822p:plain

簡単にチューブが作れる

やったー!できましたか?

あとはミラーリングしたらフレームの完成です。

 

オブジェクトをミラーリングしてフレームを完成させる

さあ、ミラーリングです。

肉付けした時と同じプロパティウィンドウにある「モディファイヤープロパティ」を選択して、ミラーリングを行います。

f:id:hinunun:20210525183114p:plain

f:id:hinunun:20210525183139p:plain

f:id:hinunun:20210525183218p:plain

それっぽいのができた

できたー!

。。。とお思いでしょう。ちょっと待ってください。

拡大してみてみましょう。

f:id:hinunun:20210525183817p:plain

何だかはみ出しちゃってる。

こうならないように、ミラーの設定を少しいじります。

二等分を設定すると、重なっている部分のみが表示されます。

f:id:hinunun:20210525184010p:plain

二等分(Bisect)

さらに、反転を設定すると、重なっていない部分のみ表示されます。

狙っていたものはこれですね。

f:id:hinunun:20210525184252p:plain

反転(Flip)

これで重なってオーバーしてしまっている部分はなくなりました。

これにてフレーム作成終了です。

やりましたね!

f:id:hinunun:20210525184536p:plain

これで、チューブ系は何でも作れちゃいますね。

油圧の配線チューブとか、そこらへんに転がっているコードとか、作り放題です(笑)

 

あとは座面と背もたれのクッションを作れば椅子の完成です。

 

座面のクッションを作る

さて、クッションづくりです。

クッションは正方形なようなので、平面メッシュを作って押し出していくようにしましょう。

 

。。。これは次回にしましょうか。スクロールバーも小さくなっちゃってますし。

 

 

 

To Be Continued...

 

 

 

 

 

 

 

UnityとBlenderでAR家具配置検討アプリを作ってみる#2~Blenderで椅子を作る①~

前回は簡単な机を作りましたね。

机があるということは椅子が欲しくなります。

ということで椅子を作っていきましょう。

机は立体の組み合わせで作っていったので、椅子は違う方法で作っていきましょうか。

 

※私の記事は実際にモノを作りながら片手間で書いています。体裁が整っていたいことが多々ありますがご容赦ください。

 

ちなみに前回↓

hinunun.hatenablog.com

 

 

椅子を作る

どんな椅子を作ろうかと、ネットサーフィンをして見つけたのはこれ。

京都レントオール |ホテルイス|

ホテルイス

         

  f:id:hinunun:20210518143105j:plain f:id:hinunun:20210518143101j:plain

上面図はなかった。。。想像するしかない。

構成している要素としては

  • 脚フレーム(角柱)
  • 座面と背もたれフレーム(円柱)
  • 座面のマット
  • 背もたれ

簡単に書くとこんな感じですね。

参照画像を用意する

さて、下準備をしていきましょう。

今回は展開図に合わせて作っていくので、上記サイトから展開図を保存して、正面図と側面図の2枚に画像に分割します。

画像の分割は任意の画像加工ソフトでやってください。私はGIMPで行いました。

 

 

参照する画像を取り込む

では用意した画像をBlenderに取り込みます。

Blenderを起動し、初期配置されているキューブを消します。オブジェクトを選択してキーボードの[Delete]です。

f:id:hinunun:20210518144620p:plain

いつもの画面。

画像を取り込むには、メッシュを追加したときのように左上周辺の「追加」ボタンかショートカットキー[Shift + A]でメニューを展開し、「画像」メニューの「参照」から画像を追加します。

f:id:hinunun:20210518144906p:plain

f:id:hinunun:20210518145143p:plain

取り込めた。
向きを変える

取り込めましたが、画像がXYZ軸に対して傾いちゃってますね。直しましょう。

右上周辺にある「<」ボタンかショートカットキー[N]でトランスフォームウィンドウを表示し、回転メニューの値を直して向きを整えましょう。

f:id:hinunun:20210518145650p:plain

これで大丈夫そう。

同じ手順で側面図も取り込みます。

f:id:hinunun:20210518150052p:plain

画像を移動させる

画像が重なってしまっているので、画像を移動させましょう。

左側の「移動アイコン」をポチして移動軸をつかんで移動させるか、ショートカットキー[G]でつかんでから移動させたい移動軸キー(たとえば[X])を押して平行移動させます。

f:id:hinunun:20210518150529p:plain

これでよし!
画像を透過させる

画像ががっつり見えすぎて作業がやりにくくなるので、少し透過させましょう。

透過させたい画像を選択し、右側のイメージタブ内にある不透明度を変えましょう。

f:id:hinunun:20210518160339p:plain

ほうら。これで見やすくなったろう。

これで下準備が終わりました。

早速作っていきましょう。

※ここでは練習なので参照図の配置はわざと調整していませんが、練習じゃない人は初めから正面図がワールド原点の中心に来るようにしておいてください。

 

脚フレーム(角柱)を作る

まずは脚フレームを作っていきましょう。

側面図を見ながら作業をするので、側面図を正面にみられる視点に変えましょう。

右上にある座標軸アイコンか、視点を変えられるショートカットキーのテンキー[1]か[3]で変えましょう。

f:id:hinunun:20210518160607p:plain

ショートカットキーで操作すると便利。(重要なので(略))
立方体を追加する

では立方体メッシュを追加します。

「追加」ボタンか[Shift + A]でメニューを開き、「メッシュ」から「立方体」を選びます。

f:id:hinunun:20210518161034p:plain

f:id:hinunun:20210518161107p:plain

この立方体から始める。

この立方体を変形させていきますが、塗りつぶされていて奥の参照図が見れないので、オブジェクトの表示モードを変えましょう。

オブジェクトの表示モードを変える

表示モードは4つあります。その中の面が塗りつぶされないワイヤーフレームモードを選びましょう。

右上の「表示アイコン」かショートカットキー[Z]で表示モードを変更します。

f:id:hinunun:20210518161626p:plain

ショートカットキーで操作すると便利。(重要なので(略))

f:id:hinunun:20210518161737p:plain

ほうら。これで見やすくなったろう。
立方体を拡縮してサイズを合わせる

では、先ほどの立方体を脚のサイズに合わせていきましょう。

寸法を入れる方法を前回やりましたが、今回は参照図に合わせていきましょう。

サイズに合わせやすいように、立方体を移動させてから拡縮しますか。

左の「移動アイコン」かショートカットキー[G]で移動させます。

f:id:hinunun:20210518162212p:plain

原点を脚幅の中心に持っていくと後で楽。

次に拡縮させて、立方体を脚幅に合わせます。
左側の「スケールアイコン」かショートカットキー[S]で変形します。

ついでに、立方体の底面を脚の底に移動させることもやっておきましょう。

「移動アイコン」かショートカットキー[G]ですね。

f:id:hinunun:20210518162609p:plain

スケールと位置の微調整。
立方体を伸縮して脚を伸ばす

では、立方体を伸ばして脚の長さに延長しましょう。

編集モードに切り替えます。

ショートカットキーは[TAB]です。

立方体の上面を脚の上に移動させることで変形してくれます。

面選択モードにして、立方体上面を選択して移動させましょう。

「移動アイコン」かショートカットキー[G]です。

f:id:hinunun:20210518163626p:plain

ショートカットキーで操作すると便利。(重要なので(略))
立方体に面に平行な辺を追加する(ループカット)

次に脚を横方向に伸ばさなければいけませんね。

伸ばしましょう。

伸ばすためには、面を追加する必要があります。

そのためにループカットという、オブジェクト一周分の辺を追加する操作を行います。

左側の「ループカットアイコン」かショートカットキー[Ctrl + R]でできます。

f:id:hinunun:20210518165248p:plain

f:id:hinunun:20210518165506p:plain

横方向に伸ばしたい位置でループカット
面を押し出して横方向に伸ばす

横方向に伸ばすための面を追加したので、押し出しましょう。

伸ばしたい面を選択して、左側の「押し出しアイコン」かショートカットキー[E]ですね。

f:id:hinunun:20210518170439p:plain

伸びたけどずれてる。
立方体の頂点を移動させてサイズを合わす

基本的にメッシュは頂点を移動させることで変形できます。

移動は「移動アイコン」かショートカットキー[G]でしたね。

フレームに合うように変形していきましょう。

f:id:hinunun:20210518173922p:plain

なんとなくあった。
面取りする(ベベル)

フレームの形状に合わすために、面取りをしないとだめですね。

やりましょう。

面取りをしたい辺か頂点を選択し、

左側の「ベベルアイコン」かショートカットキー[Ctrl + B]で面取りができます。

f:id:hinunun:20210518174324p:plain

面取りのセグメントの細かさはベベルメニューから変える。

f:id:hinunun:20210518174537p:plain

これでよし!

セグメントの細かさはマウスホイールでも変更できます。(この時私は何故かできなかった。。。)

外側の面取りも同じように行いましょう。

f:id:hinunun:20210518175014p:plain

きれいにできた。

きれいに合わない場合は、ベベルをかける前に頂点の位置を調整するとうまくいくことが多いです。調整してみましょう。

面を押し出して脚を下に伸ばす

残りの脚を面の押し出しで作っていきましょう。

使う操作は

押し出し、頂点や面の移動です。

ショートカットキーは[E]や[G]ですね。

f:id:hinunun:20210518180638p:plain

伸ばして変形して伸ばして変形して。。。

f:id:hinunun:20210518181028p:plain

こんな感じになればOK。

脚の形状が完成です!

オブジェクトをせん断して脚の角度を合わせる

脚を側面から見た形状はできましたね。

正面から見たときにどうでしょうか。

移動させて見てみましょう。

 

手順は 

右上の「座標軸」かショートカットキーのテンキー[1]か[3]で視点変更をして

左側の「移動アイコン」かショートカットキー[G]でオブジェクトを移動させる

です。

f:id:hinunun:20210518184954p:plain

ずれとる。

 

参照図の脚に傾きがついていて若干ずれちゃっていますね。

参照図に合わせるために回転させてもいいのですが、上面と下面がXY平面に対して平行ではなくなってしまうので、今回は脚をせん断して傾きを合わせる方法を取ります。

左側の「せん断アイコン」かショートカットキー[Shift + Ctrl + Alt + S]→せん断したい方向[X][Y][Z]でせん断できます。

f:id:hinunun:20210518185400p:plain

ショートカットキーで操作すると便利。(重要なので(略))
面などを移動させて脚の幅を合わせる

脚の形状も傾きもOKなので、あとは幅を合わせるだけですね。

面の移動等を駆使してやってみてください。

f:id:hinunun:20210518185924p:plain

いいかんじ。
ミラー複製して完成!

脚は2本必要ですね。

ミラーしましょう。

右のプロパティウィンドウの「モディファイヤープロパティアイコン」からモディファイヤーを追加します。

たくさんあるメニューの中から「ミラー」を選択します。

f:id:hinunun:20210518191106p:plain

f:id:hinunun:20210518190944p:plain

たくさんの便利機能がある。とりあえず適当に押してみると楽しい。

f:id:hinunun:20210518194133p:plain

オプションでミラーをする座標軸やミラーの基準にするオブジェクト等を設定できます。

ミラーオブジェクトは空欄にしておくと、ミラー対象の原点を中心にミラーされます。

今回は、脚パーツの原点をワールド原点に移動させてミラーしましょう。

 

手順

脚パーツを選択

3Dカーソルをワールド原点に移動させる。ショートカットキー[Shift + S]。

左上周辺の「オブジェクト」でメニューを開き、「原点を設定」から「原点を3Dカーソルへ移動」をポチ

f:id:hinunun:20210518193431p:plain

f:id:hinunun:20210518193643p:plain

f:id:hinunun:20210518193950p:plain

。。。ずれとるやんけ!というときは、参照図がずれてます。

参照図の位置を正しい位置に持っていき、オブジェクトを移動させて脚パーツの位置合わせをします。

オブジェクトを移動すると、原点の位置もワールド原点からずれるので、また3Dカーソルの位置に原点を移動させます。

f:id:hinunun:20210518194525p:plain

よさそう。

。。。最後の位置調整はめちゃくちゃめんどくさいですよね。

今度作るときは絶対に作業始めで合わせておきましょう!!!

 

とりあえず脚は完成です。お疲れさまでした。

最後に

さて、これで椅子の脚はできましたね。

前回とは違う方法で作りましたがどうでしたか?うまくできてるとうれしいです。

 

次回は座面と背もたれのフレームと、座面と背もたれのクッションを作りましょう。

 

ではではー!