Estoy tratando de representar un sombreador GLSL en una aplicación web, para lo cual uso glslCanvas . El lienzo utilizado para la representación tiene un atributo data-fragment que se supone que puede tomar una cadena literal de código GLSL para construir el sombreador. Sin embargo, cuando uso el contexto de Django para pasar el código del sombreador como el valor de ese atributo, el sombreador no parece funcionar. Sin embargo, cuando creo una etiqueta de secuencia de comandos y cargo exactamente el mismo código a través de JavaScript, funciona. Supongo que la función de load hace algún tipo de formato que es importante para la coincidencia de patrones, sin embargo, para mis propósitos, sería mucho más preferible si pudiera usar el atributo HTML. ¿Es eso posible?

Ejemplo de sombreador:

 #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 (las etiquetas de script y lienzo se probaron por separado, simplemente póngalas juntas aquí por razones de brevedad):

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