Question

3

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

rated 0 times [ 8] [ 5] / answers: 1 / hits: 19417 / 12 Years ago, tue, january 8, 2013, 12:00:00

I have seen the following question where someone asked how to remove shaders from html:
WebGL - is there an alternative to embedding shaders in HTML?

There are elaborate workarounds to load in a file containing the shader suggested in the answers to the question.

In the tutorial I saw, the shader code is embedded directly in the html.
The javascript code refers to it using getElementById. But it's ugly embedding the shader directly in the html for many reasons. Why can't I just refer to it externally using the src= attribute?

<script type=x-shader/x-fragment id=shader-fs src=util/fs></script>

The above doesn't work, I just want to know why not. This is clearly something to do with limitations on script itself, but I don't get it.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

darrylm

Add To Favorites

Follow

Total Points: 499

Total Questions: 131

Total Answers: 108

Location: Saudi Arabia

Member since Mon, Sep 5, 2022

2 Years ago

answered 12 Years ago dylondaytond · Accepted Answer

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 =         

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