WebGLのテクスチャで色を置換

Question

ビデオゲームでは、読み込みプロセスのスピードアップに役立つ色が適用されます。テクスチャの準備ができたら、現在の色を置き換えます。 WebGLでこれを行う方法はありますか？これまでに私が見たすべてのチュートリアルでは、色やテクスチャをどのようにロードするかを順番にしか示していません。

テクスチャが完全に読み込まれた後、各シェイプのバッファを変更する必要があると思います。私はこれが、AJAX呼び出しを介してテクスチャが利用可能であり、ある種のJavaScript関数を介して適用されていると仮定します。 WebGLには、複雑な画像読み込み処理なしでこれを行う方法が組み込まれていますか？

Answer 1

あなたが描いている動作で見たほとんどのゲームでは、通常、頂点ごとの色付けまたは非常に低い解像度のテクスチャから始まり、使用可能になると完全なテクスチャに「ブレンド」されます。そのような滑らかな移行は難しいですが、あなたが望むのは、あるものから別のものへの迅速な「ポップ」です。

基本的なルートは、テクスチャ座標と色情報の両方を持つ頂点バッファと、2つの異なるシェーダを作成することです。 1つのシェーダーがカラー情報を使用し、もう1つのシェーダーはそれを無視して代わりにテクスチャーを使用します。テクスチャの準備ができたら直ちにテクスチャベースのメッシュを使用するようにメッシュに通知します。

画像の負荷を検出すると、それがすべてでは難しいことではありませんし、あなたもそれのためにAJAXを必要としない：

var image = new Image(); 
image.addEventListener("load", function() { 
    // Image is done loading, push to texture 
    gl.bindTexture(gl.TEXTURE_2D, texture); 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); 
    // Set up any other state needed, such as switching the shader for the mesh 
}, true); 
image.src = src; 

私はせずに、このテーマに与えることができますどのくらいのより多くの助けわからないんだけど本当に大きなコードブロックを投稿していますが、まだ苦労している場合は、他の部分のいくつかを詳しく説明することができます。

Answer 2

これは実際には非常に簡単です.WebGLにはこれ専用の機能はありませんが、これはDOM APIから無料で入手できるものです。イメージをロードすると、とにかく、イメージロードが非同期であるため、 'onload'コールバックを実装する必要があります。ソリッドカラーからテクスチャに切り替えるためにコードを実行する必要があるときに、その 'onload'コールバックを入れるだけです。

Answer 3

loadTexture(url, initialColor) { 

    var tex = gl.createTexture(); 

    // start with a single color. 
    gl.bindTexture(gl.TEXTURE_2D, tex); 
    var pixel = new Uint8Array(initialColor); 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, pixel); 

    // start loading the image 
    var img = new Image(); 
    img.src = url; 
    img.onLoad = function() { 

    // when the image has loaded update the texture.   
    gl.bindTexture(gl.TEXTURE_2D, tex); 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img); 
    gl.generateMipmap(gl.TEXTURE_2D); 
    } 
    return tex; 
} 

// Load a tree texture, use brown until the texture loads. 
var treeTexture = loadTexture("tree.png", [255, 200, 0, 255]); 
// Load a water texture, use blue until it loads. 
var waterTexture = loadTexture("water.jpg", [0, 0, 255, 255]); 

を次のように私はかかるだろうなアプローチがあり、それらすべてが青のテクスチャにデフォルト設定が、これはhttp://webglsamples.googlecode.com仕事上のサンプルの方法をほとんどです。

ソリッドカラーを使用し、低解像度のテクスチャをロードし、高解像度のテクスチャをロードすると、そのアイディアを簡単に拡張できます。

注：上記のコードでは、2のべき乗のテクスチャを読み込んでいることを前提としています。そうでない場合は、テクスチャパラメータを正しく設定する必要があります。