Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebGL 下 antialias 传 true 报错 #178

Closed
xiaoiver opened this issue Apr 26, 2024 · 3 comments
Closed

WebGL 下 antialias 传 true 报错 #178

xiaoiver opened this issue Apr 26, 2024 · 3 comments
Assignees
Labels
bug Something isn't working

Comments

@xiaoiver
Copy link
Contributor

xiaoiver commented Apr 26, 2024

现在会透传 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

antvis/L7#2416

@xiaoiver
Copy link
Contributor Author

xiaoiver commented Apr 26, 2024

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

截屏2024-04-26 下午6 00 19 截屏2024-04-26 下午6 00 28

如果一定要开启 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

@xiaoiver
Copy link
Contributor Author

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

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

@Issues-translate-bot
Copy link

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],
});

xiaoiver added a commit that referenced this issue May 15, 2024
…) (#181)

* fix: pass antialias down through when creating webgl context #178 (#180)

* chore: commit changeset (#182)

* chore(release): bump version (#183)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants