OpenGL Tutorial: what changed

Revision 1 to 2. Removed lines have a minus sign; added lines have a plus sign.

Old	New		Line
1	1		## Introduction
2	2
3	3		OpenGL is the premier environment for developing portable, interactive 2D and 3D graphics applications. Since its introduction in 1992, OpenGL has become the industry's most widely used and supported 2D and 3D graphics application programming interface (API), bringing thousands of applications to a wide variety of computer platforms. OpenGL fosters innovation and speeds application development by incorporating a broad set of rendering, texture mapping, special effects, and other powerful visualization functions. Developers can leverage the power of OpenGL across all popular desktop and workstation platforms, ensuring wide application deployment.
4	4
5	5		You can find more information about OpenGL [here](http://www.opengl.org/about/overview/).
6	6
7	7		### GLUT
8	8
9	9		Note: GLUT is deprecated.
10	10
11	11		GLUT (pronounced like the glut in gluttony) is the OpenGL Utility Toolkit, a window system independent toolkit for writing OpenGL programs. It implements a simple windowing application programming interface (API) for OpenGL. GLUT makes it considerably easier to learn about and explore OpenGL programming. GLUT provides a portable API so you can write a single OpenGL program that works across all PC and workstation OS platforms.
12	12
13	13		You can find more information about GLUT [here](http://www.opengl.org/resources/libraries/glut/).
14	14
15	15		Many Operating Systems come with preinstalled GLUT, but if yours does not have one you can easily find it using [Google](http://www.google.com/).
16	16
17	17		Windows binaries can be downloaded from [www.xmission.com](http://www.xmission.com/~nate/glut.html).
18	18
19	19		The GLUT FPC units information is here [[OpenGL]].
20	20
21	21		### GLFW
22	22
23	23		See <http://www.glfw.org/>
24	24
25	25		### LCL
26	26
27	27		The Lazarus Component Library can be used with OpenGL too. Lazarus includes a TOpenGLControl - a LCL control with an OpenGL context. The lazarus package LazOpenGLContext can be found lazarus/components/opengl/lazopenglcontext.lpk. An example can be found in lazarus/examples/openglcontrol/openglcontrol_demo.lpi.
28	28
29	29		### LCL / GLFW / GLUT
30	30
31	31		When should you use GLUT, when LCL?
32	32
33	33		- GLUT is better if you want to draw everything yourself.
34	34		- LCL is better for normal applications. For example a 3D editor needs a few OpenGL windows and the rest is a normal application using normal buttons, comboboxes, windows, modal windows, etc.
35	35
36	36		The OpenGL part is pretty much the same. GLUT needs a dll under windows, where LCL typically runs out of the box, but a LCL executable is bigger.
37	37
38	38		## Code samples
39	39
40	40		### Creating your first LCL program
41	41
42	42		Using LCL is typically the easiest way to access OpenGL with Lazarus. Since GLUT is deprecated, using the LCL is generally a good idea for a new OpenGL Lazarus project. Most of the code samples described below for GLUT are easy to translate into the LCL code, though you will have to find equivalents for the functions with the 'glut' prefix, for example instead of "glutSwapBuffers" we will use the LCL's "SwapBuffers" property to display our rendering. The one great feature that GLUT provides that is hard to do with the LCL is showing text on the screen (see GLUT's "Bitmap Fonts" section below). However, since this is your first LCL program, we will keep it simple by not showing any text.
43	43
44	44		Lazarus comes with a example OpenGL program, you can find it in the folder Lazarus/Examples/openglcontrol. That example demonstrates many powerful features for creating an animated OpenGL image. However, it is also a relatively complicated program. Below is a minimal Lazarus project that mimics some of the features described in the GLUT samples described below. To create this, launch Lazarus and choose Project/NewProject to create a new application. Choose the Project/ProjectInspector menu item, click the 'Add..' button, go to the 'New Requirement' and and the "LazOpenGLContext" package. Next, paste the code below into your 'unit1.pas'. Then, click on your form and in the events tab of the object inspector link the "OnCreate" event to the function "FormCreate". You should now be able to run your new application by choosing the Run/Run menu item.
45	45
46	46		The code creates a new OpenGL panel that fills the form. OpenGL draws a simple triangle in the form. Note that when you run the application you can resize the form and the triangle rescales proportionally to fill the form.
47	47
48	48		``` pascal
49	49		unit Unit1;
50	50
51	51		{$mode objfpc}{$H+}
52	52
53	53		interface
54	54
55	55		uses
56	56		Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, OpenGLContext, gl;
57	57
58	58		type
59	59		TForm1 = class(TForm)
60	60		procedure FormCreate(Sender: TObject);
61	61		procedure GLboxPaint(Sender: TObject);
62	62		private
63	63		GLBox: TOpenGLControl;
64	64		public
65	65		end;
66	66
67	67		var
68	68		Form1: TForm1;
69	69
70	70		implementation
71	71
72	72		{$R *.lfm}
73	73
74	74		procedure TForm1.GLboxPaint(Sender: TObject);
75	75		begin
76	76		glClearColor(0.27, 0.53, 0.71, 1.0); // Set blue background
77	77		glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);
78	78		glLoadIdentity;
79	79		glBegin(GL_TRIANGLES);
80	80		glColor3f(1, 0, 0);
81	81		glVertex3f( 0.0, 1.0, 0.0);
82	82		glColor3f(0, 1, 0);
83	83		glVertex3f(-1.0,-1.0, 0.0);
84	84		glColor3f(0, 0, 1);
85	85		glVertex3f( 1.0,-1.0, 0.0);
86	86		glEnd;
87	87		GLbox.SwapBuffers;
88	88		end;
89	89
90	90		procedure TForm1.FormCreate(Sender: TObject);
91	91		begin
92	92		GLbox := TOpenGLControl.Create(Self);
93	93		GLbox.AutoResizeViewport := true;
94	94		GLBox.Parent := Self;
95	95		GLBox.MultiSampling := 4;
96	96		GLBox.Align := alClient;
97	97		GLBox.OnPaint := @GLboxPaint; // for "mode delphi" this would be "GLBox.OnPaint := GLboxPaint"
98	98		GLBox.invalidate;
99	99		end;
100	100
101	101		end.
102	102		```
103	103
104	104		### Creating your first GLUT program
105	105
106		-	In order to use GLUT, you must first include unit glut and then initialize it. This is done using <b>glutInit</b> function. This function can parse the command line and set parameters for the main window, but it expects input in C/C++ style. You'll have to write your own function to make the conversion from ParamCount and ParamStr to C/C++ like command line parameters.
	106	+	In order to use GLUT, you must first include unit glut and then initialize it. This is done using glutInit function. This function can parse the command line and set parameters for the main window, but it expects input in C/C++ style. You'll have to write your own function to make the conversion from ParamCount and ParamStr to C/C++ like command line parameters.
107	107
108	108		``` pascal
109	109		procedure glutInitPascal(ParseCmdLine: Boolean);
110	110		var
111	111		Cmd: array of PChar;
112	112		CmdCount, I: Integer;
113	113		begin
114	114		if ParseCmdLine then
115	115		CmdCount := ParamCount + 1
116	116		else
117	117		CmdCount := 1;
118	118		SetLength(Cmd, CmdCount);
119	119		for I := 0 to CmdCount - 1 do
120	120		Cmd[I] := PChar(ParamStr(I));
121	121		glutInit(@CmdCount, @Cmd);
122	122		end;
123	123		```
124	124
125	125		In essence, you create an array and fill it with strings from ParamStr. This function also takes a parameter that can control what is passed to glutInit -- either the whole command line or just the executable file name.
126	126
127	127		ToDo: probably glutInit(@argc, @argv); is enough.
128	128
129	129		More about glutInit: <http://www.opengl.org/resources/libraries/glut/spec3/node10.html>
130	130
131		-	Next, you need to create a main window. Set the display mode for the main window using <b>glutInitDisplayMode</b>. It only takes one parameter which is a combination of flags. Usually <b>GLUT_DOUBLE or GLUT_RGB or GLUT_DEPTH</b> is all you will need.
	131	+	Next, you need to create a main window. Set the display mode for the main window using glutInitDisplayMode. It only takes one parameter which is a combination of flags. Usually GLUT_DOUBLE or GLUT_RGB or GLUT_DEPTH is all you will need.
132	132
133	133		More about glutInitDisplayMode: <http://www.opengl.org/resources/libraries/glut/spec3/node12.html>
134	134
135		-	The position and size of the window is controlled using <b>glutInitWindowPosition</b> and <b>glutInitWindowSize</b>. They take 2 parameters. X and Y coordinates in the former, and width and height in the latter. You can use <b>glutGet</b> to find the screen size and center the window.
	135	+	The position and size of the window is controlled using glutInitWindowPosition and glutInitWindowSize. They take 2 parameters. X and Y coordinates in the former, and width and height in the latter. You can use glutGet to find the screen size and center the window.
136	136
137	137		More about glutInitWindowPosition, glutInitWindowSize and glutGet: <http://www.opengl.org/resources/libraries/glut/spec3/node11.html> <http://www.opengl.org/documentation/specs/glut/spec3/node70.html>
138	138
139		-	Finally, the window should be created using the <b>glutCreateWindow</b> function. It will create the window and set its caption through a parameter. As a result it will return the window's handle. This can be used with other functions that require it.
	139	+	Finally, the window should be created using the glutCreateWindow function. It will create the window and set its caption through a parameter. As a result it will return the window's handle. This can be used with other functions that require it.
140	140
141	141		More about glutCreateWindow: <http://www.opengl.org/resources/libraries/glut/spec3/node16.html>
142	142
143		-	Before your program can enter the main loop, you must set some callbacks. You will a need callback for drawing the window, for resizing and for getting keyboard input. These callbacks are set using <b>glutDisplayFunc</b>, <b>glutReshapeFunc</b> and <b>glutKeyboardFunc</b>.
	143	+	Before your program can enter the main loop, you must set some callbacks. You will a need callback for drawing the window, for resizing and for getting keyboard input. These callbacks are set using glutDisplayFunc, glutReshapeFunc and glutKeyboardFunc.
144	144
145	145		More about setting callbacks: <http://www.opengl.org/resources/libraries/glut/spec3/node45.html#SECTION00080000000000000000>
146	146
147	147		Your drawing function might look like this:
148	148
149	149		``` pascal
150	150		procedure DrawGLScene; cdecl;
151	151		begin
152	152		glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);
153	153		glutSwapBuffers;
154	154		end;
155	155		```
156	156
157	157		This will only clear the window to the background color and reset the zbuffer (don't worry about zbuffer... more about that later).
158	158
159	159		Your resize function might look like this:
160	160
161	161		``` pascal
162	162		procedure ReSizeGLScene(Width, Height: Integer); cdecl;
163	163		begin
164	164		if Height = 0 then
165	165		Height := 1;
166	166
167	167		glViewport(0, 0, Width, Height);
168	168		glMatrixMode(GL_PROJECTION);
169	169		glLoadIdentity;
170	170		gluPerspective(45, Width / Height, 0.1, 1000);
171	171
172	172		glMatrixMode(GL_MODELVIEW);
173	173		glLoadIdentity;
174	174		end;
175	175		```
176	176
177	177		With this code, you tell OpenGL where in the window it should draw and set matrices to the desired values (matrix functions will be explained later).
178	178
179	179		Keyboard input is evaluated with the following callback:
180	180
181	181		``` pascal
182	182		procedure GLKeyboard(Key: Byte; X, Y: Longint); cdecl;
183	183		begin
184	184		if Key = 27 then
185	185		Halt(0);
186	186		end;
187	187		```
188	188
189		-	This function will instruct your program to exit if you press ESC key. GLUT is event driven and the only way to terminate your program is to call <b>Halt</b> inside one of your callback functions. If you close the window in some other way, it will disappear, but the program will continue to loop through the main routine indefinitely.
	189	+	This function will instruct your program to exit if you press ESC key. GLUT is event driven and the only way to terminate your program is to call Halt inside one of your callback functions. If you close the window in some other way, it will disappear, but the program will continue to loop through the main routine indefinitely.
190	190
191		-	~~To start the main loop, call <b>glutMainLoop</b>. It will enter a loop that never ends, which calls all your callback functions.~~
	191	+	To start the main loop, call glutMainLoop. It will enter a loop that never ends, which calls all your callback functions.
192	192
193	193		The main part of your program might look like this:
194	194
195	195		``` pascal
196	196		const
197	197		AppWidth = 640;
198	198		AppHeight = 480;
199	199
200	200		procedure InitializeGL;
201	201		begin
202	202		glClearColor(0.18, 0.20, 0.66, 0);
203	203		end;
204	204
205	205		var
206	206		ScreenWidth, ScreenHeight: Integer;
207	207		begin
208	208		glutInitPascal(True);
209	209		glutInitDisplayMode(GLUT_DOUBLE or GLUT_RGB or GLUT_DEPTH);
210	210		glutInitWindowSize(AppWidth, AppHeight);
211	211		ScreenWidth := glutGet(GLUT_SCREEN_WIDTH);
212	212		ScreenHeight := glutGet(GLUT_SCREEN_HEIGHT);
213	213		glutInitWindowPosition((ScreenWidth - AppWidth) div 2,
214	214		(ScreenHeight - AppHeight) div 2);
215	215		glutCreateWindow('OpenGL Tutorial 1');
216	216
217	217		InitializeGL;
218	218
219	219		glutDisplayFunc(@DrawGLScene);
220	220		glutReshapeFunc(@ReSizeGLScene);
221	221		glutKeyboardFunc(@GLKeyboard);
222	222
223	223		glutMainLoop;
224	224		end.
225	225		```
226	226
227	227		The next tutorial will add some code that will draw a simple shape.
228	228
229	229		Download source code or a linux/windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/projects/lazarus-ccr/files/OpenGL%20Tutorial/).
230	230
231	231		### Drawing a simple shape
232	232
233	233		Note: The following parts are almost only OpenGL, so they run under GLUT and LCL. You can recognize GLUT specific functions with the prefix 'glu'.
234	234
235	235		This time we shall add just a few lines of code and focus on explanation of some of the OpenGL functions.
236	236
237	237		Let us explain code you already have.
238	238
239	239		``` pascal
240	240		...
241	241		glMatrixMode(GL_PROJECTION);
242	242		glLoadIdentity;
243	243		gluPerspective(45, Width / Height, 0.1, 1000);
244	244
245	245		glMatrixMode(GL_MODELVIEW);
246	246		glLoadIdentity;
247	247		end;
248	248		```
249	249
250	250		Using glMatrixMode function you chose which matrix you want to change. OpenGL works with 3 matrices: GL_MODELVIEW: this one is used to move vertex to model space. GL_PROJECTION: this one is used to convert 3d coordinate to 2d coordinate for finall pixel position. GL_TEXTURE: this one is used to alter texture coordinates.
251	251
252		-	Once you chose matrix you want to change, you can call functions that affect matrix values. <b>glLoadIdentity</b> will reset matrix so it doesn't affect vertex position. Since almost all matrix functions multiply current matrix with a generated one, you sometimes need to clear matrix with this function.
	252	+	Once you chose matrix you want to change, you can call functions that affect matrix values. glLoadIdentity will reset matrix so it doesn't affect vertex position. Since almost all matrix functions multiply current matrix with a generated one, you sometimes need to clear matrix with this function.
253	253
254		-	~~In order to set perspective matrix, you can use <b>gluPerspective</b> function. Four parameters present the field of view, aspect ratio, near and far plane. It's that simple.~~
	254	+	In order to set perspective matrix, you can use gluPerspective function. Four parameters present the field of view, aspect ratio, near and far plane. It's that simple.
255	255
256	256		Now, you'll change model matrix... for this time, you just set it to identity.
257	257
258	258		OK... and now, the code for drawing the first shape:
259	259
260	260		``` pascal
261	261		procedure DrawGLScene; cdecl;
262	262		begin
263	263		glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);
264	264
265	265		glLoadIdentity;
266	266		glTranslatef(0, 0, -5);
267	267
268	268		glBegin(GL_TRIANGLES);
269	269		glColor3f(1, 0, 0);
270	270		glVertex3f(-1, -1, 0);
271	271
272	272		glColor3f(0, 1, 0);
273	273		glVertex3f(1, -1, 0);
274	274
275	275		glColor3f(0, 0, 1);
276	276		glVertex3f(0, 1, 0);
277	277		glEnd;
278	278
279	279		glutSwapBuffers;
280	280		end;
281	281		```
282	282
283	283		We have allready used glClear function. It will just reset buffers. We'll skip next two functions and head for drawing ones.
284	284
285	285		glBegin marks beginning of drawing block. After this function you can start entering vertices. Parameter describes how are vertices used when drawing:
286	286
287	287		GL_POINTS: Treats each vertex as a single point. Vertex n defines point n. N points are drawn.
288	288
289	289		GL_LINES: Treats each pair of vertices as an independent line segment. Vertices 2n-1 and 2n define line n. n/2 lines are drawn.
290	290
291	291		GL_LINE_STRIP: Draws a connected group of line segments from the first vertex to the last. n-1 lines are drawn.
292	292
293	293		GL_LINE_LOOP: Draws a connected group of line segments from the first vertex to the last, then back to the first. Vertices n and n+1 define line n. The last line, however, is defined by vertices n and 1. n lines are drawn.
294	294
295	295		GL_TRIANGLES: Treats each triplet of vertices as an independent triangle. Vertices 3n-2, 3n-1 and 3n define triangle n. n/3 triangles are drawn.
296	296
297	297		GL_TRIANGLE_STRIP: Draws a connected group of triangles. One triangle is defined for each vertex presented after the first two vertices. For odd n, vertices n, n+1 and n+2 define triangle n. For even n, vertices n+1, n and n+2 define triangle n. n-2 triangles are drawn.
298	298
299	299		GL_TRIANGLE_FAN: Draws a connected group of triangles. One triangle is defined for each vertex presented after the first two vertices. Vertices 1. n+1 and n+2 define triangle n. n-2 triangles are drawn.
300	300
301	301		GL_QUADS: Treats each group of four vertices as an independent quadrilateral. Vertices 4n-3, 4n-2, 4n-1 and 4n define quadrilateral n. n/4 quadrilaterals are drawn.
302	302
303	303		GL_QUAD_STRIP: Draws a connected group of quadrilaterals. One quadrilateral is defined for each pair of vertices presented after the first pair. Vertices 2n-1, 2n, 2n+2 and 2n+1 define quadrilateral n. n/2-1 quadrilaterals are drawn. Note that the order in which vertices are used to construct a quadrilateral from strip data is different from that used with independent data.
304	304
305	305		GL_POLYGON: Draws a single, convex polygon. Vertices 1 through n define this polygon.
306	306
307		-	![](/wiki-images/f/f3/SimpleShapePic1.jpg) You'll draw single triangle and for that GL_TRIANGLES flag will do the trick. <b>glVertex3f</b> function defines the position of a vertex you want to draw. There are more glVertex* functions. Only difference is number and type of parameters they take. For instance... glVertex2i takes two parameters (x and y) of integer type. glVertex3f will almost always be just what you need.
	307	+	![](/wiki-images/f/f3/SimpleShapePic1.jpg) You'll draw single triangle and for that GL_TRIANGLES flag will do the trick. glVertex3f function defines the position of a vertex you want to draw. There are more glVertex* functions. Only difference is number and type of parameters they take. For instance... glVertex2i takes two parameters (x and y) of integer type. glVertex3f will almost always be just what you need.
308	308
309		-	Before glVertex you can set color, material, texture... For simplicity you'll just specify color for each vertex in this tutorial. Color is set using <b>glColor3f</b> function. glColor can also take different set of parameters like glVertex.
	309	+	Before glVertex you can set color, material, texture... For simplicity you'll just specify color for each vertex in this tutorial. Color is set using glColor3f function. glColor can also take different set of parameters like glVertex.
310	310
311		-	As we look through code we can see that Z is set to 0 for all vertices. Since you set near plane to 0.1, triangle will not be visible. That is where those two functions we skipped in the beginning jump in. We already know that glLoadIdentity reset matrix. <b>glTranslatef</b> moves triangles by X, Y and Z values you provide. Since you set Z to -5 (negative Z is farther from camera) all vertices will be drawn 5 units far from point of view and will be visible.
	311	+	As we look through code we can see that Z is set to 0 for all vertices. Since you set near plane to 0.1, triangle will not be visible. That is where those two functions we skipped in the beginning jump in. We already know that glLoadIdentity reset matrix. glTranslatef moves triangles by X, Y and Z values you provide. Since you set Z to -5 (negative Z is farther from camera) all vertices will be drawn 5 units far from point of view and will be visible.
312	312
313		-	~~In the end you call <b>glEnd</b> functions that finishes drawing. You could now start another drawing block with new glBegin function if you wish.~~
	313	+	In the end you call glEnd functions that finishes drawing. You could now start another drawing block with new glBegin function if you wish.
314	314
315	315		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/projects/lazarus-ccr/files/OpenGL%20Tutorial/).
316	316
317	317		### Using display lists
318	318
319		-	Sometimes you'll need to draw some object multiple times on scene. OpenGL has ability to build <b>display lists</b> which make drawing a bit faster. Creating display list is very easy... just draw vertices as you did in previous tutorial and enclose them with <b>glNewList</b> and <b>glEndList</b> calls.
	319	+	Sometimes you'll need to draw some object multiple times on scene. OpenGL has ability to build display lists which make drawing a bit faster. Creating display list is very easy... just draw vertices as you did in previous tutorial and enclose them with glNewList and glEndList calls.
320	320
321	321		``` pascal
322	322		const
323	323		LIST_OBJECT = 1;
324	324
325	325		procedure CreateList;
326	326		begin
327	327		glNewList(LIST_OBJECT, GL_COMPILE);
328	328		glBegin(GL_TRIANGLE_FAN);
329	329		glColor3f(1, 0, 0);
330	330		glVertex3f(0, 0.5, 0);
331	331
332	332		glColor3f(1, 1, 0);
333	333		glVertex3f(-0.5, -0.5, 0.5);
334	334
335	335		glColor3f(1, 1, 1);
336	336		glVertex3f(0.5, -0.5, 0.5);
337	337
338	338		glColor3f(0, 1, 1);
339	339		glVertex3f(0.5, -0.5, -0.5);
340	340
341	341		glColor3f(0, 0, 1);
342	342		glVertex3f(-0.5, -0.5, -0.5);
343	343
344	344		glColor3f(0, 1, 0);
345	345		glVertex3f(-0.5, -0.5, 0.5);
346	346		glEnd;
347	347
348	348		glBegin(GL_QUADS);
349	349		glColor3f(1, 1, 0);
350	350		glVertex3f(-0.5, -0.5, 0.5);
351	351
352	352		glColor3f(1, 1, 1);
353	353		glVertex3f(0.5, -0.5, 0.5);
354	354
355	355		glColor3f(0, 1, 1);
356	356		glVertex3f(0.5, -0.5, -0.5);
357	357
358	358		glColor3f(0, 0, 1);
359	359		glVertex3f(-0.5, -0.5, -0.5);
360	360
361	361		glColor3f(0, 1, 0);
362	362		glVertex3f(-0.5, -0.5, 0.5);
363	363		glEnd;
364	364		glEndList;
365	365		end;
366	366		```
367	367
368		-	glNewList creates new display list and all drawing functions will be recorded until <b>glEndList</b> is called. The first parameter for glNewList function is list ID. Every list is defined by it's ID. If list with given ID is already created it fill be cleared before recording. If the second parameter is GL_COMPILE then all drawing functions are just recorded, but if it is GL_COMPILE_AND_EXECUTE then they are recorded and executed automatically.
	368	+	glNewList creates new display list and all drawing functions will be recorded until glEndList is called. The first parameter for glNewList function is list ID. Every list is defined by it's ID. If list with given ID is already created it fill be cleared before recording. If the second parameter is GL_COMPILE then all drawing functions are just recorded, but if it is GL_COMPILE_AND_EXECUTE then they are recorded and executed automatically.
369	369
370		-	glIsList function can help you with display lists. It can tell if some list ID is already filled with data. Another useful function is <b>glGenLists</b>. It will create multiple empty display lists. You pass number of display lists you need and you get ID of the first one. If you require n lists, and get r ID, generated display lists are: r, r+1, r+2,..., r+n-1
	370	+	glIsList function can help you with display lists. It can tell if some list ID is already filled with data. Another useful function is glGenLists. It will create multiple empty display lists. You pass number of display lists you need and you get ID of the first one. If you require n lists, and get r ID, generated display lists are: r, r+1, r+2,..., r+n-1
371	371
372	372		All created lists should be deleted. You will do that before program exits:
373	373
374	374		``` pascal
375	375		procedure GLKeyboard(Key: Byte; X, Y: Longint); cdecl;
376	376		begin
377	377		if Key = 27 then
378	378		begin
379	379		glDeleteLists(LIST_OBJECT, 1);
380	380		Halt(0);
381	381		end;
382	382		end;
383	383		```
384	384
385	385		glDeleteLists takes 2 parameters, ID of display list and number of lists to delete. If ID is r, and number of lists to delete is n, deleted lists are: r, r+1, r+2,..., r+n-1
386	386
387	387		Now you know how to create and delete display lists... let's see how to draw them:
388	388
389	389		``` pascal
390	390		procedure DrawGLScene; cdecl;
391	391		begin
392	392		glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);
393	393
394	394		glLoadIdentity;
395	395		glTranslatef(-2, 0, -5);
396	396		glRotatef(40, 1, 0, 1);
397	397		glCallList(LIST_OBJECT);
398	398
399	399		glLoadIdentity;
400	400		glTranslatef(1, -2, -10);
401	401		glRotatef(62, 0, 1, 0);
402	402		glCallList(LIST_OBJECT);
403	403
404	404		glLoadIdentity;
405	405		glTranslatef(-4, 0.5, -15);
406	406		glRotatef(200, 1, 0, 0);
407	407		glCallList(LIST_OBJECT);
408	408
409	409		glutSwapBuffers;
410	410		end;
411	411		```
412	412
413		-	![](/wiki-images/a/a5/DisplayListsPic1.jpg) Using <b>glCallList</b> you can draw only one display list. In this tutorial, before drawing display list, you change model matrix and draw object in different places. Some times you would like to draw multiple lists at once. That is possible using glCallLists function. It takes number of lists you want to draw, type of array that contains display list IDs and array with display list IDs. Type of list can be one of the following:
	413	+	![](/wiki-images/a/a5/DisplayListsPic1.jpg) Using glCallList you can draw only one display list. In this tutorial, before drawing display list, you change model matrix and draw object in different places. Some times you would like to draw multiple lists at once. That is possible using glCallLists function. It takes number of lists you want to draw, type of array that contains display list IDs and array with display list IDs. Type of list can be one of the following:
414	414
415	415		GL_BYTE: list is treated as an array of signed bytes, each in the range -128 through 127.
416	416
417	417		GL_UNSIGNED_BYTE: list is treated as an array of unsigned bytes, each in the range 0 through 255.
418	418
419	419		GL_SHORT: list is treated as an array of signed two-byte integers, each in the range -32768 through 32767.
420	420
421	421		GL_UNSIGNED_SHORT: list is treated as an array of unsigned two-byte integers, each in the range 0 through 65535.
422	422
423	423		GL_INT: lists is treated as an array of signed four-byte integers.
424	424
425	425		GL_UNSIGNED_INT: list is treated as an array of unsigned four-byte integers.
426	426
427	427		GL_FLOAT: list is treated as an array of four-byte floating-point values.
428	428
429	429		GL_2_BYTES: list is treated as an array of unsigned bytes. Each pair of bytes specifies a single display list ID. The value of the pair is computed as 256 times the unsigned value of the first byte plus the unsigned value of the second byte.
430	430
431	431		GL_3_BYTES: list is treated as an array of unsigned bytes. Each triplet of bytes specifies a single display list ID. The value of the triplet is computed as 65536 times the unsigned value of the first byte, plus 256 times the unsigned value of the second byte, plus the unsigned value of the third byte.
432	432
433	433		GL_4_BYTES: list is treated as an array of unsigned bytes. Each quadruplet of bytes specifies a single display list ID. The value of the quadruplet is computed as 16777216 times the unsigned value of the first byte, plus 65536 times the unsigned value of the second byte, plus 256 times the unsigned value of the third byte, plus the unsigned value of the fourth byte.
434	434
435	435		That is for now. Next tutorial will show how to create little planetary system. We'll talk about matrices and how to make animated scene that doesn't depend of number of frames per second.
436	436
437	437		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/projects/lazarus-ccr/files/OpenGL%20Tutorial/).
438	438
439	439		### Full screen animation
440	440
441	441		Entering full screen mode is easy with GLUT. Let's change main part of the program:
442	442
443	443		``` pascal
444	444		const
445	445		FSMode = '800x600:32@75';
446	446
447	447		begin
448	448		glutInitPascal(False);
449	449		glutInitDisplayMode(GLUT_DOUBLE or GLUT_RGB or GLUT_DEPTH);
450	450		glutGameModeString(FSMode);
451	451		glutEnterGameMode;
452	452		glutSetCursor(GLUT_CURSOR_NONE);
453	453
454	454		InitializeGL;
455	455
456	456		glutDisplayFunc(@DrawGLScene);
457	457		glutReshapeFunc(@ReSizeGLScene);
458	458		glutKeyboardFunc(@GLKeyboard);
459	459		glutIdleFunc(@DrawGLScene);
460	460
461	461		glutMainLoop;
462	462		end.
463	463		```
464	464
465		-	Since we don't want GLUT to parse command line this time we call glutInitPascal with False parameter. As you can see, there is no code for window creation. GLUT have <b>glutEnterGameMode</b> that create full screen window. To specify what kind of full screen mode you want, you call <b>glutGameModeString</b> function which takes string that defines mode you like. Format of that string is:
	465	+	Since we don't want GLUT to parse command line this time we call glutInitPascal with False parameter. As you can see, there is no code for window creation. GLUT have glutEnterGameMode that create full screen window. To specify what kind of full screen mode you want, you call glutGameModeString function which takes string that defines mode you like. Format of that string is:
466	466
467	467		`[width "x" height][":" bpp]["@" hertz]`
468	468
469	469		In FSMode string we declared that full screen mode should be 800x600, with 32bit pallete and 75Hz refresh. It is possible to skip one of the group. If you omit size, GLUT will try to use current one or first smaller that can work. That policy is used and for other parameters.
470	470
471	471		Usually in full screen mode cursor is not visible. To hide cursor you use glutSetCursor function. It takes only one parameter which describes cursor you would like to see:
472	472
473	473		`GLUT_CURSOR_RIGHT_ARROW`\
474	474		`GLUT_CURSOR_LEFT_ARROW`\
475	475		`GLUT_CURSOR_INFO`\
476	476		`GLUT_CURSOR_DESTROY`\
477	477		`GLUT_CURSOR_HELP`\
478	478		`GLUT_CURSOR_CYCLE`\
479	479		`GLUT_CURSOR_SPRAY`\
480	480		`GLUT_CURSOR_WAIT`\
481	481		`GLUT_CURSOR_TEXT`\
482	482		`GLUT_CURSOR_CROSSHAIR`\
483	483		`GLUT_CURSOR_UP_DOWN`\
484	484		`GLUT_CURSOR_LEFT_RIGHT`\
485	485		`GLUT_CURSOR_TOP_SIDE`\
486	486		`GLUT_CURSOR_BOTTOM_SIDE`\
487	487		`GLUT_CURSOR_LEFT_SIDE`\
488	488		`GLUT_CURSOR_RIGHT_SIDE`\
489	489		`GLUT_CURSOR_TOP_LEFT_CORNER`\
490	490		`GLUT_CURSOR_TOP_RIGHT_CORNER`\
491	491		`GLUT_CURSOR_BOTTOM_RIGHT_CORNER`\
492	492		`GLUT_CURSOR_BOTTOM_LEFT_CORNER`\
493	493		`GLUT_CURSOR_FULL_CROSSHAIR`\
494	494		`GLUT_CURSOR_NONE`\
495	495		`GLUT_CURSOR_INHERIT`
496	496
497	497		glutIdleFunc defines callback function that you want to be called every time you program has no messages to process. Since we just want to render new frame if there is nothing to do, just set idle function to DrawGLScene. Some other tutorials show that idle function should send refresh message insted of drawing, but that way I have 50-100 frames less than using method I described.
498	498
499	499		Now, let's look at the program termination where you need to exit full screen mode:
500	500
501	501		``` pascal
502	502		procedure GLKeyboard(Key: Byte; X, Y: Longint); cdecl;
503	503		begin
504	504		if Key = 27 then
505	505		begin
506	506		glutLeaveGameMode;
507	507		Halt(0);
508	508		end;
509	509		end;
510	510		```
511	511
512		-	~~As you can see, all you need to do is to call <b>glutLeaveGameMode</b>.~~
	512	+	As you can see, all you need to do is to call glutLeaveGameMode.
513	513
514	514		Now, we'll introduce some new matrix functions. First, let's change ReSizeGLScene function:
515	515
516	516		``` pascal
517	517		procedure ReSizeGLScene(Width, Height: Integer); cdecl;
518	518		begin
519	519		...
520	520		glMatrixMode(GL_MODELVIEW);
521	521		glLoadIdentity;
522	522		gluLookAt(0, 20, 25, 0, 0, 0, 0, 1, 0);
523	523		end;
524	524		```
525	525
526	526		gluLookAt create matrix that will define from where are you look to objects. First 3 parameters are X, Y and Z coordinate of position of camera. Next 3 parameters are X, Y and Z coordinate of point where camera look at, and last 3 parameters defines "up" vector (where is "up" for the camera). Usually, up is positive y axis.
527	527
528	528		OK, let's draw now. Since you set matrix with gluLookAt that should be used with all objects, you can't just use glLoadIdentity to reset matrix for next object... you'll save previous matrix state and restore it after object is drawn:
529	529
530	530		``` pascal
531	531		procedure DrawGLScene; cdecl;
532	532		var
533	533		T: Single;
534	534		begin
535	535		T := glutGet(GLUT_ELAPSED_TIME) / 1000;
536	536		glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);
537	537
538	538		glPushMatrix;
539	539		glRotatef(5 * T, 0, 1, 0);
540	540		glColor3f(1, 1, 0);
541	541		glutWireSphere(2, 20, 20);
542	542		glPopMatrix;
543	543
544	544		glPushMatrix;
545	545		glRotatef(90 * T, 0, 1, 0);
546	546		glTranslatef(5, 0, 0);
547	547		glRotatef(40 * T, 0, 1, 0);
548	548		glColor3f(1, 0, 0);
549	549		glutWireSphere(0.6, 10, 10);
550	550		glPopMatrix;
551	551
552	552		glPushMatrix;
553	553		glRotatef(60 * T, 0, 1, 0);
554	554		glTranslatef(-3, 0, 9);
555	555		glRotatef(50 * T, 0, 1, 0);
556	556		glColor3f(0, 1, 0);
557	557		glutWireSphere(1, 16, 16);
558	558
559	559		glPushMatrix;
560	560		glRotatef(360 * T, 0, 1, 0);
561	561		glTranslatef(-1.7, 0, 0);
562	562		glRotatef(50 * T, 0, 1, 0);
563	563		glColor3f(0, 0, 1);
564	564		glutWireSphere(0.4, 10, 10);
565	565		glPopMatrix;
566	566
567	567		glPopMatrix;
568	568
569	569		glutSwapBuffers;
570	570		end;
571	571		```
572	572
573		-	![](/wiki-images/5/51/FullScreenAnimationPic1.jpg) <b>glPushMatrix</b> i <b>glPopMatrix</b> are used to save and restore matrix state. As you can see, we save matrix state, then change matrix in order to draw object in right place, and then restore old matrix state.
	573	+	![](/wiki-images/5/51/FullScreenAnimationPic1.jpg) glPushMatrix i glPopMatrix are used to save and restore matrix state. As you can see, we save matrix state, then change matrix in order to draw object in right place, and then restore old matrix state.
574	574
575		-	You may wonder what is <b>T</b> variable for. Well, it is used to determen animation speed. Every change that depends on time is multiplied with T. That way animation speed is constant on every frame rate. <b>glutGet</b> function with <b>GLUT_ELAPSED_TIME</b> parameter returns time in milliseconds from glutInit is called. By dividing that value with 1000, we get time in seconds.
	575	+	You may wonder what is T variable for. Well, it is used to determen animation speed. Every change that depends on time is multiplied with T. That way animation speed is constant on every frame rate. glutGet function with GLUT_ELAPSED_TIME parameter returns time in milliseconds from glutInit is called. By dividing that value with 1000, we get time in seconds.
576	576
577		-	<b>glRotatef</b> function create rotation matrix. First parameter is angle in degrees, and last 3 parameters defines axis around which rotation will be done. Since you multiplied angle with T, object will be rotated by that angle in exactly 1 second.
	577	+	glRotatef function create rotation matrix. First parameter is angle in degrees, and last 3 parameters defines axis around which rotation will be done. Since you multiplied angle with T, object will be rotated by that angle in exactly 1 second.
578	578
579	579		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/projects/lazarus-ccr/files/OpenGL%20Tutorial/).
580	580
581	581		### Light
582	582
583	583		This tutorial will introduce some light to the scene. You'll make rotating cube and one light which will add some realism to the scene, but first let's make some utility unit.
584	584
585	585		For now it will have only basic functions to help us getting current and delta (time that elapsed from one render to other render call) times and for calculating frames per second.
586	586
587	587		``` pascal
588	588		unit utils;
589	589
590	590		{$mode objfpc}{$H+}
591	591
592	592		interface
593	593
594	594		uses
595	595		glut;
596	596
597	597		function GetTotalTime: Single;
598	598		function GetDeltaTime: Single;
599	599		procedure FrameRendered(Count: Integer = 1);
600	600		function GetFPS: Single;
601	601
602	602		implementation
603	603
604	604		var
605	605		OldTime: Integer = 0;
606	606		FPSTime: Integer = 0;
607	607		FPSCount: Integer = 0;
608	608
609	609		function GetTotalTime: Single;
610	610		begin
611	611		Result := glutGet(GLUT_ELAPSED_TIME) / 1000;
612	612		end;
613	613
614	614		function GetDeltaTime: Single;
615	615		var
616	616		NewTime: Integer;
617	617		begin
618	618		NewTime := glutGet(GLUT_ELAPSED_TIME);
619	619		Result := (NewTime - OldTime) / 1000;
620	620		OldTime := NewTime;
621	621		end;
622	622
623	623		procedure FrameRendered(Count: Integer);
624	624		begin
625	625		Inc(FPSCount, Count);
626	626		end;
627	627
628	628		function GetFPS: Single;
629	629		var
630	630		NewTime: Integer;
631	631		begin
632	632		NewTime := glutGet(GLUT_ELAPSED_TIME);
633	633
634	634		Result := FPSCount / ((NewTime - FPSTime) / 1000);
635	635
636	636		FPSTime := NewTime;
637	637		FPSCount := 0;
638	638		end;
639	639
640	640		end.
641	641		```
642	642
643	643		As you can see, there is nothing complicated in this unit. Time is simply saved betwen calls and difference is returned. FrameRendered should be called every time you draw scene so function can calculate FPS.
644	644
645	645		Now, let's have fun with lights.
646	646
647	647		OpenGL have several types of light... ambient, diffuse, point, spot, specular and emissive light.
648	648
649	649		Ambient light is something like Sun. When sun rays pass through the window of a room they hit the walls and are reflected and scattered into all different directions which averagely brightens up the whole room. All vertices are lit with ambient light.
650	650
651	651		Diffuse light can be represented as parallel light rays comming from far away. They will lit only vertices that are oriented towards the light source.
652	652
653	653		Point light lights all around it. It is like a fire ball, it send light rays all around it and lights vertices that are oriented towards light source and that are close enough.
654	654
655	655		Spot light is like light from flashlight. It is simply a point light source with a small light cone radius. All vertices that falls inside of cone and are close enough are lit.
656	656
657	657		Just like Diffuse light, Specular light is a directional type of light. It comes from one particular direction. The difference between the two is that specular light reflects off the surface in a sharp and uniform way. The rendering of specular light relies on the angle between the viewer and the light source. From the viewer’s standpoint specular light creates a highlighted area on the surface of the viewed object known as specular highlight or specular reflection.
658	658
659	659		Emissive light is a little different than any other previously explained light components. This light comes out of object you draw but don't lit other objects in nearby.
660	660
661	661		For simplicity we'll use only diffuse light in this tutorial. Later on, some other lights may appear in tutorials :)
662	662
663	663		Let's see how to enable light in scene:
664	664
665	665		``` pascal
666	666		const
667	667		DiffuseLight: array[0..3] of GLfloat = (0.8, 0.8, 0.8, 1);
668	668
669	669		glEnable(GL_LIGHTING);
670	670		glLightfv(GL_LIGHT0, GL_DIFFUSE, DiffuseLight);
671	671		glEnable(GL_LIGHT0);
672	672		```
673	673
674		-	As you see, we enable lighting in OpenGL so lights affect scene you are rendering. Light parameters are set with <b>glLightfv</b> function. It takes 3 parameters... one for light number you want to change (OpenGL suports up to 8 lights), next tells OpenGL what light parameter to change, and the last one is new parameter for light. You'll set just diffuse color for light in this tutorial. After that, you can enable light and there will be light in the scene... but... that is not all.
	674	+	As you see, we enable lighting in OpenGL so lights affect scene you are rendering. Light parameters are set with glLightfv function. It takes 3 parameters... one for light number you want to change (OpenGL suports up to 8 lights), next tells OpenGL what light parameter to change, and the last one is new parameter for light. You'll set just diffuse color for light in this tutorial. After that, you can enable light and there will be light in the scene... but... that is not all.
675	675
676	676		More about glLightfv: <http://www.opengl.org//documentation/specs/man_pages/hardcopy/GL/html/gl/light.html>
677	677
678	678		If you want to use lights you can't just set color for vertex... you must set material for vertices. Let's setup material for drawing:
679	679
680	680		``` pascal
681	681		glEnable(GL_COLOR_MATERIAL);
682	682		glColorMaterial(GL_FRONT, GL_AMBIENT_AND_DIFFUSE);
683	683		```
684	684
685		-	![](/wiki-images/e/ed/LightPic1.jpg) You expected something more complicated, do you? :) Well, this code allows us to use glColor function to set material to vertices. By using glEnable function and GL_COLOR_MATERIAL flag, you can define what material properties will glColor change. <b>glColorMaterial(GL_FRONT, GL_AMBIENT_AND_DIFFUSE)</b> tells OpenGL that glColor changes ambient and diffuse material. We'll discus materials more in later tutorials.
	685	+	![](/wiki-images/e/ed/LightPic1.jpg) You expected something more complicated, do you? :) Well, this code allows us to use glColor function to set material to vertices. By using glEnable function and GL_COLOR_MATERIAL flag, you can define what material properties will glColor change. glColorMaterial(GL_FRONT, GL_AMBIENT_AND_DIFFUSE) tells OpenGL that glColor changes ambient and diffuse material. We'll discus materials more in later tutorials.
686	686
687	687		One more thing that is important when using lights... every vertex must have normal associated with it. Normal is used to find the direction of vertex so light can be calculated properly. You'll use GLUT function to draw cube and it provides normals for us, so this time we'll just walk by normals.
688	688
689	689		After all those setting ups, light will shine up your cube :)
690	690
691	691		Part of the text is copied from [The OpenGL Light Bible](http://www.falloutsoftware.com/tutorials/gl/gl8.htm)
692	692
693	693		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/projects/lazarus-ccr/files/OpenGL%20Tutorial/).
694	694
695	695		### Bitmap fonts
696	696
697	697		Games and programs usually need to write some text on screen. GLUT provides several functions for drawing chars that are platform independent.
698	698
699	699		First, we'll show how to use default bitmap fonts. Almost all code additions will be made to utils.pas unit.
700	700
701	701		Since text will be drawn in 2D, we'll need to know width and height of viewport... so, we'll write two functions for that:
702	702
703	703		``` pascal
704	704		function glGetViewportWidth: Integer;
705	705		var
706	706		Rect: array[0..3] of Integer;
707	707		begin
708	708		glGetIntegerv(GL_VIEWPORT, @Rect);
709	709		Result := Rect[2] - Rect[0];
710	710		end;
711	711
712	712		function glGetViewportHeight: Integer;
713	713		var
714	714		Rect: array[0..3] of Integer;
715	715		begin
716	716		glGetIntegerv(GL_VIEWPORT, @Rect);
717	717		Result := Rect[3] - Rect[1];
718	718		end;
719	719		```
720	720
721	721		We just get left/right, top/bottom and calculate width/height by subtracting them.
722	722
723	723		There must be functions for entering and leaving 2D mode:
724	724
725	725		``` pascal
726	726		procedure glEnter2D;
727	727		begin
728	728		glMatrixMode(GL_PROJECTION);
729	729		glPushMatrix;
730	730		glLoadIdentity;
731	731		gluOrtho2D(0, glGetViewportWidth, 0, glGetViewportHeight);
732	732
733	733		glMatrixMode(GL_MODELVIEW);
734	734		glPushMatrix;
735	735		glLoadIdentity;
736	736
737	737		glDisable(GL_DEPTH_TEST);
738	738		end;
739	739
740	740		procedure glLeave2D;
741	741		begin
742	742		glMatrixMode(GL_PROJECTION);
743	743		glPopMatrix;
744	744		glMatrixMode(GL_MODELVIEW);
745	745		glPopMatrix;
746	746
747	747		glEnable(GL_DEPTH_TEST);
748	748		end;
749	749		```
750	750
751		-	When entering 2D mode, we save current matrices and set 2D matrix using <b>gluOrtho2D</b> function. This way if we draw some thing on 100, 100 it will be drawn on exactly 100 pixels from left edge of window, and 100 pixels form bottom edge (positive Y is up). Also, we disable ZBuffer. This way text won't alter ZBuffer.
	751	+	When entering 2D mode, we save current matrices and set 2D matrix using gluOrtho2D function. This way if we draw some thing on 100, 100 it will be drawn on exactly 100 pixels from left edge of window, and 100 pixels form bottom edge (positive Y is up). Also, we disable ZBuffer. This way text won't alter ZBuffer.
752	752
753	753		Leaving 2D mode just returns old matrices and enable ZBuffer.
754	754
755	755		Now, we can create function for text drawing:
756	756
757	757		``` pascal
758	758		procedure glWrite(X, Y: GLfloat; Font: Pointer; Text: String);
759	759		var
760	760		I: Integer;
761	761		begin
762	762		glRasterPos2f(X, Y);
763	763		for I := 1 to Length(Text) do
764	764		glutBitmapCharacter(Font, Integer(Text[I]));
765	765		end;
766	766		```
767	767
768	768		glutBitmapCharacter can draw only one character of selected font. First parameter is desired font (GLUT_BITMAP_9_BY_15, GLUT_BITMAP_8_BY_13, GLUT_BITMAP_TIMES_ROMAN_10, GLUT_BITMAP_TIMES_ROMAN_24, GLUT_BITMAP_HELVETICA_10, GLUT_BITMAP_HELVETICA_12 or GLUT_BITMAP_HELVETICA_18) and other one is character.
769	769
770		-	Character will be drawn at current raster position. To set desired raster position we call <b>glRasterPos</b> function. glRasterPos can handle different number and types of parameters just like glVertex function. Coordinate specified is transformed by model and projection matrix to get 2D coordinate where new raster position will be. Since we entered 2D mode, X and Y coordinates are actual 2D coordinates where drawing will occur.
	770	+	Character will be drawn at current raster position. To set desired raster position we call glRasterPos function. glRasterPos can handle different number and types of parameters just like glVertex function. Coordinate specified is transformed by model and projection matrix to get 2D coordinate where new raster position will be. Since we entered 2D mode, X and Y coordinates are actual 2D coordinates where drawing will occur.
771	771
772	772		This new functions will make text drawing very easy:
773	773
774	774		``` pascal
775	775		procedure DrawGLScene; cdecl;
776	776		begin
777	777		glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);
778	778
779	779		glLoadIdentity;
780	780		glTranslatef(0, 0, -5);
781	781		glRotatef(GetTotalTime * 10, 0, 0.5, 0.5);
782	782
783	783		glColor3f(1, 0, 0);
784	784		glutSolidCube(2);
785	785
786	786		glEnter2D;
787	787
788	788		glColor3f(0.2, 0.8 + 0.2 * Sin(GetTotalTime * 5), 0);
789	789		glWrite(20, glGetViewportHeight - 20, GLUT_BITMAP_8_BY_13,
790	790		Format('OpenGL Tutorial :: Bitmap Fonts :: FPS - %.2f FPS', [FPS]));
791	791
792	792		glColor3f(1, 1, 1);
793	793		glWrite(50, glGetViewportHeight - 60, GLUT_BITMAP_9_BY_15, 'GLUT_BITMAP_9_BY_15');
794	794		glWrite(50, glGetViewportHeight - 90, GLUT_BITMAP_8_BY_13, 'GLUT_BITMAP_8_BY_13');
795	795		glWrite(50, glGetViewportHeight - 120, GLUT_BITMAP_TIMES_ROMAN_10, 'GLUT_BITMAP_TIMES_ROMAN_10');
796	796		glWrite(50, glGetViewportHeight - 150, GLUT_BITMAP_TIMES_ROMAN_24, 'GLUT_BITMAP_TIMES_ROMAN_24');
797	797		glWrite(50, glGetViewportHeight - 180, GLUT_BITMAP_HELVETICA_10, 'GLUT_BITMAP_HELVETICA_10');
798	798		glWrite(50, glGetViewportHeight - 210, GLUT_BITMAP_HELVETICA_12, 'GLUT_BITMAP_HELVETICA_12');
799	799		glWrite(50, glGetViewportHeight - 240, GLUT_BITMAP_HELVETICA_18, 'GLUT_BITMAP_HELVETICA_18');
800	800
801	801		glColor3f(0.5, 0.5, 1);
802	802		glWrite(
803	803		glGetViewportWidth - glutBitmapLength(GLUT_BITMAP_9_BY_15, LazText) - 5,
804	804		10, GLUT_BITMAP_9_BY_15, LazText);
805	805
806	806		glLeave2D;
807	807
808	808		glutSwapBuffers;
809	809
810	810		FrameRendered;
811	811		end;
812	812		```
813	813
814		-	![](/wiki-images/b/ba/BitmapFontsPic1.jpg) We draw red cube and rotate it, and some text to show how various bitmap fonts look like. <b>glutBitmapLength</b> function is used to find width of string so it could be aligned to right. Code can easily be altered to center text.
	814	+	![](/wiki-images/b/ba/BitmapFontsPic1.jpg) We draw red cube and rotate it, and some text to show how various bitmap fonts look like. glutBitmapLength function is used to find width of string so it could be aligned to right. Code can easily be altered to center text.
815	815
816	816		Note: See how cube looks without light.
817	817
818	818		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/projects/lazarus-ccr/files/OpenGL%20Tutorial/).
819	819
820	820		### Textures
821	821
822	822		It's time to use textures :)
823	823
824	824		This tutorial will show how to draw textured polygons and how to blend textures using multipass technic. Since OpenGL has no builtin mechanism for loading textures, we'll use external library: [Vampyre Imaging Library](http://imaginglib.sourceforge.net/). We'll use just OpenGL helper functions, but you may find this lib handy for some other things to.
825	825
826	826		Let's get started... we'll create display list for drawing textured rectangle:
827	827
828	828		``` pascal
829	829		procedure CreateList;
830	830		begin
831	831		glNewList(LIST_OBJECT, GL_COMPILE);
832	832		glBegin(GL_QUADS);
833	833		glTexCoord2f(1, 0);
834	834		glVertex3f( 2, 2, 0);
835	835		glTexCoord2f(0, 0);
836	836		glVertex3f(-2, 2, 0);
837	837		glTexCoord2f(0, 1);
838	838		glVertex3f(-2,-2, 0);
839	839		glTexCoord2f(1, 1);
840	840		glVertex3f( 2,-2, 0);
841	841		glEnd;
842	842		glEndList;
843	843		end;
844	844		```
845	845
846		-	Notice <b>glTexCoord</b> functions. They are used to specify which part of texture is assigned to vertex. Coordinates defined in this functions are from 0 to 1 (values greater than 1 are allowed but can generate different results). 0 is first pixel and 1 is last pixel. So, 0.5 will be right in the middle of texture.
	846	+	Notice glTexCoord functions. They are used to specify which part of texture is assigned to vertex. Coordinates defined in this functions are from 0 to 1 (values greater than 1 are allowed but can generate different results). 0 is first pixel and 1 is last pixel. So, 0.5 will be right in the middle of texture.
847	847
848	848		Texture loading is extremely easy with Vampyre Imaging Library:
849	849
850	850		``` pascal
851	851		var
852	852		Tex1, Tex2: GLuint;
853	853
854	854		procedure InitializeGL;
855	855		begin
856	856		glClearColor(0, 0, 0, 0);
857	857		Tex1 := LoadGLTextureFromFile('ashwood.bmp');
858	858		Tex2 := LoadGLTextureFromFile('Flare.bmp');
859	859		glEnable(GL_TEXTURE_2D);
860	860		end;
861	861		```
862	862
863	863		LoadGLTextureFromFile loads texture from file and returns it's ID. When texture is loaded it is allready setup for rendering. Last line just enables 2D textures.
864	864
865	865		To draw textured polygon you have to bind texture and setup texture coordinations (texture coordinations are set in display list in this tutorial):
866	866
867	867		``` pascal
868	868		...
869	869		glLoadIdentity;
870	870		glTranslatef(-5, 0, -15);
871	871		glBindTexture(GL_TEXTURE_2D, Tex1);
872	872		glCallList(LIST_OBJECT);
873	873		...
874	874		```
875	875
876	876		glBindTexture function is used to select texture. When you draw polygins they will have selected texture on them. It's that easy :)
877	877
878	878		So, using one texture is easy... but how to blend two textures. Basicly you draw polygon once with one texture, setup blending parameters, and draw polygon once more time with other texture. You can blend houndreds of textures this way. Let's see how code for this looks:
879	879
880	880		``` pascal
881	881		...
882	882		glLoadIdentity;
883	883		glTranslatef(5, 0, -15);
884	884		glBindTexture(GL_TEXTURE_2D, Tex1);
885	885		glCallList(LIST_OBJECT);
886	886
887	887		glEnable(GL_BLEND);
888	888		glBlendFunc(GL_ZERO, GL_SRC_COLOR);
889	889		glLoadIdentity;
890	890		glTranslatef(5, 0, -15);
891	891		glBindTexture(GL_TEXTURE_2D, Tex2);
892	892		glCallList(LIST_OBJECT);
893	893		glDisable(GL_BLEND);
894	894		...
895	895		```
896	896
897		-	As you can see, polygon is drawn first time like we allready know. Before second drawing we enable blending by calling <b>glEnable(GL_BLEND)</b>. Blending means that finall pixel color is calculated like this:
	897	+	As you can see, polygon is drawn first time like we allready know. Before second drawing we enable blending by calling glEnable(GL_BLEND). Blending means that finall pixel color is calculated like this:
898	898
899	899		`DrawingColor * SRCBLEND + BackgroundColor * DESTBLEND`
900	900
901		-	~~SRCBLEND and DESTBLEND are defined using <b>glBlendFunc</b> function. In this tutorial we set SRCBLEND to GL_ZERO (zero) and DESTBLENT to GL_SRC_COLOR (DrawingColor) and finall color is then:~~
	901	+	SRCBLEND and DESTBLEND are defined using glBlendFunc function. In this tutorial we set SRCBLEND to GL_ZERO (zero) and DESTBLENT to GL_SRC_COLOR (DrawingColor) and finall color is then:
902	902
903	903		`DrawingColor * 0 + BackgroundColor * DrawingColor`
904	904
905		-	~~<figure>~~
906		-	~~<img src="TexturesPic1.jpg" title="TexturesPic1.jpg" />~~
907		-	~~<figcaption>TexturesPic1.jpg</figcaption>~~
908		-	~~</figure>~~
	905	+	![](/wiki-images/d/d4/TexturesPic1.jpg)
909	906
910	907		This means that background will get darker when you draw with dark colors... when you draw with white color, background color will not be changed. The result will look like this
911	908
912	909		Next time, we'll use extensions to show how to use singlepass multitexturing.
913	910
914	911		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/projects/lazarus-ccr/files/OpenGL%20Tutorial/).
915	912
916	913		### Multitexturing (extensions)
917	914
918	915		When youknow multipass multi texturing, singlepass is very easy. Texturing is separated in stages. First stage setup and draw first texture, second stage draws another one and so on. All you have to do is to setup texture stages and to render object.
919	916
920	917		Let's see how code looks like:
921	918
922	919		``` pascal
923	920		procedure InitializeGL;
924	921		begin
925	922		Load_GL_ARB_multitexture;
926	923		glClearColor(0, 0, 0, 0);
927	924		Tex1 := LoadGLTextureFromFile('Lazarus.bmp');
928	925		Tex2 := LoadGLTextureFromFile('Mask.bmp');
929	926		glActiveTextureARB(GL_TEXTURE0_ARB);
930	927		glEnable(GL_TEXTURE_2D);
931	928		glBindTexture(GL_TEXTURE_2D, Tex1);
932	929		glActiveTextureARB(GL_TEXTURE1_ARB);
933	930		glEnable(GL_TEXTURE_2D);
934	931		glBindTexture(GL_TEXTURE_2D, Tex2);
935	932		end;
936	933		```
937	934
938		-	First we need load OpenGL extension that will allow us to use multitexture functions. <b>Load_GL_ARB_multitexture</b> will try to load those extensions and will return TRUE if operation was successful.
	935	+	First we need load OpenGL extension that will allow us to use multitexture functions. Load_GL_ARB_multitexture will try to load those extensions and will return TRUE if operation was successful.
939	936
940		-	To select texture stage you want to work on, use <b>glActiveTextureARB</b> function. It takes only one parameter that define which stage you want. After that all texture functions (enabling, disabling, binding, creating...) will affect that stage.
	937	+	To select texture stage you want to work on, use glActiveTextureARB function. It takes only one parameter that define which stage you want. After that all texture functions (enabling, disabling, binding, creating...) will affect that stage.
941	938
942	939		Since we setup every thing in initialization function, all we have to do is to draw object:
943	940
944	941		``` pascal
945	942		procedure DrawGLScene; cdecl;
946	943		begin
947	944		glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);
948	945
949	946		glLoadIdentity;
950	947		glTranslatef(0, 0, -5);
951	948
952	949		glBegin(GL_QUADS);
953	950		glMultiTexCoord2fARB(GL_TEXTURE0_ARB, 1, 0);
954	951		glMultiTexCoord2fARB(GL_TEXTURE1_ARB, 1, 0);
955	952		glVertex3f(2.516, 2, 0);
956	953		glMultiTexCoord2fARB(GL_TEXTURE0_ARB, 0, 0);
957	954		glMultiTexCoord2fARB(GL_TEXTURE1_ARB, 0, 0);
958	955		glVertex3f(-2.516, 2, 0);
959	956		glMultiTexCoord2fARB(GL_TEXTURE0_ARB, 0, 1);
960	957		glMultiTexCoord2fARB(GL_TEXTURE1_ARB, 0, 1);
961	958		glVertex3f(-2.516,-2, 0);
962	959		glMultiTexCoord2fARB(GL_TEXTURE0_ARB, 1, 1);
963	960		glMultiTexCoord2fARB(GL_TEXTURE1_ARB, 1, 1);
964	961		glVertex3f(2.516,-2, 0);
965	962		glEnd;
966	963
967	964		glutSwapBuffers;
968	965		end;
969	966		```
970	967
971		-	![](/wiki-images/5/52/MultitexturePic1.jpg) As you can see, difference is only in defining texture coordinations. We now use <b>glMultiTexCoord2fARB</b> function that takes texture stage and texture coordinations. Every thing else is unchanged.
	968	+	![](/wiki-images/5/52/MultitexturePic1.jpg) As you can see, difference is only in defining texture coordinations. We now use glMultiTexCoord2fARB function that takes texture stage and texture coordinations. Every thing else is unchanged.
972	969
973	970		Today almost all graphic cards supports at least 2 texture stages. Using singlepass multitexturing is faster than multipass version since you draw objects only once. If hardware supports singlepass multitexturing (Load_GL_ARB_multitexture returns TRUE) use it.
974	971
975	972		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/projects/lazarus-ccr/files/OpenGL%20Tutorial/).
976	973
977	974		### Render to texture
978	975
979	976		This one will be short. OpenGL can capture current scene to texture so you can use it for texturing other objects (TV screen, mirror or some thing else). Well just render scene to texture and apply it to rotating plane.
980	977
981	978		First, we must create empty texture which we'll use to capture scene:
982	979
983	980		``` pascal
984	981		procedure SetupRenderTexture;
985	982		var
986	983		Data: Pointer;
987	984		begin
988	985		GetMem(Data, 2562563);
989	986		glGenTextures(1, @RenderTexture);
990	987		glBindTexture(GL_TEXTURE_2D, RenderTexture);
991	988		glTexImage2D(GL_TEXTURE_2D, 0, 3, 256, 256, 0, GL_RGB, GL_UNSIGNED_BYTE, Data);
992	989		glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
993	990		glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
994	991		FreeMem(Data);
995	992		end;
996	993		```
997	994
998	995		Buffer for 256*256 RGB image is created and it is used to setup 2D texture.
999	996
1000	997		Main part is in drawing function:
1001	998
1002	999		``` pascal
1003	1000		procedure DrawGLScene; cdecl;
1004	1001		var
1005	1002		TotalTime: Single;
1006	1003		begin
1007	1004		glClearColor(0, 0, 0, 0);
1008	1005		glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);
1009	1006		glEnable(GL_LIGHTING);
1010	1007		glDisable(GL_TEXTURE_2D);
1011	1008		glViewport(0, 0, 256, 256);
1012	1009
1013	1010		TotalTime := GetTotalTime;
1014	1011
1015	1012		glLoadIdentity;
1016	1013		glTranslatef(0, 0, -5);
1017	1014		glRotatef(50 * TotalTime, 1, 0, 0);
1018	1015		glRotatef(100 * TotalTime, 0, 1, 0);
1019	1016		glRotatef(50 * TotalTime, 0, 0, 1);
1020	1017
1021	1018		glColor3f(1, 1, 1);
1022	1019		glutSolidCube(2);
1023	1020
1024	1021		glCopyTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 0, 0, 256, 256, 0);
1025	1022
1026	1023		glClearColor(0.18, 0.20, 0.66, 0);
1027	1024		glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);
1028	1025		glDisable(GL_LIGHTING);
1029	1026		glEnable(GL_TEXTURE_2D);
1030	1027		glViewport(0, 0, AppWidth, AppHeight);
1031	1028
1032	1029		glLoadIdentity;
1033	1030		glTranslatef(0, 0, -7);
1034	1031		glRotatef(20 * TotalTime, 1, 0, 0);
1035	1032		glRotatef(50 * TotalTime, 0, 1, 0);
1036	1033
1037	1034		glBegin(GL_QUADS);
1038	1035		glTexCoord2f(1, 0);
1039	1036		glVertex3f(2, 2, 0);
1040	1037		glTexCoord2f(0, 0);
1041	1038		glVertex3f(-2, 2, 0);
1042	1039		glTexCoord2f(0, 1);
1043	1040		glVertex3f(-2,-2, 0);
1044	1041		glTexCoord2f(1, 1);
1045	1042		glVertex3f(2,-2, 0);
1046	1043		glEnd;
1047	1044
1048	1045		glutSwapBuffers;
1049	1046		end;
1050	1047		```
1051	1048
1052		-	![](/wiki-images/6/6e/RenderToTexturePic1.jpg) First, everything is setup for scene that will be captured. Viewport is reduced to 256*256 so it will fit into texture and scene is drawn. <b>glCopyTexImage2D</b> is used to capture scene to currently selected texture.
	1049	+	![](/wiki-images/6/6e/RenderToTexturePic1.jpg) First, everything is setup for scene that will be captured. Viewport is reduced to 256*256 so it will fit into texture and scene is drawn. glCopyTexImage2D is used to capture scene to currently selected texture.
1053	1050
1054	1051		When we have scene captured to texture, everything can be cleared again, viewport can be returned to original size and final scene is drawn using previous scene as texture.
1055	1052
1056		-	~~P.S. Captured texture can be saved using <b>SaveGLTextureToFile</b> function from [Vampyre Imaging Library](http://imaginglib.sourceforge.net/).~~
	1053	+	P.S. Captured texture can be saved using SaveGLTextureToFile function from [Vampyre Imaging Library](http://imaginglib.sourceforge.net/).
1057	1054
1058	1055		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/projects/lazarus-ccr/files/OpenGL%20Tutorial/).
1059	1056
1060	1057		### Vertex array
1061	1058
1062	1059		OpenGL is capable of rendering primitives using data that is stored in buffers insted of calling glVertex. Buffers can be used to define vertex and texture coordinates, and colors (index and RGBA), normals and edge flags.
1063	1060
1064	1061		In this tutorial well use only vertex and color buffers, and we'll show non-indexed and indexed drawing. Non-indexed mode draws buffers as streams. Indexed mode will draw buffer elements in order that is defined in index buffer. But enough talking... let's start coding.
1065	1062
1066	1063		First, let's define some types and constants:
1067	1064
1068	1065		``` pascal
1069	1066		type
1070	1067		TVertex3f = record
1071	1068		X, Y, Z: Single;
1072	1069		end;
1073	1070
1074	1071		TColor3f = record
1075	1072		R, G, B: Single;
1076	1073		end;
1077	1074
1078	1075		VertexBuffer: array [0..5] of TVertex3f = (
1079	1076		(X : 1; Y : 1; Z : 0),
1080	1077		(X : -1; Y : 1; Z : 0),
1081	1078		(X : -1; Y : -1; Z : 0),
1082	1079		(X : 1; Y : 1; Z : 0),
1083	1080		(X : -1; Y : -1; Z : 0),
1084	1081		(X : 1; Y : -1; Z : 0)
1085	1082		);
1086	1083		ColorBuffer: array [0..5] of TColor3f = (
1087	1084		(R : 1; G : 0; B : 1),
1088	1085		(R : 0; G : 0; B : 1),
1089	1086		(R : 0; G : 1; B : 0),
1090	1087		(R : 1; G : 0; B : 1),
1091	1088		(R : 0; G : 1; B : 0),
1092	1089		(R : 1; G : 1; B : 0)
1093	1090		);
1094	1091		```
1095	1092
1096	1093		We have two buffers. One for vertex coordinates and one for vertex colors. This 6 vertices defines 2 triangles that forms rectangle.
1097	1094
1098	1095		Drawing primitives using buffers is easy:
1099	1096
1100	1097		``` pascal
1101	1098		glEnableClientState(GL_VERTEX_ARRAY);
1102	1099		glEnableClientState(GL_COLOR_ARRAY);
1103	1100		glVertexPointer(3, GL_FLOAT, 0, @VertexBuffer[0]);
1104	1101		glColorPointer(3, GL_FLOAT, 0, @ColorBuffer[0]);
1105	1102
1106	1103		glDrawArrays(GL_TRIANGLES, 0, Length(VertexBuffer));
1107	1104
1108	1105		glDisableClientState(GL_VERTEX_ARRAY);
1109	1106		glDisableClientState(GL_COLOR_ARRAY);
1110	1107		```
1111	1108
1112		-	First we enable buffers we want to use using <b>glEnableClientState</b> function. Than we can select buffers we want to use. Every buffer type has own function for selecting (<b>glColorPointer</b>, <b>glEdgeFlagPointer</b>, <b>glIndexPointer</b>, <b>glNormalPointer</b>, <b>glTexCoordPointer</b>, <b>glVertexPointer</b>). First parameter in those functions defines how many numbers every element contains. For example, let's take vertex buffer. If this parameter is 2 than OpenGL expects that every element in buffer contains x and y coordinate. If this parameter is, for example, 4, than every element should contains x, y, z and w coordinate. Next parameter defines what type of data element contains (GL_BYTE, GL_UNSIGNED_BYTE, GL_SHORT, GL_UNSIGNED_SHORT, GL_INT, GL_UNSIGNED_INT, GL_FLOAT or GL_DOUBLE). Next one defines how many bytes are between each element. This way you can have buffer that contains vertex coordinates and some custom data. For arbitrary data type, this parameter can be calculated like this:
	1109	+	First we enable buffers we want to use using glEnableClientState function. Than we can select buffers we want to use. Every buffer type has own function for selecting (glColorPointer, glEdgeFlagPointer, glIndexPointer, glNormalPointer, glTexCoordPointer, glVertexPointer). First parameter in those functions defines how many numbers every element contains. For example, let's take vertex buffer. If this parameter is 2 than OpenGL expects that every element in buffer contains x and y coordinate. If this parameter is, for example, 4, than every element should contains x, y, z and w coordinate. Next parameter defines what type of data element contains (GL_BYTE, GL_UNSIGNED_BYTE, GL_SHORT, GL_UNSIGNED_SHORT, GL_INT, GL_UNSIGNED_INT, GL_FLOAT or GL_DOUBLE). Next one defines how many bytes are between each element. This way you can have buffer that contains vertex coordinates and some custom data. For arbitrary data type, this parameter can be calculated like this:
1113	1110
1114	1111		``` pascal
1115	1112		type
1116	1113		TBufferData = record
1117	1114		DataBefore: TDataBefore;
1118	1115		Vertex: TVertex;
1119	1116		DataAfter: TDataAfter;
1120	1117		end;
1121	1118		```
1122	1119
1123	1120		`Bytes between elements = SizeOf(TDataBefore) + SizeOf(TDataAfter)`
1124	1121
1125	1122		Last parameter if pointer to the begginig of buffer.
1126	1123
1127		-	When buffers are selected we can draw them using <b>glDrawArrays</b> functions. All enabled buffers are used to draw primitives. What kind of polygons are being generated is defined in first parameter (same as in glBegin function). Next two defines subset of buffer which is used for drawing (start and count).
	1124	+	When buffers are selected we can draw them using glDrawArrays functions. All enabled buffers are used to draw primitives. What kind of polygons are being generated is defined in first parameter (same as in glBegin function). Next two defines subset of buffer which is used for drawing (start and count).
1128	1125
1129	1126		When buffers are not needed you can disable them.
1130	1127
1131	1128		To demonstrate indexed mode, I made some simple mesh class that can load vertex, color and index data from external files:
1132	1129
1133	1130		``` pascal
1134	1131		type
1135	1132		TMesh = class
1136	1133		private
1137	1134		FVertices: array of TVertex3f;
1138	1135		FColors: array of TColor3f;
1139	1136		FIndices: array of Integer;
1140	1137		procedure FreeBuffers;
1141	1138		public
1142	1139		constructor Create;
1143	1140		destructor Destroy; override;
1144	1141		procedure LoadMesh(FileName: String);
1145	1142		procedure DrawMesh;
1146	1143		end;
1147	1144		```
1148	1145
1149	1146		FVertices will contain data about vertices, FColors data about color and FIndices data about indices when external file is loaded.
1150	1147
1151	1148		First we'll write some code that deals with creation and destruction of class:
1152	1149
1153	1150		``` pascal
1154	1151		procedure TMesh.FreeBuffers;
1155	1152		begin
1156	1153		FVertices := nil;
1157	1154		FColors := nil;
1158	1155		FIndices := nil;
1159	1156		end;
1160	1157
1161	1158		constructor TMesh.Create;
1162	1159		begin
1163	1160		FreeBuffers;
1164	1161		end;
1165	1162
1166	1163		destructor TMesh.Destroy;
1167	1164		begin
1168	1165		FreeBuffers;
1169	1166		inherited Destroy;
1170	1167		end;
1171	1168		```
1172	1169
1173	1170		File that will contain mesh data is simple text file. First row will contain number of vertices and indices separated by space character. After that row will come rows for every vertex and color. X, Y, Z, R, G and B all separated by space character. In the end, there will be rows for indices... every index number is written in its own row... so, for one triangle, data file will look like this:
1174	1171
1175	1172		`3 3`\
1176	1173		`-1 -1 0 1 1 1`\
1177	1174		`1 -1 0 1 1 1`\
1178	1175		`0 1 0 1 1 1`\
1179	1176		`0`\
1180	1177		`1`\
1181	1178		`2`
1182	1179
1183	1180		This means that there is 3 vertices and 3 indices defined in file. First vrtex is at -1, -1, 0 and has color 1, 1, 1 and so on. Indices defines that order in which vertices are drawn (in this case vertices are drawn in the same order as they are defined).
1184	1181
1185	1182		Code for loading this data will loke like this:
1186	1183
1187	1184		``` pascal
1188	1185		procedure TMesh.LoadMesh(FileName: String);
1189	1186		var
1190	1187		MeshFile: TextFile;
1191	1188		VertexCount, IndexCount: Integer;
1192	1189		iV, iI: Integer;
1193	1190		begin
1194	1191		FreeBuffers;
1195	1192
1196	1193		AssignFile(MeshFile, FileName);
1197	1194		Reset(MeshFile);
1198	1195
1199	1196		ReadLn(MeshFile, VertexCount, IndexCount);
1200	1197
1201	1198		SetLength(FVertices, VertexCount);
1202	1199		SetLength(FColors, VertexCount);
1203	1200		SetLength(FIndices, IndexCount);
1204	1201
1205	1202		for iV := 0 to VertexCount - 1 do
1206	1203		ReadLn(MeshFile,
1207	1204		FVertices[iV].X, FVertices[iV].Y, FVertices[iV].Z,
1208	1205		FColors[iV].R, FColors[iV].G, FColors[iV].B);
1209	1206
1210	1207		for iI := 0 to IndexCount - 1 do
1211	1208		ReadLn(MeshFile, FIndices[iI]);
1212	1209
1213	1210		CloseFile(MeshFile);
1214	1211		end;
1215	1212		```
1216	1213
1217	1214		After loading data, we have everything for drawing:
1218	1215
1219	1216		``` pascal
1220	1217		procedure TMesh.DrawMesh;
1221	1218		begin
1222	1219		glEnableClientState(GL_VERTEX_ARRAY);
1223	1220		glEnableClientState(GL_COLOR_ARRAY);
1224	1221		glVertexPointer(3, GL_FLOAT, 0, @FVertices[0]);
1225	1222		glColorPointer(3, GL_FLOAT, 0, @FColors[0]);
1226	1223
1227	1224		glDrawElements(GL_TRIANGLES, Length(FIndices), GL_UNSIGNED_INT, @FIndices[0]);
1228	1225
1229	1226		glDisableClientState(GL_VERTEX_ARRAY);
1230	1227		glDisableClientState(GL_COLOR_ARRAY);
1231	1228		end;
1232	1229		```
1233	1230
1234		-	As you can see, allmost everything is the same as for non-indexed drawing, except function that actually draw polygons. In this case we use <b>glDrawElements</b> function. For this one we specify what kind of polygons we want, how many indices are in index buffer, type of data in index buffer and pointer to the beginning of index buffer.
	1231	+	As you can see, allmost everything is the same as for non-indexed drawing, except function that actually draw polygons. In this case we use glDrawElements function. For this one we specify what kind of polygons we want, how many indices are in index buffer, type of data in index buffer and pointer to the beginning of index buffer.
1235	1232
1236	1233		![](/wiki-images/7/77/VertexArrayPic1.jpg)Full source code comes with mesh data file that this class can use to generates rectangle that is identical with one that is drawn using non-indexed mode. Mesh data file looks like this:
1237	1234
1238	1235		`4 6`\
1239	1236		`1 1 0 1 0 1`\
1240	1237		`-1 1 0 0 0 1`\
1241	1238		`-1 -1 0 0 1 0`\
1242	1239		`1 -1 0 1 1 0`\
1243	1240		`0`\
1244	1241		`1`\
1245	1242		`2`\
1246	1243		`0`\
1247	1244		`2`\
1248	1245		`3`
1249	1246
1250	1247		As you can see, there is data for only 4 vertices and 6 indices. So, first triangle is defined by vertices 0, 1 and 2, and the seccond one by vertices 0, 2 and 3. By using indexed mode we don't have to duplicate vertices.
1251	1248
1252	1249		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/projects/lazarus-ccr/files/OpenGL%20Tutorial/).
1253	1250
1254	1251		## Modern OpenGL using macOS
1255	1252
1256	1253		> Note: the macOS OpenGL implementation is stuck at version 4.1 from 2010 and was deprecated by Apple on the release of macOS 10.14 (Mojave) in September 2018.
1257	1254
1258	1255		A great feature of Lazarus is "write once, compile anywhere", where code should just work on macOS, Linux or Windows. However, to support all three of these systems you need to decide whether to only support legacy OpenGL or to use the leander "OpenGL Core" profile. For Linux and Windows users, recent versions of OpenGL are a superset of older versions. Therefore, a Linux user can mix and match old OpenGL code with modern shaders. This is not the case for Macintosh macOS (nee OS X) users.
1259	1256
1260	1257		macOS provides two forms of support: the legacy mode supports all OpenGL features up to 2.1 (and GLSL 1.2). Alternatively, the user can select a modern core version of OpenGL (whereas most Linux and Windows users have access to the compatibility versions of OpenGL). The core versions of OpenGL [remove many deprecated legacy functions](http://github.prideout.net/modern-opengl-prezo/). This means that all the tutorials above will only compile in macOS's legacy mode. The core mode has no fixed function pipeline and therefore the developer must write their own shaders. In addition, the Core mode removes some [basic primitives like GL_QUADS](https://www.opengl.org/wiki/Legacy_OpenGL), so a quad needs to be replaced by two triangles (this actually makes sense: all vertices of a triangle are coplanar, but this is not necessarily the case for a quad, just like each leg of a 3-legged stool will always touch the ground, while a 4-legged stool might wobble if one leg is shorter than the others).
1261	1258
1262	1259		The benefit of the core model is that it is lean, and generally easy to adapt to mobile devices (which use a similar, embedded form of OpenGL). See [Apple's website](https://developer.apple.com/opengl/capabilities/) to see the OpenGL supported by your operating system. A further wrinkle is that the Core modes of OpenGL are only supported on the Cocoa widgetset, so you can not use the Carbon widgetset. Three demo projects are available on [Github](https://github.com/neurolabusc/OpenGLCoreTutorials), and will compile using Lazarus 1.6.2 or later on Linux, Windows or macOS.
1263	1260
1264	1261		## See also
1265	1262
1266	1263		- [[Creating bindings for C libraries]]
1267	1264		- [[OpenGL]]
1268	1265
1269	1266		## External links
1270	1267
1271	1268		- [OpenGL Light Tutorial](http://www.falloutsoftware.com/tutorials/gl/gl8.htm) - An OpenGL tutorial outlining how to create and manipulate lights, as well as deal with polygon surface reflections using normals.
1272	1269		- [Apple OpenGL Documentation](https://developer.apple.com/library/archive/documentation/GraphicsImaging/Conceptual/OpenGL-MacProgGuide/opengl_pg_concepts/opengl_pg_concepts.html).
1273	1270
1274	1271		---
1275	1272		From the Free Pascal wiki, page "OpenGL Tutorial", as it stood on 2021-04-16 after a change by Trev, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).

Back to history