問題タブ [rasterizing]

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 に答える
461 参照

javascript - Paper.js レイヤーのラスタライズが失敗する

私は Paper.js を使用して、画像に描画したり、テキストを追加したりしています。次に、画像のすべてのスケッチを取得して、すべてをサーバーに送り返す必要があります。具体的には、パスのラスタライズに問題があります。私は使用しようとしています

しかし、画像でこれを行うと、線がラスタライズされません。私はで終わる

「data:image/png;base64」のようなプレフィックスが付いた base64 でエンコードされた画像の代わりに。これは、私がこれを機能させている Paper.jsスケッチです。使用するには、子猫の周りを数回クリックして、数本の線を描きます。2 本の線ができたら、新しいウィンドウが開き、ラスタライズされた画像と、描いた赤い線が表示されます。

スケッチでは機能しますが、自分のコードでは機能しません。

描画を管理する React クラスは次のとおりです。

ラスタライズを行うコードは次のとおりです。

そのため、ラスター化はPointTextsの追加には機能しますが、Path の追加には機能しません。どうしてこれなの?スケッチとは対照的に、私のコードの何が問題になっていますか?

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

svg - SVG をギザギザのない PNG に変換するにはどうすればよいですか?

SVG https://commons.wikimedia.org/wiki/File:Triangle-perpendicular.svgのレンダリングされたバージョンを見ると、ギザギザの線があります。

ここに画像の説明を入力

たとえば、ライン AC は本来あるべき姿ではありません。ギザギザの線を取得せずにこの画像を PNG に変換するにはどうすればよいですか?

私が試したこと

これでは効果がないようです。

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

graphics - 3D ラインをラスタライズする

3D ライン セグメントのラスタライズのアルゴリズムを見つけようとしています。Bresenham のアルゴリズムは、ほとんど私が望んでいるように見えますが、Z 値を計算しません。

ブレゼンハムのアルゴリズムを拡張する方法があるかどうか、または別のアルゴリズムを拡張する方法があるかどうかは誰にもわかりませんか?

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

opengl - さまざまな「ズーム レベル」でゲーム グラフィックスの一定の単位あたりのピクセル数をシミュレートする

現在、作業中のゲーム環境のグラフィカル スタイルを確立しようとしています。メッシュは、「スプライトのような」外観を与えるために、アイソメトリックでかなり低い解像度でレンダリングされます。

問題は、ゲーム内で正しい Pixels-Per-Unit を維持するために選択した解像度を維持することです。たとえば、上面が 64 x 32 ピクセルのアイソメ タイルの上面とほぼ同じになるようにレンダリングされたキューブを次に示します。これがズーム レベル x1 であるとします。

Unity のようなエンジンでは、画面サイズとカメラをいじって簡単にズームインまたはズームアウトできます。しかし、元のレンダリング解像度を維持するには、プレーヤーを強制的にフルスクリーンにし、画面解像度を変更し、それに応じてシーンをスケーリングできるようにすることしか考えられません。

ズームインするには、解像度を半分に切り、立方体を 2 倍スクリーンに近づけます。これが意図した結果です:ズーム レベル x2 (イメージ エディターでスケーリング)。

立方体の上面は、実際には画面上で 128 x 64 ピクセルを占めていますが、依然として 64 x 32 ピクセルに見えます。


独自のシェーダーを作成し、「ズーム レベル」(x1、x2、x4、x8) のパラメーターを使用することで、この効果をシミュレートできるかどうかを知りたいです。この方法では、フルスクリーンの解像度で手品をする必要はありません。また、画面サイズを「レンダリング解像度」から独立させることもできます。

既製のシェーダーでズームインすると、固定の単位あたりのピクセル数が維持されません。立方体が近くにあり、画面上でより多くのピクセルを占める可能性があるため、その品質も向上します。(一度に投稿できる写真は2枚だけです)。

レンダリングされた立方体の品質が高いことは、適切で標準的な動作ですが、意図した効果ではありません。画像編集ソフトウェアの「最近傍」スケーリングを考えてみてください。これは、私がズーム レベル x2、x4、x8 で求めている種類のレンダリングです。まさにリアルタイム。

メッシュをスプライトのようにレンダリングするのは奇妙に思えるかもしれませんが、これはゲームの「外観」として非常に興味深い概念です。


では、これはシェーダー レベルで実行できますか? 私は OpenGL 用に独自の glsl シェーダーを作成することを検討しており、物事の一般的な流れをゆっくりと学んでいます。

シェーダーがフラグメントをラスタライズして、求めている「最近傍」サンプリングを取得する方法を変更できますか?

シェーダーは、「ズーム レベル = 2」などのパラメーターと対話して、レンダリング中に動作を変更することさえできますか?

それとも、このスタイルのリアルタイム レンダリングを実現するために、私がまだ出会ったことのない他の方法があるのでしょうか?

そしてもちろん、これはシェーダーが行うことでもありますか? これが処理されるグラフィックス パイプラインのステージが間違っている可能性があります。

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

r - R: テキスト xyz から複数のラスターへ

ヘッダー名を含むカンマ区切りのテキスト ファイルがあります。

これらの列には、緯度、経度、および複数の高さの値 (z1、z2、z3、z4) が含まれています。緯度と経度のデータは、5 メートルの等間隔で配置されます。

投影情報が UTM、ゾーン 18 である場合、データを個々のラスターまたはそれぞれが z 値を持つ R ラスター スタックに変換する最も効率的な方法は何ですか。

サンプルデータはこちらからアクセスできます。

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

swift - マスキングに CAShapeLayers を使用すると、アニメーションとスクロールのパフォーマンスが大幅に低下する

私が見つけて試した解決策はまだ肯定的な結果を生み出していないため、最後の手段としてこの質問をしています. ユーザーが を操作して、UIViewで定義されたカスタム形状を作成できるアプリを設計していUIBezierPathます。あまり詳細には入りませんが、退屈を避けるために、これは基本的に何が起こっているのかです:

これはうまく機能し、ユーザーがアプリを使い続けるにつれて、より多くの図形を作成し、以前に作成した図形を に保存して、UIScrollView後で表示、選択、編集できるようにします。とにかく、複数の形状が作成されると (たとえば、15 以上)、使用して実行するアニメーションは非常にUIView.animateWithDuration途切れ途切れになりUIScrollViewます。すべてがうまく機能し、大量のビューが作成されるまで流動的であるため、イライラします。touchesBeganまた、 andを使用してビューを手動で移動しようとしましたがtouchesMoved、そのようにビューを移動しても、遅延などはありません。

これまでに見つけたすべての解決策を使い果たしました。これまでに試したことのいくつかを次に示します。

1) ア)layer.shouldRasterize = true

b)layer.rasterizationScale = UIScreen.mainScreen().scale

2)layer.drawsAsynchronously = true

3)AsyncDisplayKit

4)layer.allowsEdgeAntialiasing = true

これらの解決策のいずれも、肯定的な結果をもたらしていません。私が見逃している可能性のあるものを誰か考えたり、この問題を解決できるアイデアを持っている人はいますか? これらのビューが 内にネストされている場合でもUIScrollView、アプリは平均 30 MB のメモリしか使用していないため、メモリの問題ではないようです。また、CPUの影響は最小限のようです。私はシャドウを使用していません。これを iPhone 5s、6、および 6s Plus でテストしてみましたが、すべて同じ結果が得られたため、デバイスの問題ではないようです。アプリがゴミのように見え、私が知る限りシステムに課税されていないため、誰かが解決策を見つけるのを手伝ってくれることを願っています.

どんな助けにも感謝します!前もって感謝します!

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

for-loop - VHDL でのコードのシリアル化

VHDL を使用して Spartan-6 FPGA で (非常に基本的な) GPU を作成しようとしています。

私が思いついた大きな問題は、HDL の理解が非常に限られていることですfor。ループは合成時に解かれます。

私の質問は、forループの代わりにクロック トリガー カウンターがある場合 (カウンターをインデックスとして使用し、最大で 0 にリセットする)、これはすべてのロジックが一度だけ生成されることを意味しますか? たとえば、200 MHz クロックを使用して 600x800 画面でレイ トレーシングを行うと、画面全体の全体的なリフレッシュ レートが 625 Hz に低下することがわかりますが、それでも理論上は十分に速いはずです..?

どうもありがとう!

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

c++ - OpenGL でラスタライザによってフラグメントが生成される方法

ラスタ化の説明に出くわしましたが、基本的には、オブジェクトが画面に投影されると、ウィンドウ/画面上のすべてのピクセルに対してスキャンが行われ、ピクセル/フラグメントが三角形内にあるかどうかが判断されるため、ピクセル/フラグメントが三角形の内側にあると判断し、カラーリングなどのピクセル/フラグメントのさらなる処理に進みます

私はOpenGLを勉強しているので、OpenGLにはおそらくこのプロセスの独自の実装があることを知っているので、OpenGLチュートリアルで読んだ頂点の「スキャン変換」プロセスのために、これがOpenGLでも行われるかどうか疑問に思っていました

これに関連するもう1つの質問は、ピクセルの画像/画面/ウィンドウが、線形のデフォルトフレームバッファとしても知られる画像またはピクセルの2次元配列であることを知っているということです

それで、私が疑問に思っているのは、そうであれば、三角形の3つの頂点を投影すると、どのピクセルがその側面で覆われているかをどのように定義するのでしょうか?

ラスタライザーは最初に三角形のエッジを描画してから、各ピクセルまたはピクセルの 2 次元配列 (デフォルトのフレーム バッファーとも呼ばれます) をスキャンし、点が数学的方法を使用して線の間にあるかどうかを確認しますか、それとも他のより単純なプロセスが発生しますか?

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

graphics - DDA アルゴリズムと Bresenham アルゴリズム

私は線画用の DDA および Bresenham アルゴリズムを研究しており、1 つのことに興味があります。両方のアルゴリズムで、ピクセル グリッドを単位サイズと見なし、さらに手順を実行します。私の質問は、グリッド サイズを 0.5 に変更するかどうかです。 1*1 グリッドの代わりに *0.5 を使用すると、両方のアルゴリズムの動作に何らかの変更が反映されますか? はいの場合、各アルゴリズムでそれぞれどのような変更が行われるかについて誰かが教えてくれますか?事前に.誰でも助けてください.緊急なので.私は試験を受けており、この概念を明確にしたい.お願いします.ありがとう:)

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

algorithm - ポリラインまたはポリゴンをチェーンコードに変換する方法は?

2D ポイントのセットから構成される、開いたまたは閉じたポリライン (ポリゴン) があります。

そのポリラインをチェーンコードとして表す必要があります。正しく理解できれば、ブレゼンハムのアルゴリズムを使用してポリライン セグメントをラスタ化し、そのラスタからチェーンコードを構築する必要があります。しかし、より良いアルゴリズムはありますか?

ポリライン (ポリゴン) をチェーンコードに変換するための最適なアルゴリズムは何ですか?