あなたはソリッドカラーモデルが十分ではありません描くことができ、より現実的なモデルを提示するために、我々はまた、モデルにテクスチャマップをペイントする必要があります。

コンテキストの損失

（状態の前に、睡眠や覚醒を入力しながら、PCや携帯電話など）、公共資源としてGPU、それは十分なリソースがない場合には、同時に複数のプロセスによって使用され、私たちは、事態の状況の把握を失うことになりますランニングの堅牢性を確保するために、我々は、コンテキストが失われた後、それに対処する必要があります。

キャンバスは、特定の用途に以下のコードを参照してください、損失や復旧の状況を聞くために2つのイベントを提供してくれます。

1  VARのキャンバス=のdocument.getElementById（ "myGLCanvas" ）;
 2  // リスナー欠落イベントコンテキスト
3。 canvas.addEventListener（ "webglcontextlost"、関数（イベント）{
 4。     // デフォルト動作をキャンセル
5。     event.preventDefault（）;
 6      / / 停止コードが描画継続
7 }、falseに）
 。8  // イベントコンテキスト回復を聴取
。9 canvas.addEventListener（ "webglcontextrestored"、関数（）{
 10      // 再初期化コード
11      //はなお、キャンバスのgetContextによってコンテキストオブジェクトを取得する方法は、再取得を必要としない、コンテキストオブジェクトは、以前に取得された使用を継続することができる
12     //はコード描画再開
13は、} falseに）。

コンテキストの損失をシミュレート

私たちは、コンテキストの損失をシミュレートするために、次のJSライブラリを使用することができ、通常の処理コードのコンテキストの損失は、あなたがコンテキストの損失をトリガする必要があるかどうかをテストします：

https://github.com/KhronosGroup/WebGLDeveloperTools

使用してのsrc \デバッグ\失われたコンテキスト・シミュレータ-test.htmlという模範的なディレクトリを参照することができます。

2Dマッピングおよびキューブマッピング

我々は、3Dモデルに2D画像に付着する必要が2D画像またはピクセル（サンプル）の複数に1つの画素に対応することができる3次元表面点を決定するためにUV座標を使用して、2D画像を使用する必要があり、以下では、UV座標であります座標系：

（S Vに対応するT、Uに相当する）、範囲[0-1]。

キューブマップは、2次元画像は、6つのマッピング、環境マッピングは、一般に環境反射を実装または実現するために使用され、次の例のアプリケーションは、良好な環境反射を示すことができる含んでいます。

https://threejs.org/examples/#webgl_materials_envmaps

キューブマッピングに加えて、また、一般的にスカイボックス（スカイボックス）を作成するために使用されます。

テクスチャサイズ

我々は、2 ^ n個でなければならないGPU画像サイズの高さと幅に提出され、即ち（2,4,8,16,32,64,128,256 ...）が、WebGLのおよびOpenGL ES 2.0で我々はまた、2つのピクチャNPOT（両者の非電力）の非n乗の態様を使用することができます。

我々は2非画像のn乗を使用する場合は、以下の制限事項の一部が存在します。

あなたはミップマップのマッピングを使用することはできません。
シェーダでテクスチャマップサンプリング：唯一の最も近い点または線状とテクスチャフィルタリングを、反復パターンを使用することはできません。

具体的な外観：https://www.khronos.org/webgl/wiki/WebGL_and_OpenGL_Differences

y軸上にフリップ

イメージとWebGLのテクスチャのDOMオブジェクトの座標系の座標系との違いを見てみましょう：

座標系2、y軸、見つけることができる座標系とそれが一貫性を保つために、我々は、y軸を反転するには、次のコードを使用する必要があり、ちょうど逆です。

gl.pixelStorei（gl.UNPACK_FLIP_Y_WEBGL、真の）;

テクスチャフィルタリング

レンダリングされるべき領域の私達の絵の質感や大きさは、テクスチャは、拡張子をレンダリングテクスチャを必要とする領域よりも小さい場合、それはテクスチャがテクスチャ収縮を必要とする領域をレンダリングするときよりも大きい場合、常に正確に同じではありません。

MIPMAP

テクスチャが大きすぎ、あまりにも大きな収縮をストレッチすると、ぼやけて表示されますと、この問題は、我々は、異なるサイズの領域をレンダリングするために対応するような大きさのテクスチャセットを使用することができますを解決するために、鋸歯状、GPUを自動的に描画領域の大きさに応じて選択されます。

利点

モデルは両方から離れたり、カメラに近い場合は、表示がより自然になります。
高いレンダリング効率;

短所

メモリ使用量は、1枚の画像として1/3増加します。

ミップマップのメソッドを作成します。

テクスチャを提出した後、自動的にミップマップテクスチャを指定生成gl.generateMipmap WebGLのメソッドを呼び出します。
外部ツールを通過した後、直接に全てのミップマップ良い、マニュアル提出を生成し、この方法は、一般に、ミップマップ矛盾テクスチャ画像の異なるレベルのような特別な状況のために使用されます。

テクスチャ座標をパッキング

GL_REPEAT：テクスチャ座標の範囲外に繰り返し作用を形成し、整数部分を無視しています。
GL_MIRRORED_REPEATは：テクスチャ座標の範囲外無視整数部分であり、奇数の反転するが、整数部は、ミラー効果として形成されている場合。
GL_CLAMP_TO_EDGE：テクスチャ座標の範囲外は、0と1にテクスチャ延びる縁部を形成する効果が切り捨てられます。

activeTexture和bindTexture

gl.activeTexture

活性現在のマッピング動作、操作された後続のコード指定されたテクスチャ、パラメータが列挙gl.TEXTURE0 gl.TEXTURE7（最小8、最大gl.MAX_COMBINED_TEXTURE_IMAGE_UNITSを参照）。

bindTexture activeTextureを呼び出すコールがない場合BindTexture後でデフォルトテクスチャユニット番号0アクティブ、現在のマッピング動作をバインドする呼び出し（デフォルトは理解されるようにコールgl.activeTexture（gl.TEXTURE0）コード）。

gl.bindTexture

結合は、テクスチャactiveTexture起動部にテクスチャを指定し、テクスチャの種類を指定することができます。

より詳細な情報はここで見つけることができます：https://www.jianshu.com/p/1829b4acc58d

例

https://hammerc.github.io/dou3d-ts/examples/learningNotes/lesson_4/index.html

WebGLの研究ノート（6）：テクスチャマップ