Why does WebGL use string representations of GLSL code blocks?

Question

So I was looking up some basic tutorials for learning WebGL, and noticed that they all pass string representations of GLSL code blocks as parameters (such as this or this ).

I looked through the documentation for WebGLRenderingContext , and sure enough, the source parameter description for the shaderSource method is:

A DOMString containing the GLSL source code to set.

I was always under the impression that this sort of thing was possible, but not a good coding practice.

Is this a deliberate design choice, or is there really no possible alternative offered by the other features of Javascript? (ie. a last resort option)

Does this occur in other languages as well, or should it generally be avoided?

EDIT: Mistook GLSL for Javascript

Answer 1

The shader is going to be loaded as text (or as a byte buffer, or whatever), regardless of where it is stored. It is not JS, it is GLSL; a very different language which is more like a specialized C. Your PC has no understanding of the file types for vertex/fragment/compute OpenGL shaders, and in fact, there are no formal types, just suggestions.

OpenGL ends up doing the compiling, which means that you are passing it program text to compile, and not JS objects.

Now, whether you write it as JS strings in your app, or as script tags with a different type, or you manually fetch them all as text and pass them in, that is up to you.

Most people choose to use script tags in tutorials, because... laziness? Path of least resistance? Genuine belief that they want a 50,000 line index file? I don't know.

But in general, they are some group of bytes representing text, which is parsed and compiled inside of your app, or precompiled and stored as cache (not sure this is valid in WebGL; happy to be shown otherwise).

Answer 2

WebGL does not use string representations of Javascript code blocks. It uses strings as representations of GLSL, a shading language the runs on your GPU (well, that the browser and/or the graphics driver translate into something that runs on your GPU).

Back in 2011 when WebGL first shipped the easiest way to get multiline strings was to use a <script type="anything-other-than-the-javascript"> script tag. Since then multiline template literals became available which is slowly becoming more common but there are many years of examples of doing it the script tag way

For syntax highlighting you can make JavaScript files that have a single GLSL string in them using ES6 import/export syntax

file: // some-vertex-shader.glsl

export default `
attibute vec4 position;

uniform mat4 matrix;

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

You can then use with with

import someVertexShaderSource from `./some-vertex-shader.glsl`;

...
gl.shaderSource(someShader, someVertexShaderSource);  // send the string to WebGL

Now you can configure your editor to highlight .glsl files as GLSL

See https://stackoverflow.com/a/14248861/128511

PS: It sounds like you're new to WebGL so you might find these tutorials helpful.