36 |
Setup For Drawing a Point On Screen
37 |
38 |
Now that have a view that allows us to draw to the
39 | screen, let's start drawing something. We'll start
40 | by drawing one vertex to the screen. That may sound
41 | boring, but drawing requires covering several concepts
42 | at once: shaders, shader programs (what artists are
43 | usually referring to when they talk about "shaders"),
44 | buffers (for data, attributes, etc.), and draw commands
45 | (we'll just cover one in this post). All of these
46 | concepts together are the foundations of a rendering
47 | engine: another concept that is thrown around, but has
48 | a rather ambiguous meaning. I've seen it used in
49 | regard to everything from full applications for making
50 | games, to bare bones API's. If you search for the
51 | definition of "rendering engine" on Google, you'll see
52 | a definition from PC Mag stating that a rendering
53 | engine is, essentially, "software that forms the text
54 | and images for display and printing". What we will be
55 | writing here fits that definition quite well.
56 |
Setting Up the Project
57 |
This step is entirely optional, but it allows you to
58 | keep the steps of your code all in one project. Xcode
59 | offers a "Snapshot" feature which you are welcome to
60 | use as well, but this rewrites the files in your
61 | current project to reflect the changes. Instead, we're
62 | going to use Schemes and Targets. Essentially this
63 | makes a new app within your project. This means all of
64 | your code is accessible right when you need it, and
65 | running a particular target (app) is as easy as
66 | selecting the appropriate scheme.
67 |
Before we set up a new scheme, let's work on the one
68 | we have. Every time you make a new scheme, you'll make
69 | a new target, info-plist, app, test target, test
70 | info-plist, app delegate, view controller, image assets
71 | folder, and storyboard. If you duplicate a target, you
72 | reuse the app delegate, view controller, image assets,
73 | and storyboard. In order to tell the difference between
74 | each target, we'll rename the target, info-plist, and
75 | product. Click on SwiftOpenGL at the top of the Project
76 | Navigator. Then in the Editor, click on the Target and
77 | press Return on the keyboard to change the name to
78 | Beginning.
79 |
80 |
Also, rename the Group folder to Beginning as well.
81 | If you don't have a group, select AppDelegate.swift,
82 | ViewController.swift, SwiftOpenGLView.swift,
83 | images.xcassets, main.storyboard,
84 | and Supporting Files. Then right click on the selection
85 | and click on New Group from Selection. Name this group
86 | Beginning. In the Supporting Files folder, change the
87 | name of the Info.plist to Beginning-Info.plist.
88 | Once the name is changed, you need to let Xcode know
89 | what the plist is called now and where it is located.
90 | Before we do that though, let's clean up the project's
91 | folder in Finder. You can go straight to the folder to
92 | selecting any of the files in the Project Navigator
93 | (we'll select Beginning-Info.plist), and
94 | then click on the arrow next to the path name.
95 |
96 |
This will open up the selected file in a Finder window.
97 |
98 |
Within the SwiftOpenGL project folder, you'll see
99 | AppDelegate.swift, ViewController.swift,
100 | SwiftOpenGLView.swift, image.xcassets,
101 | and Base.proj. Select these items, right
102 | click on them, and click on New Folder with Selection
103 | (6 items). Name this folder Beginning. Close the
104 | window. In Xcode, you'll notice that you're folders are
105 | now red! You have to click on each and set the path
106 | manually. This is why we didn't set the Info.plist
107 | path earlier--we would have had to do that twice!
108 | Click on AppDelegate.swift. In the
109 | Utilities panel, on the File Inspector tab, click on
110 | the Folder icon instead of the arrow icon. This brings
111 | up a page down menu. Navigate to the Beginning folder
112 | where the AppDelegate.swift file is located.
113 | Select AppDelegate.swift, and click Choose.
114 |
115 |
116 |
Repeat this for ViewController.swift,
117 | SwiftOpenGLView.swift, and images.xcassets
118 | as well as the group folder Beginning (if you miss this
119 | one, look at post 1.2). For the Info.plist,
120 | click on the SwiftOpenGL project at the top of the
121 | Project Navigator. Then click on Build Settings.
122 | Search for "info.plist". Under Packaging
123 | you'll see see Info.plist File. To the right of that is
124 | the plist file path. Double click on the path that's
125 | there and change it to Beginning/Beginning-info.plist
126 | and press Return on the keyboard.
127 |
128 |
Now we'll change the name of the scheme. At the top
129 | left of the window, to the right of the Stop button is
130 | the Scheme dropdown menu. Click on it and then click on
131 | Manage Schemes... at the bottom.
132 |
133 |
Again, you see some of the future targets that we're
134 | going to create in the image above. The Manage Schemes
135 | menu lists all of the available schemes. You'll only
136 | have one target. Click on it and press Return on the
137 | keyboard. Rename the scheme as Beginning. Click close.
138 |
139 |
Test your app to make sure it still runs. If it does,
140 | you're set to move on to create the next target. Again,
141 | click on the SwiftOpenGL project in the Project Navigator.
142 | In the Editor, at the bottom left of the window, click
143 | on the "+".
144 |
145 |
You'll see the same menu you saw when you created the
146 | project. Make sure Application under the OS X section
147 | is selected. Then select Cocoa Application and click
148 | Next. On the next window, the only change new thing
149 | here, is the Project field. There's only one option
150 | here: SwiftOpenGL. Set the Product Name as FirstVertex
151 | and all the other fields will be the same. Click Finish.
152 | Delete the FirstVertex Test target and its plist.
153 |
In the Project Navigator, make a new group of the
154 | FirstVertex's AppDelegate.swift,
155 | ViewController.swift, images.xcassets,
156 | main.storyboard, and Info.plist.
157 | You can also make a group called Supporting Files out
158 | the Info.plist, if you like.
159 |
160 |
Rename the Info.plist as FirstVertex-Info.plist
161 | as you see at the bottom of the image above. Now open
162 | a Finder window to location of these files like we did
163 | for the last target. Create a new folder in the
164 | SwiftOpenGL project folder called FirstVertex. Now
165 | you'll have Beginning and FirstVertex in your project
166 | folder. Move all of the FirstVertex files into the
167 | FirstVertex folder like you did for the Beginning target
168 | files.
169 |
Back in Xcode, set the paths for each file like we did
170 | before (remember to set the path for the
171 | FirstVertex-Info.plist through Build Phases).
172 | Change the name of the scheme for FirstVertex by
173 | clicking Manage Schemes... in the Scheme dropdown. Test
174 | the app by running it.
175 |
If you're app runs, you're ready to set up the UI just
176 | like the last post. I won't go back through that process,
177 | except for one detail. I want to remind you to select
178 | the right target when you create a file for the
179 | SwiftOpenGLView. Make sure you save the file to
180 | FirstVertex, select the FirstVertex group, and select
181 | the FirstVertex target, and not Beginning.
182 |
183 |
Now you have two working targets. Make sure the scheme
184 | is set to FirstVertex and SwiftOpenGLView.swift
185 | is selected before you jump into writing the first
186 | version of the render engine.
187 |
18 |
19 | 
44 | 
50 |
51 | 
52 | 
61 |
62 | 
63 | 
73 | 
86 | 
93 |
94 | 
95 | 
103 |
104 | 
105 |