Fragment shader functions not in working order

[m0ose]

What is wrong?

I have a problem with a shader. The functions in the shader are not in the correct order. I am trying to add roughly 20 functions, and they are breaking the compiled fragment shader. The problematic shader has some functions defined before functions it depends on, which apparently does not work in webGL. I rearranged the shader functions by hand and it works fine.

Where does it happen?

A website running GPU.js on my desktop Mac mini (specifically this website https://m0ose.github.io/jsSketches/gpgpuTest/index2.html)

How do we replicate the issue?

I put the example webpage here https://m0ose.github.io/jsSketches/gpgpuTest/index2.html , and the source code for it is here https://github.com/m0ose/jsSketches/tree/master/gpgpuTest .
The first time it tries to run the kernel it uses the compiled shader, and throws an error. Then, it sets the shader to the hand edited one(with the functions in a different order) and it works.
Specifically, I had to change the order of these functions to get it to work, https://github.com/m0ose/jsSketches/blob/master/gpgpuTest/reorganizedFragmentShader.js#L473-L531 .
Here is the original runtime compiled shader for reference, https://github.com/m0ose/jsSketches/blob/master/gpgpuTest/originalFragmentShader.js#L540-L545 .

How important is this (1-5)?

𝜋

Expected behavior (i.e. solution)

I am not sure what is causing this bug. I was not able to extract a smaller example, which might show the problem better. Could it be caused by the function names?

Other Comments

This is an Amazing library.