蒼水家技術録

蒼水が普段制作とか勉強とかして覚えたことを復習としてまとめてるものです。 それが最適解かどうかはわからないけど、何を目的として始めて、何が必要で、実際何をやって、どうなったか、まで全部過程を残すための技術ブログです。

Blender Tips編 #12 Twist Boneで自然な捻りを実現する

Blender モデリング Tips 3DCG

今回はツイストボーン（Twist Bone）と呼ばれる、いわゆる捻りのための補助骨の仕様や作成方法を解説します。
Unityでの実装方法は別途Unity Tips編の記事で執筆予定です。
今回の記事で必要にもなるコンストレイントについての前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com

今回の目的

今回は手や腕を捻ったときに急激な頂点の動きや痩せてしまう問題を主に解決するためのツイストボーンを自分のモデルに対応し、ボーンコンストレイントを使用して改善することを目的とします。
また今回の内容は前回記事のコンストレイントについて理解していることを前提とします。

ツイストボーンの仕様


ツイストボーンは上画像のように作成します。詳しく見てみましょう。

ボーン階層について

ボーンの階層は以下のような構成にします。
気を付ける必要があるのは前腕の位置にはあるものの上腕の子ではなく、前腕の子にします。
つまりHandの階層を並列にしておく必要があります。
（＊骨構造は自分のようなタイプやそもそも前腕ボーンを複数本構成にする、等いろいろあるのであくまでも一例です）

また、これらの子にするボーンの接続は外しておきます。
＊接続してしまうと骨の向きがおかしなことになります。

また、骨の軸はLowerArmやHandと一致させておく方が後々の制御のことを考えると良いと思います。
今回の自分のモデルではY回転が捻りになるためここは必ず一致させてください。

なお、ツイストボーンの数はお好みで。大体の場合は2～4本くらいが一般的かなと思います。
自分のモデルがローポリなのかハイポリなのかによって増減させると良いと思います。
今回自分のモデルは比較的ローポリのため2本としました。

頂点グループの追加


ツイストボーンを追加したら、それに応じて頂点グループも追加しておきましょう。
Blenderは名前が一致していればその名前の骨のウェイトを紐づけがされます。

ウェイトの振り方


ウェイトの振り方は上動画のようにします。
ここで重要なのはツイストボーンにウェイトを振る関係で本来のLowerArmにはウェイトは振らないことです。
つまり、本来のウェイトをツイストボーンに分割して振るイメージです。
また、前項のようにLowerArmの子にすることでこれらの骨が全て一緒に動かされることになるため、従来のウェイトと比較して挙動自体には影響はありません。

コンストレイントを設定する


ツイストボーンの追加・ウェイトの設定ができたら実際にコンストレイントを設定していきます。
各骨に回転コピーのボーンコンストレイントを追加し、画像のように設定します。
内容としてはターゲットとボーンはHand骨にし、座標軸をYのみになるようにします。
骨の軸はここで大事になるため一致させていました。なお、仮に捻りがXならXに、ZならZに設定すればOKです。
ミックスは置き換え、ターゲットとオーナの空間はともにローカル空間に設定します。
最後に影響を設定しますが、ここの値はターゲットボーンからの距離で離れるほど減衰させるような値に設定します。
ここは実際捻りながら確認する必要がありますが、今回は近い順に 0.3 -> 0.2 としてみました。
これを両腕に設定したら対応完了です。捻ったときに前腕の一部がある程度一緒に動くことで急激な頂点の移動が軽減され痩せも軽減されていることがわかります。

ツイストボーン対応前
ツイストボーン対応後

おわりに

今回は前腕にのみ適用してみましたが、上腕や脚などにも応用が可能な手法なので是非導入してより綺麗で自然な捻りを目指しましょう。

次回記事

＜記事ができ次第追加＞

Blender Tips編 #11 コンストレイントを理解する

Blender モデリング リギング Tips 3DCG

どうも蒼水です。
今回はコンストレイントについてまとめておこうと思います。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com

今回の目的

今回は使いこなせばいろいろ使えるボーンコンストレイントについての知見をまとめておくことを目的とします。
また、前提としてUnityとの連携を前提としているためUnityでも多用される「位置」「回転」「拡縮」、つまりトランスフォームに関わるコンストレイントについてのみ扱いますので予めご了承ください。

前提：コンストレイントとは


直訳すると制約とか拘束とかそういった意味なんですが、要するにボーンAとボーンBを紐づけしたり単体で制限をかける機能！ってことです。
片方を動かしたら紐づけたもう片方も動かす、あるいは単体で制限をかける、そのための仕組みをコンストレイントと言います。
この紐づけには位置<->位置のような同じトランスフォームはもちろん、位置<->回転のような異なるトランスフォームでの紐づけも可能です。
これをボーンに対して行う機能をボーンコンストレイントと言い、今回はこれについて解説します。
また、ボーンだけでなくオブジェクトにも存在しており、オブジェクトコンストレイント機能がありますが似たようなものなので1つの記事として扱います。

コンストレイントの追加方法


オブジェクトはオブジェクトモードで、ボーンはポーズモードでプロパティから追加できます。
ボーンコンストレイントは追加すると対象のボーンが緑色になります。

位置コンストレイント(Position Constraint)

位置コピー


ターゲットボーンとコンストレイントを付けたボーンを紐づけし、ターゲットボーンを動かすと一緒に動くようになります。
感覚としては親子関係の親と子が近いです。
ただし、コンストレイントには影響値というものがあり紐づけ具合の調整ができたりします。
また個別に空間設定も行うことができます。とはいえ基本自分はローカル空間同士で使うことが多いですね。

位置制限


位置制限はXYZ軸別で移動に制限をかけることができます。
一定以上に移動させたくない場合に使用します。
何かの枠の中だけ等予め動く範囲が決まっている場合とかはこれを使用して動きに制限をかけたりします。

回転コンストレイント(Rotation Constraint)

回転コピー


ターゲットボーンとコンストレイントを付けたボーンを紐づけし、ターゲットボーンを回転させると一緒に回転するようになります。
衣装のケープみたいなものとかスカートの根本とかに使ったりすることで干渉回避をできるようにしたりできます。

回転制限


回転制限はXYZ軸別で回転に制限をかけることができます。
一定以上に回転させたくない場合に使用します。
人間の四肢など予め回転する範囲が決まっている場合とかはこれを使用して回転に制限をかけたりできます。

拡縮コンストレイント(Scale Constraint)

拡縮コピー


ターゲットボーンとコンストレイントを付けたボーンを紐づけし、ターゲットボーンの大きさをいじると一緒に拡縮するようになります。
何かと連動させて大きさいじるもの...あまり思いつかない...

拡縮制限


回転制限はXYZ軸別で拡縮に制限をかけることができます。
一定以上に拡縮させたくない場合に使用します。
何かの枠の中だけ等予め納める範囲が決まっている場合とかはこれを使用して大きさに制限をかけたりします。

トランスフォーム変換


トランスフォーム変換はちょっと理解しにくいかもしれないですが、要するに位置・回転・拡縮といった違うものを紐づけして連動させる機能です。
上動画では位置<->回転で変換した場合の挙動です。
こういった挙動は補助骨とかの制御で結構使うことが多く、コンストレイント以外でもドライバー（ドリブンキー）での実装を行ったりします。
例えば肘や膝の補助骨は脚の回転と補助骨の位置を連携させてシルエットを良くしたりします。

おわりに

これらが良く使うトランスフォーム系のコンストレイントとなります。
Blenderでこれらを実装してもUnityにもっていくとそのままは使用できませんがUnity側にもコンストレイントがあるので再現することは可能となっています。
とりあえずBlender上で補助骨の挙動を確認したい場合におすすめの機能です！
次回はこれを使用して実際にキャラモデルの腕の捻り、いわゆるツイストボーン（Twist Bone）の実装を行ってみようと思います！

次回記事

atelier-aomi.hatenablog.com

Blender Tips編 #10 法線の表示や反転などの法線操作覚書き

Blender モデリング Tips 3DCG

どうも、蒼水です。
今回は法線周りの操作ちょくちょく忘れるのでメモ書き程度にまとめておく内容となっています。
前回のTips記事はこちらからどうぞ。
atelier-aomi.hatenablog.com

今回の目的

今回はモデリングしていくうえで法線に関わる操作周りを覚えておくことを目的とします。
具体的には面の向きや法線方向の表示・確認方法や、法線の反転、フラット/スムーズシェードの切り替えなどの内容となります。

面の向きの確認方法


面の向きの表示は実質的に法線方向の確認として使えます。
表向きは青く、裏向きは赤く描画されます。
表示方法は3Dビューポート右上にあるビューポートオーバーレイの中にある面の向きにチェックを入れるだけでOKです。

Unity等に持ち込んでなんか一部描画されない！とかそういう場合はだいたい法線が逆向きの場合です。
そういったときにはこのように面の向きを表示することでどこが反転してしまっているか一目瞭然となります。

頂点/面法線方向の確認


こちらは編集モード時のみビューポートオーバレイに表示されるノーマルという項目から描画することができます。
3種類表示できるのですが、基本頂点法線と面法線と思ってもらって大丈夫です。
水色の線が面法線、ピンク色の線が頂点法線です。
下画像ではスムーズするかしないかを並べたもので、左はスムーズなしのため頂点法線が各面それぞれで別方向を向いていることがわかります。
右はスムーズありなので隣接する面のちょうど中間方向を指し、わかれていないことがわかります。
余談というか別途記事作ろうかなと思っているんですが、この頂点法線が別方向を向いているとUnityとかで背面法アウトラインを出すときに切れてしまったりするのはこれが原因だったりします。

法線の反転等のメニューの呼び出し


法線（ノーマル）メニューの呼び出しはCtrl＋Nで表示できます。
この中に法線反転や、向きを揃えたりする機能が格納されています。いうて反転くらいしか自分は使わない気がしますね。

ちなみに選択した部分に対して適用されるので画像のように一部だけ法線を反転する、とかができます。
押し出しとかするとよく法線方向が意図しない方向になったりすることがあるのですがそういった場合には反転してしまっている部分だけを選択して本来の向きにする、みたいな用途でよく使用します。

自動スムーズ設定


メッシュのプロパティにはノーマルの項目がありここの自動スムーズにチェックを入れることで法線スムーズをかけることができます。
その際の角度のしきい値を設定することができ、例えば上動画は立方体なのでそれぞれ90度の角度を持っているため、90度を超えたところでスムーズがかかっているのを確認できると思います。

スムーズ / フラットシェード


オブジェクトモードでWキーでコンテクストメニューを呼び出してそこから設定できます。
なお編集モードでも実行でき、こちらの場合は選択した部分のみスムーズシェードにする、とかも可能です。

シャープをマーク


自動スムーズと関連して、指定したエッジに対してのみ強制的にハードエッジにすることが可能です。
やり方としてはハードエッジにしたいエッジを選択してWキーでコンテクストメニューを表示し、その中にあるシャープをマークを実行すれば水色の線が付きハードエッジにできます。

おわりに

以上、法線に関わる設定方法の覚書きでした。
自分でもよく忘れるので自分でも見に来ます...。

次回記事

atelier-aomi.hatenablog.com

Blender Tips編 #9 キャラクターの顔を法線転写で綺麗に魅せる

Blender モデリング Unity Tips 3DCG

前回のTips記事から時間が空きすぎました（白目）
先日のお知らせでも出したように新うちの子３D（SD蒼水りあ）が完成したので早速活躍してもらおうと思います！
法線転写の基礎となる前回のTipsはこちらからどうぞ。
atelier-aomi.hatenablog.com

よろしければお披露目したお知らせ記事も併せてどうぞ（今後の方針とかも書いてます）
atelier-aomi.hatenablog.com

今回の目的


左：法線転写あり　右：法線転写なし
前回の記事で覚えた法線転写を使用してキャラクターの顔に対して法線転写を行い、上画像のように本来の法線を滑らかな球面のようにし顔のシェーディングがきれいになるようにすることを今回の目的とします。
もはや定番的な話ですね。最終的にはUnityへ持ち込んでシェーディングする前提のお話となります。
また本記事では法線転写するだけでなく、頂点グループを使用してメッシュオブジェクトの一部にだけ適用することもできるのでそれも含めて解説します。

転写元にするオブジェクトの作成


自分はカプセルをよく使用して法線転写を行っています。
上画像のように調整したものを作成し、頭部全体を覆うように配置します。
転写元メッシュはきちんとスムーズ法線にし、より滑らかになるように細分化もモデファイヤを追加しても良いかもしれません。
スムーズシェードはオブジェクトを選択して「W」キーから出るコンテクストメニューから行えます。
細分化はお好みで。法線スムーズはそんなはポリではなくともそれなりにはなりますが、細かいに越したことはないと思います。

この際プロパティのノーマルの自動スムーズにチェックを入れるのを忘れずに。

データ転送モデファイヤで法線転写をする


ではさっそく法線転写していきましょう。
フローは前回の記事の通りで頭部メッシュにデータ転送モデファイヤを追加し、先ほど作成した転写元オブジェクトを参照。
面コーナーにチェックを入れカスタム法線を有効にします。
これで転写完了です！

部分的に法線転写をする



データ転送モデファイヤには頂点グループを指定するところがありここに上画像のように専用にウェイトを振った頂点ウェイトを指定するとウェイトに応じて法線転写を反映させることができます。
ちなみに0か1ではなく、ウェイトの0～1のようなグラデーションで0.5だけ適用させる、みたいなこともできます。
キャラクターの頭部であれば首のつなぎ目などには転写させたくないのでこのようなウェイト振りにしています。

Unityに持ち込んでルックを確認する

左：法線転写あり　右：法線転写なし

SDなのでそこまで違いが分かりにくいかもしれませんが、口周りとかは結構顕著に違いが判りますね。
下画像は１フレームわかりやすい部分を切り出したもので転写ありの左はきれいに出ているのに対して、転写前の右の方は鼻～口にかけて嫌な影が出ていたりフェイスラインの影もあまりきれいではありません。
このように法線転写するだけで綺麗な顔を綺麗にシェーディングすることができるのでアニメ・イラスト調のモデルではほぼ必須級のテクニックですね。

おわりに

ものの数分くらいの作業という低コストで綺麗にできるのだからやらない理由がない。やろう。

次回記事

atelier-aomi.hatenablog.com

Unity Shader編 #23 ノードとコードを一緒に覚えるShader Graph -アウトラインの実装　その2-

Unity ShaderGraph HLSL Shader

前回までで基本的なアウトラインの実装について解説しました。
前回の記事はこちらからどうぞ。
atelier-aomi.hatenablog.com

実行環境：Unity6(6000.0.26f1)

今回の目的

今回は前回のアウトラインの実装に引き続き機能を拡張していきます。
アウトラインカラーとしてメインのテクスチャの色をブレンドしてモデルになじませたり、マスクを使用してアウトラインの幅の制御を出来るようにすることを目的とします。

ノードで見るカラーブレンドとアウトラインマスク


前回から拡張したノード構成は上画像の通りです。
拡張した部分にフォーカスしてみていきましょう。

プロパティの追加


前回用意したColorとWidthに加えてMain TextureとOutline Maskのプロパティを追加しておきます。

テクスチャカラーブレンドの実装


前回まででは単純にプロパティのColorの単色を使用していましたが、メインテクスチャのカラーを使用することでルックをなじませることができます。
やっていることは単純で、メインの方で使用しているてテクスチャをサンプリングしてプロパティのColorと乗算するだけで実現できます。
なお、Outline Colorのデフォルト値はグレーにしておくのがおすすめです。
テクスチャそのものの色ではアウトラインぽくないので少し暗くした状態をアウトラインとして使用するためです。

アウトラインマスクの実装


アウトラインマスクは頂点オフセットに乗算する形で実装可能です。
仕組みとしては正規化ベクトル＊Widthでオフセット量を決定していますが、そこに0-1のマスクテクスチャを乗算することで幅を調整しています。
気を付けなければいけない点としてVertexShaderでは今までテクスチャのサンプリングに使用していたSample Texture 2Dノードを使用できない点です。
VertexShaderではその代わりにSample Texture 2D LODというノードを使用します。こちらのノードであればVertexShaderでも使用することが可能です。
公式リファレンスはこちら
docs.unity3d.com

この実装によりテクスチャカラーのブレンドとマスクテクスチャによる幅の調整が可能になりました。
とはいえ、アウトラインをShaderGraphで作成することは前回同様におすすめしません！
テクスチャカラーをブレンドするためだけにプロパティとしてテクスチャを定義しないといけない点もあまりよくない要素ですね。コードであれば共通のプロパティを使用できます。

コードで見るテクスチャとアウトラインマスク

ではコードの方も解説していきます。

プロパティの追加

_OutlineMaskと_useBlendMainTex を追加します。
_useBlendMainTex はMain Textureの色とブレンドするかどうかを設定します。コード側ではMain Textureは共通となるのでこういった措置を行います。
Main Textureはもともと用意していたものが使用できるのでそれをそのまま使用できます。単色アウトラインにする場合はOffにすることで切り替えが可能です。
Colorはアウトラインなのでグレーを初期値としておきます。

// Outline
[Toggle] _EnableOutline ("Enable Outline", Float) = 1
_OutlineColor ("Outline Color", Color) = (0.5,0.5,0.5,1) // グレー
_OutlineWidth ("Outline Width", Range(0, 0.1)) = 0.01
_OutlineMask ("Outline Mask", 2D) = "white" {} // 追加
[Toggle] _useBlendMainTex ("Use Blend Main Texture", float) = 1 // 追加

いつも通りCBUFFERにも追加します。テクスチャも追加しているのでCBUFFER外に記述しておきます。

CBUFFER_START(UnityPerMaterial)
　　// メインのPassにある既存プロパティに加えて追加下プロパティを記述する
　　float _EnableOutline;
　　float4 _OutlineColor;
　　float _OutlineWidth;
　　float _useBlendMainTex; // 追加
CBUFFER_END

TEXTURE2D(_OutlineMask);
SAMPLER(sampler_OutlineMask);

テクスチャカラーブレンドの実装

メインテクスチャをサンプリングしてそれをアウトラインカラーとして使用します。その際元の単色のカラーと乗算させるだけでOKです。

float4 OutlineFragment(OutlineVaryings IN) : SV_Target
{
　　if (_EnableOutline < 0.5) discard;

　　float4 mainTex = SAMPLE_TEXTURE2D(_Main_Texture, sampler_Main_Texture, IN.uv); // 追加
　　float4 outlineColor = lerp(_OutlineColor, _OutlineColor * mainTex, _useBlendMainTex); // 分岐できるように変更
　　return outlineColor;
}

アウトラインマスクの実装

アウトラインマスクは頂点オフセット部分のためVertexShader側に実装します。
プロパティの_OutlineWidthにマスクのRチャンネルを乗算させたものを頂点に加算することで実装可能です。
なお、ノードの時と同様に通常のSAMPLE_TEXTURE2Dは使用できないのでSAMPLE_TEXTURE2D_LODでマスクをサンプリングします。

OutlineVaryings OutlineVertex(OutlineAttributes IN)
{
　　OutlineVaryings OUT;
                
　　if (_EnableOutline > 0.5)
　　{
　　　　float4 outlineMask = SAMPLE_TEXTURE2D_LOD(_OutlineMask, sampler_OutlineMask, IN.uv, 0); // 追加

　　　　float3 normalOS = normalize(IN.normalOS);
　　　　float outlineWidth = _OutlineWidth * outlineMask.r; // 追加
　　　　float3 positionOS = IN.positionOS.xyz + normalOS * outlineWidth;
　　　　OUT.positionHCS = TransformObjectToHClip(positionOS);
　　}
　　else
　　{
　　　　OUT.positionHCS = TransformObjectToHClip(IN.positionOS.xyz);
　　}
                
　　return OUT;
}

これでノードとコードで同じ挙動を実装出来ました。
が、繰り返しになりますがアウトラインの実装はノードではなくコードで実装することを強く推奨します！

おわりに

これにてトゥーンシェーダーの実装の流れに沿っての解説は一旦ここで一区切りとなります。
Shader編自体はまだまだ続きますが、連載物というよりかは単発的な内容、１記事完結みたいな記事になっていくと思います。
次回だけちょっとおまけ的な話を書きます。

次回予告

シェーダ―ファイル1つだとさすがにやばくないか...?
よし、分離して管理しよう！というお話を最後の〆にします！

次回記事
＜記事ができ次第リンク作成予定＞

Unity Tips編 #3 エディタ拡張でHLSLファイルを作成できるようにする

Unity エディタ拡張 C# Shader


どうも蒼水です。
最近シェーダー開発していてちょーっと不便だなと思ったこととしてUnityくん、標準でHLSLファイルを作成できないらしい。
だったら拡張すれば良いじゃない！ということで作りました、という記事です。
ツール配布あります。

前回のTip記事はこちらからどうぞ。
atelier-aomi.hatenablog.com

実行環境：Unity6(6000.0.26f1)

今回の目的

今回はUnity標準で対応されていないHLSLファイルを作成できるようにエディタ拡張をすることを目的とします。
Shaderを開発しているとIncludeファイルをHLSLで作成することがあるのですが、標準で作れないじゃん！って思って作ったのでそのメモです。

BOOTHで配布していますのでご自由にご利用ください！
atelier-aomi.booth.pm

機能紹介



本スクリプトをインポートするとProjectウィンドウで右クリック -> Create -> Shader -> HLSL Include FIleからHLSLファイルを作成可能になります。


また、作成時にファイル名を自由に付けることができ、作成されたファイルにはインクルードガードが自動挿入された状態で作成されます。
なので純粋にそのまますぐShander Includeファイルの開発を可能としました。

コード解説

変数の定義

変更可能性のあるものに対応するためにこれらは変数として扱います。
ファイル名と対象のパスが対象です。

private static string _fileName = "NewShaderInclude";
private static string _selectedPath = "";

作成時のウィンドウ表示

ウィンドウの表示に関してはこの部分。
現在選択しているファイル、階層を判断し作成対象のパスを取得し、その場に作成できるようにします。

[MenuItem("Assets/Create/Shader/HLSL Include File", false, 84)]
static void ShowWindow()
{
　　// 選択中のパスを取得
　　_selectedPath = AssetDatabase.GetAssetPath(Selection.activeObject);
　　if (string.IsNullOrEmpty(_selectedPath))
　　{
　　　_selectedPath = "Assets";
　　}
　　　else if (!Directory.Exists(_selectedPath))
　　{
　　　_selectedPath = Path.GetDirectoryName(_selectedPath);
　　}

　　// ウィンドウを表示
　　HLSLFileCreator window = GetWindow<HLSLFileCreator>(true, "Create HLSL File", true);
　　window.minSize = new Vector2(400, 120);
　　window.maxSize = new Vector2(400, 120);
　　window.ShowUtility();
}

HLSLファイルを作成する

HLSLファイルを作成するメソッドです。
ここでは入力された文字列をもとにマクロ名を作成し、それをもとにHLSLファイルに書き込んで生成します。
これにより自動インクルードガードが設定された状態でファイルを作成できます。

        void CreateHLSLFile()
        {
            if (string.IsNullOrWhiteSpace(_fileName))
            {
                EditorUtility.DisplayDialog("Error", "File name cannot be empty!", "OK");
                return;
            }

            // 不正な文字を削除
            _fileName = string.Join("_", _fileName.Split(Path.GetInvalidFileNameChars()));

            string fileNameWithExt = _fileName + ".hlsl";
            string filePath = AssetDatabase.GenerateUniqueAssetPath(Path.Combine(_selectedPath, fileNameWithExt));

            // マクロ名を生成
            string macroName = _fileName.ToUpper().Replace(" ", "_") + "_INCLUDED";

            string template = $@"#ifndef {macroName}
#define {macroName}

// Add your shader code here

#endif // {macroName}
";

            File.WriteAllText(filePath, template);
            AssetDatabase.Refresh();

            Object asset = AssetDatabase.LoadAssetAtPath<Object>(filePath);
            Selection.activeObject = asset;
            EditorGUIUtility.PingObject(asset);

            // 次回のためにデフォルト名をリセット
            _fileName = "NewShaderInclude";
        }

OnGUI


GUI描画周りです。
ここで文字列の入力周りやボタン周りの実装しており、先ほどのメソッドを呼ぶことでファイルを生成します。

        void OnGUI()
        {
            GUILayout.Space(10);

            EditorGUILayout.LabelField("File Name (without extension):", EditorStyles.boldLabel);
            GUI.SetNextControlName("FileNameField");
            _fileName = EditorGUILayout.TextField(_fileName);

            GUILayout.Space(10);
            EditorGUILayout.LabelField($"Path: {_selectedPath}", EditorStyles.miniLabel);

            GUILayout.Space(10);

            EditorGUILayout.BeginHorizontal();
            GUILayout.FlexibleSpace();

            if (GUILayout.Button("Cancel", GUILayout.Width(100)))
            {
                Close();
            }

            if (GUILayout.Button("Create", GUILayout.Width(100)))
            {
                CreateHLSLFile();
                Close();
            }

            EditorGUILayout.EndHorizontal();

            // 初回表示時にテキストフィールドにフォーカス
            if (Event.current.type == EventType.Layout)
            {
                EditorGUI.FocusTextInControl("FileNameField");
            }

            // Enterキーで作成
            if (Event.current.type == EventType.KeyDown && Event.current.keyCode == KeyCode.Return)
            {
                CreateHLSLFile();
                Close();
                Event.current.Use();
            }
        }

おわりに

これでHLSLファイルが作成できるようになりました。
是非ご自由にご利用ください！
これ標準で対応されて欲しいなぁ...。

次回記事

＜記事ができ次第追加＞

【お知らせ】うちの子3Dの完成報告と今後の方針について

お知らせ


どうも蒼水です。
早速ですが↑のバナーにもなっているうちの子（蒼水りあ）の3Dモデル（SD）が完成しました...！
ということでお披露目とこの子の今後の本ブログ運営での立ち回りやら今後の運営方針ついてお知らせです。
本題へどうぞ。
前回のお知らせはこちらから
atelier-aomi.hatenablog.com

うちの子3Dお披露目


X（旧Twitter）では進捗上げていたので初お披露目ではないんですが、ブログ側では初になるのでとりあえずお披露目です！
今回はいろいろと扱いやすいのでSDモデルとして作成しました。
うちの子モデルがあると自由にいろいろ検証やらサンプル画像とか作れるのがね、最高なんですよね。
とまぁこの辺はこの後書く今後の方針にも関わってくるのですが、ただ作りたかったわけではなく本ブログのコンテンツ拡充やオリジナリティを強くしていくために彼女とは一緒に活動していくことになります！

告知：BOOTH 再開 / Youtube チャンネルの開設

今後の方針に関わる話ではあるんですが、先にこれらについて告知を。

近いうちにBOOTHでの販売を再開を考えています。
BOOTHではキャラモデル販売とかではなく、主にちょっとした小物アセットやエフェクトアセットの販売を考えていますのでもしご興味ある方いましたら是非フォローをお願いします。
https://atelier-aomi.booth.pm/
https://atelier-aomi.booth.pm/


また、販売アセットのためにサンプル動画とかも撮ることになるのですがちょっとした動画というかデモリール置き場としてYoutubeへの動画投稿も検討しています。
出来たらこのブログの内容の映像版も作っていきたいな、なんて思っていたりはするんですがちょーっと工数重いかなぁ...というのがあるのでそれに関してはまだやるかどうかは確定ではないです。
こちらも同様にもしご興味ある方いましたら是非チャンネル登録をお願いします。
作業配信とかはする可能性あり。
youtube.com

今後の方針

atelier-aomi.hatenablog.com
昨年の再開から約1年近くが経ち、収益化も開始され、本ブログはどんどん大きくなり始める時期となりました。
ここ1カ月ほど収益化開始に伴い本ブログのSEO対策やアナリティクスによる諸々のデータの集計・考察などを裏でお試し期間としてあれこれ統計を行っていました。
実際に収益は出始めていますが、数多くの課題もまた見えてきたわけです。
これについてまずそれぞれ確認していきたいと思います。

コンテンツ量が足りてない問題

現在本ブログは現時点でのコンテンツ（記事）数は約60記事程度あります。
個人的には結構書いたなー、と思っていたわけですがそんなはずもなく...（真顔）

AdSenseやAnalytics、Search Consoleでは収益やPV数、インプレッション等いろいろ確認できるのですがここから見えてくるのはそもそもコンテンツ少ないね？ってことです。
というのも入り口となるPV数、つまりはブログへの流入元は現時点でオーガニック検索が大半を占めていることが統計からわかっています。自分はSNSの方は強くないので当然ですね。
つまりオーガニック検索による流入が増えるようにするべきなのですが、その時問題になるのが引っかかるコンテンツの量や幅だろうな、という考察をしました。
一方で自分はデザインからエンジニアリングまで幅広く扱えるという強さがあるのでそれをどんどん生かした方が良いな、と考えています。
こう考えるとき、復帰する際に書いていた「モデリングの話は減るかも」というのは今後のことを考えると間違っているなと。
パイは大きければ大きいほど良く、ここは切るべきではないと判断しました。

そこで出てくるのが3Dモデリングコンテンツの拡充です。そこでうちの子3Dには活躍してもらいたいと考えています。

検索エンジンにインデックスされていなかった問題

これ結構致命的なんですが収益化後にSEO対策してて初めて気づいたんですが、なんとまぁ再開してからの記事、全てエンジンに載っていなかったという事実が発覚。
これについては既に対策済みでインデックスされるようになりました。その後の推移を1週間ほど見ていましたが、普通に流入が増えました。それも2～3倍くらいに。
SEO対策って大事だね...。現在の表示順位は平均7～8位くらい、ものによっては1～3位に食い込むものもそこそこありいい感じ。
ちなみに1日10～20PVくらいだったものがここ一週間で1日50～60PVまで増えてきています。

そしてここから考察できることとしてもコンテンツは多ければ多いほど良い、ってことです。
載っていなかった記事が検索エンジンに載るようになり必要な情報にたどり着いてくれるユーザーが増えることは確認できました。少しでも自分の記事が役にたっていると良いな...の気持ちです。
自分を見つけてくれてありがとう...本当にありがとう....。

つまり、必要な情報を求めて検索してくれるユーザーにリーチするためにはより幅広い情報を数多く提供していくことが必要だと判断しました。

そこで出てくるのは更新頻度を上げることです。
現在は週1更新していますが、そんなペースじゃ物量が！圧倒的に！足りない！！！時間かかりすぎる！！！！！！（遠い目
ここ1年は1記事が結構な重さになるどころかシリーズものなので超長期で書ききるのにものすごい労力がかかっていたりするんですが、ある程度これも落ち着いてきたのでTip等の１記事完結のものの執筆とかも今後増やしていく予定です。
その1つとしてBlnderのTips記事の再開やUnityキャラクター制御編の開始です。
うちの子3Dが完成したことでようやくこれらに関する記事の執筆ができるようになりましたので！やっていきます！！
もちろん既存のシリーズも単発記事として書いていきます。

SEO対策全般の問題

ここまでちょこちょこSEO対策というワードを出してきたんですが、これについてちょっと触れておきます。
シリーズものの記事書くのは良いけどタイトル長すぎてSEOの評価としてはダメダメだったってことです。
ノードとコードを一緒に覚えるShader Graph？
ParticleSystem(Shuriken)からVFXGraphに乗り換える？
そんなものSEO的にはいらんのですよ、と言われた感じです。
そんな長かったらタイトル途中で途切れちゃうよ！ってことです。
でもシリーズ物ってわかるようにしたいし....というエゴがありますがはてなブログくんはSEO対策用に表示タイトルを記事のタイトルとは別で用意できる仕組みを用意してくれていたのでこれを活用すべきだと判断しました。

これのおかげで検索エンジンにはこの欄で設定したタイトルを表示しつつ、実際の記事のタイトルは従来のタイトルを扱えるようになしました。
こういった泥臭いこと、ちゃんとやろう！と。

おわりに

というわけで、Blenderをはじめとしてモデリング全般やキャラクター制御に関わる情報を今後展開予定です！ご期待ください！
エディタ拡張編も始めたいかも。あと更新頻度、上げていきます！加速します！
やりたいことが多すぎる。

それにしてもGoogleの各種ツール、まともに使ったの初めてなんですが圧倒的情報量を取得できるのすごい。積極的に使いこなしていこう。