LessonGuide/GLSLPrereqs HTML/GLSLPrereqs.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
<meta name="Generator" content="Pages 2.0.2" />
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="GLSLPrereqs_files/GLSLPrereqs.css" />
</head>
<body style="margin: 90pt; ">
<div><div class="Normal_22"><div class="paragraph Title" style="line-height: 28pt; padding-top: 0pt; ">Getting Started with GLSL <br />
on Mac OS X</div>
<div class="paragraph Abstract" style="line-height: 12pt; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; line-height: 12pt;  text-decoration: none;"> </div>
<div class="paragraph Abstract" style="line-height: 12pt; "><span style="font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; line-height: 12pt; ">The goal of this exercise is to show you how to get your own fragment and vertex shaders to run in a Cocoa application</span><span>. </span><span style="font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; line-height: 12pt; ">By completing this exercise, you’ll be on your way to creating</span><span> spectacular visual effects that bring the cinematic experience to your Mac OS X application.</span><span style="font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; line-height: 12pt; "></span></div>
<div class="paragraph Abstract" style="line-height: 12pt; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; line-height: 12pt;">There are three goals to this prerequisite:</div>
<ol><li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; " value="1"><div class="paragraph Abstract" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">1.</span><span style="width: 8.5pt; " class="Spacer"></span><span style="line-height: 12pt; " class="Emphasis">To make sure you have enough GLSL and Cocoa experience to fully benefit from the session.</span></div>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; "><div class="paragraph Abstract" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 0pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; position: relative; text-decoration: none; text-transform: none; top: -5pt; " class="Bullet"></span><span style="width: 18pt; " class="Spacer"></span><span style="line-height: 12pt; ">OpenGL Shading Language (GLSL) can create spectacular effects on Mac OS X, but it is not an entry-level technology. You must be familiar with the basics of GLSL and with OpenGL coding first. The shaders in the example application execute from within a Cocoa application. So you also need to have a rudimentary understanding of  Cocoa application development.  To get the most out of this session, make sure that you understand the techniques used in the example application, and make sure you are able to complete the suggested exercises. </span></div>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; " value="2"><div class="paragraph Abstract" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">2.</span><span style="width: 8.5pt; " class="Spacer"></span><span style="line-height: 12pt; " class="Emphasis">To introduce the example application.</span></div>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; "><div class="paragraph Abstract" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 0pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; position: relative; text-decoration: none; text-transform: none; top: -5pt; " class="Bullet"></span><span style="width: 18pt; " class="Spacer"></span><span style="font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; line-height: 12pt; ">If you are familiar with the organization of the example application and how it runs, the presenter doesn’t need to spend as much time explaining how the application  works. You can then learn about best practices and optimization techniques that are unique to Mac OS X and that  help your fragment and vertex shaders run efficiently on Mac OS X.</span></div>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; " value="3"><div class="paragraph Abstract" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">3.</span><span style="width: 8.5pt; " class="Spacer"></span><span style="line-height: 12pt; " class="Emphasis">To get you to start thinking about the benefits of using GLSL in a Mac OS X application.</span><span style="font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; line-height: 12pt; "></span></div>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; "><div class="paragraph Abstract" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 0pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; position: relative; text-decoration: none; text-transform: none; top: -5pt; " class="Bullet"></span><span style="width: 18pt; " class="Spacer"></span><span style="font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; line-height: 12pt; ">To understand how to get the most out of using GLSL on Mac OS X, it’s helpful to think about some of the problems that you have to solve in almost every 2D and 3D application that uses OpenGL.  What are some of the common design patterns you use to write GLSL shaders? How might you refactor specific OpenGL code to take advantage of utility classes such as the </span><span style="font-family: 'Monaco', 'Courier', 'serif'; line-height: 14pt; ">GLSLExhibit </span><span style="line-height: 12pt; ">class used in the example application</span><span style="font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; line-height: 12pt; ">?</span></div>
</li>
</ol>
<div class="paragraph Heading" style="line-height: 15pt; padding-top: 2pt; "></div>
<div class="paragraph Heading" style="line-height: 15pt; "><span style="font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 12pt; line-height: 15pt; ">Introduction</span><span style="font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; line-height: 12pt; "></span></div>
<div class="paragraph Abstract" style="line-height: 12pt; color: #000000; line-height: 12pt; opacity: 1.00;">Initially, assembly language offered the only way to program the Graphics Processing Unit (GPU). Later, the OpenGL ARB created OpenGL Shading Language (GLSL) to provide a more intuitive means of programming the GPU and maintain the open standards advantage that  drives the OpenGL community. Today, the OpenGL rendering pipeline is quite flexible, allowing a high level of programmability through the use of fragment and vertex shaders.</div>
<div class="paragraph Body" style="line-height: 12pt; ">GLSL defines twenty-two basic data types. Some are the same as used in the C programming language, while others are specific to graphics processing. You’ll recognize many of the GLSL operators, because GLSL contains all the C and C++ operators, with the exception of bitwise operators and pointers.</div>
<div class="paragraph Body" style="line-height: 12pt; "><span>Similar to the high-level programming languages such as C/C++, the OpenGL shading language supports loops and branching, including </span><span class="Code" lang="en" xml:lang="en">if</span><span>, </span><span class="Code" lang="en" xml:lang="en">else</span><span>, </span><span class="Code" lang="en" xml:lang="en">if</span><span>-</span><span class="Code" lang="en" xml:lang="en">else</span><span>, </span><span class="Code" lang="en" xml:lang="en">for</span><span>, </span><span class="Code" lang="en" xml:lang="en">do</span><span>-</span><span class="Code" lang="en" xml:lang="en">while</span><span>, </span><span class="Code" lang="en" xml:lang="en">break</span><span>, </span><span class="Code" lang="en" xml:lang="en">continue</span><span>, an so forth.</span></div>
<div class="paragraph Body" style="line-height: 12pt; "><span>GLSL supports user defined functions,  as well as a wide variety of commonly used functions. Many of these functions are similar to those found in the C programming language standard math library such as </span><span class="Code" lang="en" xml:lang="en">exp()</span><span style="font-family: 'Monaco', 'Courier', 'serif'; line-height: 14pt; "> </span><span>and </span><span class="Code" lang="en" xml:lang="en">abs()</span><span>, while others are specific to graphics programming such as </span><span class="Code" lang="en" xml:lang="en">smoothstep()</span><span> and </span><span class="Code" lang="en" xml:lang="en">texture2D()</span><span>.</span></div>
<div class="paragraph Body" style="line-height: 12pt; "><span>A </span><span class="Emphasis">shader</span><span> is a program that computes surface properties. GLSL shaders are not stand-alone applications; they work only within an OpenGL application. You can use the OpenGL programming interfaces and GLSL within any C, C++, and Objective-C application on Mac OS X.</span></div>
<div class="paragraph Body" style="line-height: 12pt; ">GLSL shaders themselves are simply a set of strings that are passed to the nVidia and ATI  drivers on Mac OS X for compilation from within an application that uses the OpenGL  entry points. You can generate shaders  from within an application or read them in as text files. Regardless of the origin of the shader, you  must  package it as a C-string before sending it to a graphics driver.</div>
<div class="paragraph Body" style="line-height: 12pt; ">The OpenGL programming interfaces that you use to  compile, link, and pass parameters to GLSL programs are specified in the ARB vertex shader, ARB fragment shader, and ARB shader objects extensions.  These extensions are part of the core OpenGL specification starting with version 2.0.</div>
<div class="paragraph Heading" style="line-height: 15pt; "></div>
<div class="paragraph Heading" style="line-height: 15pt; ">The GLSL Showpiece Lite Application</div>
<div class="paragraph Body" style="line-height: 12pt; ">When the GLSL Showpiece Lite application opens, you see the following window:</div>
<div class="paragraph Heading" style="line-height: 15pt; "><img src="GLSLPrereqs_files/shapeimage.jpg" title="" style="height: 320.2pt; left: 0pt; margin-bottom: 1.8pt; margin-right: -0.2pt; position: relative; top: 1pt; width: 371.2pt; " /></div>
<div class="paragraph Heading" style="line-height: 15pt; text-decoration: none;"> </div>
<div class="paragraph Body" style="line-height: 12pt; ">The column on the left side—GLSL Exhibits—lists the names of shader examples, each of which is created using the GLSLExhibit class. as you’ll see later when you examine the code. The view portion of the window displays the currently selected shader example, which in this case is the Cloud 1 shader applied to the classic OpenGL teapot. The description of the shader appears below the view of the teapot.</div>
<div class="paragraph Body" style="line-height: 12pt; ">Clicking another GLSL Exhibit name changes the view. You can print a PDF of what’s in the view by choosing File &gt; Print.</div>
<div class="paragraph Body" style="line-height: 12pt; "><span>The example shaders in the application are taken from </span><span style="font-weight: bold; line-height: 12pt; ">OpenGL Shading Language</span><span>, Addison-Wesley publishers (also referred to as “The Orange Book”). Each shader is applied to a well-known model—such as the  OpenGL teapot, the Stanford bunny,  a sphere, and so on.</span></div>
<div class="paragraph Heading" style="line-height: 15pt; "></div>
<div class="paragraph Heading" style="line-height: 15pt; ">Exercises</div>
<div class="paragraph Sub_heading" style="line-height: 12pt; font-size: 10pt; line-height: 12pt;">Run the Application</div>
<div class="paragraph Body" style="line-height: 12pt; "><span>To run the application, double-click the </span><span class="Code" lang="en" xml:lang="en">GLSLShowpiece Lite.xcodeproj</span><span> file. After the project launches in Xcode, click Build and Restart. </span></div>
<div class="paragraph Body" style="line-height: 12pt; ">Click each item in the GLSL Exhibits list and observe the result. Read the description of the shader. You might also print, or save as a PDF,  one or two renderings. </div>
<div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; font-weight: bold; line-height: 12pt;">Explore the Code</div>
<div class="paragraph Body" style="line-height: 12pt; "><span>Now that you’ve seen the sorts of shaders that are possible, it’s time for you to take a look at the code.</span><span style="font-size: 10pt; line-height: 12pt; "></span></div>
<ol><li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; " value="1"><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">1.</span><span style="width: 8.5pt; " class="Spacer"></span><span style="color: #000000; font-family: 'Helvetica', 'Arial', 'sans-serif'; line-height: 12pt; opacity: 1.00; ">In the Xcode Groups &amp; File list for the GLSL Showpiece Lite application, click the disclosure triangle next to GLSLShowpieceLite. Then select Viewer. </span></div>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; " value="2"><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">2.</span><span style="width: 8.5pt; " class="Spacer"></span><span style="color: #000000; font-family: 'Helvetica', 'Arial', 'sans-serif'; line-height: 12pt; opacity: 1.00; ">In the list of file names, double-click  </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">Exhibit.h</span><span style="color: #000000; font-family: 'Helvetica', 'Arial', 'sans-serif'; line-height: 12pt; opacity: 1.00; ">. Take a look at the two public utility methods that are used by each of the shader examples in this application:</span></div>
<ol><li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; "><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">•</span><span style="width: 12.4pt; " class="Spacer"></span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">loadShadersFromResource:</span><span style="color: #000000; font-family: 'Helvetica', 'Arial', 'sans-serif'; line-height: 12pt; opacity: 1.00; "> loads  fragment &amp; vertex shaders from the application bundle, then compiles and links them.</span></div>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; "><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">•</span><span style="width: 12.4pt; " class="Spacer"></span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">loadTextureFromResource:</span><span style="color: #000000; font-family: 'Helvetica', 'Arial', 'sans-serif'; line-height: 12pt; opacity: 1.00; "> gets and loads a JPEG texture file from the application bundle.</span></div>
</li>
</ol>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; " value="3"><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">3.</span><span style="width: 8.5pt; " class="Spacer"></span><span style="color: #000000; font-family: 'Helvetica', 'Arial', 'sans-serif'; line-height: 12pt; opacity: 1.00; ">In the Groups and Files list, choose Exhibits &gt; Sources. Notice that the file names match the names of the GLSL Exhibits in the interface. Take a look at the interface (</span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">.h</span><span style="color: #000000; font-family: 'Helvetica', 'Arial', 'sans-serif'; line-height: 12pt; opacity: 1.00; ">) and implementation (</span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">.m</span><span style="color: #000000; font-family: 'Helvetica', 'Arial', 'sans-serif'; line-height: 12pt; opacity: 1.00; ">) files for several shader examples. </span><span style="font-size: 10pt; line-height: 12pt; "></span></div>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; "><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 0pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; position: relative; text-decoration: none; text-transform: none; top: -5pt; " class="Bullet"></span><span style="width: 18pt; " class="Spacer"></span><span style="font-size: 10pt; line-height: 12pt; ">You might start with the simpler examples, which include Cloud1, Earth, and Vertex Noise. Then, move on to more complex examples, such as Fur, Glass, and Plasma. </span><span style="line-height: 12pt; ">By looking at the code you’ll get an idea of the variety of workflow paradigms that you can choose from when you write your own shader.</span></div>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; "><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 0pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; position: relative; text-decoration: none; text-transform: none; top: -5pt; " class="Bullet"></span><span style="width: 18pt; " class="Spacer"></span><span style="font-size: 10pt; line-height: 12pt; ">Notice that despite the differences among the shader implementations, each one subclasses the </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">GLSLExhibit</span><span style="font-size: 10pt; line-height: 12pt; "> class. This class performs all the loading, compiling, and linking for a shader. It also simplifies the process of loading textures.</span></div>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; " value="4"><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">4.</span><span style="width: 8.5pt; " class="Spacer"></span><span style="font-size: 10pt; line-height: 12pt; ">Count the number of files associated with each shader. Notice that there are five per shader: </span></div>
<ol><li style="line-height: 12pt; margin-left: 9pt; padding-left: 0pt; text-indent: -9pt; "><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -9pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; position: relative; text-decoration: none; text-transform: none; top: 1pt; " class="Bullet">•</span><span style="width: 3.4pt; " class="Spacer"></span><span style="line-height: 12pt; ">A fragment shader file (</span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">.frag</span><span style="line-height: 12pt; "> extension) written using GLSL. The shader code is platform-independent. You can create this file in any text editor.</span></div>
</li>
<li style="line-height: 12pt; margin-left: 9pt; padding-left: 0pt; text-indent: -9pt; "><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -9pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; position: relative; text-decoration: none; text-transform: none; top: 1pt; " class="Bullet">•</span><span style="width: 3.4pt; " class="Spacer"></span><span style="line-height: 12pt; ">A vertex shader file (</span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">.vert</span><span style="line-height: 12pt; "> extension) written using GLSL. The shader code is platform-independent. You can create this file in any text editor.</span></div>
</li>
<li style="line-height: 12pt; margin-left: 9pt; padding-left: 0pt; text-indent: -9pt; "><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -9pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; position: relative; text-decoration: none; text-transform: none; top: 1pt; " class="Bullet">•</span><span style="width: 3.4pt; " class="Spacer"></span><span style="line-height: 12pt; ">An interface file (.h extension) written using Objective-C. Notice that each shader is wrapped by a  </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">GLSLExhibit</span><span style="line-height: 12pt; "> class. </span></div>
</li>
<li style="line-height: 12pt; margin-left: 9pt; padding-left: 0pt; text-indent: -9pt; "><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -9pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; position: relative; text-decoration: none; text-transform: none; top: 1pt; " class="Bullet">•</span><span style="width: 3.4pt; " class="Spacer"></span><span style="line-height: 12pt; ">An implementation file (.m extension) written using Objective-C.</span></div>
</li>
<li style="line-height: 12pt; margin-left: 9pt; padding-left: 0pt; text-indent: -9pt; "><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -9pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; position: relative; text-decoration: none; text-transform: none; top: 1pt; " class="Bullet">•</span><span style="width: 3.4pt; " class="Spacer"></span><span style="line-height: 12pt; ">A description file (.rtf extension) that contains text describing the shader and is  displayed in the user interface. (Note that if you write a similar application that provides user interface strings, you typically provide the description in the </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">Info.plist</span><span style="line-height: 12pt; "> file to facilitate localization.)</span></div>
</li>
</ol>
</li>
<li style="line-height: 12pt; margin-left: 9pt; padding-left: 0pt; text-indent: -9pt; " value="5"><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -9pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">5.</span><span style="font-size: 10pt; line-height: 12pt; ">  Compare several implementation files. Notice that each implements the following methods of the </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">GLSLExhibit </span><span style="line-height: 12pt; ">class: </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en"></span></div>
<ol><li style="line-height: 12pt; margin-left: 9pt; padding-left: 9pt; text-indent: -9pt; "><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -9pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">•</span><span style="width: 3.4pt; " class="Spacer"></span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">initLazy </span><span style="line-height: 12pt; "> </span><span style="color: #000000; font-family: 'Helvetica', 'Arial', 'sans-serif'; line-height: 12pt; opacity: 1.00; ">Performs the necessary initializations.</span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en"></span></div>
</li>
<li style="line-height: 12pt; margin-left: 9pt; padding-left: 9pt; text-indent: -9pt; "><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -9pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">•</span><span style="width: 3.4pt; " class="Spacer"></span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">dealloc:</span><span style="font-size: 10pt; line-height: 12pt; "> </span><span style="color: #000000; font-family: 'Helvetica', 'Arial', 'sans-serif'; line-height: 12pt; opacity: 1.00; ">If needed, releases memory resources  allocated in the </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">initLazy</span><span style="color: #000000; font-family: 'Helvetica', 'Arial', 'sans-serif'; line-height: 12pt; opacity: 1.00; "> method.</span></div>
</li>
<li style="line-height: 12pt; margin-left: 9pt; padding-left: 9pt; text-indent: -9pt; "><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -9pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">•</span><span style="width: 3.4pt; " class="Spacer"></span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">name:</span><span style="color: #000000; font-family: 'Helvetica', 'Arial', 'sans-serif'; line-height: 12pt; opacity: 1.00; ">  Returns the name of this exhibit to the superclass.</span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en"></span></div>
</li>
<li style="line-height: 12pt; margin-left: 9pt; padding-left: 9pt; text-indent: -9pt; "><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -9pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">•</span><span style="width: 3.4pt; " class="Spacer"></span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">descriptionFilename:</span><span style="line-height: 12pt; "> L</span><span style="color: #000000; font-family: 'Helvetica', 'Arial', 'sans-serif'; line-height: 12pt; opacity: 1.00; ">oads and displays the RTF exhibit description file, from the application bundle, in the application window pane.</span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en"></span></div>
</li>
<li style="line-height: 12pt; margin-left: 9pt; padding-left: 9pt; text-indent: -9pt; "><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -9pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">•</span><span style="width: 3.4pt; " class="Spacer"></span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">renderFrame:</span><span style="line-height: 12pt; "> R</span><span style="color: #000000; font-family: 'Helvetica', 'Arial', 'sans-serif'; line-height: 12pt; opacity: 1.00; ">enders the shader example.  This method must be customized for the particular example.</span><span style="font-size: 10pt; line-height: 12pt; "></span></div>
</li>
</ol>
</li>
</ol>
<div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; font-weight: bold; line-height: 12pt;">Add Your Own Shader</div>
<div class="paragraph Body" style="line-height: 12pt; ">Now that you have an idea of the organization of the example application, you are ready to add your own GLSL code to it. In addition to providing the five required files, you’ll need to make a few minor edits so that the example application knows of the existence of your shader. </div>
<div class="paragraph Body" style="line-height: 12pt; ">Follow these steps to add your own code to the GLSL Showpiece Lite application.</div>
<ol><li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; " value="1"><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">1.</span><span style="width: 8.5pt; " class="Spacer"></span><span style="font-size: 10pt; line-height: 12pt; ">In the GLSL Showpiece LIte project window, click the Action popup menu and choose Add &gt; New Group. Name the group appropriately.</span></div>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; " value="2"><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">2.</span><span style="width: 8.5pt; " class="Spacer"></span><span style="font-size: 10pt; line-height: 12pt; ">Write a shader. </span></div>
<ol><li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; "><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 0pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; position: relative; text-decoration: none; text-transform: none; top: -5pt; " class="Bullet"></span><span style="width: 18pt; " class="Spacer"></span><span style="font-size: 10pt; line-height: 12pt; ">For details on writing shaders refer to </span><span style="font-weight: bold; line-height: 12pt; ">OpenGL Shading Language</span><span style="font-size: 10pt; line-height: 12pt; ">. If you are still new to writing shaders, you might consider copying or modidfying a shader from this book.</span></div>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; "><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 0pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; position: relative; text-decoration: none; text-transform: none; top: -5pt; " class="Bullet"></span><span style="width: 18pt; " class="Spacer"></span><span style="font-size: 10pt; line-height: 12pt; ">You can use your favorite text editor to write a shader. Make sure that you save a fragment shader with the extension </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">.frag</span><span style="line-height: 12pt; ">  and a vertex shader with the extension </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">.vert. </span><span style="line-height: 12pt; ">Use the same prefix for both the fragment and vertex shaders. For example, </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">Rain.frag</span><span style="line-height: 12pt; "> and </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">Rain.vert</span><span style="line-height: 12pt; ">. You must use this naming scheme because the </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">loadShadersFromResource</span><span style="line-height: 12pt; "> method assumes this scheme.</span></div>
</li>
</ol>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; " value="3"><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">3.</span><span style="width: 8.5pt; " class="Spacer"></span><span style="font-size: 10pt; line-height: 12pt; ">Create a description file and save it as a RTF file.</span></div>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; " value="4"><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">4.</span><span style="width: 8.5pt; " class="Spacer"></span><span style="font-size: 10pt; line-height: 12pt; ">Add the shader (</span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">.frag</span><span style="font-size: 10pt; line-height: 12pt; "> and </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">.vert</span><span style="font-size: 10pt; line-height: 12pt; ">) and description files to the project by choosing Project &gt; Add to Project. After you’ve added the files you can drag them into the group you created previously.</span></div>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; " value="5"><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">5.</span><span style="width: 8.5pt; " class="Spacer"></span><span style="font-size: 10pt; line-height: 12pt; ">Write  Objective-C code to render your shader example.</span></div>
<ol><li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; "><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 0pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; position: relative; text-decoration: none; text-transform: none; top: -5pt; " class="Bullet"></span><span style="width: 18pt; " class="Spacer"></span><span style="font-size: 10pt; line-height: 12pt; ">Choose File &gt; New File. Then in the Assistant choose Cocoa &gt; Objective-C class and click Next. Enter the name of your shader example and click Finish. Drag the newly created files to your Group in the Groups &amp; Files list.</span></div>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; "><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 0pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; position: relative; text-decoration: none; text-transform: none; top: -5pt; " class="Bullet"></span><span style="width: 18pt; " class="Spacer"></span><span style="font-size: 10pt; line-height: 12pt; ">In the interface file you just created, define the interface for your shader example, similar to what you saw when you explored the code.</span></div>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; "><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 0pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; position: relative; text-decoration: none; text-transform: none; top: -5pt; " class="Bullet"></span><span style="width: 18pt; " class="Spacer"></span><span style="line-height: 12pt; ">In the implementation file you just created, implement </span><span style="font-size: 10pt; line-height: 12pt; ">the necessary methods, which should include the following plus any other methods needed for your shader example: </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">init</span><span style="font-size: 10pt; line-height: 12pt; ">, </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">initLazy</span><span style="font-size: 10pt; line-height: 12pt; ">, </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">dealloc</span><span style="font-size: 10pt; line-height: 12pt; ">, </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">name:</span><span style="font-size: 10pt; line-height: 12pt; ">, </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">descriptionFilename:</span><span style="font-size: 10pt; line-height: 12pt; ">, and </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">renderFrame:</span><span style="font-size: 10pt; line-height: 12pt; ">.</span></div>
</li>
</ol>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; " value="6"><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">6.</span><span style="width: 8.5pt; " class="Spacer"></span><span style="font-size: 10pt; line-height: 12pt; ">In the </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">UIController.h</span><span style="line-height: 12pt; "> file, </span><span style="font-size: 10pt; line-height: 12pt; ">add an </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">#import</span><span style="font-size: 10pt; line-height: 12pt; "> statement t so that the application imports your shader example. </span></div>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; " value="7"><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">7.</span><span style="width: 8.5pt; " class="Spacer"></span><span style="font-size: 10pt; line-height: 12pt; ">In </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">UIController.m</span><span style="font-size: 10pt; line-height: 12pt; "> file, modify the definition of exhibits in the init method so that the NSArray includes your shader example object. For example, if your shader is named </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">Rain</span><span style="font-size: 10pt; line-height: 12pt; ">, add </span><span style="line-height: 12pt; " class="Code" lang="en" xml:lang="en">[[Rain alloc] init],</span><span style="font-size: 10pt; line-height: 12pt; "> inserting it in the list alphabetically.   </span></div>
</li>
<li style="line-height: 12pt; margin-left: 18pt; padding-left: 0pt; text-indent: -18pt; " value="8"><div class="paragraph Body" style="line-height: 12pt; margin-bottom: 0pt; margin-top: 0pt; text-indent: -18pt; "><span style="color: #000000; font-family: 'LucidaGrande', 'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif'; font-size: 10pt; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; line-height: 12pt; opacity: 1.00; text-decoration: none; text-transform: none; " class="Bullet">8.</span><span style="width: 8.5pt; " class="Spacer"></span><span style="font-size: 10pt; line-height: 12pt; ">Click Build and Restart. Make sure your shader example runs as expected.</span></div>
</li>
</ol>
<div class="paragraph Free_Form" style="line-height: 14pt; margin-bottom: 0pt; margin-left: 43pt; margin-top: 0pt; padding-bottom: 0pt; text-align: justify; text-indent: -43pt; line-height: 14pt;  text-decoration: none;"> </div>
</div>
</div>
</body>
</html>