title: load GLSL file (WebGL) in HTML?
body: <p><strong>What I want:</strong></p>
  
  <pre><code>&lt;script src="shader.glsl" type="x-shader/x-fragment"&gt;&lt;/script&gt;
  &lt;script src="shader.glsl" type="x-shader/x-vertex"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>or:</strong></p>
  
  <pre><code>&lt;script src="shader.frag" type="x-shader/x-fragment"&gt;&lt;/script&gt;
  &lt;script src="shader.vert" type="x-shader/x-vertex"&gt;&lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <p>So I have 2 simple shader types:</p>
  
  <ul>
  <li><p>type=x-shader/x-fragment</p>
  
  <pre><code>precision mediump float;
  
  void main(void) {
      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
  }
  </code></pre></li>
  <li><p>type=x-shader/x-vertex</p>
  
  <pre><code>attribute vec3 aVertexPosition;
  
  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;
  
  void main(void) {
      gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
  }
  </code></pre></li>
  </ul>
  
  <p>The shaders come from <a href="http://learningwebgl.com/lessons/lesson01/index.html" rel="noreferrer">this WebGL tutorial</a></p>
  
  <hr>
  
  <ol>
  <li>Can I add these 2 types in one <code>.glsl</code>?</li>
  <li><p>If not are their other file formats for the shader types like:</p>
  
  <ul>
  <li><code>.vert</code></li>
  <li><code>.frag</code></li>
  </ul></li>
  </ol>
  
  <hr>
  
  <p>Q: For what do I want to use this?<br>
  A: Dynamically loading my files from JavaScript and insert it to my HTML file.</p>
  
  <p>Q: Do you want to know how to load dynamically files?<br>
  A: No that is irrelevant to the question "load GLSL file (WebGL) in HTML?"</p>
  
  <p>Q: What do you want then?<br>
  A: Look at the What I want at the start of the question.</p>
  
  <p>Q: Do you want to share your JavaScript import code?<br>
  A: Yes but I think that is irrelevant information to be able to answer the question</p>