VRChatで使用するVRoidに表情をつける方法

mayorum.hatenablog.com

先人様の記事を参考にVRoidをVRChatにアップロードできたはいいけどこのままだとキーに表情が割り当てられてない。

shiasakura.hatenablog.com

この記事（今回の参考記事）を参考にやっていったところ、なんとか表情を付けることができた。しかしUnityに読み込んだVRoidはこの記事で説明されているモデルの構成との違いが多くあり、そこで躓いた点をまとめていく。

（アドバイスしてくださったi175sさん、ありがとうございます・・・！）

Unityで読み込んだVRoid（FBXの方）の表情を変えるには

Hierarchyから表情作成用にコピーしたモデルのUMARendererを選択し、右側Inspector -> Skind Mesh Renderer内のBlendShapesを展開

すると表情設定用の項目がずらーーーっとでてくる。ここの値を変更することでで表情が変わる。値はおそらく0〜100の範囲で調整。

アニメーション(BlendShape)の登録

参考記事の通り手順を進めていく。

1. Assets内にAnimationフォルダを作る
2. Animationフォルダ内で右クリック -> Create -> Animation で空のアニメーションを作る
3. 空のアニメーションをHierarchy内の表情作成用モデルにD & D
4. メニューのWindow -> Animationをクリック。Animation編集用のウィンドウが開く。

この状態で、

1. Hierarchyからアニメーション作成用モデルのUMARendererを選択
2. Animationウィンドウの赤い●ボタンを押す
3. 先程のBlendShapesの値を変える

すると、 Animationウインドウに値を変更した項目が登録される。

このようにして、必要な項目を追加していく。 (AnimationウインドウのAdd Propertyからも登録できる)

試しに、Animationウインドウの赤●ボタンを解除し再生▶ボタンを押すと、値を変えたBlendShapeがモデルに反映されていることがわかる。

ハンドサインの登録

上記手順で作ったAnimationはこの後すでにあるハンドサインのキーに上書きする形ことになるので、既存のハンドサインができなくなってしまう。表情と一緒にハンドサインもやりたい場合の作業手順が以下。

1. Assets/VRCSDK/Examples/Sample Assets/Animation　を開く
2. Male_Standing_Pose Import Settingsを展開
3. どれか一つAnimationを選択
4. Animationウインドウの一番上の♢（ダイヤ）マークをクリックしてCtrl + C
5. 先程自分で作ったAnimationに戻り、Animationウインドウをアクティブにした状態でCtrl + V

これで指の形の編集ができるようになる。
あとはAnimationウインドウ上で Left(Right) Hand. ....という名前の値を-1 ~ 1の範囲で設定して指を好きな形にすればOK。Left(Right) Arm Down-Upの値を変えると腕が上がって手の形が見やすくなる。

複数の表情(Animation)を作る場合、今作ったAnimationファイルを選択 -> Ctrl + Dで複製して、ファイル名と値を変える。 （もしかしたら、この複製したAnimationファイルもアニメーション作成用モデルにD&Dして紐付ける必要があるかもしれない・・・）

あと、アニメーションを2フレーム目に複製するのも忘れずに！

結果

あとは参考記事の通り、

1. VRCSDKからCustomOverrideEmptyを複製
2. 作ったAnimationをCustomOverrideEmptyに登録
3. CustomOverrideEmptyを元の(Animation作成用ではない)モデルのVRC_Avatar Descriptor -> Custom Standing Animsに登録
4. アップロード！

結果・・・

VRoidに表情が宿った！！！

お疲れ様でした！
（次は前回の記事で紹介したちくわを持たせたい）

VRoid studioで作ったモデルをVRChatにアップロードする際の注意点

うにてぃ？しぇーだー？なにそれおいしいの？状態の僕がごにょごにょしまくってVRoidをVRChatにアップロードすることに成功したのでその時にハマった点を記録しておく。

アップロードの手順については既に先駆者様（神）の記録があるのでまずはそちらを参照されたし。

mayorum.hatenablog.com

環境

使用したアプリ

• VRoidStudio-v0.2.4-mac
• Unity 5.6.3p1
  (VRChatにアップロードするためのバージョン)
• Unity 2018.2.4.f1
  (VRoidで制作したVRMファイルをFBXファイルに変換するためのバージョン)

使用したunitypackage

• UniVRM 0.4.0 Release v0.40 · dwango/UniVRM
  VRMファイルをUnityに読み込む際に必要
• FBX Exporter
  VRMファイルをFBXファイルに変換するために必要。VRChatSDKが対応しているUnity 5.6.3pでは動かないため、新しいバージョンのUnityで動かす必要がある。アセットストアでダウンロード、インストール
• cubedparadox/Cubeds-Unity-Shaders: A compilation of custom shaders for Unity3D
  先駆者様の記事でおすすめされていたシェーダー

OS

• Mac : macOS High Sierra バージョン10.13.6
• Windows : Windows 10 Home バージョン 1803
  ※諸事情によりVRoid制作はMacで行った。それ以外はWindowsでの操作。

VRoid Studioとは？

vroid.pixiv.net

RPGのキャラメイク感覚で3Dモデルが簡単に作れちゃう神アプリ。これで作ったモデルをVRChatにアップロードできるようにいい感じにしていく。

VRoid 制作時の注意点 - ポリゴン数は2万ポリゴン未満にする

VRChatで使用できるモデルは2万ポリゴン未満と定められている。VRoidの場合、髪を充実させてしまうと2万ポリゴンを超えてしまう。ポリゴン数を減らす方法としては、

• ヘアパラメーター -> 滑らかさの値を小さくする
• ヘアパラメーター -> 太さ倍率の値を大きくし、髪の本数をへらす
• 断面形状を底なし三角形にする

等の方法がある。

参考 :

VRoidStudioでの髪の毛のポリゴン数は「滑らかさ」と「断面形状」でコントロールすることができます。VRChat等2万ポリ以内に収めないといけない場合、体は約1.4万ポリほどなので6千ポリぐらいに収まるように調整すると良いです。 #VRoid pic.twitter.com/Eb3eQRqPja

— まじかる☆しげぽん@VRoid (@m_sigepon) August 6, 2018

ちなみに僕が作ったモデルは、

• ヘア × 8 の ブロージャルヘア × 3
• 滑らかさ 7
• 断面形状 底なし三角形
  で約14500ポリゴンだった。(VRChat SDKの表示)

髪の裏側が透けないようにする

Unityでモデルを読み込んだ際、髪の裏側が透けてしまうことがある。こんなふうに。

デフォルトでは、1枚もののテクスチャ(?)の裏側は透ける設定になっているらしい。
以下のように対処した。（シェーダーにcubedparadoxを使用している前提での例です）

1. Asets -> Materialsフォルダを開く
   
2. Materialsフォルダ内のbuffer#00を選択、ShaderをFlat Lit Tone Liteにし、Culling ModeをOffに

そもそもシェーダーとは、Culling Mode をOffにするとは・・・？

「シェーダとは何なのか」を自分の言葉でまとめてみる - 渋谷ほととぎす通信 【Unityシェーダ入門】Unityのシェーダで遊んでみよう - おもちゃラボ

3Dモデルをごにょごにょ（色を設定したりライティングしたり）して画面に表示するプログラムのこと。

んで、Culling Mode とは、

カリングは、視点から見えない反対側を向いたポリゴンをレンダリングしないという最適化手法です。すべてのポリゴンは表と裏側があり、オブジェクトのほとんどが閉じている事実を利用します。
　
ShaderLab ：Culling と Depth Testing - Unity マニュアル

今回作ったモデルの場合、反対側を向いたポリゴンが見えちゃっていてそれを最適化した結果透けてしまっていた。なのでこの最適化をOffにすることによって裏側もレンダリングされるようになる。

Culling Mode を Offにした結果

※ この方法、実はあんまり良くないらしく、裏側にもテクスチャをあてるのが正しい対象方法だそうです・・・（わからん

やたらなで肩になるのを防ぐ

VRoidからエクスポートしたFBXを、ボーンの座標を一切変更せずにVRChatにアップロードするとこのようにやたらなで肩になってしまう。

対処法

VRChatでアバターをアップロードすると、なで肩になってしまう問題

肩を上げたら良いとの情報を見かけたけど何故肩を上げれば良いのか分からなかったが、単純にUnityでHumanoidの設定をする時に出てくる画像の通りにボーンを配置しろって事だったのか(多分) pic.twitter.com/jUfrM4W67r

— ゆきのみたま@VRChat (@yukinomitama) 2018年8月19日

ShoulderとUpperArmを上げれば良いのか・・・？

とりあえずやってみた

1. Asets -> FBXのモデルを選択、右側のInspector -> Rigを選択、 Configureをクリック
2. 以下の4 箇所のY座標をいい感じに上げる。値を変えるとモデルのボーンの位置も変わるのでそれを見ながら値を変えていく（塩梅がわからない・・・）
   • J_Bip_L_Shoulder
   • J_Bip_R_Shoulder
   • J_Bip_L_UpperArm
   • J_Bip_R_UpperArm

結果

多少マシになった！！！

まとめ

まずは以上3点、自分がハマった点をまとめた。VRoidをVRChatで使用する際の参考になれば幸いです。

このちくわ、弾力とか質感が現実のそれだった（すごい）。
3Dモデル「ちくわ」 - bironist - BOOTH（同人誌通販・ダウンロード）

次やること

• 表情をつける（デフォルトだとキーに表情が割り当てられていない）
• 走るモーションがキモいのでなんとかする
• 腕が胴体すり抜けるのをなんとかする（Dynamic Boneというのを使うのか・・・？）

safariでoption要素に対するスタイルが適用されない件

リストセレクトのoption要素に対しCSSでborderをつけようとしたところ、safariだけ適用できなかった点について調べた結果をメモ。

環境

• OS : macOS High Sierra 10.13.6
• Chrome : 68.0.3440.106
• Firefox : Quantum 61.0.2
• safari : 11.1.2 (13605.3.8)

検証したコード

See the Pen 20180820_CSS_safariでoption要素に対するスタイルが適用されない件 by yupa-eg (@yupa-eg) on CodePen.

結果

Chrome

Firefox

Safari

select要素に対するborderは効いてるがoption要素はうんともすんとも言わない

なぜSafariはこうなるのか

stack overflowの記事によると、

You can't toggle display on <option> elements in Safari (or IE, for that matter). This is part of a long and inconsistent tradition with Safari restricting CSS styling functionality on form elements, believing the visual language of interactive elements should be consistent with the OS (no point trying to find a rationale for IE's failings).
　

Safari（またはIE）の<option>要素で表示を切り替えることはできません。 これは、インタラクティブ要素のビジュアル言語がOSと一貫しているべきだと考えている（IEの失敗の根拠を見つけようとしない）Safariがフォーム要素のCSSスタイル設定機能を制限している、長くて矛盾した伝統の一部です。
　
javascript - option.style.display = "none" not working in safari - Stack Overflow

だそうだ。今でもこの伝統が続いている結果がこれなのだろうか・・・
　
他にも、

<select> 要素はクロスプラットフォームでスタイル設定が不可能
　
HTML フォームへの高度なスタイル設定 - ウェブ開発を学ぶ | MDN

Mozilla様もムリポと言っている。

どうしてもリストセレクトをクロスプラットフォームでスタイル設定したい場合、別要素で擬似的に再現するのがよさそう。

CSSの:last-child 擬似クラスはDOMのlastElementChildではない

すこしハマったのでメモ。

<body>
  <h1>hoge</h1>
  <ul>
    <li>いー</li>
    <li>あーる</li>
    <li>さん</li>
    <li>ここを赤くしたい</li>
  </ul>
</body>

上記のようなHTMLに対し、最後のliを赤くしたいとき、

「ulの子要素のうちの最後の要素だしul :last-child{...って指定すればええんやろ」

と思ってDOMのlastElementChildのノリで指定しようと思ったがこれは間違いだった。正しくは以下

/* ul:last-child{  ...これは間違い */

li:last-child{
  color  : red;
}
  

兄弟要素のグループの中で最後の要素を表します。
:last-child - CSS: カスケーディングスタイルシート | MDN

とあるので、今回の場合兄弟関係である<li>自体を指定する。

もう一つ例を。

<body>
  <h1>hoge</h1>
  <ul>
      <li><span>いー</span></li>
      <li><span>あーる</span></li>
      <li><span>さん</span></li>
      <li><span>ここだけ青</span></li>
  </ul>
</body>

<li>の中にインライン要素があって、最後の<li>の中の<span>内のテキストにスタイルを指定したい場合、li span:last-child{は間違い。 正しくは、

/*li span:last-child{  ...これは間違い */

li:last-child  span{
  color  : blue;
}
  

今回の場合、それぞれの<span>は兄弟を持たない一人っ子なので、間違った例だと全てのテキストが青くなってしまう。なので先に兄弟関係である<li>を指定したあと、<span>を指定する。

その他、:first-childや:nth-child()等も同様、兄弟要素に対する指定なので注意したい。

以上の内容をまとめたCodePen

See the Pen 20180813_CSS_:last-childセレクタについて by yupa-eg (@yupa-eg) on CodePen.

RDFが参照可能なサイトを調べてみた

RDFとは

Resource Description Framework の略。情報の関係性を主語・述語・目的語という形で表す枠組み。この枠組みに沿って記述することにより、機械が情報の関係性を理解できるようになる。このような記述がWWW全域のリソースに普及すると情報の関係性を示した巨大なグラフとなり、セマンティック・ウェブが実現する。

RDFについての説明は、この記事がタイトルにもある通り直感的にわかりやすかった。

直感RDF!!　その１-RDFとは。 - Qiita

実際にRDFが参照可能なサイトは？

RDFが何かはなんとなくわかったけど、実際どんなサイトでどのようにRDFを提供してるのか気になったのでゆるーく調べてゆるーくまとめた。

調査方法

• あらゆるジャンルの著名な（自分の独断と偏見による）サイトを訪れ、ソースコード内を'rdf'で検索
• そのサイト名 or ジャンル名 + 'rdf' でGoogle検索
• ネットサーフィン

結果

CiiNi

• 各論文ページのソースコード内にrdfへのリンク有り

例 : CiNii 論文 -  インターネットカフェにおけるパーソナライゼーションに関する基礎的研究(第18回大会ワークショップ・発表論文要旨) のRDF :https://ci.nii.ac.jp/naid/110009665846.rdf

国立国会図書館

• APIによって提供されている メタデータ « 国立国会図書館サーチについて

  国立国会図書館サーチでは、主にDC-NDL（RDF）、DC-NDL（Simple）、JSONという3つの形式でメタデータを提供しています。

• 各書籍ページにRDFへのリンクは無い

Wikipedia (日本語版)

• DBpediaというプロジェクトがWikipediaのLinked Open Data化を担っている
• SPARQLと呼ばれるRDF用クエリ言語を用いてRDFの問い合わせが可能

統計LOD

• 日本の統計が閲覧できる政府統計ポータルサイトeStatのLOD版 統計LODへようこそ | 統計LOD
• SPARQLでのRDF問い合わせが可能

Music Brains

• オープンコンテントな音楽データベースを提供するプロジェクト。Java APIでRDFを問い合わせ可能っぽい？　LinkedBrainz / RDF - MusicBrainz

エキサイトブログ

• 各記事のソースにRDFがコメントアウトで直書きされている
• identifierとtitleだけが記述されている

調査してみて

著名なサイトでRDFが参照可能なサイトは少なそうだなという印象だったが、学術関係のデータベースがRDFで参照可能という例は見つけられてないだけでまだまだありそう。

Webコンテンツ制作に関わるJIS規格について調べた

HTMLについて学習してる最中、JIS X 8341-3:2010『高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第３部：ウェブコンテンツ』というJIS規格があることを知り、これ以外にWebコンテンツ制作に関わるJIS規格はどのような規格があるのか、ゆるーく調べてゆるーくまとめた。

調査方法

日本工業標準調査会：データベース検索-JIS検索 の「JIS規格に使用されている単語からJISを検索」にて”Web”,”ウェブ”,”インターネット”の単語で検索した結果から、関連すると思われるものを抜き出した。

結果

JIS X 8341-3:2010 - 高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第３部：ウェブコンテンツ

ISO/IEC 40500:2012 - Information technology -- W3C Web Content Accessibility Guidelines (WCAG) 2.0を基に、技術的内容を変更することをなく作成されたJIS規格。
高齢者及び障害のある人を含む全ての利用者が、使用している端末、ウェブブラウザ、支援技術などに関係なく利用することができるように、ウェブコンテンツが確保スべきアクセシビリティの基準について規定している。

JISX7361,7362,7363 - Ｗｅｂサービス相互運用性―ＷＳ－Ｉ

ISO/IEC 29361:2008 - Information technology -- Web Services Interoperability -- WS-I Basic Profile Version 1.1を基にした規格。
SOAPやWSDL等の技術の相互運用性を確実なものとするために定められた。

• SOAP : Webサービス間で情報をやり取りするためのXMLベースのRPCプロトコル
• WSDL : SOAPによるXML Webサービスのインタフェースを記述するインタフェース記述言語。XMLを用いて記述する。

JISZ8531 - 人間工学－マルチメディアを用いるユーザインタフェースのソフトウェア－

ISO 14915 - Software ergonomics for multimedia user interfacesを翻訳し、技術的内容及び規格票の様式を変更することなく作成した規格。
マルチメディアUIの設計原則を定めている。

JISX4151 - 文書記述言語ＳＧＭＬ

ISO 8879:1986- Information processing -- Text and office systems -- Standard Generalized Markup Language (SGML) に対応した規格。
SGMLの仕様、記述方法について記載されている。

JISX4156 - ハイパテキストマーク付け言語（ＨＴＭＬ）

ISO/IEC 15445:2000Information technology -- Document description and processing languages -- HyperText Markup Language (HTML)に対応した規格。
HTML4.01を基にしたHTMLの仕様、記述方法について記載されている。HTML4.01よりも厳格に定められている点がある。

JISX4158 - ＸＭＬ名前空間

W3C勧告 Namespace in XMLを翻訳し、技術的内容を変更することなく作成した規格。
その他、同様にW3C勧告を翻訳したXMLに関するJIS規格の一覧は以下

JIS番号	タイトル
JISX4159	拡張可能なマーク付け言語（ＸＭＬ）１．０
JISX4160	ＸＭＬパス言語（ＸＰａｔｈ）１．０
JISX4166	ＸＭＬ文書へのグリフ識別子の埋込み
JISX4176	ＸＭＬリンク付け言語（ＸＬｉｎｋ）１．０
JISX4178	ＸＭＬフォーム言語（ＸＦｏｒｍｓ）１．０

JISX3060 - ＥＣＭＡＳｃｒｉｐｔ言語

ISO/IEC 16262:2011 - Information technology -- Programming languages, their environments and system software interfaces -- ECMAScript language specificationについて、技術的内容を変更することなく作成されたJIS規格。
ECMAScriptの概説（変数や型、式、クラス継承等についての大まかな説明）が記述されている。

調査してみて

もっとたくさん関連するものがあるかと思ったが、思ったより少なかった。（調査方法が悪いのかもしれません😇　他に重要なJIS規格があれば何卒ご教授ください🙇🏻）
JIS規格もそうだが、実際はウェブ標準 - Wikipedia にあるような進化し続ける技術仕様に準拠させていくべきなのだろう。

HTMLの空要素を閉じるときスラッシュは必要なのか

空要素（<br>や<img>等、子要素を持つことができない要素)を閉じるときに<br />なのかそれとも<br>で良いのかというお話。

HTMLにおいて、空要素の閉じスラッシュ/は必要無い

調べたら、AppleやMozilla、Operaの関係者という、Web最前線のすごい人達が集まっているコミュニティ WHATWG のFAQに答えが載っていた。

HTML の空要素（たとえば、br, img, input 要素）に終端スラッシュをいれる必要はありません。<br /> の代わりに <br> と書けば良いだけです。これは HTML4 と同じです。しかし、XHTML1 の利用が広まっているため、かなり多くのページで、終端スラッシュが使われています。そのため、XHTML1 から HTML への移行を容易にするために、終端スラッシュの構文を HTML の空要素で使うことができるようになりました。
　
引用元: WHATWG FAQ - 日本語訳 - HTML5.JP
原文: html/FAQ.md at master · whatwg/html

なるほどXMLの文法でHTMLを定義し直したXHTML1では/>が必須だったのか。
(HTML5はWHATWGがW3Cに提唱したんですね知らなかった!)

そもそもXMLの文法って

MSDNのXML標準のリファレンスによると、

空要素タグは開始タグのように見えますが、最後の > の前に (/) が付きます。
　
引用元:XML標準 - 開始タグ、終了タグ、および空要素タグ

とのこと。 XHTMLはこの文法が適用されたものだということがわかる。