• Products
    • Isadora
    • Get It
    • ADD-ONS
    • IzzyCast
    • Get It
  • Forum
  • Help
  • Werkstatt
  • Newsletter
  • Impressum
  • Dsgvo
  • Press
  • Isadora
  • Get It
  • ADD-ONS
  • IzzyCast
  • Get It
  • Press
  • Dsgvo
  • Impressum

Navigation

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Popular
    • Tags

    Guru Session #11: GLSL Shaders (Wed Apr 29th, 6pm CEST/5pm GMT/12pm EDT/9am PDT)

    Events
    glsl glsl shader guru-sessions tutorials isf
    6
    24
    10204
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • mark
      mark last edited by Woland

      Dear All,

      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.

      All sessions begin at 6pm CEST/5pm GMT/12pm EDT/9am PDT.

      Links for the live stream link and materials for this session will be published here at 5:50pm CEST on May1st.

      See you there!

      Warm Wishes + Stay Safe,
      Mark

      Media Artist & Creator of Isadora
      Macintosh SE-30, 32 Mb RAM, MacOS 7.6, Dual Floppy Drives

      1 Reply Last reply Reply Quote 3
      • mark
        mark last edited by mark

        Download the materials for this session.

        *** NOTE *** The recording of the livestream is offline for a few hours while we make an edit... it will be online again by Thursday Morning, Apr 30th. *****

        Watch the live stream (also good for later viewing)

        See you in a little bit! ;-)

        Best Wishes,
        Mark

        Media Artist & Creator of Isadora
        Macintosh SE-30, 32 Mb RAM, MacOS 7.6, Dual Floppy Drives

        1 Reply Last reply Reply Quote 0
        • Astrid
          Astrid last edited by Astrid

          Thnx again for this session!

          Although I'm not a coder, I think I could follow most of what you demonstrated.

          Sadly my custom parameters/inputs were not working in any of the shaders I tried them on (not sure if my screenshots are uploading..)

          When typing the code, no compile errors, but also no changes to the actor after compile/ok.

          When I copy pasted the text, from the chat:

          uniform float dark_factor;
          // ISADORA_FLOAT_PARAM(dark_factor, dkfa, 0.0, 1.0, 0.125, "This is the amount of darkness.");
          



          I get messages like :

          FRAG ERROR: 0:14: '<' : syntax error: syntax error<a href="/assets/uploads/files/1588182227804-screenshot-2020-04-29-at-19.16.00-resized.png"></a>
          

          Astrid

          mostly on:
          MacBook Pro (15-inch, 2018)
          2,2GHz 6- Core i7
          16 GB 2400 MHZ DDR4
          Radeon Pro 555X 4 GB
          Intel UHD Graphics 630 1536 MB

          1 Reply Last reply Reply Quote 0
          • Juriaan
            Juriaan Tech Staff last edited by

            @Astrid 

            Could you share the GLSL code that you put inside your code window ? Upload it to Gist / Pastebin or use a Code block here on the forum. Then we can take a look with ya :)

            Isadora 3.1.1, Dell XPS 17 9710, Windows 10
            Interactive Performance Designer, Freelance Artist, Scenographer, Lighting Designer, TroikaTronix Community moderator
            Always in for chatting about interaction in space / performance design. Drop me an email at hello@juriaan.me

            Astrid 1 Reply Last reply Reply Quote 0
            • Videosmith
              Videosmith last edited by

              Resolution problems with lo-res shaders / dither


              Hi Mark - thankyou for the session. It's a complex area to get my head around but I grasped some of it - im sure the video will be rewatched!

              If anyone can help me in my lo-res quest  - 

              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)

              I've made a list below of examples I've used, and errors (for those that don't compile) - if anyone can get a nice crisp dither shader running in izzy please let me know - that would be awesome!


              Examples that compile image is too high resolution / anti aliasing

              • 1-Bit Waves - https://www.shadertoy.com/view/WtsXW2
              • Obra Dinn dither - https://www.shadertoy.com/view/4sySzw
              • Classic Mac floyd-steinberg-ish - https://www.shadertoy.com/view/4sjGRD


              Examples that give errors and won't compile:

              • Dither Webcam - https://www.shadertoy.com/view/wsjSRd

              Error:

              FRAG ERROR: 0:20: Invalid call of undeclared identifier 'round'

              • Bayer maxtrix dithering explorer  - https://www.shadertoy.com/view/WtjSzm

              Error:

              syntax error: Array size must appear after variable name

              • 4x4 Bayer Dithering - https://www.shadertoy.com/view/WstXR8

              Error:

              FRAG ERROR: 0:29: '%' does not operate on 'int' and 'int'
              FRAG ERROR: 0:29: '%' does not operate on 'int' and 'int'
              FRAG ERROR: 0:37: Use of undeclared identifier 'bayerValue'
              FRAG ERROR: 0:38: Use of undeclared identifier 'bayerValue'
              FRAG ERROR: 0:39: Use of undeclared identifier 'bayerValue'

              Sam Meech - artist and videosmith - hello@smeech.co.uk | @videosmithery
              MacBook Pro (Retina, 13-inch, Mid 2014 - OS 10.13.6 Hi Sierra)

              1 Reply Last reply Reply Quote 0
              • Juriaan
                Juriaan Tech Staff last edited by

                @Videosmith 

                Ditter webcam 

                https://gist.github.com/Juriaa...

                Regarding your 4x4 Bayer Dithering, the code works fine as is. What operation system are you on / what version of Isadora ?

                Isadora 3.1.1, Dell XPS 17 9710, Windows 10
                Interactive Performance Designer, Freelance Artist, Scenographer, Lighting Designer, TroikaTronix Community moderator
                Always in for chatting about interaction in space / performance design. Drop me an email at hello@juriaan.me

                Videosmith 1 Reply Last reply Reply Quote 0
                • Videosmith
                  Videosmith @Juriaan last edited by

                  @juriaan hi  - im working on Isadora version 3.0.7 , OS 10.13.6 Hi Sierra - MacBook Pro (Retina, 13-inch, Mid 2014 - 3 GHz Intel Core i7, 16 GB 1600 MHz DDR3, Graphics Intel Iris 1536 MB )

                  thanks for the code - it compiles, but im still having the same issues regards resolution (see images) - what does it look like for you?

                  Sam Meech - artist and videosmith - hello@smeech.co.uk | @videosmithery
                  MacBook Pro (Retina, 13-inch, Mid 2014 - OS 10.13.6 Hi Sierra)

                  mark 1 Reply Last reply Reply Quote 0
                  • mark
                    mark @Videosmith last edited by

                    @videosmith said:

                    thanks for the code - it compiles, but im still having the same issues regards resolution (see images) - what does it look like for you?

                    Maybe you need to connect both video inputs... did you do that?

                    Best Wishes,
                    Mark

                    Media Artist & Creator of Isadora
                    Macintosh SE-30, 32 Mb RAM, MacOS 7.6, Dual Floppy Drives

                    Videosmith 1 Reply Last reply Reply Quote 0
                    • Videosmith
                      Videosmith @mark last edited by Videosmith

                      @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 https://www.shadertoy.com/view/WtsXW2 (channel 0 menu) seems to help?  anyway, I'll keep experimenting - thanks again for the tips  

                      Sam Meech - artist and videosmith - hello@smeech.co.uk | @videosmithery
                      MacBook Pro (Retina, 13-inch, Mid 2014 - OS 10.13.6 Hi Sierra)

                      mark 1 Reply Last reply Reply Quote 0
                      • mark
                        mark @Videosmith last edited by mark

                        @videosmith

                        [NOTE: my reply is for Sam, but this info is useful for all! Please read. ;-) ]

                        OK, I think I've gotten some dithers worked out for you.

                        First, regarding the ShaderToy code for Dither Webcam:

                        Remember what I said in the tutorial regarding looking at the iChannel0, iChannel1, inputs, etc. Look at this part of the page:


                        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. :-(

                        In the end, I determined it was the texture called Bayer which is an 8x8 grid of greyscale values. (Bayer is a technique used for dithering, that was my clue.)

                        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:


                        So I clicked that and downloaded it. If you provide that as the second input, the dithering works.

                        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.

                        In addition, I added a 'color amt' parameter to this shader to allow you to see the dithered color (the default for the ShaderToy) or a black and white version.

                        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.

                        Let me know what you find and if this gives you what you were looking for.

                        glsl dithering.zip

                        Best WIshes,
                        Mark

                        Media Artist & Creator of Isadora
                        Macintosh SE-30, 32 Mb RAM, MacOS 7.6, Dual Floppy Drives

                        Videosmith 1 Reply Last reply Reply Quote 0
                        • Videosmith
                          Videosmith @mark last edited by

                          @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!)

                          Sam Meech - artist and videosmith - hello@smeech.co.uk | @videosmithery
                          MacBook Pro (Retina, 13-inch, Mid 2014 - OS 10.13.6 Hi Sierra)

                          mark 1 Reply Last reply Reply Quote 0
                          • mark
                            mark @Videosmith last edited by mark

                            @Videosmith 

                            Well, one of the problems is that Isadora is going to scale this image up to the stage size, and then it's going to get blurry because of the scaling.

                            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.


                            Here's an example snap of the stage using my webcam.


                            Same image scaled up in Photoshop using Nearest Neighbor resampling to preserve the hard edges:


                            And a black and white version...



                            Maybe that helps?

                            Here's the patch: glsl dithering small stage.izz

                            Best Wishes,
                            Mark

                            Media Artist & Creator of Isadora
                            Macintosh SE-30, 32 Mb RAM, MacOS 7.6, Dual Floppy Drives

                            Videosmith 1 Reply Last reply Reply Quote 2
                            • Videosmith
                              Videosmith @mark last edited by Videosmith

                              @mark cheers again for looking at this - it seems like a good work around at least for creating still images outseide of real-time. here is a 128 x 72 stage capture scaled up in photoshop x 300 % , and a 32 x 18 scaled up 1000%


                              Sam Meech - artist and videosmith - hello@smeech.co.uk | @videosmithery
                              MacBook Pro (Retina, 13-inch, Mid 2014 - OS 10.13.6 Hi Sierra)

                              1 Reply Last reply Reply Quote 0
                              • avienne
                                avienne last edited by

                                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: https://community.troikatronix... 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: https://www.shadertoy.com/view... 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...) ?

                                Isadora 3.0.7 | Win10 i7 Gtx1070 | Mbp 15" 2015 i7 Amd R9

                                1 Reply Last reply Reply Quote 0
                                • L
                                  Light FX UK last edited by

                                  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.

                                  Regards

                                  Gavin

                                  mark 1 Reply Last reply Reply Quote 0
                                  • mark
                                    mark @Light FX UK last edited by

                                    @light-fx-uk said:

                                    I've included the command window response for your perusal. 

                                     Where? I don' see it.

                                    Best Wishes,
                                    Mark

                                    Media Artist & Creator of Isadora
                                    Macintosh SE-30, 32 Mb RAM, MacOS 7.6, Dual Floppy Drives

                                    L 1 Reply Last reply Reply Quote 0
                                    • L
                                      Light FX UK @mark last edited by

                                      @mark sorry its here.....ony recently entered the forums so finding my feet....

                                      1 Reply Last reply Reply Quote 0
                                      • mark
                                        mark last edited by

                                        @Light-FX-UK 

                                        Did you download the ISF files to your downloads folder?

                                        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.)

                                        The script if the ISF-Files-master folder is in your downloads folder.

                                        Best Wishes,
                                        Mark

                                        Media Artist & Creator of Isadora
                                        Macintosh SE-30, 32 Mb RAM, MacOS 7.6, Dual Floppy Drives

                                        L 1 Reply Last reply Reply Quote 0
                                        • L
                                          Light FX UK @mark last edited by

                                          @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.......

                                          1 Reply Last reply Reply Quote 0
                                          • mark
                                            mark last edited by

                                            @Light-FX-UK 

                                            From what I see above, the path in your downloads folder is something like

                                            C:\Users\YOUR_USER_FOLDER_NAME\Downloads\ISF-Files-Master (1)\ISF Files master

                                            that won't work. (The underlined and bold part is wrong.) It must be exactly:

                                            C:\Users\YOUR_USER_FOLDER_NAME\Downloads\ISF-Files-Master

                                            Best Wishes,
                                            Mark

                                            Media Artist & Creator of Isadora
                                            Macintosh SE-30, 32 Mb RAM, MacOS 7.6, Dual Floppy Drives

                                            L 1 Reply Last reply Reply Quote 1
                                            • First post
                                              Last post