Why do shaders have to be in html file for webgl program?

by

You don’t have to use <script> tags at all to load a shader program. Most tutorials and examples just use them as a container to store a string in the DOM of the webpage. The script type "x-shader/x-fragment" is meaningless for web browsers, so they don’t execute the script. They do, however, store the content of that tag as a string in the DOM which can then later be accessed by “real” scripts. This only works when the script content is in the HTML file. When you load the script via a src attribute, the content does not become a text childnode of the script tag and thus can not be accessed through the DOM tree.

You can just as well store the sourcecode for the shader as a string in a Javascript file:

// myVertextShader.glsl.js
var myVertexShaderSrc =         
        "https://stackoverflow.com/questions/14219947/attribute vec3 pos;"+      
        "void main() {"+        
        "   gl_Position = vec4(pos, 1.0);"+     
        "}"
    ;

You would then compile the shader like this:

var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, myVertexShaderSrc);
gl.compileShader(vertexShader);

gl.attachShader(program, vertexShader);

More Related Contents:

  1. Drawing a line with three.js dynamically
  2. Thickness of lines using THREE.LineBasicMaterial
  3. Multiple transparent textures on the same mesh face in Three.js
  4. How to stop a requestAnimationFrame recursion/loop?
  5. How to get the absolute position of a vertex in three.js?
  6. Three.js / WebGL – transparent planes hiding other planes behind them
  7. Replicating MeshLambertMaterial Using ShaderMaterial ignores textures
  8. How to detect collision in three.js?
  9. Three.js/WebGL: Large spheres appear broken at intersection
  10. WebGL / Three.js – Particles colored by texture flicker erratically while moving camera
  11. How do you pack one 32 bit integers into 4, 8bit ints in GLSL / WebGL?
  12. Antialiasing not working in Three.js
  13. Threejs: assign different colors to each vertex in a geometry
  14. “Cross origin requests are only supported for HTTP.” error when loading a local file
  15. How can I render an ‘atmosphere’ over a rendering of the Earth in Three.js?
  16. How to Fit Camera to Object
  17. THREE.js generate UV coordinate
  18. Three.js – Orthographic camera
  19. How to rotate a 3D object on axis three.js?
  20. Using textures in THREE.js
  21. Is it possible to enable unbounded number of renderers in THREE.js?
  22. Rendering a transparent shell
  23. Any way to get a bounding box from a three.js Object3D?
  24. How do I clean up and unload a WebGL canvas context from GPU after use?
  25. Three JS Pivot point
  26. three.js transparent object occlusion
  27. How to render clipped surfaces as solid objects
  28. Three.js add an object to a group but keep global position/rotation/scale as it was
  29. Three.js multiple materials on object loaded via OBJMTLLoader
  30. Apply color gradient to material on mesh – three.js

Leave a Comment