キャンバス上の描画を拡大するとき、スクロールバーを表示する必要があります。
キャンバスは ScrollViewer 内にあり、キャンバスの幅/高さを増やして、スクロール バーが表示されるようにします (それ以外の場合は表示されません)。

倍率 1.1 でズームインするには、次のコードを使用します。

Canvas が大きくなりすぎることがわかりました。図面は10%ズームインしていますが、幅は1.1の正方形のように20%増しになっているようです。だから私はMath.Sqrt(f);の代わりに使用しfます。

なぜこのように動作するのか、誰か説明できますか?

私が書いた解決策がうまくいかない理由を知りたかった：

次の間違ったソリューションを出力します。

助けていただければ幸いです！ありがとう。

以下に対する理想的な正しいソリューション:

だろう：

したがって、ワールド空間にオブジェクトがあり、異なるカメラ設定でシーンを表示する 2 つのビュー A と B があります。ビュー ボリューム (平面に近い) をビュー A からビュー B に変換して、概要と詳細のようなものを表示できるようにします。ビュー B に表示するには、平面に近いビュー A の錐台にどのような変換を適用する必要がありますか?

HTMLキャンバスでピボットを使用して2D変換マトリックスを取得しようとしています。0,0 のピボットを使用するとすべて正常に動作しますが、黄色の形状に回転原点を追加するとすぐに、希望どおりに動作しません。

http://i.imgur.com/TYeuUUP.jpg

黄色の形状の中心は、赤色の形状と同じ位置にある必要があります。ピボットの位置は、ワールドではなく、シェイプを基準にする必要があります。数年前にこの問題の解決策を見つけましたが、正確な計算を思い出せません。tx と ty の何かが欠けていることはわかっています。

何か案は？

次のような棒グラフの凡例を作成したいと思います。

どこで | : データ列、/ : 各列の凡例

テキストの凡例を正しく取得できませんでした。複数の maxtrix 変換を試してみましたが、どれも正しく機能しませんでした。

助けてください ：（

Three.js を学習しようとしていますが、これらのテクノロジは初めてです。惑星が周回する太陽と、惑星の周りを周回する月を実現しました。私が懸念しているのは、これまでのところ、非常に多くのオブジェクトを作成し、ループのレンダリング中に非常に多くの計算を実行する必要があることです。

1. ソースコード:

WestLangleyは、よりわかりやすい方法で問題を提示するフィドルを提供してくれました。

• このフィドルは、今見ているように見えます-惑星は太陽の中に親があり、その親を回転させると惑星の軌道になります. updateMatrixWorldしかし、惑星/月ごとに 1 つの追加のオブジェクトに加えて、 Object3D メソッドの実行中に、親の回転が惑星をその場で回転させるという問題があります。したがって、ビットを見て想定するよりも少し速く回転しmesh2.rotateOnAxis( AXIS, 0.01 );ます。
• このフィドルは、1 つの親のないアプローチを示しています。ケースは、システムの起動時に惑星の位置/スピン速度/軌道速度を構成し、サーバー時間でフィードするだけでなく、同じ場所にいるプレイヤー間で同期しているように感じる方法を見つけようとしています.

3. 質問自体

マニュアルを調べた限りでは、Three.js マトリックス ロジックを使用してこのようなアニメーションを実行できる可能性があることがわかりました。::animate()内部オブジェクトの使用を可能な限り減らしたいと思っています (おそらくオーバーライドupdateMatrixとupdateMatrixWorldメソッドによって)。残念ながら、私の英語も数学も理解するのに十分ではありません.これらのマトリックスで何が起こっているのか. 誰かが私を助けてくれれば、本当に感謝しています。

4. 現在の作業進捗

ワーキングフィドルはこちらです。私は惑星を作ることができ、欲しいものはほとんどすべて手に入れることができました。残された問題の 1 つは、よりランダムに見える角度で惑星を周回したいということです。

長方形を画像に示されている形状に変換する方法はありますか..?

これを行うために AffineTransform を使用できるあらゆる方法を試しました。しかし、期待した結果を得ることができませんでした。これが不可能な作業なのか、それともこれを行う方法があるのか​​ を確認したい..

現在、ImageView と Matrix の翻訳を行っています。このコードで画像を翻訳してみます。

上記のコードでは、ImageView は画面の左上 (番号 1) に左上の画像を表示します。次に、翻訳値を期待する値に変更しようとしますmatrix.postTranslate(-1280, -960);(3 番) は、画像のサイズが 1280 x 960 px であるため、画面の外側に表示される画像です。しかし、結果は下の画像のようになります（番号2）。

*黒い長方形は、私のデバイスの画面に表示されているものです。

私の質問は、画像を-1280、-960に変換して画像を中央に移動するだけなのはなぜですか? 翻訳単位はピクセルではありませんか? または私はここで間違いを犯していますか？私のデバイスは、解像度 720 x 1280 ピクセルの Samsung Note 3 Neo です。

(この質問で、私はこの他の質問を解決するために持っていたアイデアを調査しようとしています)

メモリ内に幅と高さの標準的な 2D 配列がある場合、それを長さwidth * heightの 1D 配列に変換し、 index = x + y * widthでインデックスを付けることができます。このマッピングは、配列のメモリを割り当てて解放するときに非常に役立ちます。メモリ マネージャーは、構造体を 2D でパックすることを気にする必要はなく、1D で表現されている場合、割り当てられたすべての配列の全体の長さだけを気にする必要があるためです。

OpenGL テクスチャのイメージ メモリ管理にこの同じアプローチを使用できるかどうかを確認しようとしています。(上記のリンクされた質問で説明されているように) アイデアは、必要なテクスチャ全体を大きなテクスチャにビンパッキング(つまり、互いに並べて描画) することにより、1 つの大きなテクスチャに結合することです。これにより、レンダリング中のコストのかかるテクスチャ バインディング操作を最小限に抑えることができます。

私の大きなテクスチャが 8×8 ピクセル (合計 64 ピクセル) だとしましょう:

そして、5×5の画像と4×5の画像を保存したいと思います（つまり、合計25 + 20 = 45ピクセル）。技術的には、利用可能なピクセルはたくさんありますが、これらの画像を大きなテクスチャに並べて配置することはできません。これには、一方向に 9 個、他方向に 5 個の最小寸法が必要になるためです。

単純に 8×8 テクスチャを 64 連続ピクセルのメモリとして扱い、その中の 1D ブロックのメモリに 2 つの画像をマッピングできれば、次のように画像をテクスチャ内に配置できます: 8x8 テクスチャ:

すべての画像を 1:1 の縮尺で描画する場合、つまり、分数ピクセル座標がどこにもなく、線形フィルタリングやその他のピクセル ブレンディングも必要ない場合、4 を描画するために使用できる変換マトリックスを考え出すことは可能ですか? ×5 このテクスチャを使った画像？

頂点シェーダーとフラグメント シェーダーを使用すると、これはかなり簡単なように見えます (何かを忘れていない限り、試したことはありません)。

• 頂点シェーダーは、画像の 4 つのコーナーをマッピングして、64×1 の画像として表現されるテクスチャに描画します。

  • a: (0, 0) → (0 + 0*4 + 25, 0) = (25, 0) ここで、25 は 4×5 画像のオフセットです。
  • d: (3, 0) → (3 + 0*4 + 25, 0) = (28, 0)
  • q: (0, 4) → (0 + 4*4 + 25, 0) = (41, 0)
  • t: (3, 4) → (3 + 4*4 + 25, 0) = (44, 0)

  テクスチャ内の他の座標の補間は( ?) 整数座標のこの線に沿って右オフセットにもマップする必要があります。

• フラグメント シェーダーは、この 64×1 座標を最終的な 8×8 座標に変換します。
  • a: (0, 25) → (25 % 8, 25 / 8) = (1, 3)
  • d: (0, 28) → (28 % 8, 28 / 8) = (4, 3)
  • k: (0, 35) → (35 % 8, 35 / 8) = (3, 4)
  • q: (0, 41) → (41 % 8, 41 / 8) = (1, 5)
  • t: (0, 44) → (44 % 8, 44 / 8) = (4, 5)

残念ながら、カスタム シェーダーには OpenGL ES v2.0 以降が必要ですが、これはすべてのデバイスで利用できるわけではありません。

OpenGL ES 1.1 が提供する行列変換だけでこのマッピングを達成することは何とか可能ですか?

要素の変換: スケールをアニメーション化するには、変換マトリックスを使用する必要があります。

0 から 1 にスケールしたい。次のコードを使用すると、正しく動作します。

https://jsfiddle.net/w4kuth78/1/

マトリックス自体を使用すると、機能しません。

https://jsfiddle.net/m7qpetkh/1/

私は何か間違ったことをしていますか、それとも単に機能していませんか? Chrome と Firefox では動作しないため、疑問に思っています...

console_log デバッグ出力は、0 から 1 へのスケーリングで、マトリックスもマトリックス (0,0,0,0,0,0) からマトリックス (1,0,0,1,0,0) に設定されることを示しています。

編集：

完全な混乱...マトリックスのscaleXとscaleYの値を0.1または0.01に変更すると、機能します...すごい