162

私は新しく、Web ブラウザーでの 3D コンピュータ グラフィックスについて学び始めています。ブラウザで 3D ゲームを作ることに興味があります。WebGLとthree.jsの両方を学んだ人なら誰でも...

  1. three.js を使用するには WebGL の知識が必要ですか?

  2. three.js と WebGL を使用する利点は何ですか?

4

8 に答える 8

226

あなたは大きな野心を持っているので、基礎を学ぶために時間を費やす必要があります. 何を先に学ぶかは問題ではありません。必要に応じて同時に学ぶことができます。（それは私がやったことです。）

これは、次のことを理解する必要があることを意味します。

  1. WebGL の概念
  2. Three.js
  3. 基礎となる数学的概念

Three.js. Three.js は、WebGL の詳細の多くを抽象化する優れた仕事をしているため、個人的には、プロジェクトに Three.js を使用することをお勧めします。ただし、Three.js はアルファ版であり、頻繁に変更されるため、それに備えておく必要があります。ほとんどの人は、サンプルを研究することで Three.js を学びます。古い本やチュートリアルを避け、古いバージョンのライブラリにリンクしているネットの例を避けてください。

WebGL。Three.js を使用する場合、WebGL でのプログラミング方法を知る必要はありません。WebGL の概念を理解するだけで済みます。つまり、他人の WebGL コードを読んで、自分が読んだものを理解できればよいということです。これは、WebGL プログラムを自分でゼロから作成することが期待されるよりもはるかに簡単です。WebGLFundamentals.orgの初心者向けチュートリアルやLearning WebGLなど、ネット上の任意のチュートリアルを使用して、WebGL の概念を十分に学習できます。

算数。繰り返しますが、少なくとも概念を理解する必要があります。良書は次の3冊です。

  1. Fletcher Dunn と Ian Parberry によるグラフィックスとゲーム開発のための 3D 数学入門

  2. ゲームとインタラクティブなアプリケーションに不可欠な数学: プログラマーズ ガイド(James M. Van Verth と Lars M. Bishop 著)

  3. Eric Lengyel による3D ゲーム プログラミングとコンピュータ グラフィックスのための数学

于 2012-08-15T14:01:35.497 に答える
25

THREE.jsのhttps://www.udacity.com/course/cs291にある非常に優れたオンライン コース - Interactive 3D Graphics があります。このコースには、実践的な経験を得るための課題も含まれています。Three.js とコンピューター グラフィックスのすべての基本概念をカバーしています。

于 2013-10-25T07:51:44.377 に答える
16

私の個人的な考えは次のとおりです。

  • 時間があれば両方を学ぶこともできますが、WebGL は Three.js よりもはるかに低いレベルであることに注意してください。
  • 最初の 3D プロジェクトでは、用語と一般的な 3D モデルに慣れるために、Three.js のようなライブラリを使用することを専門家は提案しています。
于 2012-08-15T10:25:09.540 に答える
12

どちらの方向に進むにしても、線形代数のスキルを学び、磨くことをお勧めします。次に、 MVP ディメンション (モデル ビュー プロジェクション)について学習するか、理解を深めてください。Three.JS はその多くを抽象化できますが、3D 開発に真剣に取り組む前に、これらの概念を十分に理解することが重要だと思います。

OpenGL を使用した 3D プログラミングを初めて学習したときに、MVP に関する入門記事を書きました。オブジェクトを画面にレンダリングすることはできても、これらの変換マトリックスが何であるか、およびそれらがさまざまな次元/空間にどのように関係しているかを説明できるようになるまで、私は3D プログラミングをまったく知らなかったことに気付きました。

あなたの目標はゲームを作成することなので、Three.js のようなフレームワークを使用して後でコードを作成することになったとしても、生の WebGL を最初に学習することで多くのメリットが得られると思います。

于 2013-02-12T12:19:13.030 に答える
11

「WebGL は 2D API であり、3D API ではありません」

http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html

この記事では、WebGL と three.js などの 3d ライブラリの基本的な違いについて説明します。
そのため、WebGL と Three.js のどちらを選択するかは非常に簡単でした。

于 2013-06-25T23:09:46.167 に答える
7

私は Unity3D のバックグラウンドと Papervision3D のバックグラウンドを持っていたので、3D 空間の扱い方をよく理解していました。Three.js は、WebGL プロジェクトの扱い方を学ぶための最初のステップです。API は非常に優れており、非常に強力です。別の 3D テクノロジを使用している場合でも、短時間で起動して実行できます。

私は Threejs.org の例に多くの時間を費やしました - それらはたくさんあり、それらはあなたを正しい方向に導き、実行するのに非常に優れています. ドキュメントは、特に他の webGL 3D API と比較する場合には十分です。

Unity3D の無料版と無料の collada (私が入手したときは無料でした) エクスポーターをアプリ ストア ([ウィンドウ] > [アプリ ストア]) から入手することも検討してください。Unity でシーンをセットアップし、それを Collada にエクスポートして Three.js で使用するのは簡単であることがわかりました。

また、私が Three.js で使用する neo というクラスを投稿しました ( http://rockonflash.com/webGL/three/neo.js )。それをプロジェクトに追加し、Neo.JackIntoThree() を呼び出すだけで、メソッド/プロパティが Object3D に追加され、プロジェクトで使用できるようになります。DrawAllAxis() のようなものは、シーンなどをデバッグするときに非常に役立ちます。

ただし、Three.js は優れた方法です。独自のシェーダー/オブジェクトなどを記述できるほど柔軟であり、箱から出してすぐに目標を達成できるほど強力です。

于 2014-07-18T00:23:08.570 に答える
4

three.js を手に取りましたが、GLSL にも飛び込み、three.js シェーダーマテリアルで多くの実験を行いました。これを行う 1 つの方法 - three.js は依然として多くのものを抽象化しますが、すべてのレンダリング (投影、アニメーション) 機能への非常にクリーンで低レベルのアクセスも提供します。

このようにして、この素晴らしい open-gl チュートリアル のようなものにも従うことができます。行列、型付き配列を設定する必要はありません。3 つが既に設定されており、必要に応じて更新されるためです。ただし、シェーダーはゼロから作成できます。単純なカラー レンダリングは 2 行の GLSL になります。three.js の後処理プラグインもあり、すべてのバッファ、フルスクリーン クワッド、およびエフェクトを実行するために必要なものをセットアップしますが、シェーダーは最初は非常に単純です。

プログラム可能なシェーダーは現代の 3D グラフィックスの本質であるため、私の答えが要点を見失っていないことを願っています :) 遅かれ早かれ、これを行う人は、少なくともボンネットの下で何が起こっているのかを理解する必要があります。それは獣の性質です。また、同次空間での 4 次元を理解することもおそらく重要です。

この本は WebGL に適しています。

于 2014-03-27T22:24:15.727 に答える
2

私は両方を少し学んだだけで、webgl の基本を理解していると感じています。webgl の紹介で十分だと思います。その後、3 つの js に飛び込みます。WebGL の基礎となる概念を理解すれば、非常に簡単です。便利なリンク:

  1. 私が読んだ最高のイントロ: http://dev.opera.com/articles/view/an-introduction-to-webgl/
  2. 包括的なチュートリアル: http://www.johannes-raida.de/tutorials.htm
于 2014-04-03T00:13:40.750 に答える