我试图在片段着色器中使用两个纹理，但无法使WebGL正确发送纹理。我可以一次发送一个，但是当我尝试一次发送两个时，我只会变黑。我还看到了其他一些多纹理示例，但所有示例都涉及加载图像数组。
我想将视频加载到一个纹理中，并将画布加载到第二个纹理中。我可以肯定我所有的着色器都很好，因为我只是将它们从我编写的c ++ opengl程序中移出了。另外，我可以通过注释一个或另一个来分别显示视频或画布，但是就像我上面提到的那样，它们似乎一起触发错误。
这是我创建和填充纹理的代码片段。
var texture1 = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture1);
var texture2 = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture2);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER, gl.NEAREST);
然后在我的绘制循环中：
gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE, video);
var tex1loc = gl.getUniformLocation(program,"u_image");
gl.uniform1i(tex1loc, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture1);
gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE, canvas);
var tex2loc = gl.getUniformLocation(program, "u_image2");
gl.uniform1i(tex2loc, 1);
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, texture2);
我还收到一条警告消息：
GL_INVALID_ENUM：glActiveTexture：纹理为GL_FALSE
GL_INVALID_ENUM：glActiveTexture：纹理为GL_LINES
并且：
WebGL：drawArrays：绑定到纹理单元0的纹理不可渲染。它可能不是2的幂，并且纹理过滤不兼容或者不是“纹理完成”。或纹理为具有线性过滤的浮点型或半浮点型，而未启用OES_float_linear或OES_half_float_linear扩展。
触发警告的行是：
gl.drawArrays(gl.TRIANGLES, 0,6);
在此先感谢您的帮助！
gl.activeTexture设置所有其他纹理命令效果的纹理单位。对于每个纹理单元，有2个绑定点，TEXTURE_2D并且TEXTURE_CUBE_MAP。
你可以这样想
gl = {
activeTextureUnit: 0,
textureUnits: [
{ TEXTURE_2D: null: TEXTURE_CUBE_MAP: null, },
{ TEXTURE_2D: null: TEXTURE_CUBE_MAP: null, },
{ TEXTURE_2D: null: TEXTURE_CUBE_MAP: null, },
...
],
};
gl.activeTexture 只是这样做
gl.activeTexture = function(unit) {
gl.activeTextureUnit = unit - gl.TEXTURE0;
};
gl.bindTexture 做这个
gl.bindTexture = function(bindPoint, texture) {
gl.textureUnits[gl.activeTextureUnit][bindPoint] = texture;
};
gl.texImage2D并gl.texParamteri像这样查找要使用的纹理
gl.texImage2D = function(bindPoint, .....) {
var texture = gl.textureUnits[gl.activeTextureUnit][bindPoint];
// now do something with texture
所以，知道了这一切，与代码中的第一个问题是它创造2个纹理，texture1和texture2后来只设置纹理参数texture2，因为第二个呼叫gl.bindTexture组绑定到当前的纹理activeTexture上的TEXTURE_2D绑定点，然后gl.texParameteri只运行在那个纹理上。
它需要texture1在绑定之前设置参数texture2。
同样，绘制代码需要调用gl.activeTexture和/或gl.bindTexture在调用之前，gl.texImage2D否则它将在绑定了任何纹理的对象上进行操作，以绑定TEXTURE_2D到当前处于活动状态的纹理单元上的绑定点。
至于与您有关的警告，gl.activeTexture您确定已发布所有与纹理有关的代码吗？如果将所有警告都张贴出来，那么这些警告就没有多大意义，因为您的唯一要求是gl.activeTexture看起来有效。
否则，关于单元0上的纹理不可渲染的其他警告是因为您没有texture1如上所述设置参数。
因此，要明确一点，您的代码应如下所示
var texture1 = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture1);
// you need to set parameters for texture1
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER, gl.NEAREST);
var texture2 = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture2);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER, gl.NEAREST);
// these should be looked up at init time
var tex1loc = gl.getUniformLocation(program,"u_image");
var tex2loc = gl.getUniformLocation(program, "u_image2");
绘制循环：
// call active texture first
gl.activeTexture(gl.TEXTURE0);
// then bind a texture. This now binds texture1 to unit 0
gl.bindTexture(gl.TEXTURE_2D, texture1);
gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE, video);
gl.uniform1i(tex1loc, 0);
// call active texture first
gl.activeTexture(gl.TEXTURE1);
// then bind a texture. This now binds texture2 to unit 1
gl.bindTexture(gl.TEXTURE_2D, texture2);
gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE, canvas);
gl.uniform1i(tex2loc, 1);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句