css - 带有 glsl 着色器的 Canvas 在特定的 css 变换比例下中断

我有一个带有着色器的 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 上的存储库中没有发现有关此主题的任何问题。

最佳答案

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

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

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

关于css - 带有 glsl 着色器的 Canvas 在特定的 css 变换比例下中断，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57676500/