WebGL的着色檢查紋理狀態sampler2D

Question

我想有準備着色器組件（用於多采樣特）

在我使用（激活和綁定）僅2紋理圖像我的當前狀態。

，但此行：

gl_FragColor = textureColor + textureColor1 + textureColor2; 

製造麻煩與我的紋理視圖的紋理我從沒有結合的樣品textureColor2。

在着色器中無法使用console.log或任何其他標準調試方法。我有興趣瞭解有關着色器的更多信息，但我被卡住了。

代碼：

...

precision mediump float; 

varying vec2 vTextureCoord; 
varying vec3 vLightWeighting; 

uniform sampler2D uSampler; 
uniform sampler2D uSampler1; 
uniform sampler2D uSampler2; 
uniform sampler2D uSampler3; 
uniform sampler2D uSampler4; 
uniform sampler2D uSampler5; 
uniform sampler2D uSampler6; 
uniform sampler2D uSampler7; 
uniform sampler2D uSampler8; 
uniform sampler2D uSampler9; 
uniform sampler2D uSampler10; 
uniform sampler2D uSampler11; 
uniform sampler2D uSampler12; 
uniform sampler2D uSampler13; 


void main(void) { 


vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); 
vec4 textureColor1 = texture2D(uSampler1, vec2(vTextureCoord.s, vTextureCoord.t)); 
vec4 textureColor2 = texture2D(uSampler2, vec2(vTextureCoord.s, vTextureCoord.t)); 

// Need help here 
gl_FragColor = textureColor + textureColor1 ; 

//gl_FragColor = textureColor + textureColor1 + textureColor2; 

//修訂問題

if ( ${numTextures} == 1) 
     { 
      gl_FragColor = textureColor; 
     } 
    else if (${numTextures} == 2) 
     { 
      gl_FragColor = textureColor + textureColor1; 
     } 
    else if (${numTextures} == 3) 
     { 
      gl_FragColor = textureColor + textureColor1 + textureColor2; 
     } 

//我用簡單實用的if else現在。

//我通過值到着色器上負載

// i的運行時仍然無法更新着色

////////////////// /////////////////////

//這是繪製函數段：

for (var t=0;t<object.textures.length;t++) { 

eval(" world.GL.gl.activeTexture(world.GL.gl.TEXTURE"+t+"); ") 
    world.GL.gl.bindTexture(world.GL.gl.TEXTURE_2D, object.textures[t]); 
    world.GL.gl.pixelStorei(world.GL.gl.UNPACK_FLIP_Y_WEBGL, false); 
    world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_MAG_FILTER, world.GL.gl.NEAREST); 
    world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_MIN_FILTER, world.GL.gl.NEAREST); 
    world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_WRAP_S, world.GL.gl.CLAMP_TO_EDGE); 
    world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_WRAP_T, world.GL.gl.CLAMP_TO_EDGE); 
    // -- Allocate storage for the texture 
    //world.GL.gl.texStorage2D(world.GL.gl.TEXTURE_2D, 1, world.GL.gl.RGB8, 512, 512); 
    //world.GL.gl.texSubImage2D(world.GL.gl.TEXTURE_2D, 0, 0, 0, world.GL.gl.RGB, world.GL.gl.UNSIGNED_BYTE, image); 
    //world.GL.gl.generateMipmap(world.GL.gl.TEXTURE_2D); 
    world.GL.gl.uniform1i(object.shaderProgram.samplerUniform, t); 

} 

...

也許在運行最好的方法是用object.textures數組操作？！

• 最後：

  • 用新標誌覆蓋着色器
  • 編譯着色器 新材料更新

Answer 1

什麼是你想實現什麼？

使用大量紋理的正常的方法是使用其上覆蓋朝向的this article

否則底部的texture atlas，沒有就沒有辦法，如果一個紋理着色器加載到檢測。你需要傳遞你自己的標誌。例如

uniform bool textureLoaded[NUM_TEXTURES]; 

或

uniform float textureMixAmount[NUM_TEXTURES]; 

我會使用一個紋理圖集但如果我是你，除非你真的知道你在做一些獨特的，實際上需要14個紋理。

在飛行中生成着色器也很常見。幾乎所有的遊戲引擎都這樣做。 Three.js也是如此。因此，不要打開和關閉紋理，而要編寫一些代碼來生成N個紋理的着色器。然後當你只有一個紋理生成1紋理着色器，當你有2生成2紋理着色器等等。這對於GPU而言比擁有14紋理着色器並試圖關閉13紋理更加高效。

例子：

// note, I'm not recommending this shader, only showing some code 
 
// that generates a shader 
 

 
function generateShaderSrc(numTextures) { 
 

 
    return ` 
 
    // shader for ${numTextures} textures 
 
    precision mediump float; 
 
    
 
    varying vec2 vTextureCoord; 
 
    varying vec3 vLightWeighting; 
 

 
    uniform sampler2D uSampler[${numTextures}]; 
 
    uniform float uMixAmount[${numTextures}]; 
 
    
 
    void main() { 
 
     vec4 color = vec4(0); 
 

 
     for (int i = 0; i < ${numTextures}; ++i) { 
 
     vec4 texColor = texture2D(uSampler[i], vTextureCoord); 
 
     color = mix(color, texColor, uMixAmount[i]); 
 
     } 
 
     
 
     gl_FragColor = color; 
 
    } 
 
    `; 
 
} 
 

 
log(generateShaderSrc(1)); 
 
log(generateShaderSrc(4)); 
 

 
function log(...args) { 
 
    const elem = document.createElement("pre"); 
 
    elem.textContent = [...args].join(' '); 
 
    document.body.appendChild(elem); 
 
}

這是一個非常簡單的例子。真正的着色器生成器通常會進行更多的字符串操作。

您應該瞭解WebGL 1.0只需要支持8個紋理單元。 According to webglstats about 15% of devices only support 8 texture units所以你可能想檢查用戶有多少紋理單元，並警告他們你的應用程序如果他們的應用程序需求低於你的應用程序就不會工作。