0

私は最近、HTML 5.0 キャンバスでクールな図形を描くことに集中しています。また、JavaScript で使用できる 3D グラフィック エンジンを作成したいと考えています。私はすでに回転立方体を完成させました。そして、この例のように形を完成させたい: http://gyu.que.jp/jscloth/touch.html .

誰がこの分野で挑戦したことがありますか?

4

5 に答える 5

4

私が Javascript 3D エンジンを書いたのは約 1 年前、Google が超高速の V8 Javascript エンジンを搭載した Chrome ブラウザをリリースした頃です。残念ながら、3D グラフィックス API (OpenGL や Direct3D など) を公開するブラウザーはないため、このエンジンはビットマップ画像を Web ページにワープして、アフィン テクスチャ マップ三角形 (遠近補正テクスチャ マップ三角形より劣ります) を実現します。かなり遅い。

Javascript 3D エンジンを使用して3D モデル ライブラリを作成しました。(ヒント: 最初のモデルは表示しないでください。表示するのが最も遅く、最大のモデルです!)。PC の Google Chrome で約 1000 個の三角形を含む 3D モデルのパフォーマンスは、毎秒約 10 フレームです。

このエンジンのソース コードをオープン ソース化することを検討しましたが、実現できませんでした。十分な関心があれば、ソース コードを Google Code に置きます。

私の現在のお気に入りのプロジェクトは、ソフトウェア 3D エンジンであるSilverlight 3D エンジンとモデル ビューアです (つまり、私の C# コードはすべてのピクセルの色を制御します)。Silverlight 3 は Javascript よりもはるかに高速ですが、非標準のブラウザー アドオンであり、ハードウェア アクセラレーションによる 3D グラフィックスをサポートしていません (多くのオーバーヘッドはありません)。

更新: 最初にこの記事を書いてから、上記の Silverlight モデル ビューアーを更新して、Silverlight 5 とハードウェア アクセラレーション 3D を使用するようにしました。

于 2009-11-05T16:25:54.770 に答える
3

編集：この質問は何年も前に尋ねられました。それ以来、IE を除くすべてのブラウザー (今のところ? ) に webgl のサポートが追加されました。ここで多くのサンプルを見ることができます: http://www.chromeexperiments.com/webgl/

落胆させたくはありませんが、 JavaScript で3Dエンジンを作成するには、3D レンダリングの背後にある数学/ロジックに非常に精通し、親密である必要があります。

あなたは現在の専門知識を述べていないので、そうではないと思います... その場合、どこか別の場所から始めることを強くお勧めします。たとえば、XNA Game Studio . コードは C# で記述します。難しい部分のほとんど (すべてではないことは間違いありません) を抽象化する、適切に記述された API がすでにたくさんあります。しかし、3D レンダリングの背後にある多くの概念と数学を学ぶには最適な方法です。

しかし、JavaScript から始めることに固執している場合は、インターネット上にこれに関する多くのリソースが既にあります。たとえば、これ :-)
http://dev.opera.com/articles/view/3d-games-with-canvas-and-raycasting-part/

幸運を！

于 2009-10-30T17:18:30.967 に答える
3

既存の 3D ライブラリを JavaScript にバインドするのはどうですか? OpenGLのように。

V8-GLは、OpenGL API の 80% を JavaScript に公開します。

代替テキスト

于 2010-10-28T21:24:55.803 に答える
0

1つ書いてどうなるかわかりません。しかし、ここにいくつか存在します。

于 2009-10-30T17:20:01.493 に答える
0

これを作成するには、まず Excanvas をサポートするかどうかを決定する必要があります。これにより、IE で Excanvas を使用できるようになります。

これにより、IE をサポートしている場合にできることが制限されます。

あなたの最善の策は、いくつかの主要な形状を作成することから始めることです。ほとんどの場合、他のすべてを構築できる特定のプリミティブが必要になるため、それらのプリミティブで OpenGL または DirectX を確認することをお勧めします。

それができて、それらを 3D 空間で移動できるようになったら、カメラの追加を検討したいと思うでしょうが、それはステップ 1 に比べて比較的簡単です。

残念ながら、これらはすべて数学的に非常に重いため、頻繁に移動する必要がある複数の 3D オブジェクトを作成すると、パフォーマンスが大幅に低下します。

最善の策は待つことだと思います。2007 年後半には、Firefox と Opera がキャンバスで 3D をサポートするためのブログがありました: http://starkravingfinkle.org/blog/2007/11/animating-with-canvas/

その理由は、ブラウザーに組み込まれる場合、特に OpenGL のフレーバーをサポートする場合は、ほとんどの重い作業が行われるためです。

于 2009-10-30T17:34:54.943 に答える