Overview of GLSL, the OpenGL Shading Language

the OpenGL shading language or GLSL is an imperative programming language closely modeled after C and C++ in this overview I will go over the specifics of this language but some experience with programming in general is necessary feel free to pause the video if you need more time to process the information or to read everything that's shown the first line is usually the specification of the used version of the language overtime features were added to OpenGL and others were removed it might not be the best idea to just use the latest version because it has to be supported by the graphics hardware so people with older hardware won't be able to run it however the vast majority of features that you will probably need our presence since opengl 3.0 so version 1 3 OS should usually suffice and that's why it's the default GLSL version in Chadron each variable in GLSL has an explicit datatype the elementary type is float the 32-bit floating point number in shader calculations real numbers are much more common than integers however the classic int a 32-bit signed integer is also present both of these types have vector variants consisting of two to four floats or integers and there are also matrix variants for the float which consists of two times two to four times four floats the vector types are used as actual mathematical vectors but also as coordinates or color values there is also the boolean type which can only hold true or false but unlike C++ it isn't interchangeable with int and all logical expressions have this type the last type I will mention our samplers for example sampler 2d which represent references to textures in Chadron each image element is automatically converted to a sampler 2d this is not the complete list of base GLSL types but it covers the important ones I can see all commands are inside functions with one function serving as the shaders entry point typically the function called main in children however the entry point is specified by name for each image or animation so how do we create a function the declaration is almost identical to C we need to specify the return type or void if there is none followed by the functions name and the list of arguments in parentheses each with a type and a name separated by commas after that there is the body of the function enclosed by curly braces the result of the function is outputted by a return statement like this keep in mind that in Chadron you need to add the keyword GLSL before each function which is not part of the GLSL language but allows children to identify GLSL code a notable difference from C and C++ is that function parameters can be either input which is the default output meaning the function will set its value or both this substitute see pointers and C++ references which are absent the declaration of variables is also very similar to C simply enter the desired type followed by the variables name and a semicolon this way however the variable is uninitialized and its value unknown the value can be of course also set in the declaration like this or you can create multiple variables at once unlike original c variable declarations don't have to be at the beginning initializing the composite types is a little different from C or C++ though the value also needs to be on the right-hand side of the equal sign and to create a vector value we have something very similar to a C++ style constructor where the desired type is followed by individual components in parenthesis this is the initialization of a vector for matrices it is very similar here I would like to know that why spaces and new lines do not matter however these constructors are much more flexible for example you can also specify just one number which will be used for all the components of a vector this is by the way also the syntax of typecasting in GLSL or you can even compose a four dimensional vector from a 3d vector and a float or a matrix from vectors basically any combination works as long as the number of components adds up there are also arrays and here the syntax differs the most from C but I think it is actually more consistent with the other types the length of the array is always fixed and it is basically part of the type name therefore the declaration also follows the formula type then variable name and the value is also written as the type followed by the individual elements in parentheses the way arrays are passed into a function is similar the elements of the array are accessed the same way as in C and this syntax can also be applied on vectors and matrices to access their components however there is a more elegant way to access vector components called Swizz lling this is similar to how members of a structure are accessed in C the first component is under dot X the second dot Y and so on this can of course be used to set the values as well so there are two ways to access the individual components of vectors the array style and Swizz Lang however since vectors are also used to represent colors there are Eliza's for the RGB a color channels as well as for texture coordinates no vector has an explicit designation for what it represents so you can pick whichever of these you want to maximize the readability of your code additionally you can even use more than one of these ledges to extract parts of the vector they don't even have to be the same order and you can even use the same element multiple times Swiss link is really an amazing feature of GLSL that can greatly simplify your code now let's look at some more of the basic syntax comments for example are exactly the same as in C++ calling a function is also the same just type out the function name and put the arguments in parentheses function overloading is supported but recursion is forbidden there are control structures such as cycles and conditions but these aren't as common in shader programs there are almost exactly the same as in C++ with one difference being that the condition must strictly have a boolean type the for cycle includes the ability to declare the control variable in the statement itself if the body only consists of one statement the curly braces are optional this can be of course re-written as an equivalent while cycle then there is the if statement where the code inside it only runs if the condition is met and it can be followed by an optional else branch I would like to point out that due to the GPU architecture this may be very inefficient because all shader cores must be synchronized and therefore the portion of the course where the condition was false have to wait for the rest to go through the first branch and vice versa the control commands of GLSL are returned which exits a function and sets its result the break and continue loop controls there is no go-to command and lastly there is a special command discard which can only be present in a fragment shader and what it does is that it immediately exits the fragment shader without filling the fragment basically leaving a hole there then of course we have the mathematical operators again the same as in C there are the basic ones which can be applied on almost all base types then there are the integer specific and bit manipulation operators which are only available since opengl 3.0 then there are the logical and comparison operators which always have a bullying result and the ternary conditional operator which is just a shorthand for an if-else statement the operators have priorities just like in C and many related languages the well-known problem arising from all expressions having a definite type is also present so I strongly advise always including a dot 0 in laterals when working with floating-point values what is more interesting about these operators however is that they seamlessly work with vectors and matrices that means that adding two vectors or matrices together or subtracting them is trivial and so is multiplying them by a scalar value you can even add or subtract a vector and a scalar and it will be applied for each component multiplication can be also performed between a vector and a matrix or the other way around or between two matrices of the same size the result will be consistent with the mathematical definition of these operations which is very useful for coordinate transformations interestingly multiplying two vectors together just multiplies their individual components which isn't an established operation in linear algebra but is still quite useful for color blending fortunately if you need to obtain the dot or cross product of the vectors instead there are functions prepared for that called dot and cross if you prefer multiplying matrices component wise there is also a function for that there are actually plenty of built-in functions in GLSL including all of the major mathematical functions shown here and what is great about these is that they can also be applied on vectors which will automatically call the function for each component then there are also many functions specific to computer graphics which you probably won't find in the standard C++ libraries and I will mention a few of the major ones the clamp function clamps are value to a given range cutting off any values outside it the step function checks whether a value is higher than a given threshold it is there so that you can avoid the inefficient conditional statements the smooth step function is similar but maps arranged around the threshold to a smooth transition from 0 to 1 the mix function is an elegant way to write a weighted average of two values it is ideal for color gradients of course you can easily get the length of any vector or the distance between two points the normalized function will return a unit vector with the same direction as the one put in and lastly there are derivative functions they are only present in fragment shaders and they actually measure the differences in variables across neighboring fragments the DF DX function measures how a given value differs between neighboring fragments on the x-axis in the example below the local value of a is 5 it is 3 in the fragment on the left and 7 on the right therefore the local rate of change is 2 in the horizontal direction the DF dy is the same but for the y axis and the F width function gives an approximation of how much the value changes in any direction which is very useful for certain n tile icing techniques perhaps the most important function of all is the texture function which samples a color from a texture formerly in OpenGL 2 there were separate functions for each type of sampler so use these in version 120 or prior the texture function accepts a center of arrival for a regular 2d texture this would be a sample 2d or in Chadron this can also be an image for an animation the second argument is the texture coordinate a 2d vector for 2d texture the function returns the sampled color as a four-dimensional vector with RGB a channels for example when this image is bound as a texture sampling at these coordinates will yield this color the appearance of the image is reconstructed simply by sampling different points from the texture at each fragment that should be all you need to know to start implementing shaders in GLSL I hope this overview has been helpful and see you soon in the next tutorial

Channel: Shadron

Views: 79,629

Keywords: GLSL, OpenGL, shader, shaders, programming, Shadron

Id: uOErsQljpHs

Length: 13min 55sec (835 seconds)

Published: Sat Oct 08 2016