JavaScriptで使用できる3Dグラフィックエンジンを作成する方法[閉まっている]

StackOverflow https://stackoverflow.com/questions/1651145

  •  22-07-2019
  •  | 
  •  

質問

最近、HTML 5.0キャンバスでいくつかのクールな図形を描画することに焦点を当てました。そして、JavaScriptで使用できる3Dグラフィックエンジンを作成したいと思います。回転キューブはすでに完成しています。 そして、次の例のような形状を完成させたいと思います。 http://gyu.que.jp/jscloth /touch.html

この分野で試したことのある人

役に立ちましたか?

解決

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

本当に落胆したくありませんが、 3D を書くためにJavaScriptのエンジンでは、3Dレンダリングの背後にある数学/論理に精通し、親密でなければなりません。

あなたは現在の専門知識を述べていないので、私はあなたがそうしないと仮定しています...その場合、私はあなたがどこかから始めることを強くお勧めします。たとえば、 XNA Game Studio などです。 C#でコードを作成すると、ほとんどの(しかしすべてではない)困難な部分を抽象化する、よく書かれたAPIが既にたくさんあります。しかし、3Dレンダリングの背後にある多くの概念と数学を学ぶには素晴らしい方法です。

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

がんばって!

他のヒント

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

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

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

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

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

既存の3DライブラリをJavaScriptにバインドする方法は? OpenGLと同様。

V8-GL はOpenGL APIの80%を公開しますJavaScriptへ:

alt text

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

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

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

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

それができたら、3D空間でそれらを移動できるようになり、カメラの追加を検討する必要がありますが、手順1と比較すると比較的簡単です。

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

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

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

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top