-
Notifications
You must be signed in to change notification settings - Fork 3
/
listing68.html
executable file
·334 lines (318 loc) · 68.1 KB
/
listing68.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<!-- BEGIN META TAG INFO -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="home" href="http://developer.apple.com/">
<link rel="find" href="http://developer.apple.com/search/">
<link rel="stylesheet" type="text/css" href="../../documentation/css/adcstyle.css" title="fonts">
<script language="JavaScript" src="../../documentation/js/adc.js" type="text/javascript"></script>
<!-- END META TAG INFO -->
<!-- BEGIN TITLE -->
<title>GLSL Showpiece Lite - /LessonGuide/GLSLPrereqs HTML/GLSLPrereqs.html</title>
<!-- END TITLE -->
<script language="JavaScript">
function JumpToNewPage() {
window.location=document.scpopupmenu.gotop.value;
return true;
}
</script>
</head>
<!-- BEGIN BODY OPEN -->
<body>
<!--END BODY OPEN -->
<!-- START CENTER OPEN -->
<center>
<!-- END CENTER OPEN -->
<!-- BEGIN LOGO AND SEARCH -->
<!--#include virtual="/includes/adcnavbar"-->
<!-- END LOGO AND SEARCH -->
<!-- START BREADCRUMB -->
<div id="breadcrumb">
<table width="680" border="0" cellpadding="0" cellspacing="0">
<tr>
<td scope="row"><img width="340" height="10" src="images/1dot.gif" alt=""></td>
<td><img width="340" height="10" src="images/1dot.gif" alt=""></td>
</tr>
<tr valign="middle">
<td align="left" colspan="2">
<a href="http://developer.apple.com/">ADC Home</a> > <a href="../../referencelibrary/index.html">Reference Library</a> > <a href="../../samplecode/index.html">Sample Code</a> > <a href="../../samplecode/GraphicsImaging/index.html">Graphics & Imaging</a> > <a href="../../samplecode/GraphicsImaging/idxOpenGL-date.html">OpenGL</a> > <A HREF="javascript:location.replace('index.html');">GLSL Showpiece Lite</A> >
</td>
</tr>
<tr>
<td colspan="2" scope="row"><img width="680" height="35" src="images/1dot.gif" alt=""></td>
</tr>
</table>
</div>
<!-- END BREADCRUMB -->
<!-- START MAIN CONTENT -->
<!-- START TITLE GRAPHIC AND INTRO-->
<table width="680" border="0" cellpadding="0" cellspacing="0">
<tr align="left" valign="top">
<td><h1><div id="pagehead">GLSL Showpiece Lite</div></h1></td>
</tr>
</table>
<!-- END TITLE GRAPHIC AND INTRO -->
<!-- START WIDE COLUMN -->
<table width="680" border="0" cellpadding="0" cellspacing="0">
<tr align="left" valign="top">
<td id="scdetails">
<h2>/LessonGuide/GLSLPrereqs HTML/GLSLPrereqs.html</h2>
<form name="scpopupmenu" onSubmit="return false;" method=post>
<p><strong>View Source Code:</strong>
<select name="gotop" onChange="JumpToNewPage();" style="width:340px"><option selected value="ingnore">Select File</option>
<option value="listing1.html">/GLSLShowpiece Lite/Exhibits/3Dlabs-license.txt</option>
<option value="listing2.html">/GLSLShowpiece Lite/Exhibits/ATI-License.txt</option>
<option value="listing3.html">/GLSLShowpiece Lite/Exhibits/Cloud1/Cloud1.h</option>
<option value="listing4.html">/GLSLShowpiece Lite/Exhibits/Cloud1/Cloud1.m</option>
<option value="listing5.html">/GLSLShowpiece Lite/Exhibits/Cloud2/Cloud2.h</option>
<option value="listing6.html">/GLSLShowpiece Lite/Exhibits/Cloud2/Cloud2.m</option>
<option value="listing7.html">/GLSLShowpiece Lite/Exhibits/Earth/Earth.h</option>
<option value="listing8.html">/GLSLShowpiece Lite/Exhibits/Earth/Earth.m</option>
<option value="listing9.html">/GLSLShowpiece Lite/Exhibits/EnvMap/EnvMap.h</option>
<option value="listing10.html">/GLSLShowpiece Lite/Exhibits/EnvMap/EnvMap.m</option>
<option value="listing11.html">/GLSLShowpiece Lite/Exhibits/Eroded/Eroded.h</option>
<option value="listing12.html">/GLSLShowpiece Lite/Exhibits/Eroded/Eroded.m</option>
<option value="listing13.html">/GLSLShowpiece Lite/Exhibits/Fire/Fire.h</option>
<option value="listing14.html">/GLSLShowpiece Lite/Exhibits/Fire/Fire.m</option>
<option value="listing15.html">/GLSLShowpiece Lite/Exhibits/Fur/Fur.h</option>
<option value="listing16.html">/GLSLShowpiece Lite/Exhibits/Fur/Fur.m</option>
<option value="listing17.html">/GLSLShowpiece Lite/Exhibits/Glass/Glass.h</option>
<option value="listing18.html">/GLSLShowpiece Lite/Exhibits/Glass/Glass.m</option>
<option value="listing19.html">/GLSLShowpiece Lite/Exhibits/Gooch/Gooch.h</option>
<option value="listing20.html">/GLSLShowpiece Lite/Exhibits/Gooch/Gooch.m</option>
<option value="listing21.html">/GLSLShowpiece Lite/Exhibits/Granite/Granite.h</option>
<option value="listing22.html">/GLSLShowpiece Lite/Exhibits/Granite/Granite.m</option>
<option value="listing23.html">/GLSLShowpiece Lite/Exhibits/Inferno/Inferno.h</option>
<option value="listing24.html">/GLSLShowpiece Lite/Exhibits/Inferno/Inferno.m</option>
<option value="listing25.html">/GLSLShowpiece Lite/Exhibits/LightworkDesign-license.txt</option>
<option value="listing26.html">/GLSLShowpiece Lite/Exhibits/Marble/Marble.h</option>
<option value="listing27.html">/GLSLShowpiece Lite/Exhibits/Marble/Marble.m</option>
<option value="listing28.html">/GLSLShowpiece Lite/Exhibits/Plasma/Plasma.h</option>
<option value="listing29.html">/GLSLShowpiece Lite/Exhibits/Plasma/Plasma.m</option>
<option value="listing30.html">/GLSLShowpiece Lite/Exhibits/Toon/Toon.h</option>
<option value="listing31.html">/GLSLShowpiece Lite/Exhibits/Toon/Toon.m</option>
<option value="listing32.html">/GLSLShowpiece Lite/Exhibits/Toyball/Toyball.h</option>
<option value="listing33.html">/GLSLShowpiece Lite/Exhibits/Toyball/Toyball.m</option>
<option value="listing34.html">/GLSLShowpiece Lite/Exhibits/VertexNoise/VertexNoise.h</option>
<option value="listing35.html">/GLSLShowpiece Lite/Exhibits/VertexNoise/VertexNoise.m</option>
<option value="listing36.html">/GLSLShowpiece Lite/Exhibits/Wobble/Wobble.h</option>
<option value="listing37.html">/GLSLShowpiece Lite/Exhibits/Wobble/Wobble.m</option>
<option value="listing38.html">/GLSLShowpiece Lite/Exhibits/Wood1/Wood1.h</option>
<option value="listing39.html">/GLSLShowpiece Lite/Exhibits/Wood1/Wood1.m</option>
<option value="listing40.html">/GLSLShowpiece Lite/Exhibits/Wood2/Wood2.h</option>
<option value="listing41.html">/GLSLShowpiece Lite/Exhibits/Wood2/Wood2.m</option>
<option value="listing42.html">/GLSLShowpiece Lite/Exhibits/WoodShader/WoodShader.h</option>
<option value="listing43.html">/GLSLShowpiece Lite/Exhibits/WoodShader/WoodShader.m</option>
<option value="listing44.html">/GLSLShowpiece Lite/Extras/Noise3DTexture/Noise3DTexture.cpp</option>
<option value="listing45.html">/GLSLShowpiece Lite/Extras/Noise3DTexture/Noise3DTexture.h</option>
<option value="listing46.html">/GLSLShowpiece Lite/Models/Bunny/Bunny.c</option>
<option value="listing47.html">/GLSLShowpiece Lite/Models/Bunny/Bunny.h</option>
<option value="listing48.html">/GLSLShowpiece Lite/Models/Models/Models.h</option>
<option value="listing49.html">/GLSLShowpiece Lite/Models/Models/Models.m</option>
<option value="listing50.html">/GLSLShowpiece Lite/Models/Teapot/Teapot.c</option>
<option value="listing51.html">/GLSLShowpiece Lite/Models/Teapot/Teapot.h</option>
<option value="listing52.html">/GLSLShowpiece Lite/Surfaces/Constants/GeometryConstants.h</option>
<option value="listing53.html">/GLSLShowpiece Lite/Surfaces/Klein Surface/Headers/KleinSurface.h</option>
<option value="listing54.html">/GLSLShowpiece Lite/Surfaces/Klein Surface/Sources/KleinSurface.mm</option>
<option value="listing55.html">/GLSLShowpiece Lite/Surfaces/Surfaces/Headers/Surfaces.h</option>
<option value="listing56.html">/GLSLShowpiece Lite/Surfaces/Surfaces/Sources/Surfaces.mm</option>
<option value="listing57.html">/GLSLShowpiece Lite/Utilities/Numerics/Numerics.h</option>
<option value="listing58.html">/GLSLShowpiece Lite/Utilities/Numerics/Numerics.m</option>
<option value="listing59.html">/GLSLShowpiece Lite/Utilities/UniformData/UniformData.h</option>
<option value="listing60.html">/GLSLShowpiece Lite/Utilities/UniformData/UniformData.m</option>
<option value="listing61.html">/GLSLShowpiece Lite/Viewer/Headers/Exhibit.h</option>
<option value="listing62.html">/GLSLShowpiece Lite/Viewer/Headers/OpenGLView.h</option>
<option value="listing63.html">/GLSLShowpiece Lite/Viewer/Headers/UIController.h</option>
<option value="listing64.html">/GLSLShowpiece Lite/Viewer/Sources/Exhibit.m</option>
<option value="listing65.html">/GLSLShowpiece Lite/Viewer/Sources/main.m</option>
<option value="listing66.html">/GLSLShowpiece Lite/Viewer/Sources/OpenGLView.m</option>
<option value="listing67.html">/GLSLShowpiece Lite/Viewer/Sources/UIController.m</option>
<option value="listing68.html">/LessonGuide/GLSLPrereqs HTML/GLSLPrereqs.html</option>
<option value="listing69.html">/LessonGuide/GLSLPrereqs HTML/GLSLPrereqs_files/GLSLPrereqs.css</option>
<option value="listing70.html">/Textures/EarthImages.txt</option>
<option value="listing71.html">/Textures/envmaps.txt</option></select>
</p>
</form>
<p><strong><a href="GLSLShowpieceLite.zip">Download Sample</a></strong> (“GLSLShowpieceLite.zip”, 2.30M)<BR>
<strong><a href="GLSLShowpieceLite.dmg">Download Sample</a></strong> (“GLSLShowpieceLite.dmg”, 2.57M)</p>
<!--
<p><strong><a href="#">Download Sample</a></strong> (“filename.sit”, 500K)</p>
-->
</td>
</tr>
<tr>
<td scope="row"><img width="680" height="10" src="images/1dot.gif" alt=""><br>
<img height="1" width="680" src="images/1dot_919699.gif" alt=""><br>
<img width="680" height="20" src="images/1dot.gif" alt=""></td>
</tr>
<tr>
<td scope="row">
<!--googleon: index -->
<pre class="sourcecodebox"><?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>
</pre>
<!--googleoff: index -->
</td>
</tr>
</table>
<!-- END WIDE COLUMN -->
<!-- END MAIN CONTENT -->
<table width="680" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div style="width: 100%; height: 1px; background-color: #919699; margin-top: 5px; margin-bottom: 15px"></div></td>
</tr>
<tr>
<td align="center"><br/>
<table border="0" cellpadding="0" cellspacing="0" class="graybox">
<tr>
<th>Did this document help you?</th>
</tr>
<tr>
<td>
<div style="margin-bottom: 8px"><a href="http://developer.apple.com/feedback/?v=1&url=/samplecode/GLSLShowpieceLite/listing68.html%3Fid%3DDTS10004295-1.1&media=dvd" target=_new>Yes</a>: Tell us what works for you.</div>
<div style="margin-bottom: 8px"><a href="http://developer.apple.com/feedback/?v=2&url=/samplecode/GLSLShowpieceLite/listing68.html%3Fid%3DDTS10004295-1.1&media=dvd" target=_new>It’s good, but:</a> Report typos, inaccuracies, and so forth.</div>
<div><a href="http://developer.apple.com/feedback/?v=3&url=/samplecode/GLSLShowpieceLite/listing68.html%3Fid%3DDTS10004295-1.1&media=dvd" target=_new>It wasn’t helpful</a>: Tell us what would have helped.</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- START BOTTOM APPLE NAVIGATION -->
<!--#include virtual="/includes/footer"-->
<!-- END BOTTOM APPLE NAVIGATION -->
<!-- START CENTER CLOSE -->
</center>
<!-- END CENTER CLOSE -->
</body>
</html>