HISE Logo Forum
    • Categories
    • Register
    • Login

    Shader Knobs

    Scheduled Pinned Locked Moved General Questions
    9 Posts 4 Posters 516 Views
    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.
    • C
      crd
      last edited by

      I am starting to dig into some of the options in Hise for using shaders.

      Does anyone have any examples of 3d knobs they would be willing to share?

      Anything to watch out for? If I manage to adapt any of the knobs from shadertoy.com I will make sure to put the snippets here.

      Christoph HartC 1 Reply Last reply Reply Quote 0
      • Christoph HartC
        Christoph Hart @crd
        last edited by Christoph Hart

        @crd

        That's a basic HISE snippet that uses a Panel with a (very basic) slider drag logic.

        slider.gif

        HiseSnippet 1016.3ocsV81iaSCG1o2kwRfgXR6U7pn9BTp3VnkM1PBgnbs2AUr6VEc6z1ql743lXcN1QNN8nBNI9nwGI9F.+rSRStspxVknunp+9qe7O+3G24JIgVTHUHGuWrNmhb9D2EqE5zIoXl.MaJx4ScOCWnopfJWGuNGWTPiQNNG7SFGNdGhre96e3XLGKHzVWHzERFg9LVFS25c93egw4mhioufk0I6GOdFQJlH4xR.OG3NDkiIWgSnmiMo0yE4bmShYZoZgFqoEPNGKiWuHUdsnJ+KXErK4TiwHzBnQUtQSRY734M60BDx4v4s67Cp14Ov8LVLai+1IvmYCDzVQ2YfSucAoQe.PxoCjNrBR22cAQwx0sQL34icmIfCjkXXT2EJU4h58GG3NQBYHzQY3qnmp.iMUD9jgCOJ.9Zv246Ci6BcvJrJXNVP4iB99flJSn5Ixrbo.LB6WEt+sqofyhopEovAopSkDEEFEUtC6uvljsxplDUP0ygQq9WkkZlfFtrTPzLoHLYf+u66kDgyy4qqqu6ZbTfNkUXP1yjDL+XYoHtHb3.n2d92XVAelfCsLnokARQ0hZvlRxCIMaoifc.ujZWQHXgjSixU.pBq7Csr6Ra.8KErkRU1TrFG12lU+lt.YuoyQJZtY6EVAK.U6djZZcM7lf47KAJe3aAa6Vqc5clrrftI2MiO5Jnu1MDaYkQDgyHWQiG36Ad8rSuX.9Qw.87BCxgislYp01B5a76zhXENotdyY9Jnhyv5zHEVjPC2VK+xfNk9pfGFzZ85AAeUviLDvgQvWihLrPOuFrUzfhUV2VejTyBEG1jnAdvYcmS3ykZ5yEg1ct+M9AucnkK2Zr5YKGHYaKrQZRsqBCEkYWZHksDIShvc2aKHbm2OAAREIoShRwLAS+7bZs8oRdr4ht42uq7AplkA+5kyLbTihRsOHubpRyLvwYJcEHIWou34NkVbkVlayslZhb9HsM58ZTeLLODCV565VwBQ+1FU6+JY75VIb13TJKIsUr+OWN9ZVrNsqCf4Jutg+BP5ycmX3oEGE7yxUfTxWDLE3JILQB7Vw6nIBpwx3RNVeaIZyaQ0AfioaoKZz9DEL85tuU8AnaObm51uuP79tyYZR51wXusfQ3.7+CLV+Z28bOY4RJQ2BvCcO8U66Sa+GKekTeBHbnX.0w87xrEvi7DJr5BfPAM20omgDWYOzXal.KnhXqw+.epCNxX6TGbTSPTFlnjugTc4z7d5csd.LIr+8AO3+w.1AiP1KrPctfHDJCdZ+MDhY6+P3d01q4q2iZdzdTyi2iZ9l8nlmrG07z8nlucm0X9WU+XoVlUcc.bL+DqxkiyIBLvrrrPz+BfWv.7C
        

        This is the shader code (Just paste this into the Slider.glsl file that is created when you load the snippet:

        // Shadertoy link: https://www.shadertoy.com/view/tdKXzz
        
        #define PI 3.14159
        #define N 6.
        
        // this connects HISE and the slider position...
        uniform float value;
        
        const float r1 = 0.75;
        const float r2 = 1./r1;
        
        vec4 over( in vec4 a, in vec4 b ) {
            return mix(a, b, 1.-a.w);
        }
        
        float nCap(vec2 uv, float angle, float r) {
            float a = atan(uv.y, uv.x)+angle;
            float b = a/PI*N/2.+PI*r2*2.0;
            float f = fract(b);
            float l = length(uv);
            float d = sin(f*PI*r2) * step(f, r1);
            return (1.-d*0.12)*r-l;
        }
        
        float line( in vec2 p, in vec2 a, in vec2 b ) {
            vec2 pa = p-a, ba = b-a;
            float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0 );
            return length( pa - ba*h );
        }
        
        void main() {
            vec2 uv = (fragCoord-iResolution.xy*0.5)/-iResolution.y*3.0;
            
            float av = -2.6 + 2.35 * sin(value)*PI*5./6.; // angle value
            
            mat2 m = mat2(cos(av), sin(av), -sin(av), cos(av));
            
            float a = atan(uv.y, uv.x);
            float l = length(uv);
        	float g = -1. + smoothstep(.5, -.5, uv.y) * 2.;
        
            vec4 col = vec4(0.0);
            
            if(l < .96) {
        	    float d = .0;
                for(float q = 0. ; q < 11. ; q += 1.) {
                    float aq = -PI*1./3.+q*PI*1./6.;
                    mat2 m = mat2(cos(aq), sin(aq), -sin(aq), cos(aq));
                    d += smoothstep(.002, .001, line(uv, vec2(.0, .0), vec2(.88, .0)*m)-.012);
                }
                col = over(vec4(vec3(.8), d), col); // divs
        
                float h = smoothstep(.04, .08, 1.25 - distance(vec2(.0, -1.4), uv))*.2
                    + smoothstep(.40, .7, l)*.01;
                col = over(vec4(vec3(.04), smoothstep(.001, .3, .88 - distance(uv, vec2(.0, .1)))*.75), col); // shadow
                col = over(vec4(vec3(.04), smoothstep(.001, .04, .74 - l)), col); // bottom
                col = over(vec4(vec3(.13+g*.04), smoothstep(.001, .01, .71 - l)), col); // bottom solid
                col = over(vec4(vec3(.13), smoothstep(.02, .001, abs(.64 - l))), col); // bottom outline
                col = over(vec4(vec3(.04), smoothstep(0.001, 0.06, nCap(uv+vec2(.0, -.12), av, .64))*.7), col); // cap shadow
                col = over(vec4(vec3(.09), smoothstep(0.01, 0.02, nCap(uv, av, .64))), col); // cap edge
                col = over(vec4(vec3(.16)+g*.1+h, smoothstep(0.001, 0.01, nCap(uv, av, .61))), col); // cap solid
                col = over(vec4(vec3(.24), smoothstep(.001, .01, .46 - l)), col); // cap top
                col = over(vec4(vec3(.44
                                     + pow(abs(sin(a)),10.)*(0.1+l*1.)
                                     + pow(abs(sin(a+1.4)),64.)*0.12
                                     + abs(sin(l*32.)+.5)*.02
                                     + g*.2
                                    ), smoothstep(.001, .01, .44 - l)), col); // cap metal
                col = over(vec4(vec3(.34), smoothstep(.001, .01, .050 - distance(uv, vec2(.0, -.52)*m))), col); // value edge
                col = over(vec4(vec3(.97), smoothstep(.001, .01, .042 - distance(uv, vec2(.0, -.52)*m))), col); // value fill
            }
            
            col.gb += vec2(.004, .006);
            
            fragColor = col;
        	fragColor.a *= pixelAlpha;
        }
        
        C ulrikU 2 Replies Last reply Reply Quote 5
        • C
          crd @Christoph Hart
          last edited by

          @Christoph-Hart

          Thank you.

          This stuff is pretty amazing. I am finding it pretty easy to go from shadertoy examples to Hise.

          ? 1 Reply Last reply Reply Quote 0
          • ulrikU
            ulrik @Christoph Hart
            last edited by

            @Christoph-Hart this snippet crash Hise here, what commit do I need to use this?

            This is what I have, develop version
            Skärmavbild 2022-02-19 kl. 10.10.35.png

            Hise Develop branch
            MacOs 15.3.1, Xcode 16.2
            http://musikboden.se

            ulrikU 1 Reply Last reply Reply Quote 0
            • ulrikU
              ulrik @ulrik
              last edited by

              @ulrik Ok you have to have OpenGl enabled then it will not crash, but it gives me error, I guess it's not working for mac

              Hise Develop branch
              MacOs 15.3.1, Xcode 16.2
              http://musikboden.se

              Christoph HartC C 2 Replies Last reply Reply Quote 0
              • Christoph HartC
                Christoph Hart @ulrik
                last edited by

                @ulrik Hmm, it works here on my Macbook Air M1. What system are you using? macOS is super picky with OpenGL, but normally you can make it run on any hardware.

                ulrikU 1 Reply Last reply Reply Quote 1
                • C
                  crd @ulrik
                  last edited by

                  @ulrik it’s working well for me on Mojave.

                  1 Reply Last reply Reply Quote 1
                  • ulrikU
                    ulrik @Christoph Hart
                    last edited by

                    @Christoph-Hart It works now :)
                    I didn't realise I had to delete the "void Main" function already created in the .glsl file

                    Hise Develop branch
                    MacOs 15.3.1, Xcode 16.2
                    http://musikboden.se

                    1 Reply Last reply Reply Quote 0
                    • ?
                      A Former User @crd
                      last edited by

                      @crd Yeah! Me too... But getting my head around shader code, in general, is nonetheless a bit of a challenge I find! 🤯

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

                      19

                      Online

                      1.7k

                      Users

                      11.9k

                      Topics

                      103.2k

                      Posts