OpenGL Tutorial/zh CN: what changed

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

Old	New		Line
1	1		OpenGL 是开发可移植的交互式2D和3D图形应用的首选环境。自从1992年问世以来，OpenGL已成为业内最广泛使用和最广为支持的2D和3D图形应用编程接口（API），为各种计算平台带来成千的应用。OpenGL通过包含一系列渲染，纹理映射，特殊效果和其他强大的视觉功能极大促进了创新并加速应用开发。开发人员可以在各种主流桌面及工作站平台发挥OpenGL的强大功能确保广泛部署。
2	2
3	3		在以下联接您会得到更多关于OpenGl信息。[here](http://www.opengl.org/about/overview/).
4	4
5	5		# GLUT
6	6
7	7		GLUT (pronounced like the glut in gluttony) 全称 OpenGL Utility Toolkit, 写OpenGL 程序的窗口系统独立工具包。它实现了一个简单的OpenGL窗口的应用程序编程接口（API）. GLUT 让OpenGL编程更加容易理解，GLUT 具有可移植性，可以在不同平台编译。
8	8
9	9		你能得到更多关于 GLUT的信息： [here](http://www.opengl.org/resources/libraries/glut/).
10	10
11	11		许多系统已预安装了GLUT，但如果你的系统没有的话你可以轻松用Google搜索到 [Google](http://www.google.com/).
12	12
13	13		编译好的Windows可执行文件可在这里找到 [www.xmission.com](http://www.xmission.com/~nate/glut.html).
14	14
15	15		`GLUT FPC 单元信息在这里 `[[OpenGL]]`.`
16	16
17	17		# LCL
18	18
19	19		Lzazrus组件库也可以使用OpenGL。Lazarus包含了一个OpenGL的LCL控件TOpenGLControl。Lazarus包的位置：lazarus/components/opengl/lazopenglcontext.lpk。有一个实例是：lazarus/examples/openglcontrol/openglcontrol_demo.lpi。
20	20
21	21		# LCL / GLUT
22	22
23	23		你应该使用GLUT还是LCL？
24	24
25	25		- 如果你想自己画所有的东西，GLUT会更好。
26	26		- 一般应用的话LCL更好。例如一个3D编辑器需要亦歌OpenGL窗口和剩余的一般应用如使用一般的按钮，组合框，窗口，窗口模块等。
27	27
28	28		OpenGL部分大致相同。在windows下GLUT需要一个dll（动态链接库） , where LCL typically runs out of the box, but a LCL executable is bigger.
29	29
30	30		# 建立您的首个 GLUT 程序
31	31
32		-	为了使用GLUT，您必须首先初始化它。这可以用<b>glutInit</b>函数完成。该函数可处理主窗体的命令行和设置其参数，但需要使用C/C++风格的输入。您需要编写自己的函数来完成从ParamCount 和 ParamStr 到C/C++风格命令行参数的转换。
	32	+	为了使用GLUT，您必须首先初始化它。这可以用glutInit函数完成。该函数可处理主窗体的命令行和设置其参数，但需要使用C/C++风格的输入。您需要编写自己的函数来完成从ParamCount 和 ParamStr 到C/C++风格命令行参数的转换。
33	33
34	34		``` pascal
35	35		procedure glutInitPascal(ParseCmdLine: Boolean);
36	36		var
37	37		Cmd: array of PChar;
38	38		CmdCount, I: Integer;
39	39		begin
40	40		if ParseCmdLine then
41	41		CmdCount := ParamCount + 1
42	42		else
43	43		CmdCount := 1;
44	44		SetLength(Cmd, CmdCount);
45	45		for I := 0 to CmdCount - 1 do
46	46		Cmd[I] := PChar(ParamStr(I));
47	47		glutInit(@CmdCount, @Cmd);
48	48		end;
49	49		```
50	50
51	51		本质上，您创建一个数组，并用来自ParamStr的字符串填充。该函数也接受可控制传递到glutInit的参数，无论是整个命令行或仅仅是可执行文件名
52	52
53	53		ToDo: probably glutInit(@argc, @argv); is enough.
54	54
55	55		更多有关 glutInit 函数: <http://www.opengl.org/resources/libraries/glut/spec3/node10.html>
56	56
57		-	下一步，您需要创建主窗体使用<b>glutInitDisplayMode</b>设置主窗体显示模式。该函数只接受一个标志位组合为参数。通常您只需要<b>GLUT_DOUBLE 或 GLUT_RGB 或 GLUT_DEPTH</b> 。
	57	+	下一步，您需要创建主窗体使用glutInitDisplayMode设置主窗体显示模式。该函数只接受一个标志位组合为参数。通常您只需要GLUT_DOUBLE 或 GLUT_RGB 或 GLUT_DEPTH 。
58	58
59	59		更多关于 glutInitDisplayMode 参见: <http://www.opengl.org/resources/libraries/glut/spec3/node12.html>
60	60
61		-	窗体位置和大小使用<b>glutInitWindowPosition</b> 和 <b>glutInitWindowSize</b>来控制。他们接受2个参数。前一个参数是X和Y坐标，后一个是宽度和长度。您可使用<b>glutGet</b>以返回窗体大小和中心。
	61	+	窗体位置和大小使用glutInitWindowPosition 和 glutInitWindowSize来控制。他们接受2个参数。前一个参数是X和Y坐标，后一个是宽度和长度。您可使用glutGet以返回窗体大小和中心。
62	62
63	63		更多关于 glutInitWindowPosition, glutInitWindowSize 和 glutGet: <http://www.opengl.org/resources/libraries/glut/spec3/node11.html> <http://www.opengl.org/documentation/specs/glut/spec3/node70.html>
64	64
65		-	最后，窗体应该采用<b>glutCreateWindow</b>创建。该函数将创建窗体并通过一参数设置其标题。因此它将返回该窗体的句柄。句柄可在其他需要该句柄的函数中使用。
	65	+	最后，窗体应该采用glutCreateWindow创建。该函数将创建窗体并通过一参数设置其标题。因此它将返回该窗体的句柄。句柄可在其他需要该句柄的函数中使用。
66	66
67	67		更多关于 glutCreateWindow: <http://www.opengl.org/resources/libraries/glut/spec3/node16.html>
68	68
69		-	在您的程序进入主循环前，您必须设置些回调。您需要一个回调来画窗体，改变窗体尺寸及获取键盘输入。这些回调使用<b>glutDisplayFunc</b>, <b>glutReshapeFunc</b> 和 <b>glutKeyboardFunc</b>来设置。
	69	+	在您的程序进入主循环前，您必须设置些回调。您需要一个回调来画窗体，改变窗体尺寸及获取键盘输入。这些回调使用glutDisplayFunc, glutReshapeFunc 和 glutKeyboardFunc来设置。
70	70
71	71		更多有关设置回调，请参见: <http://www.opengl.org/resources/libraries/glut/spec3/node45.html#SECTION00080000000000000000>
72	72
73	73		您的绘图函数可能看起来像这样子:
74	74
75	75		`procedure DrawGLScene; cdecl;`\
76	76		`begin`\
77	77		` glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);`\
78	78		` glutSwapBuffers;`\
79	79		`end;`
80	80
81	81		这只能清空窗体为背景色并复位zbuffer。（别担心不懂zbuffer... 更多内容讲解在后面）
82	82
83	83		您的窗体大小调整函数可能像这样:
84	84
85	85		`procedure ReSizeGLScene(Width, Height: Integer); cdecl;`\
86	86		`begin`\
87	87		` if Height = 0 then`\
88	88		` Height := 1;`\
89		-	\
	89	+
90	90		` glViewport(0, 0, Width, Height);`\
91	91		` glMatrixMode(GL_PROJECTION);`\
92	92		` glLoadIdentity;`\
93	93		` gluPerspective(45, Width / Height, 0.1, 1000);`\
94		-	\
	94	+
95	95		` glMatrixMode(GL_MODELVIEW);`\
96	96		` glLoadIdentity;`\
97	97		`end;`
98	98
99	99		这个代码告诉OpenGL窗体应该绘制在哪里，并且将矩阵设为期望值。（矩阵函数将会在后面介绍）
100	100
101	101		键盘输入使用以下回调执行：
102	102
103	103		`procedure GLKeyboard(Key: Byte; X, Y: Longint); cdecl;`\
104	104		`begin`\
105	105		` if Key = 27 then`\
106	106		` Halt(0);`\
107	107		`end;`
108	108
109		-	该函数将告诉您的程序，若是按下ESC键就推出。GLUT为事件驱动，终止您程序的唯一方式就是调用您的回调函数中的<b>Halt</b>。若您以其他方式关闭窗体，窗体是消失了，但程序仍然会在主过程内继续无限地循环。
	109	+	该函数将告诉您的程序，若是按下ESC键就推出。GLUT为事件驱动，终止您程序的唯一方式就是调用您的回调函数中的Halt。若您以其他方式关闭窗体，窗体是消失了，但程序仍然会在主过程内继续无限地循环。
110	110
111		-	~~要启动主循环，调用<b>glutMainLoop</b>.这将进入调用您回调函数的无限循环。~~
	111	+	要启动主循环，调用glutMainLoop.这将进入调用您回调函数的无限循环。
112	112
113	113		您程序的主部分可能看起来如下:
114	114
115	115		`const `\
116	116		` AppWidth = 640; `\
117	117		` AppHeight = 480; `\
118		-	\
	118	+
119	119		`procedure InitializeGL; `\
120	120		`begin `\
121	121		` glClearColor(0.18, 0.20, 0.66, 0); `\
122	122		`end; `\
123		-	\
	123	+
124	124		`var `\
125	125		` ScreenWidth, ScreenHeight: Integer; `\
126	126		`begin `\
127	127		` glutInitPascal(True); `\
128	128		` glutInitDisplayMode(GLUT_DOUBLE or GLUT_RGB or GLUT_DEPTH); `\
129	129		` glutInitWindowSize(AppWidth, AppHeight); `\
130	130		` ScreenWidth := glutGet(GLUT_SCREEN_WIDTH); `\
131	131		` ScreenHeight := glutGet(GLUT_SCREEN_HEIGHT); `\
132	132		` glutInitWindowPosition((ScreenWidth - AppWidth) div 2,`\
133	133		` (ScreenHeight - AppHeight) div 2); `\
134	134		` glutCreateWindow('OpenGL Tutorial 1'); `\
135		-	\
	135	+
136	136		` InitializeGL; `\
137		-	\
	137	+
138	138		` glutDisplayFunc(@DrawGLScene); `\
139	139		` glutReshapeFunc(@ReSizeGLScene); `\
140	140		` glutKeyboardFunc(@GLKeyboard); `\
141		-	\
	141	+
142	142		` glutMainLoop; `\
143	143		`end.`
144	144
145	145		下一个教程将添加一些绘制简单图形的代码.
146	146
147	147		从这里[Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145)下载源代码或者Linux/Win可执行文件。
148	148
149	149		# 绘制简单图形
150	150
151	151		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'.
152	152
153	153		This time we shall add just a few lines of code and focus on explanation of some of the OpenGL functions.
154	154
155	155		Let us explain code you allready have.
156	156
157	157		` .`\
158	158		` .`\
159	159		` .`\
160	160		` glMatrixMode(GL_PROJECTION);`\
161	161		` glLoadIdentity;`\
162	162		` gluPerspective(45, Width / Height, 0.1, 1000);`\
163		-	\
	163	+
164	164		` glMatrixMode(GL_MODELVIEW);`\
165	165		` glLoadIdentity;`\
166	166		`end;`
167	167
168		-	Using <b>glMatrixMode</b> function you chose which matrix you want to change. OpenGL works with 3 matrices: <b>GL_MODELVIEW</b>: this one is used to move vertex to model space. <b>GL_PROJECTION</b>: this one is used to convert 3d coordinate to 2d coordinate for finall pixel position. <b>GL_TEXTURE</b>: this one is used to alter texture coordinates.
	168	+	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.
169	169
170		-	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.
	170	+	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.
171	171
172		-	~~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.~~
	172	+	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.
173	173
174	174		Now, you'll change model matrix... for this time, you just set it to identity.
175	175
176	176		OK... and now, the code for drawing the first shape:
177	177
178	178		`procedure DrawGLScene; cdecl;`\
179	179		`begin`\
180	180		` glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);`\
181		-	\
	181	+
182	182		` glLoadIdentity;`\
183	183		` glTranslatef(0, 0, -5);`\
184		-	\
	184	+
185	185		` glBegin(GL_TRIANGLES);`\
186	186		` glColor3f(1, 0, 0);`\
187	187		` glVertex3f(-1, -1, 0);`\
188		-	\
	188	+
189	189		` glColor3f(0, 1, 0);`\
190	190		` glVertex3f(1, -1, 0);`\
191		-	\
	191	+
192	192		` glColor3f(0, 0, 1);`\
193	193		` glVertex3f(0, 1, 0);`\
194	194		` glEnd;`\
195		-	\
	195	+
196	196		` glutSwapBuffers;`\
197	197		`end;`
198	198
199	199		We have allready used glClear function. It will just reset buffers. We'll skip next two functions and head for drawing ones.
200	200
201		-	<b>glBegin</b> marks beginning of drawing block. After this function you can start entering vertices. Parameter describes how are vertices used when drawing: GL_POINTS: Treats each vertex as a single point. Vertex n defines point n. N points are drawn.
	201	+	glBegin marks beginning of drawing block. After this function you can start entering vertices. Parameter describes how are vertices used when drawing: GL_POINTS: Treats each vertex as a single point. Vertex n defines point n. N points are drawn.
202	202
203	203		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.
204	204
205	205		GL_LINE_STRIP: Draws a connected group of line segments from the first vertex to the last. n-1 lines are drawn.
206	206
207	207		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.
208	208
209	209		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.
210	210
211	211		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.
212	212
213	213		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.
214	214
215	215		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.
216	216
217	217		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.
218	218
219	219		GL_POLYGON: Draws a single, convex polygon. Vertices 1 through n define this polygon.
220	220
221		-	![](/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.
	221	+	![](/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.
222	222
223		-	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.
	223	+	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.
224	224
225		-	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.
	225	+	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.
226	226
227		-	~~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.~~
	227	+	In the end you call glEnd functions that finishes drawing. You could now start another drawing block with new glBegin function if you wish.
228	228
229	229		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145).
230	230
231	231		# Using display lists
232	232
233		-	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.
	233	+	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.
234	234
235	235		`const`\
236	236		` LIST_OBJECT = 1;`\
237		-	\
	237	+
238	238		`procedure CreateList;`\
239	239		`begin`\
240	240		` glNewList(LIST_OBJECT, GL_COMPILE);`\
241	241		` glBegin(GL_TRIANGLE_FAN);`\
242	242		` glColor3f(1, 0, 0);`\
243	243		` glVertex3f(0, 0.5, 0);`\
244		-	\
	244	+
245	245		` glColor3f(1, 1, 0);`\
246	246		` glVertex3f(-0.5, -0.5, 0.5);`\
247		-	\
	247	+
248	248		` glColor3f(1, 1, 1);`\
249	249		` glVertex3f(0.5, -0.5, 0.5);`\
250		-	\
	250	+
251	251		` glColor3f(0, 1, 1);`\
252	252		` glVertex3f(0.5, -0.5, -0.5);`\
253		-	\
	253	+
254	254		` glColor3f(0, 0, 1);`\
255	255		` glVertex3f(-0.5, -0.5, -0.5);`\
256		-	\
	256	+
257	257		` glColor3f(0, 1, 0);`\
258	258		` glVertex3f(-0.5, -0.5, 0.5);`\
259	259		` glEnd;`\
260		-	\
	260	+
261	261		` glBegin(GL_QUADS);`\
262	262		` glColor3f(1, 1, 0);`\
263	263		` glVertex3f(-0.5, -0.5, 0.5);`\
264		-	\
	264	+
265	265		` glColor3f(1, 1, 1);`\
266	266		` glVertex3f(0.5, -0.5, 0.5);`\
267		-	\
	267	+
268	268		` glColor3f(0, 1, 1);`\
269	269		` glVertex3f(0.5, -0.5, -0.5);`\
270		-	\
	270	+
271	271		` glColor3f(0, 0, 1);`\
272	272		` glVertex3f(-0.5, -0.5, -0.5);`\
273		-	\
	273	+
274	274		` glColor3f(0, 1, 0);`\
275	275		` glVertex3f(-0.5, -0.5, 0.5);`\
276	276		` glEnd;`\
277	277		` glEndList;`\
278	278		`end;`
279	279
280		-	<b>glNewList</b> 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 automaticly.
	280	+	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 automaticly.
281	281
282		-	<b>glIsList</b> 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
	282	+	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
283	283
284	284		All created lists should be deleted. You will do that before program exits:
285	285
286	286		`procedure GLKeyboard(Key: Byte; X, Y: Longint); cdecl;`\
287	287		`begin`\
288	288		` if Key = 27 then`\
289	289		` begin`\
290	290		` glDeleteLists(LIST_OBJECT, 1);`\
291	291		` Halt(0);`\
292	292		` end;`\
293	293		`end;`
294	294
295		-	~~<b>glDeleteLists</b> 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~~
	295	+	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
296	296
297	297		Now you know how to create and delete display lists... let's see how to draw them:
298	298
299	299		`procedure DrawGLScene; cdecl;`\
300	300		`begin`\
301	301		` glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);`\
302		-	\
	302	+
303	303		` glLoadIdentity;`\
304	304		` glTranslatef(-2, 0, -5);`\
305	305		` glRotatef(40, 1, 0, 1);`\
306	306		` glCallList(LIST_OBJECT);`\
307		-	\
	307	+
308	308		` glLoadIdentity;`\
309	309		` glTranslatef(1, -2, -10);`\
310	310		` glRotatef(62, 0, 1, 0);`\
311	311		` glCallList(LIST_OBJECT);`\
312		-	\
	312	+
313	313		` glLoadIdentity;`\
314	314		` glTranslatef(-4, 0.5, -15);`\
315	315		` glRotatef(200, 1, 0, 0);`\
316	316		` glCallList(LIST_OBJECT);`\
317		-	\
	317	+
318	318		` glutSwapBuffers;`\
319	319		`end;`
320	320
321		-	![](/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 <b>glCallLists</b> 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:
	321	+	![](/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:
322	322
323	323		GL_BYTE: list is treated as an array of signed bytes, each in the range -128 through 127.
324	324
325	325		GL_UNSIGNED_BYTE: list is treated as an array of unsigned bytes, each in the range 0 through 255.
326	326
327	327		GL_SHORT: list is treated as an array of signed two-byte integers, each in the range -32768 through 32767.
328	328
329	329		GL_UNSIGNED_SHORT: list is treated as an array of unsigned two-byte integers, each in the range 0 through 65535.
330	330
331	331		GL_INT: lists is treated as an array of signed four-byte integers.
332	332
333	333		GL_UNSIGNED_INT: list is treated as an array of unsigned four-byte integers.
334	334
335	335		GL_FLOAT: list is treated as an array of four-byte floating-point values.
336	336
337	337		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.
338	338
339	339		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.
340	340
341	341		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.
342	342
343	343		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.
344	344
345	345		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145).
346	346
347	347		# Full screen animation
348	348
349	349		Entering full screen mode is easy with GLUT. Let's change main part of the program:
350	350
351	351		`const`\
352	352		` FSMode = '800x600:32@75';`\
353		-	\
	353	+
354	354		`begin`\
355	355		` glutInitPascal(False);`\
356	356		` glutInitDisplayMode(GLUT_DOUBLE or GLUT_RGB or GLUT_DEPTH);`\
357	357		` glutGameModeString(FSMode);`\
358	358		` glutEnterGameMode;`\
359	359		` glutSetCursor(GLUT_CURSOR_NONE);`\
360		-	\
	360	+
361	361		` InitializeGL;`\
362		-	\
	362	+
363	363		` glutDisplayFunc(@DrawGLScene);`\
364	364		` glutReshapeFunc(@ReSizeGLScene);`\
365	365		` glutKeyboardFunc(@GLKeyboard);`\
366	366		` glutIdleFunc(@DrawGLScene);`\
367		-	\
	367	+
368	368		` glutMainLoop;`\
369	369		`end.`
370	370
371		-	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:
	371	+	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:
372	372
373	373		`[width "x" height][":" bpp]["@" hertz]`
374	374
375	375		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.
376	376
377		-	~~Usually in full screen mode cursor is not visible. To hide cursor you use <b>glutSetCursor</b> function. It takes only one parameter which describes cursor you would like to see:~~
	377	+	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:
378	378
379	379		`GLUT_CURSOR_RIGHT_ARROW`\
380	380		`GLUT_CURSOR_LEFT_ARROW`\
381	381		`GLUT_CURSOR_INFO`\
382	382		`GLUT_CURSOR_DESTROY`\
383	383		`GLUT_CURSOR_HELP`\
384	384		`GLUT_CURSOR_CYCLE`\
385	385		`GLUT_CURSOR_SPRAY`\
386	386		`GLUT_CURSOR_WAIT`\
387	387		`GLUT_CURSOR_TEXT`\
388	388		`GLUT_CURSOR_CROSSHAIR`\
389	389		`GLUT_CURSOR_UP_DOWN`\
390	390		`GLUT_CURSOR_LEFT_RIGHT`\
391	391		`GLUT_CURSOR_TOP_SIDE`\
392	392		`GLUT_CURSOR_BOTTOM_SIDE`\
393	393		`GLUT_CURSOR_LEFT_SIDE`\
394	394		`GLUT_CURSOR_RIGHT_SIDE`\
395	395		`GLUT_CURSOR_TOP_LEFT_CORNER`\
396	396		`GLUT_CURSOR_TOP_RIGHT_CORNER`\
397	397		`GLUT_CURSOR_BOTTOM_RIGHT_CORNER`\
398	398		`GLUT_CURSOR_BOTTOM_LEFT_CORNER`\
399	399		`GLUT_CURSOR_FULL_CROSSHAIR`\
400	400		`GLUT_CURSOR_NONE`\
401	401		`GLUT_CURSOR_INHERIT`
402	402
403		-	<b>glutIdleFunc</b> 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.
	403	+	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.
404	404
405	405		Now, let's look at the program termination where you need to exit full screen mode:
406	406
407	407		`procedure GLKeyboard(Key: Byte; X, Y: Longint); cdecl;`\
408	408		`begin`\
409	409		` if Key = 27 then`\
410	410		` begin`\
411	411		` glutLeaveGameMode;`\
412	412		` Halt(0);`\
413	413		` end;`\
414	414		`end;`
415	415
416		-	~~As you can see, all you need to do is to call <b>glutLeaveGameMode</b>.~~
	416	+	As you can see, all you need to do is to call glutLeaveGameMode.
417	417
418	418		Now, we'll introduce some new matrix functions. First, let's change ReSizeGLScene function:
419	419
420	420		`procedure ReSizeGLScene(Width, Height: Integer); cdecl;`\
421	421		`begin`\
422	422		` .`\
423	423		` .`\
424	424		` .`
425	425
426	426		` glMatrixMode(GL_MODELVIEW);`\
427	427		` glLoadIdentity;`\
428	428		` gluLookAt(0, 20, 25, 0, 0, 0, 0, 1, 0);`\
429	429		`end;`
430	430
431		-	<b>gluLookAt</b> 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.
	431	+	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.
432	432
433	433		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:
434	434
435	435		`procedure DrawGLScene; cdecl;`\
436	436		`var`\
437	437		` T: Single;`\
438	438		`begin`\
439	439		` T := glutGet(GLUT_ELAPSED_TIME) / 1000;`\
440	440		` glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);`\
441		-	\
	441	+
442	442		` glPushMatrix;`\
443	443		` glRotatef(5 * T, 0, 1, 0);`\
444	444		` glColor3f(1, 1, 0);`\
445	445		` glutWireSphere(2, 20, 20);`\
446	446		` glPopMatrix;`\
447		-	\
	447	+
448	448		` glPushMatrix;`\
449	449		` glRotatef(90 * T, 0, 1, 0);`\
450	450		` glTranslatef(5, 0, 0);`\
451	451		` glRotatef(40 * T, 0, 1, 0);`\
452	452		` glColor3f(1, 0, 0);`\
453	453		` glutWireSphere(0.6, 10, 10);`\
454	454		` glPopMatrix;`\
455		-	\
	455	+
456	456		` glPushMatrix;`\
457	457		` glRotatef(60 * T, 0, 1, 0);`\
458	458		` glTranslatef(-3, 0, 9);`\
459	459		` glRotatef(50 * T, 0, 1, 0);`\
460	460		` glColor3f(0, 1, 0);`\
461	461		` glutWireSphere(1, 16, 16);`\
462		-	\
	462	+
463	463		` glPushMatrix;`\
464	464		` glRotatef(360 * T, 0, 1, 0);`\
465	465		` glTranslatef(-1.7, 0, 0);`\
466	466		` glRotatef(50 * T, 0, 1, 0);`\
467	467		` glColor3f(0, 0, 1);`\
468	468		` glutWireSphere(0.4, 10, 10);`\
469	469		` glPopMatrix;`\
470		-	\
	470	+
471	471		` glPopMatrix;`\
472		-	\
	472	+
473	473		` glutSwapBuffers;`\
474	474		`end;`
475	475
476		-	![](/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.
	476	+	![](/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.
477	477
478		-	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.
	478	+	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.
479	479
480		-	<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.
	480	+	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.
481	481
482	482		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145).
483	483
484	484		# Light
485	485
486	486		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.
487	487
488	488		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.
489	489
490	490		`unit utils;`\
491		-	\
	491	+
492	492		`{$mode objfpc}{$H+}`\
493		-	\
	493	+
494	494		`interface`\
495		-	\
	495	+
496	496		`uses`\
497	497		` glut;`\
498		-	\
	498	+
499	499		`function GetTotalTime: Single;`\
500	500		`function GetDeltaTime: Single;`\
501	501		`procedure FrameRendered(Count: Integer = 1);`\
502	502		`function GetFPS: Single;`\
503		-	\
	503	+
504	504		`implementation`\
505		-	\
	505	+
506	506		`var`\
507	507		` OldTime: Integer = 0;`\
508	508		` FPSTime: Integer = 0;`\
509	509		` FPSCount: Integer = 0;`\
510		-	\
	510	+
511	511		`function GetTotalTime: Single;`\
512	512		`begin`\
513	513		` Result := glutGet(GLUT_ELAPSED_TIME) / 1000;`\
514	514		`end;`\
515		-	\
	515	+
516	516		`function GetDeltaTime: Single;`\
517	517		`var`\
518	518		` NewTime: Integer;`\
519	519		`begin`\
520	520		` NewTime := glutGet(GLUT_ELAPSED_TIME);`\
521	521		` Result := (NewTime - OldTime) / 1000;`\
522	522		` OldTime := NewTime;`\
523	523		`end;`\
524		-	\
	524	+
525	525		`procedure FrameRendered(Count: Integer);`\
526	526		`begin`\
527	527		` Inc(FPSCount, Count);`\
528	528		`end;`\
529		-	\
	529	+
530	530		`function GetFPS: Single;`\
531	531		`var`\
532	532		` NewTime: Integer;`\
533	533		`begin`\
534	534		` NewTime := glutGet(GLUT_ELAPSED_TIME);`\
535		-	\
	535	+
536	536		` Result := FPSCount / ((NewTime - FPSTime) / 1000);`\
537		-	\
	537	+
538	538		` FPSTime := NewTime;`\
539	539		` FPSCount := 0;`\
540	540		`end;`\
541		-	\
	541	+
542	542		`end.`
543	543
544	544		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.
545	545
546	546		Now, let's have fun with lights.
547	547
548	548		OpenGL have several types of light... ambient, diffuse, point, spot, specular and emissive light.
549	549
550	550		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.
551	551
552	552		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.
553	553
554	554		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.
555	555
556	556		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.
557	557
558	558		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.
559	559
560	560		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.
561	561
562	562		For simplicity we'll use only diffuse light in this tutorial. Later on, some other lights may appear in tutorials :)
563	563
564	564		Let's see how to enable light in scene:
565	565
566	566		`const`\
567	567		` DiffuseLight: array[0..3] of GLfloat = (0.8, 0.8, 0.8, 1);`\
568		-	\
	568	+
569	569		` glEnable(GL_LIGHTING);`\
570	570		` glLightfv(GL_LIGHT0, GL_DIFFUSE, DiffuseLight);`\
571	571		` glEnable(GL_LIGHT0);`
572	572
573		-	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.
	573	+	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.
574	574
575	575		More about glLightfv: <http://www.opengl.org//documentation/specs/man_pages/hardcopy/GL/html/gl/light.html>
576	576
577	577		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:
578	578
579	579		`glEnable(GL_COLOR_MATERIAL);`\
580	580		`glColorMaterial(GL_FRONT, GL_AMBIENT_AND_DIFFUSE);`
581	581
582		-	![](/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.
	582	+	![](/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.
583	583
584	584		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.
585	585
586	586		After all those setting ups, light will shine up your cube :)
587	587
588	588		Part of the text is copied from [The OpenGL Light Bible](http://www.falloutsoftware.com/tutorials/gl/gl8.htm)
589	589
590	590		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145).
591	591
592	592		# Bitmap fonts
593	593
594	594		Games and programs usually need to write some text on screen. GLUT provides several functions for drawing chars that are platform independent.
595	595
596	596		First, we'll show how to use default bitmap fonts. Almost all code additions will be made to utils.pas unit.
597	597
598	598		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:
599	599
600	600		`function glGetViewportWidth: Integer;`\
601	601		`var`\
602	602		` Rect: array[0..3] of Integer;`\
603	603		`begin`\
604	604		` glGetIntegerv(GL_VIEWPORT, @Rect);`\
605	605		` Result := Rect[2] - Rect[0];`\
606	606		`end;`\
607		-	\
	607	+
608	608		`function glGetViewportHeight: Integer;`\
609	609		`var`\
610	610		` Rect: array[0..3] of Integer;`\
611	611		`begin`\
612	612		` glGetIntegerv(GL_VIEWPORT, @Rect);`\
613	613		` Result := Rect[3] - Rect[1];`\
614	614		`end;`
615	615
616	616		We just get left/right, top/bottom and calculate width/height by subtracting them.
617	617
618	618		There must be functions for entering and leaving 2D mode:
619	619
620	620		`procedure glEnter2D;`\
621	621		`begin`\
622	622		` glMatrixMode(GL_PROJECTION);`\
623	623		` glPushMatrix;`\
624	624		` glLoadIdentity;`\
625	625		` gluOrtho2D(0, glGetViewportWidth, 0, glGetViewportHeight);`\
626		-	\
	626	+
627	627		` glMatrixMode(GL_MODELVIEW);`\
628	628		` glPushMatrix;`\
629	629		` glLoadIdentity;`\
630		-	\
	630	+
631	631		` glDisable(GL_DEPTH_TEST);`\
632	632		`end;`\
633		-	\
	633	+
634	634		`procedure glLeave2D;`\
635	635		`begin`\
636	636		` glMatrixMode(GL_PROJECTION);`\
637	637		` glPopMatrix;`\
638	638		` glMatrixMode(GL_MODELVIEW);`\
639	639		` glPopMatrix;`\
640		-	\
	640	+
641	641		` glEnable(GL_DEPTH_TEST);`\
642	642		`end;`
643	643
644		-	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.
	644	+	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.
645	645
646	646		Leaving 2D mode just returns old matrices and enable ZBuffer.
647	647
648	648		Now, we can create function for text drawing:
649	649
650	650		`procedure glWrite(X, Y: GLfloat; Font: Pointer; Text: String);`\
651	651		`var`\
652	652		` I: Integer;`\
653	653		`begin`\
654	654		` glRasterPos2f(X, Y);`\
655	655		` for I := 1 to Length(Text) do`\
656	656		` glutBitmapCharacter(Font, Integer(Text[I]));`\
657	657		`end;`
658	658
659		-	<b>glutBitmapCharacter</b> 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.
	659	+	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.
660	660
661		-	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.
	661	+	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.
662	662
663	663		This new functions will make text drawing very easy:
664	664
665	665		`procedure DrawGLScene; cdecl;`\
666	666		`begin`\
667	667		` glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);`\
668		-	\
	668	+
669	669		` glLoadIdentity;`\
670	670		` glTranslatef(0, 0, -5);`\
671	671		` glRotatef(GetTotalTime * 10, 0, 0.5, 0.5);`\
672		-	\
	672	+
673	673		` glColor3f(1, 0, 0);`\
674	674		` glutSolidCube(2);`\
675		-	\
	675	+
676	676		` glEnter2D;`\
677		-	\
	677	+
678	678		` glColor3f(0.2, 0.8 + 0.2 * Sin(GetTotalTime * 5), 0);`\
679	679		` glWrite(20, glGetViewportHeight - 20, GLUT_BITMAP_8_BY_13,`\
680	680		` Format('OpenGL Tutorial :: Bitmap Fonts :: FPS - %.2f FPS', [FPS]));`\
681		-	\
	681	+
682	682		` glColor3f(1, 1, 1);`\
683	683		` glWrite(50, glGetViewportHeight - 60, GLUT_BITMAP_9_BY_15, 'GLUT_BITMAP_9_BY_15');`\
684	684		` glWrite(50, glGetViewportHeight - 90, GLUT_BITMAP_8_BY_13, 'GLUT_BITMAP_8_BY_13');`\
685	685		` glWrite(50, glGetViewportHeight - 120, GLUT_BITMAP_TIMES_ROMAN_10, 'GLUT_BITMAP_TIMES_ROMAN_10');`\
686	686		` glWrite(50, glGetViewportHeight - 150, GLUT_BITMAP_TIMES_ROMAN_24, 'GLUT_BITMAP_TIMES_ROMAN_24');`\
687	687		` glWrite(50, glGetViewportHeight - 180, GLUT_BITMAP_HELVETICA_10, 'GLUT_BITMAP_HELVETICA_10');`\
688	688		` glWrite(50, glGetViewportHeight - 210, GLUT_BITMAP_HELVETICA_12, 'GLUT_BITMAP_HELVETICA_12');`\
689	689		` glWrite(50, glGetViewportHeight - 240, GLUT_BITMAP_HELVETICA_18, 'GLUT_BITMAP_HELVETICA_18');`\
690		-	\
	690	+
691	691		` glColor3f(0.5, 0.5, 1);`\
692	692		` glWrite(`\
693	693		` glGetViewportWidth - glutBitmapLength(GLUT_BITMAP_9_BY_15, LazText) - 5,`\
694	694		` 10, GLUT_BITMAP_9_BY_15, LazText);`\
695		-	\
	695	+
696	696		` glLeave2D;`\
697		-	\
	697	+
698	698		` glutSwapBuffers;`\
699		-	\
	699	+
700	700		` FrameRendered;`\
701	701		`end;`
702	702
703		-	![](/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.
	703	+	![](/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.
704	704
705	705		Note: See how cube looks without light.
706	706
707	707		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145).
708	708
709	709		# Textures
710	710
711	711		It's time to use textures :)
712	712
713	713		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.
714	714
715	715		Let's get started... we'll create display list for drawing textured rectangle:
716	716
717	717		`procedure CreateList;`\
718	718		`begin`\
719	719		` glNewList(LIST_OBJECT, GL_COMPILE);`\
720	720		` glBegin(GL_QUADS);`\
721	721		` glTexCoord2f(1, 0);`\
722	722		` glVertex3f( 2, 2, 0);`\
723	723		` glTexCoord2f(0, 0);`\
724	724		` glVertex3f(-2, 2, 0);`\
725	725		` glTexCoord2f(0, 1);`\
726	726		` glVertex3f(-2,-2, 0);`\
727	727		` glTexCoord2f(1, 1);`\
728	728		` glVertex3f( 2,-2, 0);`\
729	729		` glEnd;`\
730	730		` glEndList;`\
731	731		`end;`
732	732
733		-	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.
	733	+	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.
734	734
735	735		Texture loading is extremely easy with Vampyre Imaging Library:
736	736
737	737		`var`\
738	738		` Tex1, Tex2: GLuint;`\
739		-	\
	739	+
740	740		`procedure InitializeGL;`\
741	741		`begin`\
742	742		` glClearColor(0, 0, 0, 0);`\
743	743		` Tex1 := LoadGLTextureFromFile('ashwood.bmp');`\
744	744		` Tex2 := LoadGLTextureFromFile('Flare.bmp');`\
745	745		` glEnable(GL_TEXTURE_2D);`\
746	746		`end;`
747	747
748		-	~~<b>LoadGLTextureFromFile</b> 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.~~
	748	+	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.
749	749
750	750		To draw textured polygon you have to bind texture and setup texture coordinations (texture coordinations are set in display list in this tutorial):
751	751
752	752		` ...`\
753	753		` glLoadIdentity;`\
754	754		` glTranslatef(-5, 0, -15);`\
755	755		` glBindTexture(GL_TEXTURE_2D, Tex1);`\
756	756		` glCallList(LIST_OBJECT);`\
757	757		` ...`
758	758
759		-	~~<b>glBindTexture</b> function is used to select texture. When you draw polygins they will have selected texture on them. It's that easy :)~~
	759	+	glBindTexture function is used to select texture. When you draw polygins they will have selected texture on them. It's that easy :)
760	760
761	761		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:
762	762
763	763		` ...`\
764	764		` glLoadIdentity;`\
765	765		` glTranslatef(5, 0, -15);`\
766	766		` glBindTexture(GL_TEXTURE_2D, Tex1);`\
767	767		` glCallList(LIST_OBJECT);`\
768		-	\
	768	+
769	769		` glEnable(GL_BLEND);`\
770	770		` glBlendFunc(GL_ZERO, GL_SRC_COLOR);`\
771	771		` glLoadIdentity;`\
772	772		` glTranslatef(5, 0, -15);`\
773	773		` glBindTexture(GL_TEXTURE_2D, Tex2);`\
774	774		` glCallList(LIST_OBJECT);`\
775	775		` glDisable(GL_BLEND);`\
776	776		`...`
777	777
778		-	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:
	778	+	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:
779	779
780	780		`DrawingColor * SRCBLEND + BackgroundColor * DESTBLEND`
781	781
782		-	~~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:~~
	782	+	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:
783	783
784	784		`DrawingColor * 0 + BackgroundColor * DrawingColor`
785	785
786		-	~~<figure>~~
787		-	~~<img src="TexturesPic1.jpg" title="TexturesPic1.jpg" />~~
788		-	~~<figcaption>TexturesPic1.jpg</figcaption>~~
789		-	~~</figure>~~
	786	+	![](/wiki-images/d/d4/TexturesPic1.jpg)
790	787
791	788		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
792	789
793	790		Next time, we'll use extensions to show how to use singlepass multitexturing.
794	791
795	792		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145).
796	793
797	794		# Multitexturing (extensions)
798	795
799	796		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.
800	797
801	798		Let's see how code looks like:
802	799
803	800		`procedure InitializeGL;`\
804	801		`begin`\
805	802		` Load_GL_ARB_multitexture;`\
806	803		` glClearColor(0, 0, 0, 0);`\
807	804		` Tex1 := LoadGLTextureFromFile('Lazarus.bmp');`\
808	805		` Tex2 := LoadGLTextureFromFile('Mask.bmp');`\
809	806		` glActiveTextureARB(GL_TEXTURE0_ARB);`\
810	807		` glEnable(GL_TEXTURE_2D);`\
811	808		` glBindTexture(GL_TEXTURE_2D, Tex1);`\
812	809		` glActiveTextureARB(GL_TEXTURE1_ARB);`\
813	810		` glEnable(GL_TEXTURE_2D);`\
814	811		` glBindTexture(GL_TEXTURE_2D, Tex2);`\
815	812		`end;`
816	813
817		-	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.
	814	+	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.
818	815
819		-	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.
	816	+	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.
820	817
821	818		Since we setup every thing in initialization function, all we have to do is to draw object:
822	819
823	820		`procedure DrawGLScene; cdecl;`\
824	821		`begin`\
825	822		` glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);`\
826		-	\
	823	+
827	824		` glLoadIdentity;`\
828	825		` glTranslatef(0, 0, -5);`\
829		-	\
	826	+
830	827		` glBegin(GL_QUADS);`\
831	828		` glMultiTexCoord2fARB(GL_TEXTURE0_ARB, 1, 0);`\
832	829		` glMultiTexCoord2fARB(GL_TEXTURE1_ARB, 1, 0);`\
833	830		` glVertex3f(2.516, 2, 0);`\
834	831		` glMultiTexCoord2fARB(GL_TEXTURE0_ARB, 0, 0);`\
835	832		` glMultiTexCoord2fARB(GL_TEXTURE1_ARB, 0, 0);`\
836	833		` glVertex3f(-2.516, 2, 0);`\
837	834		` glMultiTexCoord2fARB(GL_TEXTURE0_ARB, 0, 1);`\
838	835		` glMultiTexCoord2fARB(GL_TEXTURE1_ARB, 0, 1);`\
839	836		` glVertex3f(-2.516,-2, 0);`\
840	837		` glMultiTexCoord2fARB(GL_TEXTURE0_ARB, 1, 1);`\
841	838		` glMultiTexCoord2fARB(GL_TEXTURE1_ARB, 1, 1);`\
842	839		` glVertex3f(2.516,-2, 0);`\
843	840		` glEnd;`\
844		-	\
	841	+
845	842		` glutSwapBuffers;`\
846	843		`end;`
847	844
848		-	![](/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.
	845	+	![](/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.
849	846
850	847		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.
851	848
852	849		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145).
853	850
854	851		# Render to texture
855	852
856	853		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.
857	854
858	855		First, we must create empty texture which we'll use to capture scene:
859	856
860	857		`procedure SetupRenderTexture;`\
861	858		`var`\
862	859		` Data: Pointer;`\
863	860		`begin`\
864	861		` GetMem(Data, 2562563);`\
865	862		` glGenTextures(1, @RenderTexture);`\
866	863		` glBindTexture(GL_TEXTURE_2D, RenderTexture);`\
867	864		` glTexImage2D(GL_TEXTURE_2D, 0, 3, 256, 256, 0, GL_RGB, GL_UNSIGNED_BYTE, Data);`\
868	865		` glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);`\
869	866		` glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);`\
870	867		` FreeMem(Data);`\
871	868		`end;`
872	869
873	870		Buffer for 256*256 RGB image is created and it is used to setup 2D texture.
874	871
875	872		Main part is in drawing function:
876	873
877	874		`procedure DrawGLScene; cdecl;`\
878	875		`var`\
879	876		` TotalTime: Single;`\
880	877		`begin`\
881	878		` glClearColor(0, 0, 0, 0);`\
882	879		` glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);`\
883	880		` glEnable(GL_LIGHTING);`\
884	881		` glDisable(GL_TEXTURE_2D);`\
885	882		` glViewport(0, 0, 256, 256);`\
886		-	\
	883	+
887	884		` TotalTime := GetTotalTime;`\
888		-	\
	885	+
889	886		` glLoadIdentity;`\
890	887		` glTranslatef(0, 0, -5);`\
891	888		` glRotatef(50 * TotalTime, 1, 0, 0);`\
892	889		` glRotatef(100 * TotalTime, 0, 1, 0);`\
893	890		` glRotatef(50 * TotalTime, 0, 0, 1);`\
894		-	\
	891	+
895	892		` glColor3f(1, 1, 1);`\
896	893		` glutSolidCube(2);`\
897		-	\
	894	+
898	895		` glCopyTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 0, 0, 256, 256, 0);`\
899		-	\
	896	+
900	897		` glClearColor(0.18, 0.20, 0.66, 0);`\
901	898		` glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);`\
902	899		` glDisable(GL_LIGHTING);`\
903	900		` glEnable(GL_TEXTURE_2D);`\
904	901		` glViewport(0, 0, AppWidth, AppHeight);`\
905		-	\
	902	+
906	903		` glLoadIdentity;`\
907	904		` glTranslatef(0, 0, -7);`\
908	905		` glRotatef(20 * TotalTime, 1, 0, 0);`\
909	906		` glRotatef(50 * TotalTime, 0, 1, 0);`\
910		-	\
	907	+
911	908		` glBegin(GL_QUADS);`\
912	909		` glTexCoord2f(1, 0);`\
913	910		` glVertex3f(2, 2, 0);`\
914	911		` glTexCoord2f(0, 0);`\
915	912		` glVertex3f(-2, 2, 0);`\
916	913		` glTexCoord2f(0, 1);`\
917	914		` glVertex3f(-2,-2, 0);`\
918	915		` glTexCoord2f(1, 1);`\
919	916		` glVertex3f(2,-2, 0);`\
920	917		` glEnd;`\
921		-	\
	918	+
922	919		` glutSwapBuffers;`\
923	920		`end;`
924	921
925		-	![](/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.
	922	+	![](/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.
926	923
927	924		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.
928	925
929		-	~~P.S. Captured texture can be saved using <b>SaveGLTextureToFile</b> function from [Vampyre Imaging Library](http://imaginglib.sourceforge.net/).~~
	926	+	P.S. Captured texture can be saved using SaveGLTextureToFile function from [Vampyre Imaging Library](http://imaginglib.sourceforge.net/).
930	927
931	928		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145).
932	929
933	930		# Vertex array
934	931
935	932		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.
936	933
937	934		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.
938	935
939	936		First, let's define some types and constants:
940	937
941	938		`type`\
942	939		` TVertex3f = record`\
943	940		` X, Y, Z: Single;`\
944	941		` end;`\
945		-	\
	942	+
946	943		` TColor3f = record`\
947	944		` R, G, B: Single;`\
948	945		` end;`\
949		-	\
	946	+
950	947		` VertexBuffer: array [0..5] of TVertex3f = (`\
951	948		` (X : 1; Y : 1; Z : 0),`\
952	949		` (X : -1; Y : 1; Z : 0),`\
953	950		` (X : -1; Y : -1; Z : 0),`\
954	951		` (X : 1; Y : 1; Z : 0),`\
955	952		` (X : -1; Y : -1; Z : 0),`\
956	953		` (X : 1; Y : -1; Z : 0)`\
957	954		` );`\
958	955		` ColorBuffer: array [0..5] of TColor3f = (`\
959	956		` (R : 1; G : 0; B : 1),`\
960	957		` (R : 0; G : 0; B : 1),`\
961	958		` (R : 0; G : 1; B : 0),`\
962	959		` (R : 1; G : 0; B : 1),`\
963	960		` (R : 0; G : 1; B : 0),`\
964	961		` (R : 1; G : 1; B : 0)`\
965	962		` );`
966	963
967	964		We have two buffers. One for vertex coordinates and one for vertex colors. This 6 vertices defines 2 triangles that forms rectangle.
968	965
969	966		Drawing primitives using buffers is easy:
970	967
971	968		` glEnableClientState(GL_VERTEX_ARRAY);`\
972	969		` glEnableClientState(GL_COLOR_ARRAY);`\
973	970		` glVertexPointer(3, GL_FLOAT, 0, @VertexBuffer[0]);`\
974	971		` glColorPointer(3, GL_FLOAT, 0, @ColorBuffer[0]);`\
975		-	\
	972	+
976	973		` glDrawArrays(GL_TRIANGLES, 0, Length(VertexBuffer));`\
977		-	\
	974	+
978	975		` glDisableClientState(GL_VERTEX_ARRAY);`\
979	976		` glDisableClientState(GL_COLOR_ARRAY);`
980	977
981		-	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:
	978	+	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:
982	979
983	980		`type`\
984	981		` TBufferData = record`\
985	982		` DataBefore: TDataBefore;`\
986	983		` Vertex: TVertex;`\
987	984		` DataAfter: TDataAfter;`\
988	985		` end;`\
989		-	\
	986	+
990	987		`Bytes between elements = SizeOf(TDataBefore) + SizeOf(TDataAfter)`
991	988
992	989		Last parameter if pointer to the begginig of buffer.
993	990
994		-	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).
	991	+	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).
995	992
996	993		When buffers are not needed you can disable them.
997	994
998	995		To demonstrate indexed mode, I made some simple mesh class that can load vertex, color and index data from external files:
999	996
1000	997		`type`\
1001	998		` TMesh = class`\
1002	999		` private`\
1003	1000		` FVertices: array of TVertex3f;`\
1004	1001		` FColors: array of TColor3f;`\
1005	1002		` FIndices: array of Integer;`\
1006	1003		` procedure FreeBuffers;`\
1007	1004		` public`\
1008	1005		` constructor Create;`\
1009	1006		` destructor Destroy; override;`\
1010	1007		` procedure LoadMesh(FileName: String);`\
1011	1008		` procedure DrawMesh;`\
1012	1009		` end;`
1013	1010
1014	1011		FVertices will contain data about vertices, FColors data about color and FIndices data about indices when external file is loaded.
1015	1012
1016	1013		First we'll write some code that deals with creation and destruction of class:
1017	1014
1018	1015		`procedure TMesh.FreeBuffers;`\
1019	1016		`begin`\
1020	1017		` FVertices := nil;`\
1021	1018		` FColors := nil;`\
1022	1019		` FIndices := nil;`\
1023	1020		`end;`\
1024		-	\
	1021	+
1025	1022		`constructor TMesh.Create;`\
1026	1023		`begin`\
1027	1024		` FreeBuffers;`\
1028	1025		`end;`\
1029		-	\
	1026	+
1030	1027		`destructor TMesh.Destroy;`\
1031	1028		`begin`\
1032	1029		` FreeBuffers;`\
1033	1030		` inherited Destroy;`\
1034	1031		`end;`
1035	1032
1036	1033		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:
1037	1034
1038	1035		`3 3`\
1039	1036		`-1 -1 0 1 1 1`\
1040	1037		`1 -1 0 1 1 1`\
1041	1038		`0 1 0 1 1 1`\
1042	1039		`0`\
1043	1040		`1`\
1044	1041		`2`
1045	1042
1046	1043		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).
1047	1044
1048	1045		Code for loading this data will loke like this:
1049	1046
1050	1047		`procedure TMesh.LoadMesh(FileName: String);`\
1051	1048		`var`\
1052	1049		` MeshFile: TextFile;`\
1053	1050		` VertexCount, IndexCount: Integer;`\
1054	1051		` iV, iI: Integer;`\
1055	1052		`begin`\
1056	1053		` FreeBuffers;`\
1057		-	\
	1054	+
1058	1055		` AssignFile(MeshFile, FileName);`\
1059	1056		` Reset(MeshFile);`\
1060		-	\
	1057	+
1061	1058		` ReadLn(MeshFile, VertexCount, IndexCount);`\
1062		-	\
	1059	+
1063	1060		` SetLength(FVertices, VertexCount);`\
1064	1061		` SetLength(FColors, VertexCount);`\
1065	1062		` SetLength(FIndices, IndexCount);`\
1066		-	\
	1063	+
1067	1064		` for iV := 0 to VertexCount - 1 do`\
1068	1065		` ReadLn(MeshFile,`\
1069	1066		` FVertices[iV].X, FVertices[iV].Y, FVertices[iV].Z,`\
1070	1067		` FColors[iV].R, FColors[iV].G, FColors[iV].B);`\
1071		-	\
	1068	+
1072	1069		` for iI := 0 to IndexCount - 1 do`\
1073	1070		` ReadLn(MeshFile, FIndices[iI]);`\
1074		-	\
	1071	+
1075	1072		` CloseFile(MeshFile);`\
1076	1073		`end;`
1077	1074
1078	1075		After loading data, we have everything for drawing:
1079	1076
1080	1077		`procedure TMesh.DrawMesh;`\
1081	1078		`begin`\
1082	1079		` glEnableClientState(GL_VERTEX_ARRAY);`\
1083	1080		` glEnableClientState(GL_COLOR_ARRAY);`\
1084	1081		` glVertexPointer(3, GL_FLOAT, 0, @FVertices[0]);`\
1085	1082		` glColorPointer(3, GL_FLOAT, 0, @FColors[0]);`\
1086		-	\
	1083	+
1087	1084		` glDrawElements(GL_TRIANGLES, Length(FIndices), GL_UNSIGNED_INT, @FIndices[0]);`\
1088		-	\
	1085	+
1089	1086		` glDisableClientState(GL_VERTEX_ARRAY);`\
1090	1087		` glDisableClientState(GL_COLOR_ARRAY);`\
1091	1088		`end;`
1092	1089
1093		-	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.
	1090	+	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.
1094	1091
1095	1092		![](/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:
1096	1093
1097	1094		`4 6`\
1098	1095		`1 1 0 1 0 1`\
1099	1096		`-1 1 0 0 0 1`\
1100	1097		`-1 -1 0 0 1 0`\
1101	1098		`1 -1 0 1 1 0`\
1102	1099		`0`\
1103	1100		`1`\
1104	1101		`2`\
1105	1102		`0`\
1106	1103		`2`\
1107	1104		`3`
1108	1105
1109	1106		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.
1110	1107
1111	1108		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145).
1112	1109
1113	1110		------------------------------------------------------------------------
1114	1111
1115	1112		[[Creating bindings for C libraries]]
1116	1113
1117	1114		---
1118	1115		From the Free Pascal wiki, page "OpenGL Tutorial/zh CN", as it stood on 2020-02-23 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