Glsl Shaders Tutorial
Joke Grinman
So I think that I must ask for a vulkan extension to handle glsl shaders instead of Spir-v but I am not sure how to do that as this is my first time handling the API and I don't know what code I am looking for. I tried reading the tutorial and the documentation but I cannot find how to fix it.
Vulkan expects SPIR-V shaders (Standard Portable Intermediate Representation). Only through extensions do vulkan implementations allow other inputs for shaders. Khronos group has provided a GLSL -> SPIR-V compiler which you can either embed into your application and compile at runtime, or precompile on build and ship with your application. This compiler ships with the LunarGSDK. Use of the glslang compiler is explained in the Vulkan Tutorial here. You can compile via the command:
I believe you must use the proper file extension (.frag, .vert. .comp etc.. which was not used in OpenGL) for the compiler to recognize the shader. More information on the standalone compiler can be found here. Using this method you would run the glslangValidator as part of your build step.
SPIR-V is a low level assembly like language that is represented by a binary file provided to the vulkan driver. The driver can then JIT compile the shader, allowing you to have the same shader code no matter the vulkan driver. What's different here is that the driver isn't forced to carry out all the compilation steps required if they were given a human readable text representation of the code The driver only needs to understand this low level assembly representation. This allows the developer to use what ever language front end that compiles to SPIR-V (which now includes HLSL). As an added benefit, this removes a huge overhead from the driver that reduces a major source of bugs for the maintainer of the driver, and means that you don't need to store programs as plain text that can easily extracted when you publish your application.
To use GLSL shaders in Vulkan, you need to enable and use a specific extension (I don't remember its name, will check that later). But as far as I know, not too many vendors support it. It was originally created by Nvidia, but I think even they stopped supporting it. The core Vulkan API only supports SPIR-V shaders. But it's not hard to convert GLSL to SPIR-V.
Tomorrow, Wednesday April 29th, I'll welcome advanced users for a deep dive on GLSL Shaders. We'll start with ways to source existing shaders from sources like GLSL Sandbox and ShaderToy and TroikaTronix's own GLSL Shader collection, move on to experiment with modifying shaders ourselves, and finally I'll show you a new, very nerdy (but very useful!) command line tool that will convert many of the existing ISF Shaders to the Isadora format. By the end of this tutorial, you'll be end up with new sources of imagery and palette of new effects for your toolbox.
I am trying to find a dither shader and get it to work (I talked about this a year or so ago on the forum - but I'm still no wiser!) - it either looks too high res or completely anti aliased. I've tried changing resolution in video preferences / turning shader full frame anti aliasing off, and changing resolution in the shader.
Is there some hidden thing I need to switch? (@Maxime - you seemed to have more success with the Obra Dinn shader)
@mark - thankyou - most of the other shaders didnt have a second input so I wasnt really focusing on that, but seems to be a clue to the puzzle. replacing that with the bayer tile from here (channel 0 menu) seems to help? anyway, I'll keep experimenting - thanks again for the tips
The webcam is video input 1 (iChannel0) but it needs a texture for video input 2, as seen in the iChannel1 input. The problem with ShaderToy is that it is not very apparent which texture has been chosen because it's scaling and anti-aliasing it in the preview. :-(
But then the question becomes, how do you get that texture? At the moment, the site ShaderToy Unofficial has a page that gives links to the textures under the section ShaderToy Media Files. Hopefully the image I've circled looks familiar from above:
I also worked around the error in the ShaderToy 4x4 Bayer Dithering shader. It needs to do an integer modulo operation (the '%' operator) which macOS doesn't want to do. But I created a function to peform the modulo called "modulo" which you'll see in the code.
For both of these shaders, I made three scenes: one at the native resolution of the camera, one scaled to 640x360, and one scaled to 320x180. This will change the look of the final image, as smaller images may give you more of what you were hoping for.
I also made three versions of the bayer image png for the Dither Webcam patches. The 8x8 one I downloaded from ShaderToy Unofficial didn't look as good as a 96x96 pixel image I got from ShaderToy itself. The patches are set to use the 96x96 pixel version of the 8x8 matrix, but you can experiment with the 8x8 pixel, 96x96pixel, and 192x192pixel matrix images to see what you like best.
@mark thankyou, this is great! - I'm definitely getting a better range of sizes by using the izzy scaler and the bayer tile.The lowest I can seem to keep it relatively crisp is about 160 x 90. (my need to get it lower is funnily enough to generate knitting patterns!)
If you need the image to stay really low res, set the stage size to something low in the Stage Setup editor, and then use the "Capture Stage to Picture" actor to grab a picture at that resolution.You can then scale it up in an image editing program. Here's a patch with the stage set to a custom size of 128x72 as shown below.
Thanks for this session!
GLSL seems to be a great way to manipulate images and adding some customs tools in Isadora.
I've been playing a bit with some Shadertoy shaders, and I found this answer from @mark about multi-pass shaders on the forum very useful: That works well. Maybe those informations could be added to the GLSL Shader Actor Tutorial ?
I would add that sometimes, in a multi-pass shader, when a "channel" needs itself (by example if iChannel0 calls iChannel0), we can add an empty GLSL node to make a loop. Here is a little example based on this reaction-diffusion shader: Reaction-diffusion_002.izz (sorry I'm still on 2.6).
Otherwise, there are some amazing shaders that use cubemaps on Shadertoy. I know there is a lot of work in many areas on Isadora, and I don't know how much it's complicated to make it working, but it could be a very cool feature for a next release!
Or maybe someone knows a way to avoid cubemaps (I was wondering if it's possible to use 2d textures as a cubemap...) ?
Hi Mark....fantastic resource the guru sessions....have watched all but one - you're a fantastic tutor :-) I'm having an issue with getting the isf shaders to batch convert using the windows bat file you included. I've included the command window response for your perusal. I'm pretty sure I have the files and the bat command in the same download file....but maybe its me.
1) Go to the ISF Files github
2) Click the "Clone or Download" button and choose "Download ZIP"
3) After the download completes, verify you now have a file called ISF-Files-master.zip in your download folders.
4) Right-click the .zip file and extract the contents of the .zip so that you see a folder called ISF-Files-master in your downloads folder. (Here are instructions on how to extract a zip file to a folder.)
@mark Hi Mark, yes ISF-Files-master is in my downloads folder, I ran the script but unfortunately no success.....it's probably my fault but a bit stumped on this one. See further screen grab, following another test. I downloaded everything again just to make sure.......
This tutorial does not intend to replace the specs as THE source to fully grasp GLSL and OpenGL, check the documentation at the OpenGL documentation page. The specs are essential, but can be hard as a learning starting point. So consider this tutorial as a gentle introduction to the theme.
As always, your cooperation is a must to get things right. Tutorials always have bugs, mistakes, and things that are not clearly explained. Furthermore, I might get somethings wrong, but please be gentle :-). Your feedback is important.
The tutorial starts with an overview of the pipeline. It describes all its components, and introduces the relevant GLSL bits for each. It then proceeds to the OpenGL side, looking at the setup procedure to have our shaders loaded, compiled, linked, and finally running.
I just create some classes to be able to write GLSL directly inside a java class to be able to create OOP-shader-structure.Everything works fine but I would like to represents exactly the 6 processing shaders, then I'll just have to extend it to create my own shader (as Processing works actually)
And I rebuild the shaders I found in the tutorial using my tool. Everythings worked just fine, the GLSL code generated is exactly the same than the one found in the tutorial but the results on the screen are almost the results I got with "true-processing-shader" but not exactly.
I would like to join every part of the shader-process in a single java class, then the shader will contains its own buffers and it becomes possible to extends the shader to another shader without buffer-missing-issue.
This tutorial will introduce you to OpenGL Shader Language (GLSL) programs and how to make use of them within Isadora v2.5 and later. GLSL is a very advanced programming language; if you are an artist or designer, the source code for a GLSL program can be a bit intimidating on first glance. Nevertheless, if you consider yourself a maker or tinkerer, and can devote a bit of time to experimenting, this tutorial will show you how to make use of this very powerful image processing technology in Isadora.
GLSL is a programming language, similar in style to the C programing language, that tells your graphics card (GPU) how to manipulate or generate images. The power of GLSL shader programs is that, unlike programs that run in your computer's main processor (CPU) they run in parallel for every pixel of the image. This means they are incredibly fast, even with very high resolution images.
c80f0f1006