Here is where you can find all sorts of useful information pertaining to creating shaders within ShaderShop. We will go over the creation of your first shader. What uniform variables are and how to use them, how to make a basic circle shader, what GLSL even is, and finally how to export a ShaderShop shader to Shadertoy.
Creating your first shader is easy. Delete from line 5 to line 35. Remove lines 39 to 42 and lines 44 to 52.
You should now have just the basics required to make a shader. Hit that compile button the in the bottom left corner and you should see a fully black shader.
You're done! You made your first shader! Congratulations!
Okay, let's make a circle now. This is a bit more involved, but still extremely simple. Let's walk through it.
First, go ahead and remove the lines shown in "Creating your First Shader", you should now just have a black screen. Right after the line that says "vec3 color = vec3(0.0);", press enter a couple times and add this line "color = vec3(length(uv));". The length function basically says for whatever point you give it, it will tell you how far away that point is from the center of the screen. We pass in uv to the length function and for each pixel in the shader, it will ask the question, how far away am I from the center of the screen.
If we then use those brightness (distance) values directly on all 3 channels (rgb) of our color, we are able to see a visual representation of the distances of each pixel to the center of the screen. Which in turn, gives us a nice little circle.
OpenGL Shading Language (GLSL) is a high-level shading language based on the 'C' language. It was created to give developers more control of the graphics pipeline without having to use ARB Assembly language or hardware-specific languages.
GLSL is executed directly by the graphics pipeline. There are quite a few different types of shaders, but the most used are the Vertex Shader and the Fragment Shader (Pixel Shader). Vertex Shaders transform shape positions into 3D drawing coordinates. Fragment Shaders compute the renderings of a shape's colors and other attributes.
GLSL is not as intuitive as JavaScript. GLSL is strongly typed and there is a lot of math involving vectors and matrices. It can get very complicated, very quickly, which is why there are libraries such as Threejs to ease some of those complications.
Even with the complications, glsl is still the most flexible, fastest way of interacting directly with the GPU.
Convert any references of u_mouse to iMouse, any references of u_time to iTime.
Copy all the text inside the function "void mainImage(out vec4 c, in vec2 fc)". Paste this directly inside a new ShaderToy shader. Any function that you created can also now be copied over, making sure to replace u_time and u_mouse with iTime and iMouse, respectively.