Introduction

A common WebGL mistake is trying to write shader math as if JavaScript itself were the shader language. The JavaScript code runs on the CPU, while the shader runs on the GPU in GLSL. So the proper way to "write a shader function in JS" is usually to place valid GLSL code inside a JavaScript string, compile it, and pass any dynamic values through uniforms.

JavaScript And GLSL Have Different Jobs

In a WebGL application, JavaScript is responsible for:

• creating the WebGL context
• uploading buffers and textures
• compiling and linking shaders
• setting uniforms and drawing

The shader source itself must be written in GLSL, not JavaScript syntax.

For example, this is a GLSL fragment shader stored inside JavaScript:

1const fragmentSource = `
2precision mediump float;
3uniform float u_time;
4
5float wave(float x) {
6  return 0.5 + 0.5 * sin(x + u_time);
7}
8
9void main() {
10  float value = wave(gl_FragCoord.x * 0.02);
11  gl_FragColor = vec4(value, value, value, 1.0);
12}
13`;

The function wave is GLSL code. JavaScript is only carrying the source string.

Compile The Shader In JavaScript

Once you have valid GLSL source, compile it with WebGL.

1function createShader(gl, type, source) {
2  const shader = gl.createShader(type);
3  gl.shaderSource(shader, source);
4  gl.compileShader(shader);
5
6  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
7    throw new Error(gl.getShaderInfoLog(shader));
8  }
9
10  return shader;
11}

Then use it:

1const canvas = document.querySelector("canvas");
2const gl = canvas.getContext("webgl");
3
4const vertexSource = `
5attribute vec2 a_position;
6void main() {
7  gl_Position = vec4(a_position, 0.0, 1.0);
8}
9`;
10
11const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
12const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);

That boundary is the heart of the answer. JavaScript manages the pipeline. GLSL defines the shader behavior.

Pass Data Through Uniforms Instead Of Rewriting The Shader

If you want the shader function to depend on runtime values such as time, mouse position, or resolution, do not rewrite the GLSL source every frame. Pass those values through uniforms.

1const timeLocation = gl.getUniformLocation(program, "u_time");
2
3gl.useProgram(program);
4gl.uniform1f(timeLocation, performance.now() * 0.001);

That keeps the shader source stable and lets the GPU use the same compiled program while the inputs change.

Writing A More Realistic Helper Function

Here is a small GLSL helper that returns a color palette value based on a float input.

1const fragmentSource = `
2precision mediump float;
3uniform float u_time;
4
5vec3 palette(float t) {
6  return vec3(
7    0.5 + 0.5 * sin(t),
8    0.5 + 0.5 * sin(t + 2.0),
9    0.5 + 0.5 * sin(t + 4.0)
10  );
11}
12
13void main() {
14  float t = gl_FragCoord.x * 0.02 + u_time;
15  vec3 color = palette(t);
16  gl_FragColor = vec4(color, 1.0);
17}
18`;

Notice the GLSL types such as vec3 and float. Those are valid in the shader, not in plain JavaScript.

Common Pitfalls

The biggest mistake is mixing JavaScript syntax into GLSL code or vice versa. A shader function must follow GLSL rules, not JavaScript rules.

Another issue is forgetting to check compilation errors. If a shader function is written incorrectly, gl.getShaderInfoLog usually tells you where the GLSL compiler got confused.

It is also common to rebuild shader source when only the input values are changing. Uniforms are usually the correct mechanism for that.

Finally, remember that WebGL 1 fragment shaders need a precision declaration such as precision mediump float;. Missing that line can produce confusing errors on some devices.

Summary

• Shader functions are written in GLSL, even when the source appears inside JavaScript code.
• JavaScript manages WebGL setup, compilation, uniforms, and drawing.
• Store GLSL source in strings, compile it, and inspect compile logs on failure.
• Use uniforms for dynamic runtime values instead of regenerating shader source.
• Keep the JavaScript-to-GLSL boundary clear and most shader-writing confusion disappears.