web-dev-qa-db-ja.com

WebGLとthree.jsの学習

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

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

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

webglthree.js
134
r1nzler

あなたには大きな野心があるので、時間をかけて基礎を学ぶ必要があります。最初に何を学ぶかは問題ではありません。必要に応じて同時に学習できます。 （それが私がしたことです。）

つまり、次のことを理解する必要があります。

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

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

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

数学。繰り返しますが、少なくとも概念を理解する必要があります。 3つの優れた書籍は次のとおりです。

  1. グラフィックスとゲーム開発のための3D数学入門 フレッチャーダンとイアンパーベリー

  2. ゲームおよびインタラクティブアプリケーションの必須数学：プログラマーズガイド James M. Van VerthおよびLars M. Bishop

  3. Dゲームプログラミングおよびコンピューターグラフィックスの数学 Eric Lengyel

これがあなたのお役に立てば幸いです。幸運を。

190
WestLangley

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

21
Bhupendra

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

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

どちらの方向に進んでも、線形代数のスキルを学ぶ/磨くことをお勧めします。次に、MVPディメンション（モデルビュー投影）についての理解を深めます。 Three.JSはその大部分を抽象化できますが、3D開発について真剣に考える前に、これらの概念を十分に理解することが重要だと思います。

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

あなたの目標はゲームを作成することなので、Three.jsのようなフレームワークを使用して後でコードを書くのに役立ったとしても、最初に生のWebGLを学ぶことで多くの恩恵を受けると思います。

11
rodrigo-silveira

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

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

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

9
Bob Fanger

私は、Unity3DのバックグラウンドとPapervision3Dの時代から来ていたので、3D空間の扱い方について十分に理解していました。 Three.jsは、WebGLプロジェクトの処理方法を学習するための最初のジャンプに行く方法です。 APIは非常に優れており、非常に強力です。別の3Dテクノロジーを使用している場合は、わずかな時間で起動して実行できます。

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

また、Unity3Dの無料版と無料のcollada（入手した時点では無料でした）エクスポーターをアプリストア（ウィンドウ>アプリストア）から入手することも検討してください。 Unityで自分のシーンをセットアップし、Three.jsで使用するためにColladaにエクスポートするのは簡単です。

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

実は、Three.jsは優れた方法です-独自のシェーダー/オブジェクトなどを書くのに十分な柔軟性があり、目標を達成するのに役立つほど強力です。

6
neoRiley

Three.jsを取り上げましたが、GLSLに飛び込んでthree.js shaderMaterialを使って多くのことを試しました。対処方法の1つ-three.jsはまだ多くのものを抽象化しますが、すべてのレンダリング（投影、アニメーション）機能への非常にクリーンで低レベルのアクセスを提供します。

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

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

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

3
pailhead

私は両方のことを少し学びましたが、webglの基本を理解していると感じています。webglの紹介で十分だと思い、3つのjsにジャンプします。 WebGLの基本概念を理解すれば、非常に簡単になります。便利なリンク：

  1. 私が読んだベストイントロ： http://dev.opera.com/articles/view/an-introduction-to-webgl/
  2. 包括的なチュートリアル： http://www.johannes-raida.de/tutorials.htm
2
Raj