改变 webGL 画布的分辨率

Question

我一直在阅读有关 webGL 上下文的缩放和平滑的内容，但我无法找到我的问题的明确答案。 webGL 是否能够以不同（或动态）分辨率（例如 640x480）全屏呈现？

许多像素化例程 (http://clockworkchilli.com/blog/32_a_simple_retro_shader_for_webgl_games) 实际上是映射纹理。我的项目没有使用纹理，它只是平面阴影（和平滑阴影）基元。我遇到的主要问题是缩放上下文会导致在我的基元边缘进行过滤，我认为是因为 webGL 有一个画布包装器。我尝试关闭过滤（或将其设置为最近），但无法正常工作。

有人有这方面的经验吗？谢谢！

Answer 1

你有这个 CSS 属性

https://developer.mozilla.org/en/docs/Web/CSS/Image-rendering

但它似乎对跨浏览器的支持很差/不一致。

否则，您可以在低分辨率 FrameBuffer 上渲染内容，然后使用 GL_NEAREST 过滤将其纹理绘制到全分辨率画布上。