更改 webGL 的分辨率 canvas

Question

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

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

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

Answer 1

你有这个CSS属性

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

但它似乎 poor/inconsistent 支持跨浏览器。

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