問題タブ [gl-matrix]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
317 参照

javascript - gl-matrix の xyz の代わりに phi と theta による四元数回転

gl-matrixクォータニオン オブジェクトには 3 つの関数rotateXrotateYあり、rotateZクォータニオンを特定の軸で回転させます。今度は、xyz の代わりに phi と theta を使用して同じことをしたいと思います。

これはどのように可能ですか?rotateX値を抽出して、rotateYおよびに渡すことは可能rotateZですか?

0 投票する
1 に答える
1332 参照

javascript - スケルトン アニメーションで最終的なボーン マトリックスを計算するにはどうすればよいですか?

スケルトンの最終的なボーン マトリックスを見つけるのに苦労しています。

私は自分のバインド ポーズ マトリックスが機能することを知っており、変換マトリックスが機能することを知っていますが、それらを乗算 (複合マトリックスと呼んでいます) してから、それらをその親の複合マトリックス (次にその親の親など) で乗算すると、正しいマトリックスを取得してください。

gl-matrix.js をベクター/マトリックス数学ライブラリとして使用していることに注意してください。そのマトリックス数学は逆に機能し、PositionMatrix * RotationMatrix * ScaleMatrix を必要とするワールド マトリックスを取得します。注文が混み合っているかもしれませんが、

バインド ポーズ マトリックスとボーン変換マトリックスの乗算順序、および最終マトリックスと親マトリックスの順序を変更しようとしましたが、今は気が遠くなりました。

とにかく、この質問をお辞儀で締めくくります。すべての頂点がその相対ボーン空間に事前に変換されているメッシュを考えると、各ボーンはポーズ マトリックスをバインドし、フレームごとの各ボーンはマトリックスを変換します。どうすれば最終的なボーン マトリックスを見つけることができますか?

編集:

まだ問題がありますが、現時点で私がどこにいるのかを言うのに役立つかもしれません.次の疑似コードは、モデルを完全にバインドポーズにします.

上記のスニペストは、行列関数を説明する必要なく、まさに何が起こっているかを示しています (その JavaScript は、mat4.copy や mat4.mul などの関数を介して行われます)。

私は次のようなことをしたかどうか考えました

私は最終的な行列を取得します (そして、poseMatrices の前に transformMatrices を使用しようとしました) が、脊椎が壊れ、脚が裏返しになっているモデルしか取得できません。

編集2:

さらに詳しく調べてみると、アイドル フレームのボーン変換行列の中央の 2 行が反転していませんか? 奇妙ですが、今それらを元に戻すとどうなるかを調べています

0 投票する
0 に答える
1701 参照

javascript - glMatrix 四元数回転

これが期待どおりに機能しない理由を誰かに説明してもらえますか。

クォータニオンを使用して、vec3 [5,0,0] 180 度/Math.PI ラジアンを z 軸を中心に回転させます。

結果は [-5,0,0] になると思います。[5,5,0] を回転すると、予想どおり [-5,-5,0] が得られます。

http://jsfiddle.net/s4sqq5L4/

0 投票する
1 に答える
1441 参照

matrix - オブジェクトを回転させると、法線が間違った方向に回転する

WebGL で単純なトーラスをレンダリングしています。頂点の回転は正常に機能しますが、法線に問題があります。1 つの軸を中心に回転すると、それらは正しい方向を維持しますが、2 番目の軸を中心に回転が増加すると、法線は回転の 1 つが 180° になるまで間違った方向に回転し始めます。彼らはすべき。問題は回転に使用されるクォータニオンにあると思いますが、何が問題なのかを判断できませんでした。

これは私のプロジェクトの(わずかに変更されていますが、まだ問題を示しています)jsfiddleです:https://jsfiddle.net/dt509x8h/1/
フィドルのhtml部分には、objからのすべてのデータを含むdivがあります-ファイルトーラスを生成するために読んでいます(ただし、解像度は低くなります)。

頂点シェーダー:

フラグメント シェーダー:

行列の更新 (入力がある場合に実行):

回転クォータニオンの作成 (マウスが移動したときに呼び出されます):

Y 軸だけを中心にトーラスを回転させると、法線は正しい方向を指します: 2 つの軸を中心にトーラスを回転させます。法線はあらゆる場所を指しています。
Y 軸だけを中心にトーラスを回転させる

2 つの軸を中心に回転

すべての行列と四元数の操作にglMatrix v2.3.2 を使用しています。

更新: Z 軸を中心にのみ回転すると (入力軸をquat.setAxisAngle明示的に に設定する[0,0,1]か、 を使用してquat.rotateZ)、法線が反対方向に回転するようです。
の z コンポーネントをゼロにaxisしても役に立ちません。

Update2: Rotating byquat.rotateX(q, q, l*scale); quat.rotateY(q, q, l*scale); quat.multiply(rotation, q, rotation);正しいようですが、Z を中心とした回転が導入されるとすぐに、Z 法線が動き始めます。
代わりに x または y のマウス値の違いを使用すると、すべての法線が移動し、 x と y にl大幅に異なる値を使用することになります。scale

Update3:シェーダーで乗算の順序を変更する uNMatrix * aNormalDirectionと、法線が常に間違った方向に回転します。

0 投票する
1 に答える
300 参照

javascript - ノード モジュールの最上位オブジェクトへのプロパティの追加

node.js モジュールでは、変数宣言はモジュール内で非公開のままです。

var a = 'x';

たとえば、この方法でいくつかの変数を宣言したいとします。次のコードは使用できません。このように、変数が実際にグローバルになり、他のモジュールでも表示されるようになるためです。

モジュールだけでこれを行う方法はありますか? ライブラリ ('gl-matrix') が必要なため、これが必要です。このライブラリには、モジュール内で簡単にアクセスする必要があるいくつかのサブオブジェクトがあります。避けたい:

0 投票する
3 に答える
3349 参照

transformation - glMatrixで変換順序が逆になっていますか?

ここに画像の説明を入力

両方のシーンで、glMatrix で変換を交換する必要があります。

つまり、glMatrix で 1) を達成するには:

変換順序が逆なのはなぜですか?

0 投票する
1 に答える
1161 参照

javascript - GLMatrix を使用して行列の乗算を行うにはどうすればよいですか?

JS 用の行列演算ライブラリを見つけて使用しようとしているところです。2D マトリックスに対して単純な移動、スケーリング、および回転操作を実行したいと考えています。mozilla 開発者の Web サイトでは、「速度とパフォーマンスに重点を置いている」という理由で GLMatrix を 推奨ています。

を使用して、マトリックスに対して単純な 2D 変換を実行したいだけですmat2d。私はこのようなことをしたい:

Uncaught TypeError: mat2d is not a functionしかし、私は( JSFiddle )を取得するため、正しい構文を持っている必要はありません。ここでGL-matrix-min.js見つかったを使用しています。

上記の行列乗算コード スニペットを修正するにはどうすればよいですか?

0 投票する
0 に答える
814 参照

javascript - gl-matrix.js の関数 mat4.multiply で乗算が機能しない

gl-matrix.js ライブラリgl matrix mat4で 2 つの行列を乗算したい

乗算はこれで機能します:

は行列this._transformation[x].transformationです。

しかし、これを行うとうまくいきません:

これは、格納されている行列this._transformations[0]が乗算後も同じであることを意味します。

誰かがこれについて説明していますか、それとも私が間違っていることを教えてもらえますか?

編集:console.log(mat4.equals(mat4.create(),this._transformations[0].transformation))戻りますtrue

0 投票する
0 に答える
197 参照

javascript - 2 つの空間回転の差を計算する方法

イベントから取得したモバイル デバイスの物理的な向きを、deviceorientation私の種類の 3D ビューアーで一連のカメラの回転に変換しようとしています。問題は、ページ読み込み時の方向から取得した最初の方向に対して空間的な回転を行う必要があることです。deviceorientationしたがって、最初の向きを保存してから、保存された向きから現在の向きへの向きの変更に対応する空間回転を何らかの形で行う必要があります。

それ、どうやったら出来るの?

glMatrixの四元数を使用して空間回転を行うことに注意してください。ただし、このトピックにはあまり詳しくありません。

現在、私の回転関数は次のようになっています。

そして、私のdeviceorientationリスナーは次のようになります (まだ完成していないことを確認してください):

必要な角度 ( ) を取得するための明示的な式を見つけるのは非常に難しいと思いますaX, aY, aZ。代わりにクォータニオン変換を行う必要があると思いますが、正確な方法はわかりません。