【Three.js r73】colladaLoaderのモデルをRaycasterでピッキング(クリック可能)にする。


日本語は勿論英語のStack Overflowやその他色々Three.jsの事を扱っている記事を見ても現行のr73について扱った記事が無かったので備忘録。

結論から言うと以前のバージョンよりかなり簡単になっています。

「Three.js Collada Raycaster」とググって一番最初に出てくるMouse-Picking Collada Models with three.js, Part IIではr62を扱っていますがこれと比べればどの程度簡単になったのか一目瞭然。

開発者様達には感謝です。

まずcolladaLoaderでモデルを読み込む場合以下のように読み込みます。

出力したソフトや設定によってはMeshの場所が異なる場合があるのでconsole.log()等を使って予めMeshの場所を特定してテクスチャやサイズの変更を行います。
※MAYAの場合はcollada.scene.children[0].children[0]にMeshがありました。

しかしcollada.sceneをそのままシーンに追加するとTHREE.Groupとして出力されるためraycasterでピッキングできません。

r73ではレンダリングされたMeshオブジェクトをピッキングしているのでColladaモデルもMeshとしてシーンに追加します。

collada.scene内にMeshが1つの場合はscene.add(model)をscene.add(model.children[0].children[0])に書き換えてMeshを直接シーンに追加できますが、複数のMeshある場合は一つずつ取り出します。

これ全く同じものがレンダリングされますがTHREE.GroupではなくTHREE.Meshとして出力されるため他のMeshと同様にRaycasterでピッキング可能になります。

シーンごと追加した時と違うサイズや座標で出力されてしまう場合はモデル作成時に位置やサイズ情報をフリーズ(全値をデフォルト化)してない可能性があります。

MAYAの場合は「修正(Modify)>トランスフォームのフリーズ(Freeze Transformations)」
Blenderは分からないので自分で調べてください。

この方法で追加したデモがこちら。

colladaLoaderのraycasterデモ
http://cityjumperweb.com/webgl/colladaPick/

See the Pen ZQpZdZ by Yuya Saito (@U-YA) on CodePen.

これは静止したモデルでの場合なのでまだ試していませんが、アニメーションが付いている場合は勝手が違うかもしれません。

順序が逆になりましたがraycasterやcolladaLoaderの使い方については後日書く予定。


よく利用するThree.js旧バージョンからのコード書き換え(メモ)


毎回調べるのも面倒なので覚書。
色々試したくてGitHubやCodepenから他の人のコード拾ってきて弄繰り回してますが、ライブラリのバージョンが古いと一部コードに互換性が無いので、そのままでは動作しない場合があります。
バージョンアップに伴う仕様の変更はjQuery等の他のライブラリにもよくある事ですがWebGL自体まだ新しい技術なのでThree.jsは特に仕様がコロコロ変わります。
数か月前のコードをそのまま使おうとしても上手く動くことの方が稀。

ImageUtils.loadTexture

Three.jsの現行バージョンr73でもImageUtils.loadTexture(‘src’)は動きますがコンソールにもうすぐ使えなくなるという旨の注意書きがでてくるので書き換え方法

旧コード

新コード

ドキュメンテーションには.load ( url, onLoad, onProgress, onError )とあるのでロード後、ロード中、エラー時と処理を分岐できるのでもっと便利ですが、そうするとコードの構造自体書き換える必要があるのであくまで応急処置。

shadowCamera

旧バージョンではHelperを作成するのにカメラにもライトにもshadowCameraを使っていたようですが、新バージョンではそれぞれに対応するヘルパーがあるのでスポットライトに使っていたshadowCameraは使用でき代わりにSpotLightHelper(),CameraHelper()等を使います。
新しいだけあって此方の方が遥かに便利。

こちらが以前の記事『WebGLライブラリThree.jsの基礎と照明(Light)色々。』にも掲載した各種ライトのヘルパー。

See the Pen KdOVqe by Yuya Saito (@U-YA) on CodePen.

ちなみにこちらがShadowCameraで作った以前のバージョンのSpotlightのヘルパー。(by Mad Dog Tutorials)

See the Pen THREE.js Basic Scene with Spot Light by Patrick (@wpdildine) on CodePen.

今後も気づいたら色々追記していきます。


WebGLライブラリThree.jsの基礎と照明(Light)色々。


はじめに

WebGLとは
3Dモデリングの開発ソフト等に使用される3次元コンピュータグラフィックスAPIのOpenGLをJavaScriptとバインディングしてWebブラウザに適応した技術。そのまま弄るのは少し敷居が高い。
Three.js
敷居の高いWebGLを少しの3D知識とJavaScriptの知識で簡単に記述出来るようにしてくれる素敵ライブラリ。Babylon.js等他にもライブラリは沢山あるけど多分シェアと取っつき易さは1番。

バージョンアップにドキュメンテーションの更新も一部追いついていないみたいなのでドキュメンテーションを見ながらでも一部混乱した部分があったので備忘録。

  1. Three.jsの基本的な使い方
  2. ジオメトリマテリアルの種類
  3. 照明(Light)の種類

Three.jsの基礎

処理の流れ

  1. HTMLファイルの作成
  2. シーンを追加
  3. カメラの追加
  4. 物体の追加
  5. シーンのレンダリング

まずは出力するための土台となるHTMLを書きます。

各種ライブラリの読み込みとjQueryを使い慣れている人は併用も可能

続いてThree.js公式サイトから最新版のThree.js(2015/11月現在r73)をダウンロード。

ファイル内のBuildフォルダの中にThree.jsの本体があるので任意のディレクトリに移動。

examplesフォルダの中には色々なプラグインが入っているので以下の3ファイルも任意の場所に移動します。

examples->js->controls->Orbitcontrols.js
examples->js->libs->dat.gui.min.js
examples->js->libs->stats.min.js

練習用なのでbodyの中にアペンド用のdivタグが1つあればOK。

次に実際の処理。

まずScene(場面)とCamera(視点)を追加。

レンダリングするまで何を書いても出力されないので、先にレンダリング処理を行う。

ここまでの処理が最低限の土台。

ジオメトリ、マテリアルの種類

続いて物体を追加、流れは以下の通り

  1. ジオメトリ(図形)の作成
  2. マテリアル(表面)の作成
  3. 位置や回転率を設定
  4. シーンに追加

Three.jsではBlender等で作成したobjやjson,dae形式の3Dファイルの読み込みにも対応していますが、基本的なジオメトリはそのまま追加可能です。

Geometry一覧
※リンク先はドキュメンテーションでサンプルを見れます。

2D

PlaneGeometry
四角形

CircleGeometry

RingGeometry

3D

BoxGeometry
立方体

SphereGeometry
球体

TorusGeometry
トーラス(ドーナツ型)

TorusKnotGeometry
トーラス結び目

CylinderGeometry
多角柱(radiusSegmentsを増やすと実質円柱)

TetrahedronOctahedronGeometryDodecahedronGeometryIcosahedronGeometry
三角錐(三面体)、八面体、十二面体、二十面体、

TextGeometry
文字(要TextGeometry.js&フォントJSファイル読み込み)

基本的なマテリアル一覧

MeshBasicMaterial
光を一切反射しないのっぺりマテリアル

MeshPhongMaterial
光沢のあるマテリアル

MeshLambertMaterial
光沢の無い光を反射するマテリアル

3Dモデリングの基礎で使用するのは大抵この3種類。

コーディングは以下。

ここまでの処理を出力するとこんな感じ。

See the Pen MaNKmP by Yuya Saito (@U-YA) on CodePen.

照明を設定していない状態Besicマテリアルを使用すると影絵のような物体しか表示されず3Dっぽくありません。

照明の設定

続いて照明(Light)の設定を行います。

Three.jsには基本5種類の照明があります。

Ambient light
シーン全体を全方向から照らす照明です。
物理的にはほぼあり得ない照明なので照明というよりはシーン全体基本色と考えたほうが合点が行くと思います。
引数はHex(色)のみ。

Directional light
対象物の全体を1方向から照らす照明。
第一引数にはHex、第二引数にはIntensity(光の強さ)をとります。

Spot light
スポットライト。
第一引数にはHex、第二引数にはIntensity(光の強さ)、第三引数にDistance(距離)、第四引数にAngle(絞り具合)、第五引数にExponent(ターゲットの方向からの光の弱まり具合)、第六引数にDecay(拡散による光の弱まり具合)をとります。

Point light
裸電球のようにその場で全方向に拡散する照明。
第一引数にはHex、第二引数にはIntensity(光の強さ)、第三引数にDistance(距離)、第四引数にDecay(光の弱まり具合)をとります。

Hemisphere light
Point Lightと似たような特性だが上半分(skyColor)と下半分(groundColor)で別の色を設定できる照明。
第一引数にはskyColorのHex、第二引数にはgroundColorのHexをとります。

上記の通りBasicマテリアルでは光の反射は見えないのでBasic以外のマテリアルを使用。

ドキュメンテーションにも説明が掲載されていますが、読んでも実際にどう動くかわからないので色々弄ってみます。

See the Pen KdOVqe by Yuya Saito (@U-YA) on CodePen.

次はサンプルや公式ドキュメンテーションにも使用されているDAT GUIの使い方と各種Helperの使い方。


YoutubeのSEOと視聴者&チャンネル登録者を増やす方法(その2)


前回の記事『YouTubeのSEOと視聴者&チャンネル登録者を増やす方法(その1)』ではWebのSEO、グーグル検索の観点から見たTipを紹介しましたが、今回は『YouTube内での最適化の方法』です。

はじめに

この記事では自分のコンテンツの関連動画に関する自コンテンツ内での最適化(内部VSEO)について説明します。

YouTubeで最も手っ取り早く視聴者を稼ぐ方法は視聴数の多い動画の関連動画に自分の動画を表示させて、ユーザーを引き込み離さない事です。

一部ではこれを関連動画ジャックとも呼ばれているようです。

関連動画ジャックは検索エンジン上位に表示するのと比較すると非常に単純で、現在の仕様だとあまり関係のない動画の関連動画に自分のコンテンツを表示することも可能です。

しかし検索エンジン同様、Googleはユーザーに有益な情報を表示したいはずなのでSEOの歴史を省みるとGoogle様の意志に背くような手段はお勧めできません

その事を踏まえてお読みください。

内部VSEOとは

勝手にそう呼んでいるだけで特に正式名称等があるわけではありません。

WEBと同様にVSEOも大まかには内部と外部に分けることができます。

WEBサイトのSEO対策の知識がある方は内部SEOのYouTubeチャンネル版と言えばピンとくると思いますが、要は自コンテンツ内の最適化です。

具体的には主に以下の手順。

    動画作成段階

  1. 撮影機材や環境にはある程度お金をかける(動画撮影可能なDSLRや外部マイク等)
  2. 動画に一貫性を持たせる(オープニングアニメーションや音量等)
  3. アノテーションやカード機能等を想定した編集を心がける

    アップロード時

  4. シリーズモノであれば動画の公開日や時刻等に一貫性を持たせる
  5. 視聴者の目を引くサムネイルの作成
  6. カードやアノテーション機能の利用
  7. タイトルや動画の説明文の推敲
  8. 説明欄に自分の動画のリンクを張る
  9. キーワードの選定
  10. プレイリストを作成する(既存のプレイリストに加える)

YouTubeチャンネルの内部SEOではカードや再生リスト等を駆使してユーザーをいかに自コンテンツ内に留まらせるかがカギとなります。

動画作成機材について

最低でもFull HD(1920×1080)で撮影できる機材を準備します。

最近の機種であればiPhoneやスマホでもこのサイズで撮影できるものが殆どですが、可能であればDSLR(デジタル一眼)での撮影が好ましいです。

スマホでの撮影だと画に深みが出ないので、撮影テクが無いとどうしても安っぽく仕上がります。

個人的なお勧めはCanonのエントリーモデル一眼、EOS Kissシリーズです。

懐に余裕があればフルサイズのハイアマチュアモデル(EOS 5Ds等)を購入しても良いかもしれません。

違いはセンサーサイズですが、センサーサイズについてはこちらのブログで初心者にも分かり易く解説されています。
センサーサイズについて【カメラ初心者向け】

ちなみに水泳の富田選手が盗難疑惑をかけられたEOS-1DXは動画撮影に関しては無用の長物なので、そこまで余裕があるならばレンズにお金を使いましょう。

動画撮影には単焦点のマイクロレンズ等があるとドラマチックな映像が撮影できるかもしれません。

どうしてもカメラにお金を使いたいブルジョアはEOS C300BlackmagicRED等のシネマカメラを使って僕に使い心地を教えてください。

Blackmagic Design シネマカメラ EFマウント 2.5Kイメージセンサー 5インチタッチスクリーン ブラック 001600

話が逸れましたがEOS Kiss X5以前モデルにはSDカードのフォーマット制限(4GB制限)により12分前後で自動で撮影が止まるので不便に思う方は新品購入するのであればX6以降が良いかもしれません。

音声もRODE Videoマイク等の外部マイクがあると好ましいです。

RODE VideoMic GO コンデンサーマイク 003396

動画編集ソフトについて

iMovieやWindowsムービーメーカー等では少し心細いので映像編集ソフトをお勧めします。

私の場合はWeb制作関係でCS6のマスターコレクションを持っていたのでPremiere Pro CS6を持っていましたが、手持ちが無く低予算に抑えたい場合はAdobe Premiere Elementsとサムネイル作成にも使えるPhotoshop Elementsのセットがお勧めです。

Adobe Photoshop Elements 13 & Premiere Elements 13 Windows/Macintosh版
Adobe Premiere Elements 13公式

Adobeソフトウェアの最新版(Creative Cloud)はフル機能が使える30日間の体験版もあって月額サブスクリプションもできるので試してみるのもいいかもしれません。

Adobe Creative Cloud

アノテーション、ブランディングとカード機能

Youtubeでは動画にメッセージをポップアップさせたりYoutube内や関連WEBサイトへのリンクを作成することのできるアノテーション機能があります。

『右上のアイコンをクリック→クリエーターツール→編集→アノテーション』で設定可能。

anotation

所有する関連WEBサイトのリンクも挿入できますが、先に『クリエーターツール→左カラムのチャンネル→詳細設定』から所有権の確認を行います。
※Google Webマスターツールと同様の認証方法のため初歩的なHTMLかFTPの知識又はホスティングサーバーかドメインのアカウント情報等が必要になります。

弄ってみれば直観で分かると思うので今回はアノテーションの使い方の説明は省きます。
アノテーションについて – YouTube クリエイターアカデミー

利用できるフォントやサイズ等が限られている為、文字の挿入等はできるだけ控え、編集の段階でクリック可能なところを明示できるようにしましょう。

例:

0:38~

便利なアノテーションですが現在PCから閲覧した場合のみ表示される機能なのでスマホから視聴には対応していません。

あからさまにクリックを促すような編集をしてしまうとスマホユーザーにとっては不便でしかないのでバランスが大切。

一方、ブランディングとカード機能はスマホユーザーにも表示できるので必ず設定しましょう。

ブランディングは動画の右下のアイコンをクリックするとチャンネル登録のリンクを行える機能です。
※現在は右下にアイコンが表示されますが以前は右上に表示されていたようです。今後変わる可能性もあるのであまりこれを意識した編集は行わない方が吉。

利用方法は『クリエーターツール→左カラムのチャンネル→ブランディング』

branding

カード機能はクリエイターツールの『編集→カード』から設定します。

動画再生中に右上の『!』をクリックすると関連WEBサイトやYouTubeの別のページのリンクを張る事が出来ます。

card

前回の記事で触れたh2タグがカードのタイトルに挿入されるので、h2タグを考慮したプレイリストの名称やタイトルを決めましょう。

card

こちらもほぼ直観的に操作できるので利用方法の説明は省きます。

サムネイルの作成と動画の一貫性

一貫性は即ちコンテンツのブランディングです。

最も手っ取り早くユーザーにシリーズモノだと認識させるには一貫性を持ったサムネイルを作成する事。

堀江貴文氏のホリエモンチャンネルには色々なコンテンツのプレイリスト(シリーズ)がありますが、サムネイルを見ればどれがどのシリーズの動画なのか一目で分かります。

horiemon

すべての動画のオープニングにHIKAKIN氏のボイパ&ドット絵のアニメーションという一貫性を持たせています。

アニメ以外でも実写やストップモーション等、コンテンツのブランドに沿ったモノであればOK。

例:

0:00~0:05

“30sec film artists”では最初の5秒にストップモーションの映像を利用しています。

最後に、一貫性について最も注意しなくてはならないのは映像編集の初心者が失敗しがちな動画自体の音量です。

YouTubeのプレイリストや自動再生を観ていると一つ目の動画で音声が小さすぎるためボリュームを上げたら次の動画は音が大きくてびっくりした経験をした事がある人も少なくないと思います。

ユーザビリティの欠陥です。

気を付けましょう。

タイトルと説明文

前回の記事で説明した通りタイトルと説明文はVSEO上非常に重要です。

動画検索の場合も最重要視されるのはタイトルなので検索されやすいキーワードをタイトルに含めます。

説明文はデフォルトで最初の3行しか表示されておらず残りを表示するにはユーザーに『もっと見る』をクリックさせる必要があります。

その為、最初の3行に最もクリックして欲しいリンクや続きを促す文章を挿入します。

最初の3行は検索エンジンのSEOでも重要なので内容は慎重に決めましょう。。

description

3行目以降には以下の内容を挿入します。

  1. 自分のチャンネルの別の動画のリンク
  2. 関連動画として認識させる要因の一つに説明欄のリンクと類似性があります。
    片方だけでも類似性が認められれば関連動画に表示される可能性がありますが相互にリンクすることでより関連性が認められやすくなります。

  3. シリーズモノであればシリーズの説明
  4. 説明欄の類似性と一貫性を保ち、関連性を認められやすくなります。

  5. 関連する別の人の動画のリンク
  6. 検索してほしいキーワード上位の関連動画に表示させる為にこちらから発リンクします。
    これは外部SEOの一環なので詳細は後述します。

  7. WEBサイトや関連SNSのURL
  8. 動画毎にYoutube外のオウンドメディアへのリンクを貼ることで関連性を認められやすくなります。
    WEBサイトを所有している場合は関連WEBサイトの登録も忘れずに行いましょう。

  9. 動画の説明内容等その他必要な情報

上記のポイントを抑えて動画の説明を書きましょう。

キーワードについて

検索エンジンのSEOではあまり重要では無くなったキーワードですが、Youtube内では説明欄と同程度重要です。

内部VSEOのポイントは関連性を持たせることなので全ての動画に共通のキーワードをいくつか持たせます。

共通キーワードも一般的なキーワード(例:芸術、スポーツ等)とユニークなキーワード(例:10秒でできるアート、40代からのランニング等)を複数決めます。

現在の仕様ではキーワードは思いつくだけ詰め込んでも問題無いようなので、関連性のあるキーワードはとりあえず沢山入れておきます。
※共通部分はカンマ区切りでメモ帳等に保存しておくと入力する手間が省けます。

HTMLソースには15個までしか表示されませんが、YouTube内部ではしっかりと処理されているようなので、後述する外部VSEO用のキーワードも含めトータル20個程度が目安かと思います。

再生リストの作成

アップロード完了後は再生リストを作成します。

再生リストから再生されると自動で次の動画に飛ぶのでユーザビリティの向上に加え動画同士の関連性が強まるので自動再生の候補にもなりやすくなります。

作成は『クリエイターツール→動画の管理→再生リスト』から。

忘れがちですが『編集』から再生リストの説明も忘れずに編集しましょう。

pldescription

ここまででYoutubeの内部VSEOは完了です。

次回は外部VSEOについて

ひとこと

今回はかなり色々詰め込んだ感がある記事でした。

詳細はかなり省いたので質問やコメント等があれば残していってもらえればと思います。

Website: 30sec film artists
チャンネル登録してね。


YoutubeのSEOと視聴者&チャンネル登録者を増やす方法(その1)


映像編集や撮影等は過去の記事も読んでもらえれば分かるように一通り出来るのですが、Youtubeに関しては「プロはやっぱりVimeoやろ!」みたいな先入観があってあまり手を付けていませんでした。

しかし最近凄く流行っるみたいだし遅ればせながらYoutubeの波に乗ろうとシリーズモノの動画コンテンツ制作始めました。
(Youtuberになりたいとか言う訳ではなくてサービスのプロモーションの一環です。)

そこでまず、チャンネル登録者のそこそこ多い(数千人規模)チャンネルを色々リサーチした結果クオリティ的には負けてない!

自信も付いたところでいざ登録者を増やすために巷で話題のVSEO(Video Search Optimization)とやらについて色々調べたことをまとめようと思います。

まずはVSEOには大まかに分けて2つの種類があります。

  1. Google検索に最適化させて検索からトラフィックを稼ぐ方法
  2. 他動画の関連動画やYoutube内の動画検索によってトラフィックを稼ぐ方法

この記事では前者について説明します。

はじめに

Googleはフェアーな精神をモットーにしている会社なのでYoutubeが自社のメディアと言えどGoogleの検索アルゴリズムに則って表示順位が決まる為、テクニックはWebのSEOと変わりません。

まずソースを開いてドコに何のタグが付いてるかを観察します。(Chrome例:右クリック→ページのソースを表示)

titleやh1、h2タグ、メタdescriptionをSEOの原則に従って適切に設置することによりGoogle検索からトラフィックを得る事が出来ます。

まずこちらのページを開いてソースをご覧ください。

https://www.youtube.com/watch?v=Jvylrpuks-k

SEOに最も大きく関わる、titleタグとmetaタグはソースを開くと30~40行目位のところにあるのが分かると思います。

以下大事なところだけ見やすくコピペしました。

1.titleタグ

titleタグの中身は「動画のタイトル – Youtube」となっています。

titleタグでSEO的により重要なのは手前にある単語という説があります。

この場合は”Roadsworth”というキーワードでSEO対策したい場合に有効なタイトルだと言えます。

もしチャンネル名で検索してもらう事を想定している場合は動画タイトルの頭にチャンネル名等も入れましょう。

但しSEOを意識しすぎてクリックを躊躇させたりユーザーを混乱させるようなタイトルでは逆効果です。
(例:”30sec film artists” Vol.1 Roadsworth “I really had a lot of fun doing that”)

こういった場合はチャンネル名はDescriptionやhタグに入れる等の対策も可能なので、バランスの良いタイトルを考えましょう。

2.meta name=”description”

動画の説明欄の文章が3行分程挿入されています。

検索してほしいキーワードがある場合はここにも入れましょう。

但し、この3行には後ほど説明する別の要素にも関わってくるのでGoogle検索だけに注力する必要はありません。

Youtubeでは以下のように表示されています。

description

3.meta name=”keywords”

Googleは大昔に検索アルゴリズムの対象からKeywordsを除外しているのでGoogle検索のSEOには効果は見込めませんが他の検索エンジン(BingやBaidu等)向けに設定しておきます。

タグ内に挿入されるのはYoutubeのキーワードの上から順に15個、それ以上は末尾の”…”になります。

keywords

Youtubeでは好きなだけキーワードを設定できますが、検索エンジン向けのSEOも意識する場合には上から15個以内に入れるようにしましょう。

4.h1とh2

h1とh2はソースをみると以下のようになっています。

h1

h2

h1はtitleタグ同様動画タイトルがそのまま挿入されます。

h2はソース上では上記のようになっていますが、JavaScriptでカード(後述)のタイトルが挿入されるようです。

GoogleボットのJavaScriptの理解具合には色々と議論の余地があるようですが、自社のサービスなのでおそらく自社アルゴリズムに最適化されているでしょう。

検索エンジン向けのSEO的にもカードは必ず設定しましょう。

card

まとめ

h1とtitleタグはWebサイトのSEOを行う上で最も大切な3要素のうちの2つです。

YoutubeのSEO対策はタイトルがほぼ全てだと言っても過言ではありません。

3つのうち、他1つはmeta descriptionなので、タイトルと説明の3行だけ抑えていればGoogle検索的にはほぼ完ぺきです。

続きはこちら。
YoutubeのSEOと視聴者&チャンネル登録者を増やす方法(その2)

ひとこと

これが自分たちのチャンネルです。

カナダのアーティストを30秒前後の動画でコレクションしてるので良ければチャンネル登録してください。

まだ始めたばかりなのでまだチャンネル登録者数8名ですが(2015/9/14)、これからどんどん増える予定なのでお楽しみにと言う意味もこめてチャンネル登録してもらえると嬉しいなぁー。

Website: 30sec film artists