WebGL – is there an alternative to embedding shaders in HTML?

Yup, a local server’s really the only way to go if you want to use XHR. I’ve written a bunch of WebGL lessons, and have often considered moving away from embedding the shaders in the HTML, but have been scared off by amount of explanation about web security I’d need to write…

Fortunately it’s super easy to run a server. Just open a shell then

cd path-to-files
python -m SimpleHTTPServer

Then point your browser to

http://localhost:8000

That works for simple cases like textures and GLSL. For video and audio streaming see

What is a faster alternative to Python’s http.server (or SimpleHTTPServer)?

On the other hand every browser that supports WebGL supports ES6 mutli-line template literals so if you don’t care about old browsers you can just put you shaders in JavaScript using backticks like this

var vertexShaderSource = `
  attribute vec4 position;
  uniform mat4 u_matrix;

  void main() {
    gl_Position = u_matrix * position;
  }
`;