質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

3DCG

コンピュータの演算により、3次元空間の仮想物体を、2次元平面上で表現する手法である。

GLSL

GLSL (OpenGL Shading Language) はC言語をベースとしたシェーディング言語です。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

0回答

967閲覧

とある表情認識APIとThree.jsを用いたdemoで、このAPIがGPUで動くGLSLにどうやって認識した値(とある配列)を渡しているかわからない。

simpleman

総合スコア17

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

3DCG

コンピュータの演算により、3次元空間の仮想物体を、2次元平面上で表現する手法である。

GLSL

GLSL (OpenGL Shading Language) はC言語をベースとしたシェーディング言語です。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

1クリップ

投稿2020/01/19 12:19

編集2020/01/19 12:20

Demoについて

このjeelizWebojiというレポジトリーにある、racoonというdemo(Cameraへのアクセス許可が表情認識のために要求されます)で、source codeはこちらです。

まずは、ライブdemoをここで試して頂きたいのですが、このdemoではこの表情認識API(難読化されていますがドキュメントがあります。)と3つのhelperが使われています。

そこでまずこの3つのhelperと、それらのhelperのまとめ役であるdemo_webojiThreejs.jsというファイルについて、それぞれ簡単にですが説明します。

  • demo_webojiThreejs.jsは2で言及するhelperが作ったinitという関数にThree.jsの描画に必要なcanvasのIDや、3Dモデル素材へのパス、ニューラルネットワークの重みデータへのパスなどを渡して実行しているだけです。

JavaScript

1// 大雑把な構造 [demo_webojiThreejs.js] 2THREE.JeelizHelper.init(/*様々なパラメータ*/);
  • 一つ目のhelperであるThreeJeelizHelper.jsは、ほかの二つのhelperなどを使いながら、その内で多くの関数を定義したあと、最終的にinitを含むいくつかの関数をひとつのobjectにまとめてTHREEにJeelizHelperという名で代入しています。

JavaScript

1// 大雑把な構造 [ThreeJeelizHelper.js] 2THREE.JeelizHelper = (function () { 3 const that = {/*initを含むいくつかの関数*/}; 4 return that; 5})();

ここでさらに付け足してしておきますと、このdemoにおけるThree.jsのgeometryとmaterialは少し特殊なアニメーション技法であるMorph Target(このStackOverflowの回答で簡単に説明されています。)を使用するため、あまり見ないメソッドが使われているようです。
私の理解では、Morph Targetとは人間の顔のアニメーションなどに用いられる手法で、例えば[笑顔, 驚き顔, 怒り顔]といった3つの表情のgeometry(これらをmorph targetという)をあらかじめ用意しておいて、アニメーションの過程でmorph coefficientsまたはmorph target influenceと呼ばれる各表情の強さを表す配列([0.1, 0.3, 0.6]などで、各要素が、同じindexのgeometryの最終的に描画されるmeshへの影響力を表す。)の値を変化させることで、笑顔と驚きの中間の表情(morphTargetInfluences = [0.5, 0.5, 0.0]などになる)などを計算することが可能になるようです。

前置きが長くなりましたが質問について

プログラムの大雑把な動きとしては、

Cameraからのvideo stream
->
APIで表情認識し顔のrotationやmorph target influencesを計算
->
Three.jsのanimation内でAPIから値を取得して利用

というものになります。
ただ、このanimationが少し複雑で、rotationなどのシンプルな変化はJavaScriptで行い、morph targetに関する重い処理はThreeMorphFlexibleMaterialBuilder.js内で作ったGLSL codeを用いてGPUで行っているようなのです。

このGLSLによるmorph targetはAPIからリアルタイムでmorph target influenceの計算結果を取得する必要があると思うのですが、このJavaScriptで書かれたAPIとGLSLがどうリアルタイムで繋がっているのかがわかりません。

それらしき部分はThreeJeelizHelper.js内で一か所、ThreeMorphAnimGeomBuilder()のsuccessCallbackの中で

JavaScript

1const morphTargetInfluencesDst = JEEFACETRANSFERAPI.get_morphTargetInfluencesStabilized();

という箇所があるのですが、この部分はconsoleで確認してみても一度しか実行されていませんし、リアルタイムで何度も呼び出されているようには見えません。

いったいGLSLはどうやってAPIの計算結果を取得しているのでしょうか?


長くなりましたので、わかりにくいところがありましたら遠慮なく質問いただければ、できる範囲で回答させて頂きます。
この分野では新参者なので勘違いなどあるかと思いますが、ご指摘いただければ大変ありがたく思います。
宜しくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問