WebGLとthree.jsの学習[終了]

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

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

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

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

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

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. 3D Math Primer for Graphics and Game Development by Fletcher Dunn and Ian Parberry

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

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

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

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

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

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

どちらの方向を選択した場合でも、線形代数のスキルを学習/磨くことをお勧めします。次に、MVPディメンション（モデルビュー投影）についての理解を深めます。Three.JSはそれらの多くを抽象化できますが、3D開発に真剣に取り組む前に、それらの概念をよく理解することが重要だと思います。

OpenGLで3Dプログラミングを初めて学んだときに、MVPについての紹介記事を書きました。それらの変換行列とは何か、そしてそれらがさまざまな次元/空間とどのように関連するかを説明できるようになるまで、オブジェクトを画面にレンダリングすることはできても、3Dプログラミングについてはまったく知りませんでした。

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

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

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

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

私はUnity3Dの背景とPapervision3Dの出身でしたので、3Dスペースの扱い方をよく理解していました。Three.jsは、WebGLプロジェクトを処理する方法を学ぶための最初のジャンプに行く方法です。このAPIは非常に優れており、非常に強力です。別の3Dテクノロジーを使用している場合は、非常に短い時間で稼働します。

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

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

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

ただし、Three.jsは優れた方法です。独自のシェーダーやオブジェクトなどを作成できる柔軟性があり、目標を達成するのに役立つ強力な機能をすぐに利用できます。

私はthree.jsを取得しましたが、GLSLにも飛び込んで、three.jsのShaderMaterialをいろいろと試しました。それを実行する1つの方法-three.jsは依然として多くのものを抽象化しますが、すべてのレンダリング（投影、アニメーション）機能への非常にクリーンで低レベルのアクセスも提供します。

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

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

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

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

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