用WebGL中的紋理替換顏色

在視頻遊戲中，僅應用顏色來幫助加速加載過程。紋理準備就緒後，它們會替換當前的顏色。有沒有辦法在WebGL中做到這一點？到目前爲止，我所見過的所有教程只展示瞭如何加載顏色或紋理（而不是一個接一個地加載）。用WebGL中的紋理替換顏色

我猜想每個形狀的緩衝區在其紋理完全加載後需要改變。我會假設這是通過AJAX調用鍵入的，該紋理可用，然後通過某種JavaScript函數應用。沒有複雜的圖像加載過程，WebGL是否有內置的方法？

2011-11-11 Ash Blue

好吧，幾個月後，我看完自己的問題後，明白我在問什麼。要完全回答我自己的問題，請閱讀下文。要在同一時間加載紋理和顏色，您需要兩組x-fragment和x-vertex腳本。一個用於顏色，另一個用於紋理。由於它們是通過DOM拉入的，因此您只需在初始化對象時使用正確的着色器標識。可以是顏色或紋理。希望這可以幫助無能的WebGL像我一樣發揚光大。 –

在我所見過的大多數遊戲中，您將描述它們的行爲，通常以每頂點着色或非常低分辨率的紋理開始，並在可用時「融合」到完整紋理。這種平穩的過渡是棘手的，但如果你想要的只是從一個到另一個的快速「流行」，它應該不會太麻煩。

我會採取的基本路線是創建一個頂點緩衝區，同時具有紋理座標和顏色信息，以及兩個不同的着色器。一個着色器將使用顏色信息，另一個將忽略它並使用紋理。一旦紋理準備就緒，您就會發信號通知網格開始使用基於紋理的網格。

至於檢測圖像負載，這是不難的，你甚至不需要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;

我不知道我能多少幫助，在這個問題上沒有給出發佈非常大的代碼塊，但是如果你還在掙扎，我可以詳細介紹一些其他部分。

來源

2011-11-11 16:06:36 Toji

遠比我預想的簡單。當你說「兩個不同的着色器」時，你是在談論設置的初始着色器？如果是這樣，我猜測繪圖功能需要在某個點上切換紋理和紋理輸出。 –

我不完全確定「初始着色器」的含義。你在使用特定的教程或框架嗎？ – Toji

實際上從零開始構建自己的WebGL引擎，遵循Mozilla WebGL教程中的許多想法和原則。通過初始着色器，我指的是在設置WebGL時（如果我沒有記錯的話），您可以使用它來抓取並存儲着色器元素。 –

這實際上很簡單，沒有WebGL專門爲此特別設計的任何功能，這是您可以從DOM API中免費獲得的東西。當你加載圖片時，無論如何你必須實現他們的'onload'回調，因爲圖片加載是異步的。因此，只需在'onload'回調中加入任何代碼即可從純色切換到紋理。

來源

2011-11-11 16:06:33

我會採取的方法是如下

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次冪的紋理。如果沒有，你需要正確設置你的紋理參數。

來源

2011-11-26 11:16:53 gman

用WebGL中的紋理替換顏色

回答

相關問題