Shader Knobs

[crd]

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 Hart]

@crd

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

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;
}

[crd]

@Christoph-Hart

Thank you.

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

[ulrik]

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

This is what I have, develop version

[ulrik]

@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

[Christoph Hart]

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

[crd]

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

[ulrik]

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

[A Former User]

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