Webgl 渲染（或读取？）帧缓冲区不'；我不能在移动狩猎中工作

出于某些原因，在mobile Safari上，渲染到帧缓冲区，然后从缓冲区渲染到屏幕似乎不起作用。我没有机会查看桌面Safari，但我的Firefox很好地呈现了Microsoft徽标，在我的手机上我只看到了边框：

const dmnsn=[800600]，
glCtx=twgl.getContext（document.createElement（“画布”），
imgLc=
"https://upload.wikimedia.org/wikipedia/commons/b/b6/Microsoft_logo_%281987%29.svg";
var bfInf=twgl.primitives.createXYQuadBufferInfo（glCtx），
pgInf=twgl.createProgramInfo（glCtx，[“vs”，“fs”]），
imgTx=twgl.createTexture（glCtx，{src:imgLc}，tsb），
scnBf=twgl.createFramebufferInfo（glCtx，[{wrap:glCtx.REPEAT}]，dmnsn[0]，dmnsn[1]）；
函数plcCv（）{
document.body.append（glCtx.canvas）；
glCtx.canvas.width=dmnsn[0]；
glCtx.canvas.height=dmnsn[1]；
}
功能drwTx（德克萨斯州、联邦调查局、财政年度）{
twgl.bindFramebufferInfo（glCtx，fbi）；
twgl.drawObjectList（glCtx[
{
programInfo:pgInf，
bufferInfo:bfInf，
制服：{u_纹理：tx，u_flipy:fy}
}
]);
}
函数tsb（）{
plcCv（）；
drwTx（imgTx，scnBf，真实）；
drwTx（scnBf.附件[0]，空，假）；
}

html{
身高：100%；
}
身体{
保证金：0；
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
帆布{
边框样式：实心；
}

属性向量4位置；
属性向量2 texcoord；
制服布卢弗利比；
可变矢量2 v_texcoord；
void main（）{
如果（u_flipy）{
v_texcoord=vec2（texcoord.x，1.0-texcoord.y）；
}否则{
v_texcoord=texcoord；
}
gl_位置=位置；
}
精密中泵浮子；
可变矢量2 v_texcoord；
均匀的二维u_纹理；
void main（）{
gl_FragColor=纹理2D（u_纹理，v_texcoord）；
}

检查Safari中的错误我看到了

WebGL:抽屉元素：绑定到纹理单元0的纹理不可渲染。它可能是非2次方且具有不兼容的纹理过滤或“纹理不完整”，或者是具有线性过滤且未启用相关浮点/半浮点线性扩展的浮点/半浮点类型

为了找出问题所在的纹理，添加了这些线条

  const ext = glCtx.getExtension('GMAN_debug_helper');
  const tagObject = ext ? ext.tagObject.bind(ext) : () => {};
  tagObject(imgTx, 'imgTx');
  tagObject(scnBf.attachments[0], 'colorAttach');

然后我犯了这个错误

抽屉元素中的错误（三角形，6，无符号_短，0）：纹理单元0上的纹理WebGLTexture（“colorAttach”）由统一采样器2D u_纹理引用，不可渲染：纹理的宽度（800）不是2的幂，高度（600）不是2的幂，但纹理_包裹_s（重复）不是钳制_到_边，纹理_包裹_T（重复）不是钳制_到_边。 以WebGLProgram（“未命名”）作为当前程序 与默认顶点数组绑定

问题是

twgl.getContext

在Chrome/Firefox上返回WebGL2，但在Safari上只返回WebGL1（它还不支持WebGL2）

我添加这个是为了禁用WebGL2，我在Chrome中也遇到了同样的错误

如果您只是希望始终使用WebGL1，那么不要使用

twgl.getContext

否则，您可以修改

twgl.createFramebufferInfo

的行以设置WebGL1兼容的参数

  scnBf = twgl.createFramebufferInfo(glCtx, [{ }],dmnsn[0],dmnsn[1]);

IIRC createFramebufferInfo在twgl中的默认值是

wrap:CLAMP_TO_EDGE

，

minMag:LINEAR

const dmnsn=[800600]，
glCtx=twgl.getContext（document.createElement（“画布”），
imgLc=
"https://upload.wikimedia.org/wikipedia/commons/b/b6/Microsoft_logo_%281987%29.svg";
var bfInf=twgl.primitives.createXYQuadBufferInfo（glCtx），
pgInf=twgl.createProgramInfo（glCtx，[“vs”，“fs”]），
imgTx=twgl.createTexture（glCtx，{src:imgLc}，tsb），
scnBf=twgl.createFramebufferInfo（glCtx，[{}]，dmnsn[0]，dmnsn[1]）；
函数plcCv（）{
document.body.append（glCtx.canvas）；
glCtx.canvas.width=dmnsn[0]；
glCtx.canvas.height=dmnsn[1]；
}
功能drwTx（德克萨斯州、联邦调查局、财政年度）{
twgl.bindFramebufferInfo（glCtx，fbi）；
twgl.drawObjectList（glCtx[
{
programInfo:pgInf，
bufferInfo:bfInf，
制服：{u_纹理：tx，u_flipy:fy}
}
]);
}
函数tsb（）{
plcCv（）；
drwTx（imgTx，scnBf，真实）；
drwTx（scnBf.附件[0]，空，假）；
}

html{
身高：100%；
}
身体{
保证金：0；
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
帆布{
边框样式：实心；
}

属性向量4位置；
属性向量2 texcoord；
制服布卢弗利比；
可变矢量2 v_texcoord；
void main（）{
如果（u_flipy）{
v_texcoord=vec2（texcoord.x，1.0-texcoord.y）；
}否则{
v_texcoord=texcoord；
}
gl_位置=位置；
}
精密中泵浮子；
可变矢量2 v_texcoord；
均匀的二维u_纹理；
void main（）{
gl_FragColor=纹理2D（u_纹理，v_texcoord）；
}

非常感谢您的回答！我现在记得我已经知道

twgl.getContext

默认为WebGL2，但不知怎么的我忘了！我猜，因为我使用了WebGL代码，所以我假设上下文也必须是WebGL，但是WebGL2上下文当然可以处理WebGL代码！