xfcRS-平滑化されたタイルの元の簡潔で軽快なレンダリング、「拡張高速セル-角丸正方形」

xfcRSは多機能高速アルゴリズムで、スムーズトランジションを使用したタイルレンダリング用/等値面の構築用/ラスター内のエッジの選択用/ピクセルシェーダーとしての後処理用-ピクセルアートスケーリング8x8（フォントの高速ラスター化には、変更なしのアップスケールのための他の素材は推奨されません） 。 頭字語のデコード-「eXpansion Fast Cell-Rounded Squares」



この記事では、主にスムージングタイルのレンダリングのコンテキストで検討します。



利用規約についてご質問がある場合は、こちらでご確認ください



先を見据えて、すぐに言います。これは改良されたマーシングスクエアではなく、



非常にシンプルなタイルスムージングスキームが使用されます。 これは、「拡散円」によって実現されます。その部分は、同一ではないセルのジャンクション、またはセルと空のセルのジャンクションに重ねられます。 「拡散円」は、すべてのタイプのセルに対して描画され、テクスチャに空のセルへのスムーズな移行を反映する必要があります。



つまり、すべてのテクスチャは、空のセルのテクスチャを介して相互に受け渡します。 これにより、アーティストの作業が可能な限り高速化されます！



アルゴリズムはセルを2x2クォーターに分割し、各セルは準備されたセットからより小さな方向のタイルで塗りつぶされます。 しかし、これは結果です。 実際、xfcRSは後処理アルゴリズムです。 そして、ビューアは外部の追加です。 XfcRS自体は、セルマップをさまざまな方法で使用できるインデックステーブルに折りたたむだけです。 このテーブルとは何ですか、どのように構築され、どのように使用されますか？



この記事では、単純なポストレンダリングの例を示します。 「ポスト」レンダリングとは、ビュー内の次のパスであり、マップ全体をゼロから表示するのではなく、必要な場所に追加のサブタイルのみを描画することを意味します。



急がずに、説明された順に説明を始めます。



1.遷移テクスチャ

「トポロジ」を見ると、隣接するセルに応じてセルを構成できるタイルが16個あります。

最も単純な状況：すべての隣人が等しい（セルがエッジピースで構成されている）ことは、類推によって覚えることができます-ピースが隣人にくっつくこと

（これを変更する初期状態とします）。

隣人が等しくない場合、彼は自分の一部を2つの位置にプッシュします。



すべての隣人がチェックされ、タイルのすべてのピースがそれに応じて押し出されると、これらの4つのピースでセルを表示できます。

（効率のために、たとえばセルが完全に完全であるか完全に空であるかなど、卸売条件を確認できます）。



最初に考えなければならないのは、スムージングタイルの問題の定式化をどのように選択するかです。これにより、実装が容易になりますが、質的に大きな違いはありません。

通常のセルを視覚的に「平滑化」することにより、一部のセルが他のセルにクロールされることは明らかです。 しかし、すべての「クリープ」が人件費の点で同様に最小限であるわけではありません。

セルを2つの方法で丸めることができます-共通のテクスチャをその上にクロールする方法、またはその逆-セルを元の境界を越えて引っ張る方法。 2つのオプションは、視覚的にはほとんど意味がありません。 私たちは1つを選択します-見知らぬ人と会うとき、またはテクスチャーがゼロのときのセルの狭まりのみ。 これは、対角セルとの相互作用を除外することも意味します。これは、さらなる最適化にも役立ちます。



この場合、遷移コンターは理想的な円に最も近くなるようにするのが最適です（ただし、これは制限ではありませんが、それに近いほど滑らかに丸められます）。 セルの周りの理想的な円は正確に記述されます-角を通過します（これはスムーズな遷移の制限です）。 対称性も重要です。これはバイラジアルでなければなりません。 これにより、薄い領域の曲がりを滑らかにできます。 遷移テクスチャが均一でない場合-トーラスを描画します（元のテクスチャの図を参照してください。テンプレートとして使用できます。このステートメントは、クリエイティブコモンズライセンスと見なすことができます）。





写真で：

黒いグリッドは元のセルを示しています。 近傍がないために平滑化を計算できないエッジ領域は影付きです。 つまり 結果のメッシュの幅と高さは、セルによって縮小されます。 残りの白いグリッドは、セルの半分のインデントで配置されます-結果のサブセルインデックスがそれに書き込まれます。



遷移の元のテクスチャが左下隅に追加され、そこから提示された図のすべての曲げが収集されます。



曲線を試してみたい場合は、左の「テクスチャの拡散ゾーンのトポロジー」の写真を見てください。 白い線は論理的な輪郭を示しています。 その両側の黒い線は、許容されるオフセット範囲です（この場合、タイル接続の遷移ポイントは、左から右、上から下のペアで、中心から等距離にある必要があります）。 たとえば、楕円を描画してアイソメ効果を得ることができます（カメラビューの傾斜）。



2. 2つのチェック-4つのセル

素朴なアプローチは、2つの隣接セルの現在のセルとの同等性をチェックして、すべてのサブセルをバイパスすることです。 この場合、検証結果は、振動したテクスチャーの座標の中心へのシフトです（図を参照）。 最初は、すべての四分の一がテクスチャのコーナーピースとして受け入れられ、接続されると青い円を形成します（すべての側面に青い隣人）。 垂直方向の近傍との不等式は、選択したテクスチャー部分を垂直方向に中央にシフトします（2つの位置、反対の垂直角の後に選択されます）。 チェック後に何も移動していない場合（青い円全体が残っている）は例外として扱うことが望ましく、セル全体を四分の一ではなく一度に表示する必要があります。

これで、素朴な方法は終了します。

（さらにコードでは、タイルの初期位置は0xfc30の定数になります。水平/垂直シフトは、配列の必要なセルの対応するHEXビットで機能します）

2つのセルの等価性の検証は、実際には常に4つのサブセルに影響し、2つはそれぞれ8つのサブセルを持っていることに注意することが重要です！ （額のメソッドから）この8倍のアクセラレーションを取得して、一括処理します。 図を参照







したがって、各サブセルの代わりに目的のセルをバイパスし、結果の配列に変更を加えるだけです。 また、近傍の有無の組み合わせは、2つの独立した要因として知覚できることに注意してください（上部の近傍の存在はxに沿ってテクスチャをシフトし、左側の近傍はyに沿ってテクスチャをシフトします）。 また、要因は独立しているため、同期に依存する必要はなく、非同期に処理できます。 ちなみに、xfcRSは一般に完全に並列化されています！

要因を見つけるとき、対応するX /ゲームを結果の配列に配置します（これはすべて注意が必要ですが、見ると、インデックスビットに非常に便利に格納されています）。



-！ 重要！ 同じ理由で、xfcRSが結果の配列を返すゾーンは、セルの半分（1つのサブセル）で置き換えられます。 そして、エッジセルを計算することは不可能であるという事実は主なものではありません。 主なことは、インデックスをシフト（およびそれに応じて再グループ化）することで、完全にあふれた2x2サブセルをチェックして迅速に識別するのに便利なブロックが得られることです。 -例：目的のセルの2x2ブロックが着信マップに存在する場合、その結果、輪郭に沿ってセルの半分だけ平滑化され、中央（セルの床に移動）に1つのセル全体が存在し、インデックスから簡単に決定できます。 空のセルの定義は必要ありません。パススルーアルゴリズムの定義により、空のセルは既に標準のタイルアルゴリズムで描画されているためです。 例のレンダリングコードは、単にそれらをスキップします。



3.実装に関するコメント

完全なソースコードはgithub.com/impfromliga/xfcRSをご覧ください

それを実装するとき、返される日付はサブセル（利用可能なサブセルの間で2x2にグループ化されている）のものであると考えることが重要です。これは、境界セルの値を計算する方法がないためです（十分な隣接セルがありません）-返されるフィールドのサイズは、セル（各エッジからセルの半分）だけ小さくなります

どのように処理するかは、xfcRSでは関係ありません。 エッジはサブセルなしで表示できますが、マップにスクロールが含まれる場合、地形は画面のエッジで視覚的に「震えます」（影響する近隣が表示されるとき）。 この場合、出力を元のデータからセルの半分だけトリミングするか、セルごとにxfcRSの入力を事前に増やすことをお勧めします。



2x2サブセルのグループは、ビッグエンディアンの順序で単一の値、つまりセル値にパックされます

Ab

CD

-ビット単位で、低から高までの数字です。 そして、インデックス値=（（D * 16 + C）* 16 + B）* 16 + A

だから 各セルに1桁の16進数があります（目的のぼかしタイルのインデックスが含まれています）。







5.組み合わせ：

-スクロールが実装されると、xfcRSは2Dバッファーに簡単に配置されます。これは前の記事で分析しました。 => habrahabr.ru/post/280830

-さらに、投稿の画像から既に見たように、驚くほど元のフォント（ビットマップのスタイルを設定できます）を描画します。



6.ストーリーのために

生まれました（難なくではありませんが、より楽しいだけです）私はアルゴリズムをとても気に入ったので、大声で呼ぶことにしました。

私は略語を探し始めました.FXAAアンチエイリアシング、またはxBRまたはEPXのいずれかのアルゴリズムに似たものが欲しかった-ところで、ピクセルアートグラフィックスをスケーリングします（ちなみに、後者の最近の検査の後、それは私のものと非常に顕著な類似性を持っていることがわかりました）。

そこで、彼は「eXpansion Fast Cell Rounder」または単に「Rounded Squares」の2つのオプションを考え出し、その結果、彼は後者にもっと傾き始めました。

しかし、他に何が私を襲ったか知っていますか？ その結果、コードでは、名前の後に、定数0xfc30に到達しました。

（私がITオタクであるように、ハイフンなしの単一の名前はすべての種類のSEOに適していますが、この場合、2つは避けられません！）



運命の別の贈り物は、遷移テクスチャの興味深いパターンの以前の発見でした：

-美しいテクスチャのボールを表示します（3Dマテリアルエディタのように）

-実際、このボールは4x4タイルの再配置のみを使用して、ピクセル単位で裏返すことができます。 つまり ベースのテクスチャは関係なく、裏返すことができます。



実際、xfcRSはすぐには細長くなりませんでした。たとえば、古いテストでは、追加の滑らかさが視覚的に確認されるだけのタイルセットの素晴らしい位置に気付きませんでした。



ちなみに、レイアウトには別の審美的なタスクがありますが、タスクではなく、私に悩まされる質問です。 円を裏返しにするこのような異常に素晴らしい機会を考慮して、テクスチャを保存するより簡潔な方法はありますか？アイデアはありますか？



さて、デザートの場合：

スクリーンショット：















ライブデモcodepen.io/impfromliga/pen/qNOazj



以上です。 記事をもっと頻繁に書きたかったのですが、第一に、良心は最後までうまくいかなかったものをレイアウトすることを許可していません。第二に、実装自体よりも説明を理解するのに時間がかかることがわかりますが、それは常に豊富ではありません...



コメント、批判、提案、コンストラクトを事前にありがとう！



ところで、時間は速くなる傾向があり、多くの人があなたを蹴り、あなたの発見に関心を示します。



ここまで読んでくれたら、どうもありがとうございました！

また後でね