GlslCanvas не распознает код шейдера через атрибут data-fragment

Я пытаюсь отрисовать GLSL-шейдер в веб-приложении, для чего я использую glslCanvas. Холст, используемый для рендеринга, имеет атрибут 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 (теги script и canvas были протестированы отдельно, просто помещены сюда вместе для краткости):

<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-Backend:

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")

То есть вот так? 

var canvas = document.getElementById("canvas");
var sandbox = new GlslCanvas(canvas);
var string_frag_code = `#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);
}`;
sandbox.load(string_frag_code);

function resize() {
  let sideLength;
  sideLength = window.innerWidth;
  if (window.innerWidth > window.innerHeight) {
    sideLength = window.innerHeight;
  }
  canvas.width = 300;
  canvas.height = 300;
}
resize()
window.onresize = resize;
html,
body {
  margin: 0;
  overflow: none;
}
<html>

<head>
  <script src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/dist/GlslCanvas.js"></script>
</head>

<body>
  <center><canvas id="canvas" /></center>
</body>

</html>

Вернуться на верх