Canvas glsl 着色器在某些 css 变换比例下中断

Question

我有一个带有着色器的 canvas，为此我正在使用 glslCanvas，我想用 css 变换来变换 canvas。这在一般情况下工作正常，但当我缩放它使其变得明显更大时，着色器冻结。

我试图找出造成这种情况的原因，但到目前为止还没有成功。似乎我可以 scaleX 无论我想要多大，但不能用 scaleY 或 scale。我检查了它是否有一定的分辨率或比例冻结但没有找到任何结果，这取决于 canvas 的大小。

最小示例

这是一个示例，其中 canvas 逐渐放大，并在 scale(4) 处中断。在 scale(4) 开始 canvas 而不是逐渐增加只会导致白色 canvas。

setTimeout(() => document.getElementById('glsl').style.transform = "scale(2)", 2000);
setTimeout(() => document.getElementById('glsl').style.transform = "scale(3)", 5000);
setTimeout(() => document.getElementById('glsl').style.transform = "scale(4)", 8000);
setTimeout(() => document.getElementById('glsl').style.transform = "scale(5)", 12000);

<script src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/dist/GlslCanvas.js"></script>
<canvas id="glsl" class="glslCanvas" data-fragment="

precision mediump float;

uniform vec2 u_resolution;
uniform float u_time;

void main()
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = gl_FragCoord.xy/u_resolution.xy;

    // Time varying pixel color
    vec3 col = 0.5 + 0.5*cos(u_time+uv.xyx+vec3(0,2,4));

    // Output to screen
    gl_FragColor = vec4(col,1.0);
}"></canvas>

我不确定这是否特定于 glslCanvas 库，但在 Github.

上的存储库中未发现任何关于此主题的问题

Answer 1

对此进行调查后，我发现了 glslCanvas 的一个问题。

我提交的PR在这里：http://github.com/patriciogonzalezvivo/glslCanvas/pull/47

本质上，缩放会导致代码错误地认为 canvas 不可见，因此它停止渲染。

Canvas glsl 着色器在某些 css 变换比例下中断

Canvas with glsl shader breaks at certain css transform scale

css

canvas

webgl

最小示例