我尝试在一个Web应用程序上渲染GLSL着色器，为此我使用了glslCanvas。用于渲染的canvas有一个data-fragment属性，该属性应该能够接受GLSL代码的字符串文字来构造着色器。然而，当我使用Django上下文将着色器代码作为值传递给该属性时，着色器似乎无法工作。然而，当我创建一个script-tag并通过JavaScript加载完全相同的代码时，它就可以工作了。我假设load函数执行某种格式设置，这对模式匹配很重要，但是对于我的目的来说，如果我可以只使用HTML属性，那会更好。这可能吗？
着色器示例：

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

// Plot a line on Y using a value between 0.0-1.0
float plot(vec2 st) {    
    return smoothstep(0.02, 0.0, abs(st.y - st.x));
}

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;

    float y = st.x;

    vec3 color = vec3(y);

    // Plot a line
    float pct = plot(st);
    color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0);

    gl_FragColor = vec4(color,1.0);
}

HTML（脚本和画布标签是分别测试的，为了简洁起见，这里放在一起）：

<div id="shader-container">
    <hr>
    <!-- Doesn't display the shader -->
    <canvas class="glslCanvas" data-fragment="{{shader_code}}" width="1000" height="1000"</canvas>
    <!-- Displays shader -->
    <script>
        var canvas = document.createElement("canvas");
        document.getElementById("shader-container").appendChild(canvas);
        canvas.setAttribute("width", "1000");
        canvas.setAttribute("height", "1000")
        var sandbox = new GlslCanvas(canvas);
        sandbox.load("{{shader_code}}");
    </script>
</div>

Django-后端：

from django.http import HttpResponse
from django.shortcuts import render

def shaders_view(request, *args, **kwargs) -> HttpResponse:
    shader_code = read_shader_code()
    context = {"shader_code": shader_code}
    return render(request, 'shaders.html', context)

def read_shader_code():
    with open("shaders\shader.frag", "r") as f:
        return f.read().replace("\n", "\\n").replace("\t","\\t")