渲染到（或从中读取？）帧缓冲区在移动 Safari 中不起作用

fweth 发表于 Dev

这是

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

const dmnsn = [800, 600],
  glCtx = twgl.getContext(document.createElement("canvas")),
  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 }, tstSB),
  scnBf = twgl.createFramebufferInfo(glCtx, [{ wrap: glCtx.REPEAT}],dmnsn[0],dmnsn[1]);

function plcCv() {
  document.body.append(glCtx.canvas);
  glCtx.canvas.width = dmnsn[0];
  glCtx.canvas.height = dmnsn[1];
}
function drwTx(tx, fbi, fy) {
  twgl.bindFramebufferInfo(glCtx, fbi);
  twgl.drawObjectList(glCtx, [
    {
      programInfo: pgInf,
      bufferInfo: bfInf,
      uniforms: { u_texture: tx, u_flipy: fy }
    }
  ]);
}
function tstSB() {
  plcCv();
  drwTx(imgTx, scnBf, true);
  drwTx(scnBf.attachments[0], null, false);
}

html{
  height:100%;
}
body{
  margin:0;
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
canvas{
  border-style:solid;
}

<script id="vs" type="x-shader/x-vertex">
  
  attribute vec4 position;
  attribute vec2 texcoord;
    
  uniform bool u_flipy;
  
  varying vec2 v_texcoord;

  void main() {
    if(u_flipy) {
      v_texcoord = vec2(texcoord.x, 1.0 - texcoord.y);
    } else {
      v_texcoord = texcoord;
    }
    gl_Position = position;
  }
</script>
<script id="fs" type="x-shader/x-fragment">
precision mediump float;

varying vec2 v_texcoord;

uniform sampler2D u_texture;

void main() {
  gl_FragColor=texture2D(u_texture,v_texcoord);
}
</script>
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>

我知道绘制 SVG 有点实验性，但这似乎在移动 Safari 上也能正常工作。

曼

检查 Safari 中的错误我看到

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

要找出问题所在的纹理，请使用webgl-lint并添加这些行

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

然后我得到了这个错误

drawElements(TRIANGLES, 6, UNSIGNED_SHORT, 0) 中的错误：uniform sampler2D u_texture 引用的纹理单元 0 上的纹理 WebGLTexture("colorAttach") 不可渲染：纹理的宽度（800）不是 2 的幂，高度（600）是不是 2 的幂，但 TEXTURE_WRAP_S (REPEAT) 不是 CLAMP_TO_EDGE 并且 TEXTURE_WRAP_T (REPEAT) 不是 CLAMP_TO_EDGE。使用 WebGLProgram(" unnamed ") 作为当前程序并绑定默认顶点数组

问题是twgl.getContext在 Chrome/Firefox 上返回 WebGL2，但在 Safari 上只返回 WebGL1（尚不支持 WebGL2）

我添加了这个webgl-helper来禁用 WebGL2，我在 Chrome 中遇到了同样的错误。

如果您只想始终使用 WebGL1，请不要使用twgl.getContext.

否则，您可以修复它更改twgl.createFramebufferInfo设置 WebGL1 兼容参数的行

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

IIRC twgl 中 createFramebufferInfo 的默认值是wrap: CLAMP_TO_EDGE，minMag: LINEAR

const dmnsn = [800, 600],
  glCtx = twgl.getContext(document.createElement("canvas")),
  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 }, tstSB),
  scnBf = twgl.createFramebufferInfo(glCtx, [{ }],dmnsn[0],dmnsn[1]);

function plcCv() {
  document.body.append(glCtx.canvas);
  glCtx.canvas.width = dmnsn[0];
  glCtx.canvas.height = dmnsn[1];
}
function drwTx(tx, fbi, fy) {
  twgl.bindFramebufferInfo(glCtx, fbi);
  twgl.drawObjectList(glCtx, [
    {
      programInfo: pgInf,
      bufferInfo: bfInf,
      uniforms: { u_texture: tx, u_flipy: fy }
    }
  ]);
}
function tstSB() {
  plcCv();
  drwTx(imgTx, scnBf, true);
  drwTx(scnBf.attachments[0], null, false);
}

html{
  height:100%;
}
body{
  margin:0;
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
canvas{
  border-style:solid;
}

<script id="vs" type="x-shader/x-vertex">
  
  attribute vec4 position;
  attribute vec2 texcoord;
    
  uniform bool u_flipy;
  
  varying vec2 v_texcoord;

  void main() {
    if(u_flipy) {
      v_texcoord = vec2(texcoord.x, 1.0 - texcoord.y);
    } else {
      v_texcoord = texcoord;
    }
    gl_Position = position;
  }
</script>
<script id="fs" type="x-shader/x-fragment">
precision mediump float;

varying vec2 v_texcoord;

uniform sampler2D u_texture;

void main() {
  gl_FragColor=texture2D(u_texture,v_texcoord);
}
</script>
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。