web-dev-qa-db-ja.com

キャンバスvs. webGL vs. CSS 3d->どちらを選択しますか?

基本的な3D Webアプリケーション、つまりいくつかのキューブ、3D空間での回転と平行移動の場合、どちらを選択するのが良いですか?

CSS 3dが最も簡単に見えますが、IE9またはIE10のロードマップではサポートされておらず、他のオプションよりも制御が不十分です。 CanvasとWebGLはもっと複雑に見えますが、それらが将来の証拠になるかどうかはわかりません。

3Dにはさまざまなテクニックがあるのはなぜですか?どっちがいい?将来の保証はどれですか?

30
Elad Katz

3Dには非常に多くの異なるオプションがある理由は、全体がまだ流動的な状態にあるためです。ブラウザの3Dは完成した標準ではなく、リストしたオプションのうち、現在すべてで機能するのは1つだけです。利用可能なブラウザはCanvasです。

特にIEはあなたに多くの喜びを与えることはほとんどありません-あなたが言うように、3Dは現時点でIE10のためにさえ予定されていません。そうは言っても、SVGはIE9にかなり遅く追加されたので、常に希望があります。しかし、それがありそうもない理由は、マイクロソフトが標準として正式に批准された機能のみをサポートすることに重点を置いているためです。

あなたがリストしたテクノロジーの中で、Canvasははるかにサポートされている最良のテクノロジーですが、Canvasは3Dテクノロジーではありません。これは2Dキャンバスです。3D効果を入れたい場合は、自分で書く必要があり、ハードウェアアクセラレーションは行われません。

あなたの質問に対する本当の答えは、あなたのサイトにとってこの機能がどれほど重要であるかによると思います。サポートされていないブラウザのユーザーがそれなしで生活することができる、それがただの見栄えであるならば、それなら、必ず、いくつかの3D CSSでそれをしてください。ただし、現在のすべてのブラウザで一貫性を保つ必要がある場合は、Canvasを使用してください。

あなたのケースではWebGLを使用しないことをお勧めします。これは、あなたがやっていることに対してはやり過ぎと思われるからです。

3D CSSはおそらくrightの答えですが、他のブラウザが3D CSSのサポートを追加するまでは、今のところCanvasを使用してください。

18
Spudley

私はこれが2歳であることを知っていますが、将来の読者のためにここに投稿すると思います。

何を選択するかは、必要なものによって異なります。

アニメーションがないか少ししかない単純な3D形状が必要ですか? CSS3でそれができるかどうか試してみてください。それがはるかに簡単です。 IEの場合、おそらくサポートを提供するライブラリを入手できます。

素敵なグラフィックスの甘い3Dモデルが必要ですか?それはあらゆる種類のものを実行できますか? WebGLにアクセスしてください。ブラウザーでの3Dの制御とパフォーマンスを強化することはできません。

あらゆる種類のことを実行できる3D形状が必要ですが、テクスチャは必要なく、どこでも機能し、それほどパフォーマンスを必要としませんか?キャンバスに移動します。

CSS3は目を見張るだけのものです。簡単に作成でき、好きなようにスタイルを設定でき、メンテナンスも非常に簡単です。目の保養以上のことをしたい場合は、手袋をしてください。

2Dキャンバスを使用すると、3Dのものを作成できます。あなたがそれに慣れていない場合、それは非常に迷惑で複雑になります(1つの例を挙げると、あなたは行列を知る必要があります)、WebGLで行うことができる2Dキャンバスでほとんど何でもできますが、いくつかのことは簡単になりますWebGL(真剣に、2D Canvasに行く場合、テクスチャを使用しないでください、それは悪夢です)。 WebGLはOpenGLを使用しています。つまり、一言で言えば、常に2d Canvasよりも優れています。

ただし、WebGLでは、互換性のあるビデオカードが必要です。

8
Johan

私は本当にあなたがやろうとしていることに依存しています。シンプルは簡単ですか?

3D CSSはあまり使用できません。 Firefoxにしただけです。 FirefoxとChromeの両方でバグがあります。 OSXのFF9ベータでは動作しません。 Chrome少なくとも16まで)にも問題があります。参照 http://greggman.com/downloads/examples/intersecting-elements-3d-css.html OSX上のSafariを他のほとんどのブラウザと比較します。

three.js( https://github.com/mrdoob/three.js/ )は、キャンバスを使用していくつかの単純な3Dを提供するために使用されていました(まだ使用されている可能性があります)。

それ以外の場合は、何か興味深いものがあればWebGLにアクセスしてライブラリ(three.js、SceneJSなど)を選択します。

あなたは選択をしなければなりません。 WebGLを使用してIEをあきらめ、Flash 11を使用し、Unity3Dを使用し、Canvasを使用して非常に限られた3Dを取得するか、3Dを実行しないでください。

WebGLはすでに主要なサイトで使用されています。 CNNは現在WebGLを使用しています http://www.stinkdigital.com/en/work/ecosphere

7
gman

おそらく誰もが「依存する」と聞くのはうんざりしていますが、...依存します!

CanvasとHTML/CSS3のどちらを使用するほうがよいかについては、少し「戦争」が起こっています。つまり、Canvasは古いマシン/デバイスではDOMよりも遅いためです。うん、DOMは場合によってははるかに高速ですが、キャンバスはほとんどの最新のブラウザ/デバイスで高速です。

WebGL-2Dと3Dの両方に最適なオプションですが、ブラウザやデバイス全体で十分にサポートされていないため、必要に応じてキャンバスまたはDOMへのフォールバックを提供する必要があります。

キャンバス-WebGLに比べて3Dには適していませんが、互換性、コミュニティ、ツールなどには適しています

DOM-ほとんどの考えよりも速く、適切に使用すれば、最高のサポートが得られますが、アニメーション/ゲームの見栄えをよくすることはできません。

お役に立てれば

4
CatalinBerta