{"id":344,"date":"2017-01-29T16:56:20","date_gmt":"2017-01-29T16:56:20","guid":{"rendered":"https:\/\/c60.ca\/wordpress\/?p=344"},"modified":"2017-01-29T16:56:20","modified_gmt":"2017-01-29T16:56:20","slug":"using-glsl-in-quartz","status":"publish","type":"post","link":"https:\/\/c60.ca\/wordpress\/2017\/01\/using-glsl-in-quartz\/","title":{"rendered":"Using GLSL in Quartz"},"content":{"rendered":"<p>A Few years ago I stumbled on some <a href=\"http:\/\/glslsandbox.com\">interesting<\/a> <a href=\"http:\/\/shadertoy.com\">sites<\/a> that used <a href=\"http:\/\/nehe.gamedev.net\/article\/glsl_an_introduction\/25007\/\">GLSL<\/a> programs to create some neat visuals.<br \/>\nA bit of an introduction.\u00a0 There&#8217;s many libraries for making graphics in computers but one that has been around for quite a while and is used in many places is called <a href=\"https:\/\/www.opengl.org\/\">OpenGL<\/a>.\u00a0 It takes care of a lot of the underlying details so you can specifiy a box or a cube or just triangles and have it draw something on your screen in a 3D world.\u00a0 GLSL is a subset of OpenGL written specifically for GPU&#8217;s, ie your graphics card. \u00a0\u00a0 This allows you complete control and very low level control over exactly how those triangles get converted to colored pixels on your screen.<br \/>\n<!--more--><br \/>\nThe two sites I found with so many nice examples were <a href=\"http:\/\/glslsandbox.com\">http:\/\/glslsandbox.com<\/a> and <a href=\"http:\/\/shadertoy.com\">http:\/\/shadertoy.com<\/a>.\u00a0 These sites would show you the code used and the output.\u00a0 You can go in change little bits and see the results almost immediately.\u00a0 This was all well and good but I&#8217;ve been using quartz plugins to help create live visuals when I&#8217;m doing performances, so how do I utilize all these neat GLSL examples.<br \/>\nIt turns out most programming languages and graphics libraries support GLSL and quartz is no different.\u00a0 There are a few differences which usually comes down to different naming conventions used in various implementations.<br \/>\nIf you don&#8217;t know what quartz is or find code scary, look away now.<br \/>\nThis is aimed at Mac users.\u00a0 Apple doesn&#8217;t install Quartz Composer by default.\u00a0 The only way to install it is log into apple developer site and use your apple id.\u00a0 Search for additional tools for <a href=\"https:\/\/developer.apple.com\/download\/more\/?=for%20Xcode\">Xcode<\/a> .\u00a0 That contains Quartz Composer among other things.<br \/>\nMost VJ programs, VDMX, Resolume, Vidvox, CoGe, all support quartz plugins as input sources, some also support them as effects plugins (VDMX and CoGe).\u00a0 To use the Quartz Plugins you make and have them expose some controls in the program you&#8217;re using requires a specific setup.<br \/>\n&nbsp;<br \/>\n&nbsp;<\/p>\n<ul>\n<li>Make a new Quartz Patch from Template, Choose Image Filter.<\/li>\n<li>Select Editor -&gt; Edit Protocol Conformance -&gt; Graphic Animation<\/li>\n<li>Add a GLSL Shader Patch from your library &#8211; It will complain that it has to disable some protocol conformance, It&#8217;ll remove the image filter conformance, that&#8217;s fine.\u00a0 You can get ride of the image input -&gt; process Image -&gt; output image nodes<\/li>\n<li>Double Click the GLSL Shader macro and add a sprite patch there if it&#8217;s not already<\/li>\n<li>Now Edit parent<\/li>\n<li>Click the GLSL shader and select Settings from the Patch Inspector or command-2<\/li>\n<li>Now you will be at the Vertex and Fragment Shader editors. You can largely ignore the vertex shaders, at least so far I&#8217;ve only been experimenting with Fragment Shaders which control the way the color is calculated wheras the Vertex Shaders can control how all the triangles are manipulated in space.<\/li>\n<li>Select Fragment Shader and paste in some GLSL code from GLSLsandbox.com<\/li>\n<\/ul>\n<p>Let&#8217;s try this <a href=\"http:\/\/glslsandbox.com\/e#38198.0\">code<\/a> snippet<\/p>\n<pre>uniform float time;\nuniform vec2 mouse;\nuniform vec2 resolution;\nfloat h (float n) {\n\u00a0\u00a0\u00a0 return sin(sin(n)*158.5453);\n}\nvec2 f (float n) {\n\u00a0\u00a0 \u00a0n -= time * 1.9;\n\u00a0\u00a0 \u00a0return vec2(h(n*.0057)*2., h(n*.0048)*2.);\n}\nvoid main (void) {\n\u00a0\u00a0 \u00a0vec2 uv = (gl_FragCoord.xy\/resolution.xy) * 2. - 1.;\n\u00a0\u00a0 \u00a0uv.x *= resolution.x\/resolution.y;\n\u00a0\u00a0 \u00a0float a = time*.5;\n\u00a0\u00a0 \u00a0vec3 o = vec3(f(0.),0.);\n\u00a0\u00a0 \u00a0vec3 r = normalize(vec3(uv + (f(.6)-o.xy), 1));\n\u00a0\u00a0 \u00a0vec3 p;\n\u00a0\u00a0 \u00a0float t = 0.;\n\u00a0\u00a0 \u00a0for (int i=0; i&lt;32; ++i) {\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0p = o+t*r;\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0float k = 16.;\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0float d = length(p.xy - f(p.z)) - 3.11 ; \/*+ .2 * sin(k*p.x)*sin(k*p.y)*sin(k*p.z)*\/;\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0t += d*.5;\n\u00a0\u00a0 \u00a0}\n\u00a0\u00a0 \u00a0vec2 c = f(p.z)-fract(f(p.z)*9.)-fract(p.x*9.);\n\u00a0\u00a0 \u00a0gl_FragColor = vec4(vec3(c,c.y\/c.x)*8.\/(t*t), 1);\n\u00a0\u00a0 \u00a0}\n<\/pre>\n<p><a href=\"https:\/\/c60.ca\/wordpress\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-2.09.27-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-353 size-medium\" src=\"https:\/\/c60.ca\/wordpress\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-29-at-2.09.27-PM-300x185.png\" width=\"300\" height=\"185\" \/><\/a><br \/>\nThe first variable declarations, namely :<\/p>\n<pre> uniform float time;\n uniform vec2 mouse;\n uniform vec2 resolution;<\/pre>\n<p>Those variable when referenced from within your program get a corresponding input node in your quartz patch.\u00a0 If however you just named the variable, such as in the case of &#8220;uniform vec2 mouse;&#8221; since I never used the variable within the GLSL code it never appears on your quartz patch.\u00a0 Something to do with how the GLSL actually gets compiled and ran for the hardware.\u00a0 Since the variable never gets referenced then it doesn&#8217;t need to be in the runtime.<br \/>\nThat&#8217;s basically all you have to do, now whatever GLSL code you put in the Fragment Shader you can now run in your favorite VJ program.<br \/>\nThere is a few more things you&#8217;ll want to do to make it behave sanely across programs. \u00a0one is to use Render dimensions to get the active dimensions, \u00a0also adding some &#8220;hooks&#8221; so you can control things inside of your GLSL Fragment. \u00a0typically this would be X,Y,foreground color, background color, and pace.<br \/>\nTo do this open up Editor -&gt; Edit Protocol Conformance , and make sure Graphic Animation is selected.\u00a0 To be fair I just tried this and it didn&#8217;t work.\u00a0 I had to first start a new patch using the Image Filter Template then it would properly add the values when I selected Graphic Animation in Protocol Conformance Editor Section.\u00a0 Sadly this par for the course with Quartz, the little forgotten App that runs almost everything apple but is rarely given so much as a glance from the corporate masters.\u00a0 I digress.<br \/>\nHaving these properly named input&#8217;s will ensure it&#8217;ll function as a standard plugin no matter what host you put it into.\u00a0 You could even use these on an iphone when designing an app.<br \/>\nThe one other thing I alluded to but didn&#8217;t say outright was that when pulling GLSL fragments from somewhere you generally have to change a few names or get ride of the odd thing.\u00a0 I found glslsandbox.com has almost the same syntax, but shadertoy you have to change the odd thing.\u00a0 Sadly Quartz has about the worst editor you can imagine, here google is your friend as someone has probably stumbled across it before.<br \/>\nAs always in computers there is always something new and in the time that has passed to when I first did this and till today when I revisted some of this information I noticed there are many examples within the GLSL patch library selector.\u00a0 Every day there is also new GLSL fragments to try on the various sites.<br \/>\n&nbsp;<br \/>\nHere&#8217;s a few of the example patchs<br \/>\n<a href=\"http:\/\/c60.ca\/dropbox\/GLSLNewTest.qtz\">GLSLNewTest<\/a><br \/>\n<a href=\"http:\/\/c60.ca\/dropbox\/Heart.qtz\">Heart<\/a><br \/>\n<a href=\"http:\/\/c60.ca\/dropbox\/Fractal-Noise.qtz\">FractalNoise<\/a><br \/>\nI meant to write this post awhile ago so I could get the starving artist discount for VDMX,\u00a0 Their currently running a back to school promotion so it&#8217;s time I finished this off.\u00a0 Expect to see some VDMX posts in the future.<br \/>\nIf you have any questions or are looking for people in this realm say <a href=\"mailto:\/\/info@c60.ca\">Hello<\/a>.\u00a0 I&#8217;m currently looking for new opportunities.<br \/>\n&nbsp;<br \/>\n*EDIT<br \/>\nAfter a quick response for the promotion I have VDMX!! Yeah.\u00a0 Seems like Vidvox has a way to use GLSL snippets without all the hassle of having to use quartz.\u00a0 Enter <a href=\"https:\/\/www.interactiveshaderformat.com\/\">Interactive Shader Fragments.<\/a> More info <a href=\"http:\/\/vdmx.vidvox.net\/blog\/isf\">here<\/a>, and <a href=\"http:\/\/vdmx.vidvox.net\/tutorials\/creating-and-installing-isf-fx\">here<\/a>.<br \/>\nLots of good tutorials to go through now \ud83d\ude42<br \/>\n&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A Few years ago I stumbled on some interesting sites that used GLSL programs to create some neat visuals. A bit of an introduction.\u00a0 There&#8217;s many libraries for making graphics in computers but one that has been around for quite a while and is used in many places is called OpenGL.\u00a0 It takes care of&hellip;<\/p>\n<div><a class=\"excerpt-more button\" href=\"https:\/\/c60.ca\/wordpress\/2017\/01\/using-glsl-in-quartz\/\">Continue reading <span class=\"screen-reader-text\">Using GLSL in Quartz <\/span><span class=\"meta-nav\">&rarr;<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":276,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-344","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3d"],"_links":{"self":[{"href":"https:\/\/c60.ca\/wordpress\/wp-json\/wp\/v2\/posts\/344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/c60.ca\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/c60.ca\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/c60.ca\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/c60.ca\/wordpress\/wp-json\/wp\/v2\/comments?post=344"}],"version-history":[{"count":0,"href":"https:\/\/c60.ca\/wordpress\/wp-json\/wp\/v2\/posts\/344\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/c60.ca\/wordpress\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/c60.ca\/wordpress\/wp-json\/wp\/v2\/media?parent=344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/c60.ca\/wordpress\/wp-json\/wp\/v2\/categories?post=344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/c60.ca\/wordpress\/wp-json\/wp\/v2\/tags?post=344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}