带有 glsl 着色器的画布在某些 css 变换比例下中断

Question

我有一个带有着色器的画布，为此我使用glslCanvas，并且我想使用 css 变换来变换该画布。这通常可以正常工作，但是当我对其进行缩放以使其变得更大时，着色器会冻结。

我试图找出造成这种情况的原因，但到目前为止还没有运气。看来我可以做scaleX，不管我想要多大，但不能用scaleY 或scale。我检查了是否有一定的分辨率或比例冻结但没有找到任何结果，这取决于画布的大小。

小例子

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

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

本质上，缩放会导致代码错误地认为画布不可见，从而停止渲染。