2

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

Dan
  • 474
  • 1
  • 7
  • 16
  • Those aren't "JS code blocks" that's a shader language, in your case GLSL. The GPU doesn't work with Javascript. The keywords like `attribute`, `lowp`, and `uniform` are not part of Javascript. The types like `vec4` and `mat4` are also not Javascript constructs. Javascript is not a GPU language, that's why there are shader languages like GLSL. – Jake Holzinger Sep 13 '19 at 20:56

2 Answers2

5

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

Norguard
  • 26,167
  • 5
  • 41
  • 49
  • This is the answer I was looking for. You mentioned that you aren't sure why people tend to use script tags in tutorials. What would you say is best? Anyway to read in from a separate file? Ideally something where you would see formatting in a text editor – Dan Sep 14 '19 at 00:45
  • @Dan apologies for seeing this very, very late... Literally any means that loads text. `fetch(file).then(res => res.text()).then(text => compileShader(text))` – Norguard Mar 20 '22 at 20:02
  • If you're in Electron, maybe you load them directly from the file system, the way an installed game on Steam might. If you're making a game on the web that you "install", maybe you fetch them from the server once, and then save them in IndexedDB... as text, or as bytes, or as compiled bytecode ("cached shaders"... if allowed by WebGL). – Norguard Mar 20 '22 at 20:43
3

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.

gman
  • 100,619
  • 31
  • 269
  • 393