2016-12-13 4 views
3

HTML5では、SVGが宣言的でCanvasが必須である点でSVGとCanvasとの違いを理解しています。シェイプを定義し、ビューポイントを宣言し、ブラウザが隠すサーフェスを削除するようにするために、さらに優れた宣言的なテクノロジーを使用することができたことが私にはありました。HTML5のSVGに隠面消去機能/ライブラリがありますか?

私はあまり見つかっていないいくつかのグーグル後、そこにこのリンクは

https://css-tricks.com/almanac/properties/b/backface-visibility/

であるが、これは多くの助けではありません。

新しい拡張標準醸造で隠面除去を行うためのJavaScriptライブラリはありますか?

例として、キューブを12辺として定義し、サーフェス上にそのような不透明度を宣言して(ワイヤフレーム化しないようにして)、ブラウザが「バック」サーフェスを表示しないようにします。

+0

ちょうど前後にレンダリングする必要があります。 –

+0

@Bálint、それは独創的です!しかし、どのように背中にあるのか分かりますか?ブラウザ/ライブラリがそれを理解するためのものの種類。 –

+0

Lemmeの投稿 –

答えて

1

3Dをレンダリングするときは2つの解決策があります。まず、すべての三角形/四角形を前後にレンダリングします。

これは、通常、頂点の位置を平均して形状の中間を計算し、次にz座標に基づいて三角形をソートすることによって実行できます。

ソートした後、順番にレンダリングします。

他の解決策は基本的にあなたが探しているものです。 2つのサイドベクトルにクロス積を使用して法線ベクトルを計算する必要があります。キューブを描くときは、三角形の法線とカメラの方向ベクトルでドットプロダクトを使用する必要があります。この値が0以下(2つのベクトルの間の角度が90°を超える場合)三角形を描きません。

+0

これは非常に巧妙な答えですが、私は質問を台無しにしてしまったと思います。 Robert Longsonのコメントによると、間違った技術を使っているので、SVGのような本来2Dの技術ではなく、WebGLを使用するべきです。私はこれに答えを受け入れ、これについての閉鎖を認めます。とにかくBálintありがとう。 –

+0

@SMeaden [3Dを描くには3D技術者は必要ありません](http://codepen.io/mcdorli/pen/LkdoZo) –

+0

私はWebGLで遊びましょう。あなたの言うことをする方が簡単かもしれません。私は周りに突き進む数週間は必要ではありません(ここでは非常に忙しいです) –

関連する問題