WebGL を使用して Javascript で 2D cad のようなアプリケーションを構築しており、ユーザーが 3 次ベジエ曲線を描画できるようにする必要があります。私の問題は、私の知る限り、WebGL には線と塗りつぶされた三角形以外を簡単に描画する方法がないことです。
さらに複雑なのは、セグメントごとに「X」個のピクセルが必要なため、線に沿って 1% ごとに反復処理できないことです。
これは次のようになると思います。
これは非常にパフォーマンスの高い状況 (一度に数百の曲線) であるため、曲線ごとに一定数のセグメントを使用する余裕はありません。
だから、私の質問は次のとおりです。
WebGL で 3 次ベジエを描画するネイティブな方法はありますか?
そうでない場合は、上記の計算、特に 3 次ベジエ曲線の全長の計算を手伝ってくれる人はいますか?
WebGL に「曲線を描く」ように指示する直接的な方法はありません。三角形（および線）だけです。
だから私はあなたの一般的なアプローチ（長さを見積もる、望ましい滑らかさのために分割する、曲線を歩く）が良いと思います.
ただし、Vertex Shader を使用して一部の計算を行うこともできます。データセットとその変化の程度によっては、勝利になる可能性があります。
WebGL では、頂点シェーダーはポイントのリストを入力として受け取り、何らかの変換の後、同じサイズのポイントのリストを出力として生成します。リストはサイズを変更できないため、JS ランドでサブディビジョンの数を把握する必要があります。
ベジエのパラメトリック バージョンの 0 から 1 までの属性「t」を各ポイントに割り当てた場合、頂点シェーダーは曲線の位置を計算できます。便利かも。
ウィキペディアから、
dist(p0,p3)ベジエの長さについては、p0 と p3 が終点、p1 と p2 が制御点である場合に (p0、p1、p2、p3) と記述すると、ベジエの長さは少なくともであるとすぐに言えます。ほとんどdist(p0,p1)+dist(p1,p2)+dist(p2,p3)。
それに基づいて簡単に推測できます。
数値解のより詳細な議論はhttps://math.stackexchange.com/questions/338463/length-of-bezier-curve-with-simpsons-ruleにあります。
閉じた形式のソリューションはありません。
興味深いかもしれませんが、ブログ投稿用に小さなベジエ アニメーションをレンダリングしました
明確に付け加えておきたいのは、長い間ベジエ曲線をラスタライズしてきたため、steve.hollasch.net リンク ( http://steve.hollasch.net/cgindex/curves/cbezarclen.html )に加えて、 @davidvanbrinkの回答のリンクされたページから引っ張ってきました。これには他のリソースがあるはずだと思いました...明らかに、WebGL/OpenGLは適切な解像度を見つけるために別の次元コンポーネントを追加しますが、これは以前に試みられたことのないものではありません. 以下のリンクが役立つと思います。
http://en.wikipedia.org/wiki/NURBS (不均一有理 B スプライン) http://antigrain.com/research/adaptive_bezier/index.html (ベジエ曲線の適応細分化: 完璧な結果を達成する試みベジエ曲線近似) http://www.neuroproductions.be/experiments/nurbs/ http://threejs.org/examples/webgl_geometry_nurbs.html