TUTORIAL: 3D Mesh Construction in Quartz Composer - Part 2

- Part 1

In the previous tutorial we used structures to construct a polygon mesh in the shape of a triangle. Now it’s time to add some colour to our vertices. This information needs to be presented to the Mesh Creator patch in much the same way as the vertex one. First though we will be converting our triangle to a square. In order to do this we will simply be adding one more vertex to our structure and changing the existing values to reflect the new shape. 

First change the number of inputs in the "Vertices" structure maker form 3 to 4, then we duplicate one of our existing vertex structures. When constructing a quad in OpenGl the vertex order is important, especially for later on when we will be adding texture coordinates. In this case it needs to begin from the Bottom Left Vertex, on to the Top Left, Bottom Right and ending on the Top Right.  

The unconventional running order is due to the fact that when we are still building a set of triangles (instead of an actual quad) using an OpenGL Triangle Strip. This means we have two triangles on top of each other, but using the triangle strip allows to do this with only 4 vertices instead of 6. For a more detailed explanation follow the liked article.

1 - Bottom Left: X = -0.5, Y = -0.5 , Z = 0

2 - Top Left: X = −0.5, Y = 0.5, Z = 0

3 - Bottom Right: X = 0.5, Y = -0.5, Z = 0

4 = Top Right: X = 0.5, Y = 0.5, Z = 0

Our viewer now displays a square instead of a triangle. Since we will be adding new structures, it’s a good idea at this stage to clean up our workspace a bit. To do this we select all the patches related to the vertices and hit the “Create Macro” button at the top. Our patches are now neatly held in a small macro container that we rename “Vertices”. 

Next are the color structures. To begin, we duplicate out “Vertices” macro and rename it “Colors”. Since Color information requires four values (RGBA) we need to update our individual structure maker patches to have 4 inputs, and rename the input splitters as well

Now we could at this point enter each colour value manually, but that would be a pain. Instead we drag in a "Color To RGB" patch that allows us to choose a color from the color picker and output its individual RGBA values. 

With this done we can now choose 4 different colors and assign them to each vertex. To make it so that we don’t have to open the macro each time we want to try new colors, we can publish the colour input of each Color To RGB patch so that they appear outside the macro in the main view. Connect the Colors structure output to the input in the Mesh Creator patch and we now have a Quad with coloured vertices!

Next up are texture coordinates. You won’t be surprised to learn this will be yet another structure. We take our existing structure and change the input number to 2. The splitters will be named X and Y. Rather than the actual position values, X and Y will oscillate between 0 and 1:

1 - Bottom Left: X = 0, Y = 0 

2 - Top Left: X = 0, Y = 1

3 - Bottom Right: X = 1, Y = 0

4 = Top Right: X = 1, Y = 1

Our mesh is now ready to display image textures! To do this simply connect any image to the “Texture” input in the Mesh Creator Patch. Note that to display an image with its original colors you will have to set every vertex color to be white, otherwise the image displayed will be appear tinted!

Next up, actual 3-dimensional objects and Normals!

TUTORIAL: 3D Mesh Construction in Quartz Composer - Part 1

This tutorial will outline basic use of the Mesh Creator patch and the Mesh  Renderer patch in Quartz Composer, in addition to the Kineme Structure Maker patch.

The fundamental thing to understand about creating 3D meshes in QC is that the application in this regard is a basic front for common OpenGL functions. Therefore, to gain a basic understanding of how these things work we can first consult any tutorial on OpenGl basics, then find a way to apply it to QC. 

A good resource for this is the series of tutorials by NeHE productions .

We will create a basic polygon, and assign colour and texture coordinates to it so that we can change its appearance and display images on its surface.

To begin, we drag in the Mesh Creator patch. This patch is responsible for taking in all the data required to create a polygon and creating a mesh from it. The mesh will then be displayed by the Mesh Renderer patch.

A polygon is, at its most basic, a series of vertices. Each vertex is in turn a point in space, determined by its XYZ position. In order to create a polygon we will therefore need to first specify the XYZ  coordinates of a vertex, repeat the process for the amount of vertices required to determine the shape chosen, then feed this to the Mesh Creator and then to the Mesh Renderer.

What kind of input does the Mesh Renderer take? To determine this we hover with the mouse over the "Vertices" input slot, and see that the type is Structure.

We have dealt with structures in a previous tutorial . This time however we are not just reading a structure, we are creating one. To do this, we require and external patch by the good people at Kineme called Structure Maker. The patch is part of the “Kineme Data Tools” plugin set and is found here.

This patch will enable us to determine a series of inputs and make a structure out of them. To build our polygon we will begin by setting the vertex list. We rename the Structure Maker patch to “Vertices”.

For this tutorial we will create a triangle, so we will need a total of 3 vertices as inputs. In order to prepare the Structure Maker patch, we need to change the number of inputs from the default 1 to 3. We do this by selecting the “Parameters” panels for the patch, navigating to the “Settings” tab and changing the number to 3.

Now that the Vertices Structure Maker is ready, we need to create the individual vertices. As each vertex is determined by 3 values ( XYZ ) we will need to create a structure for each. As we already have a SM patch ready, we duplicate it and rename it to “Vertex 1 - Top”. This will contain the coordinates for the top vertex of the triangle. We also create input splitters for each vertex, remembering to change the input type from “Virtual” to “Number”.

The coordiantes for our "Top" vertex will be:  X = 0 , Y = 0.5 , Z = 0 . This will place the top vertex in the centre horizontally but above the centre vertically.

Now all that is left is to repeat the process by simply duplicating the setup for the other two vertices and changing the values to create a triangle shape:

  - Top =  X = 0 , Y = 0.5 , Z = 0

  - Bottom Left =  X = −0.5 , Y = −0.5 ,  Z = 0

  - Bottom Right =  X = 0.5 , Y = -0.5 ,  Z = 0

We then simply connect the Mesh Creator output to the “Mesh” input of the Mesh Renderer patch… et voilà! We have our very own triangle mesh created entirely in Quartz Composer. 

As you have probably noticed, there are a few more inputs in the Mesh Creator patch. We will be dealing with those in future parts of the tutorial. In the meantime feel free to play with the values of the vertices and perhaps move them around in space. 

Notice that even though we have obtained a 2D image of a triangle, the mesh is actually a 3D object able to move around in space, meaning we are not restricted to simple triangles but we can create potentially any shape. That triangle however is the foundation of all 3D models. I hope you have enjoyed this tutorial and make sure to keep an eye open for the next instalments.

Part 2

The Future Of Quartz Composer?

When I first started using Macs, around 3-4 years ago, I poked around the installation disk, and installed a set called Developer Tools. Looking around, I found an odd program called Quartz Composer. It wasn’t clear what the program did, all you could see was an empty workspace, and you were then supposed to drag in nodes and connect them, and then produce filters and screen savers. I had no idea how to use it, there were no guides or tutorials online, so I ignored it. 

Revisiting it later and after finding some scattered tutorials, something clicked and I realised the power of QC. Here was a programming tool, a real programming tool, that required no coding. Sure, it was supposed to be for screen savers and filters, but it was obviously capable, with some imagination, of so much more. 

(It might be of interest to note that I am primarily trained in drawing and illustration, so visual programming or coding was initially totally foreign to me, making my adoption of a tool like QC all the more relevant).

Even after finding ways to extend the functionality with plugins and at the same time finding a forum to discuss and ask questions (both thanks to the work of the people at Kineme.net) I still couldn’t help noticing that the world of QC development was very quiet. No guides, no books, no websites or youtube videos, most developers seemed to ignore the existence of QC. Apple too seemed to ignore it, barely providing a mailing list(!) as a way to discuss and seek help. When OS X Lion came out, QC still had a text file with the same release notes from the previous operating system. 

So let’s be honest: QC is a bit of a forgotten tool. It sees no love from Apple, and I fear they might pull the plug on it any moment now, and leave us users in the cold. Because the truth is, there is nothing quite like QC out there. 

Visual programming can (and should!) be fun, intuitive, and most of all require no (or minimal) coding skills. 

My fear is that in the near future QC might share the same fate of apps like iWeb (another tool I loved and depended on) and get pulled with no replacement in sight. 

QC is, as far as I am concerned, the ideal programming environment. Not just for graphics, because it could be extended to be so much more.

But I’m not sure that Apple realises what they have, or what a great learning tool QC could be with the right vision behind it. Wouldn’t connecting nodes be the ideal way to make at least small programs on something like the iPad? Wouldn’t it be a great way to teach the fundamentals of programming logic to kids? Evidently no one at Apple is thinking about this, or if they are they are being very quiet about it.

At this point in time, I cannot honestly recommend that you learn QC (at least not exclusively), because I don’t know how long it will be around for. QC is such a unique environment that nothing really matches its ease of use and intuitiveness. Most of what you learn in it will take you ages to transfer to a different programming environment, and even then it will take you 10 times longer than it ever did in QC. There seems to be no appreciation for node-based programming environments. Programming is meant to be a hardcore skill that requires you to learn and master several programming languages that require the inclusion of 3 libraries and countless lines of code just to display a coloured square in a window.

Even when using fairly simple languages like Lua or Python, getting to display anything on the screen requires you to find a code editor, some library or tool to display the code (languages don’t come with built-in ways to display graphics or sound), hope that it runs well or is updated to the latest specfication of the language and hope it is well documented. Then every time you write the code and make a change, you need to close the window and restart your app just to see any changes displayed. Every time. Imagine if you had to turn the lights of the room on and off again every time you changed a pencil drawing or a painting just to see the results. I don’t have to point out how much faster any of this would be in QC (not to mention in real-time).

I think it's a relevant criticism, as the workflow can be (apart from a huge barrier to newcomers), a big hindrance on creativity.

This creativity is very dear to me, because the rise of visual programming represents possibly the first time that a new generation possesses a tool that no artist of the previous generations (or even in the history of art) had at their disposal.

It's a brand new brush and a brand new canvas.  

The ideal tool would be something akin to QC, but where all the nodes and their source code can be inspected and changed in real time, inside the application. Some apps like Nodebox do this, but are restricted to 2d drawing and don’t seem to have the span of QC. The other thing about QC is that it is tightly integrated with the OS (although this has sometimes made it look like the only thing it is good for is filters or Screen Savers). 

Blender also relies heavily on a node-based environment for material generation and compositing, hopefully in the future one will be able to create and modify geometry as well. If Apple ever pulls QC, I think our hopes rest with the open source community.

While I haven’t really dedicated much time to QC lately, instead focusing on learning to code, I would still like to write some tutorials for QC like one I have planned on generating meshes and 3D objects. While it’s still around, I’ll keep on using it and loving it just as I have so far.