WebGL 下 antialias 传 true 报错

[xiaoiver]

现在会透传 antialias 属性： https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#antialias https://stackoverflow.com/questions/50255282/webgl2-has-anti-alias-automatically-built-in

但 WebGL2 下报错，WebGL1 正常：

[.WebGL-0x13c00c6ee00] GL_INVALID_OPERATION: Invalid operation on multisampled framebuffer

https://github.com/antvis/L7/pull/2416/

[xiaoiver]

目前 WebGL2 下支持 MSAA 的方式可以参考这个例子：首先关闭 antialias，在创建 pipeline 和 renderTarget 时指定 sampleCount。但 WebGL1 就没办法使用了。

如果一定要开启 antialias，并应用上述方式在 WebGL2 下就会报错： https://stackoverflow.com/questions/47934444/webgl-framebuffer-multisampling https://discourse.threejs.org/t/why-is-a-custom-fbo-not-antialiased/1329

解决办法有两个：

1. WebGL 1/2 都不支持 antialias，使用 FXAA 类似的后处理技术。但目前 L7 针对每个 Layer 进行后处理，并不适合。
2. WebGL 1/2 都支持 antialias
   • WebGL1 直接透传。类似 mapbox https://github.com/mapbox/mapbox-gl-js/issues/7543
   • WebGL2 / WebGPU 直接关闭，创建 RT 时使用 sampleCount。https://toji.dev/webgpu-best-practices/webgl-performance-comparison#antialiasing

[xiaoiver]

我想了下还是使用第二种方式，WebGL 1/2 都透传 antialias。 修改方式如下，在创建 RenderPass 时，如果 colorResolveTo 仅有一个且是直接输出到屏幕的，就跳过 FBO 绑定以及后续的 blit：

const renderPass = device.createRenderPass({
  colorAttachment: [renderTarget],
  colorResolveTo: [onscreenTexture],
  colorClearColor: [TransparentWhite],
});

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

I thought about it and used the second method. WebGL 1/2 transparently transmits antialias. The modification is as follows. When creating RenderPass, if there is only one colorResolveTo and it is output directly to the screen, the FBO binding and subsequent blit will be skipped:

const renderPass = device.createRenderPass({
  colorAttachment: [renderTarget],
  colorResolveTo: [onscreenTexture],
  colorClearColor: [TransparentWhite],
});