Describe the basic of OpenGL ES of iOS for novice.

1. OpenGL

2. ES

3. on

4. iOS
2012.1.19

5.
EungShik

6. Kim

7. Today’s

8. Topics

9. Today’s

10. Topics
OpenGL

11. on

12. Desktop
Novice Advanced
OpenGL

13. ES

14. on

15. iOS

16. Today’s

17. Topics
OpenGL

18. on

19. Desktop
Novice Advanced
OpenGL

20. ES

21. on

22. iOS
OpenGL

23. Tutorial

24.
on

25. Internet

26. Today’s

27. Topics
OpenGL

28. on

29. Desktop
Novice Advanced
OpenGL

30. ES

31. on

32. iOS
OpenGL

33. Tutorial

34.
on

35. Internet
This

36. Lecture

37. Today’s

38. Topics
•OpenGL

39. Overview

40.
Coordinate

41. Systems

42. and

43. Transformations

44.
Drawing

45. Geometry

46.
Using

47. Textures

48.
Other

49. Details

50. OpenGL

51. Overview

52. OpenGL

53. Overview

54. OpenGL

55. Overview
OpenGL

56. is

57. short

58. for

59. Open

60. Graphic

61. Library

62.
!
Software

63. interface

64. for

65. graphics

66. hardware

67.
Quickly

68. render

69. 2D

70. or

71. 3D

72. graphics

73.
Hardware

74. implementation

75. agnostic

76.
OpenGL

77. ES

78. is

79. a

80. subset

81. of

82. OpenGL

89. -

90. GLUT

91. and

92. GLU

93. are

94. not

95. available

96. on

97. the

98. iOS

99. OpenGL

100. is

101. a

102. State

103. Machine

104. OpenGL

105. is

106. a

107. State

108. Machine

109. OpenGL

110. is

111. a

112. State

113. Machine
•Change

114. Machine

115. State

116.
glEnable(); glDisable(); glMatrixMode();
glBindFramebufferOES();
glViewport(); glVertexPointer(); glColorPointer();
glTranslatef();
!
Issue

117. Drawing

118. Commands

119.
glDrawArrays(); glDrawElements(); …
!
Read

120. Back

121. State,

122. Drawing

123. Results

124.
glGetBooleanv(); glGetFloatv(); glReadPixels();

125. Coordinate

126. System

127. The

128. Coordinate

129. System

130. Onion

131. The

132. Coordinate

133. System

134. Onion
Window

135. Coordinates
Normalized

136. Device

137. Coordinates
Clip

138. and

139. Eye

140. Coordinates
World

141. Coordinates
Object

142. Coordinates

143. Window

144. Coordinates

145. Window

146. Coordinates

147. Normalized

148. Device

149. Coordinates

150. Normalized

151. Device

152. Coordinates

153. Normalized

154. Device

155. Coordinates

156. Normalized

157. Device

158. Coordinates

159. Eye

160. Coordinates

161. Eye

162. Coordinates

163. World

164. Coordinates

165. World

166. Coordinates

167. Object

168. Coordinates

169. Object

170. Coordinates

171. DEMO
Transformations

172. DEMO
Transformations
Documentation iOS 4.2 Library Media Layer
OpenGLES GLES2Sample.xcodeprj

173. Transformations

174. Cheat

175. Sheet

176. Transformations

177. Cheat

178. Sheet
glMatrixMode(GL_PROJECTION);
glMatrixMode(GL_MODELVIEW);
!
glLoadIndetity();
!
glOrthof(left, right, bottom, top, zNear, zFar);
glFrustumf(left, right, bottom, top, zNear, zFar);
!
glRotatef(degrees, x, y, z);
glTranslatef(x, y, z);
glScalef(x, y, z);
glMultMatrixf(matrix);
!
glPushMatrix();
glPopMatrix();

179. Drawing

180. Geometry

181. Verties
•OpenGL

182. ES

183. draws

184. triangles,

185. lines,

186. and

187. points

188.
Object

189. space

190. vertices

191. mapped

192. into

193. window

194. space

195.
Rasterize

196. the

197. shapes

198. to

199. get

200. pixels

201. Verties
•OpenGL

202. ES

203. draws

204. triangles,

205. lines,

206. and

207. points

208.
Object

209. space

210. vertices

211. mapped

212. into

213. window

214. space

215.
Rasterize

216. the

217. shapes

218. to

219. get

220. pixels

221. Colors
•Each

222. vertex

223. can

224. have

225. a

226. color

227. associated

228.
RGBA

229.
•Alpha

230. usually

231. means

232. opacity

233.
Lines

234. and

235. triangles

236. interpolate

237. colors

238. Colors
•Each

239. vertex

240. can

241. have

242. a

243. color

244. associated

245.
RGBA

246.
•Alpha

247. usually

248. means

249. opacity

250.
Lines

251. and

252. triangles

253. interpolate

254. colors

255. Drawing

256. Modes
•Vertices

257. are

258. passed

259. to

260. OpenGL

261. ES

262. in

263. arrays

264.
Drawing

265. modes

266. determine

267. how

268. vertices

269. are

270. interpreted

271.
to

272. produce

273. shapes

274.
Vertex

275. order

276. matters

277. Drawing

278. Modes
•Vertices

279. are

280. passed

281. to

282. OpenGL

283. ES

284. in

285. arrays

286.
Drawing

287. modes

288. determine

289. how

290. vertices

291. are

292. interpreted

293.
to

294. produce

295. shapes

296.
Vertex

297. order

298. matters
GL_TRIANGLES

299. Drawing

300. Modes
•Vertices

301. are

302. passed

303. to

304. OpenGL

305. ES

306. in

307. arrays

308.
Drawing

309. modes

310. determine

311. how

312. vertices

313. are

314. interpreted

315.
to

316. produce

317. shapes

318.
Vertex

319. order

320. matters
GL_TRIANGLES GL_TRIANGLE_FAN

321. Drawing

322. Modes
•Vertices

323. are

324. passed

325. to

326. OpenGL

327. ES

328. in

329. arrays

330.
Drawing

331. modes

332. determine

333. how

334. vertices

335. are

336. interpreted

337.
to

338. produce

339. shapes

340.
Vertex

341. order

342. matters
GL_TRIANGLES GL_TRIANGLE_FAN GL_TRIANGLE_STRIP

343. Drawing

344. a

345. Tetrahedron
• Use

346. a

347. triangle

348. strip

349. Drawing

350. a

351. Tetrahedron
• Use

352. a

353. triangle

354. strip

355. Drawing

356. a

357. Tetrahedron
• Use

358. a

359. triangle

360. strip

361. Drawing

362. a

363. Tetrahedron
• Use

364. a

365. triangle

366. strip

367. Drawing

368. a

369. Tetrahedron
• Use

370. a

371. triangle

372. strip

373. Drawing

374. a

375. Tetrahedron
• Use

376. a

377. triangle

378. strip

379. Drawing

380. a

381. Tetrahedron
• Use

382. a

383. triangle

384. strip

385. Drawing

386. a

387. Tetrahedron
• Use

388. a

389. triangle

390. strip

391. Drawing

392. a

393. Tetrahedron
• Use

394. a

395. triangle

396. strip

397. Drawing

398. a

399. Tetrahedron
• Use

400. a

401. triangle

402. strip

403. DEMO
Geometry

404. DEMO
Geometry
Documentation iOS 4.2 Library Media Layer
OpenGLES GLES2Sample.xcodeprj

405. Geometry

406. Cheat

407. Sheet
GLfloat vertexArray[] = {
x1, y1, z1,
x2, y2, z2,
x3, y3, z3,
...
};
!
GLubyte colorArray[] = {
r1, g1, b1, a1,
r2, g2, b2, a2,
r3, g3, b3, a3,
...
}
!
glVertexPointer(dimOfVertices, GL_FLOAT, arrayOffset, vertexArray);
glEnableClientState(GL_VERTEX_ARRAY);
glColorPointer(4, GL_UNSIGNED_BYTE, arrayOffset, colorArray);
glEnableClientState(GL_COLOR_ARRAY);
!
glDrawArrays(GL_TRIANGLE_STRIP, arrayOffset, numberOfVertices);
// or GL_TRIANGLE_FAN, GL_TRIANGLES
!
glDisableClientState(GL_VERTEX_ARRAY);
glDisableClientState(GL_COLOR_ARRAY);

408. Using

409. Textures

410. Texture

411. Mapping
Color

412. pixels

413. according

414. to

415. an

416. image

417. in

418. memory

419.
Almost

420. always

421. 2D

422. (3D

423. textures

424. are

425. possible

426. though)

427.
Vertices

428. are

429. given

430. texture

431. coordinates

432. (u,

433. v)

434. Texture

435. Mapping
Color

436. pixels

437. according

438. to

439. an

440. image

441. in

442. memory

443.
Almost

444. always

445. 2D

446. (3D

447. textures

448. are

449. possible

450. though)

451.
Vertices

452. are

453. given

454. texture

455. coordinates

456. (u,

457. v)

458. Texture

459. Atlasing
•Swapping

460. textures

461. often

462. is

463. inefficient

464.
Instead

465. make

466. one

467. giant

468. shared

469. texture

470. Texture

471. Atlasing
•Swapping

472. textures

473. often

474. is

475. inefficient

476.
Instead

477. make

478. one

479. giant

480. shared

481. texture

482. Texture

483. Atlasing
•Swapping

484. textures

485. often

486. is

487. inefficient

488.
Instead

489. make

490. one

491. giant

492. shared

493. texture

494.
!
!
!
!
!
!
!
!
!
Vertices

495. may

496. not

497. have

498. consistent

499. (u,v)

500. coordinates

501. DEMO
Textures

502. DEMO
Textures
Documentation iOS 4.2 Library Media Layer
OpenGLES GLES2Sample.xcodeprj

503. Texture

504. Cheat

505. Sheet
bash$ export PATH=${PATH}:/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/
bash$ texturetool -f PVR -e PVRTC image.png -o image.pvrtc
bash$ # image.png must be square with power of side length -- e.g. 64, 256, 1024
!
#import PVRTexture.h
// From Apple's PVRTextureLoader Example Project
!
NSString *path = [[NSBundle mainBundle] pathForResources:@image ofType:@pvrtc];
PVRTexture *texture = [[PVRTexture alloc] initWithContentsOfFile:path];
!
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAX_ANISOTROPY_EXT, 1.0f);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
!
glEnable(GL_TEXTURE_2D);
glBindTexture(GL_TEXTURE_2D, texture.name);
!
GLFloat textureCoordArray[] = {
u1, v1,
u2, v2,
u3, v3,
…
};
!
glTexCoordPointer(2, GL_FLOAT, arrayOffset, textureCoordArray);
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glDrawArrays(GL_TRIANGLE_STRIP arrayOffset, numberOfVertices);
glDisableClientState(GL_TEXTURE_COORD_ARRAY);

506. Other

507. Detail

508. OpenGL

509. ES

510. 1.1

511. vs

512. ES

513. 2.0
•This

514. lecture

515. described

516. OpenGL

517. ES

518. 1.1

519.
ES

520. 2.0

521. is

522. drastically

523. different

529. -

530. Uses

531. shader

532. based

533. approach

539. -

540. More

541. flexible,

542. harder

543. to

544. wrap

545. your

546. head

547. around

548.
ES

549. 2.0

550. not

551. available

552. in

553. iPhones

554. before

555. 3GS

556. OpenGL

557. References
•Apple

558. OpenGL

559. Programming

560. Guide

561.
OpenGL

562. Redbook

563.
The

564. Internets

565. Thank

566. you

567.
!
@neoroman