3D No. 2またはIllustrate! 自分でやる

少し前に、 z-bufferを使用した3D、サブピクセル精度、およびキャンバスを使用したjavascriptのGuroライティングに関するトピックを公開しました。



今日、私はあなたの注意にキャンバスなしのオプションを提示します(そして、すでにここにあるグーローシェーディングなし)。







これらは単なるテストケースですが、それでも動作します(または自分で確認することをお勧めします )。



キャンバスなしでポリゴンを描くのは簡単です。 グラデーションありとなしの塗りつぶし。

キャンバスなしで3Dを描画するのは簡単です。 たとえば、アーティストのアルゴリズムを使用します。

キャンバスなしでポリゴンの自己交差を使用して3Dを描画することは困難です。 「アーティスト」はもはや適切ではなく、z-bufferが必要だからです。







上の図は、アーティストのアルゴリズムの古典的な問題を示しています。 ポリゴンが描画される順序に関係なく、正しい画像はまだ機能しません。







ただし、これらのポリゴンをいくつかの小さなポリゴンに分割すると、問題はなくなります。



さまざまなポリゴンパーティションアルゴリズムについて説明した優れた書籍がいくつかあります。 残念ながら、私はそれらのどれも読んでいなかったので、自転車を発明しなければなりませんでした。 ホイールが「8」の速度スイッチのないこの自転車。 しかし、それにもかかわらず、彼は前進します。



通常どおり、Chromeで最適に見えます。 2番目に2ポイント上昇し、Operaが続きます。 それからFireFox。 Internet Explorerでは...動作します(ただし、他のブラウザーを使用することをお勧めします)。



残念ながら、Raphaelライブラリ(SVG / VML)はモバイルChrome(Android用)では機能しません。



説明する ? 誰がイラストレイトと言った?



z-bufferを使用した従来のレンダリングとは異なり、このアプローチでは、次のようなさまざまなクールなことができます。







またはそのような







ちなみに、このようなアルゴリズムについて説明している本を少なくとも1冊読んでいれば、レンダラーを作り直すことを約束します。



All Articles