OpenGL Tutorial/ja: what changed

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

Old	New		Line
1	1		# 概要
2	2
3	3		OpenGLは2Dや3DのインタラクティブなグラフィックスアプリケーションをOSなどに依存せず作成できる、優れた開発環境です。OpenGLは1992年から開発がすすめられ、いまや2D、3DグラフィックスアプリケーションのAPIとしては、数多くのアプリケーションで使われ、いろんなコンピュータプラットホームで利用でき、業界標準になっています。
4	4
5	5		OpenGLは、様々な種類のレンダリング、テクスチャマッピング、特殊効果、および他の強力なビジュアライゼーション機能を取り入れており、革新的な、アプリケーション開発を加速できます。
6	6
7	7		開発者はすべてのポピュラーなデスクトップとワークステーションプラットホームに、OpenGLのパワーを利用することができますので、広いアプリケーション展開が可能になります。もっと詳しい情報は、 [OpenGLのサイト](http://www.opengl.org/about/overview/)で得ることができます。
8	8
9	9		GLUTはOpenGL Utility Toolkitですの略です。OpenGLを使ったプログラムを書くために、どのようなウィンドウシステムで利用できるツールキットです。これは、簡単なウインドウをもつOpenGLを使うプログラムで使える、アプリケーションプログラミングインターフェース(API)を実装します。（訳注：GLUTを使えば、ウインドウシステム、プラットフォームの違いを吸収してくれます。） GLUTを使えば、OpenGLプログラミングを学んだり、調査すしたりすることが簡単になります。また、いろいろなPCとワークステーション、OSにわたって動作するひとつのOpenGLプログラムに書けるのと同様に、GLUTは携帯用のAPIも提供しています。もっと詳しい情報は、 [OpenGLのGLUTのサイト](http://www.opengl.org/resources/libraries/glut/)で得ることができます。
10	10
11	11		多くのOSにGLUTがプレインストールされています。もし、自分の環境にあったものが分からない場合は、 [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プログラムを作ろう
16	16
17		-	GLUTを使うために、初期化処理をおこなう必要があります。これは、<b>glutInit</b>関数を使って行えます。この関数はコマンドラインを解析し、メインウインドウのパラメータをセットします。しかし、それは、C/C++形式の入力を前提としています。あなたは、自分の関数内で、ParamCountとParamStrから、C/C++風のコマンドラインパラメータに変換する必要があります。
	17	+	GLUTを使うために、初期化処理をおこなう必要があります。これは、glutInit関数を使って行えます。この関数はコマンドラインを解析し、メインウインドウのパラメータをセットします。しかし、それは、C/C++形式の入力を前提としています。あなたは、自分の関数内で、ParamCountとParamStrから、C/C++風のコマンドラインパラメータに変換する必要があります。
18	18
19	19		`procedure glutInitPascal(ParseCmdLine: Boolean); `\
20	20		`var`\
21	21		` Cmd: array of PChar;`\
22	22		` CmdCount, I: Integer;`\
23	23		`begin`\
24	24		` if ParseCmdLine then`\
25	25		` CmdCount := ParamCount + 1`\
26	26		` else`\
27	27		` CmdCount := 1;`\
28	28		` SetLength(Cmd, CmdCount);`\
29	29		` for I := 0 to CmdCount - 1 do`\
30	30		` Cmd[I] := PChar(ParamStr(I));`\
31	31		` glutInit(@CmdCount, @Cmd);`\
32	32		`end;`
33	33
34	34		要するに、配列を作って、ParamStrからの文字列をセットしています。この関数は、glutInitに渡して、制御するためのパラメータを取ることができます。コマンドライン、もしくは、実行ファイルそのものの名です。
35	35
36	36		glutInitについての情報は: <http://www.opengl.org/resources/libraries/glut/spec3/node10.html>
37	37
38		-	次に、メインウインドウを生成する必要があります。メインウインドウに、<b>glutInitDisplayMode</b>を使って、ディスプレイモードを設定します。これは、フラグの組み合わせで表現されるただ１つのパラメータを取ります。通常は、<b>GLUT_DOUBLE or GLUT_RGB or GLUT_DEPTH</b> で充分でしょう。
	38	+	次に、メインウインドウを生成する必要があります。メインウインドウに、glutInitDisplayModeを使って、ディスプレイモードを設定します。これは、フラグの組み合わせで表現されるただ１つのパラメータを取ります。通常は、GLUT_DOUBLE or GLUT_RGB or GLUT_DEPTH で充分でしょう。
39	39
40	40		glutInitDisplayModeについての情報は: <http://www.opengl.org/resources/libraries/glut/spec3/node12.html>
41	41
42		-	The position and size of the window is controlled using ウインドウの位置とサイズは、 <b>glutInitWindowPosition</b> と、 <b>glutInitWindowSize</b>.によって制御されます。これらは、２個のパラメータをとります。最初のものはX and Y の組、後のものは、幅と高さです。ウインドウのサイズと中心を得るために、<b>glutGet</b>を使うこともできます。
	42	+	The position and size of the window is controlled using ウインドウの位置とサイズは、 glutInitWindowPosition と、 glutInitWindowSize.によって制御されます。これらは、２個のパラメータをとります。最初のものはX and Y の組、後のものは、幅と高さです。ウインドウのサイズと中心を得るために、glutGetを使うこともできます。
43	43
44	44		glutInitWindowPosition, glutInitWindowSize と glutGetについての情報は: <http://www.opengl.org/resources/libraries/glut/spec3/node11.html> <http://www.opengl.org/documentation/specs/glut/spec3/node70.html>
45	45
46		-	最後に、<b>glutCreateWindow</b> 関数を使って、ウインドウを生成します。これは、ウインドウを生成し、パラメータを通してキャプションを設定します。
	46	+	最後に、glutCreateWindow 関数を使って、ウインドウを生成します。これは、ウインドウを生成し、パラメータを通してキャプションを設定します。
47	47
48	48		結果として、この関数はウインドウのハンドルを返します。これは、他の関数で必要とされて使われる事があります。
49	49
50	50		glutCreateWindowについての情報は: <http://www.opengl.org/resources/libraries/glut/spec3/node16.html>
51	51
52		-	プログラムがメインループにはいる前に、いくつかコールバックを設定しておきます。ウインドウを描画するとき、リサイズするとき、キーボード入力があったとき、などに、コールバックを必要とします。これらのコールバックは、<b>glutDisplayFunc</b>、 <b>glutReshapeFunc</b> 、 <b>glutKeyboardFunc</b>を使って設定します。
	52	+	プログラムがメインループにはいる前に、いくつかコールバックを設定しておきます。ウインドウを描画するとき、リサイズするとき、キーボード入力があったとき、などに、コールバックを必要とします。これらのコールバックは、glutDisplayFunc、 glutReshapeFunc 、 glutKeyboardFuncを使って設定します。
53	53
54	54		コールバックについての情報は: <http://www.opengl.org/resources/libraries/glut/spec3/node45.html#SECTION00080000000000000000>
55	55
56	56		描画関数は、このようになるでしょう。
57	57
58	58		`procedure DrawGLScene; cdecl;`\
59	59		`begin`\
60	60		` glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);`\
61	61		` glutSwapBuffers;`\
62	62		`end;`
63	63
64	64		これは、単にウインドウをバックグラウンド色でクリアして、Zバッファをリセットします。（Zバッファについては、後で説明するので分からなくても気にしないでください。）
65	65
66	66		リサイズ関数は、次のようになるでしょう。
67	67
68	68		`procedure ReSizeGLScene(Width, Height: Integer); cdecl;`\
69	69		`begin`\
70	70		` if Height = 0 then`\
71	71		` Height := 1;`\
72		-	\
	72	+
73	73		` glViewport(0, 0, Width, Height);`\
74	74		` glMatrixMode(GL_PROJECTION);`\
75	75		` glLoadIdentity;`\
76	76		` gluPerspective(45, Width / Height, 0.1, 1000);`\
77		-	\
	77	+
78	78		` glMatrixMode(GL_MODELVIEW);`\
79	79		` glLoadIdentity;`\
80	80		`end;`
81	81
82	82		このコードで、OpenGLにウインドウのどの部分に描画し、必要な値を適切な行列に設定することができます。（行列関数は、後で説明します。）
83	83
84	84		キーボード入力は、次の関数で評価されます。
85	85
86	86		`procedure GLKeyboard(Key: Byte; X, Y: Longint); cdecl;`\
87	87		`begin`\
88	88		` if Key = 27 then`\
89	89		` Halt(0);`\
90	90		`end;`
91	91
92		-	この関数はESCキーを押すとプログラムを終了するようにします。GLUTはイベントドリブンであり、プログラムを終了するためには、コールバック関数の中で<b>Halt</b>関数をコールします。
	92	+	この関数はESCキーを押すとプログラムを終了するようにします。GLUTはイベントドリブンであり、プログラムを終了するためには、コールバック関数の中でHalt関数をコールします。
93	93
94	94		もし、別の方法でウインドウをクローズすると、ウインドウは消えても、プログラムは見えないところでループを続けているでしょう。
95	95
96		-	メインループを開始するには、<b>glutMainLoop</b>をコールします。これは、終了しないループに突入し、コールバック関数をコールしていきます。プログラムの主要部分は次のようになるでしょう。
	96	+	メインループを開始するには、glutMainLoopをコールします。これは、終了しないループに突入し、コールバック関数をコールしていきます。プログラムの主要部分は次のようになるでしょう。
97	97
98	98		`const `\
99	99		` AppWidth = 640; `\
100	100		` AppHeight = 480; `\
101		-	\
	101	+
102	102		`procedure InitializeGL; `\
103	103		`begin `\
104	104		` glClearColor(0.18, 0.20, 0.66, 0); `\
105	105		`end; `\
106		-	\
	106	+
107	107		`var `\
108	108		` ScreenWidth, ScreenHeight: Integer; `\
109	109		`begin `\
110	110		` glutInitPascal(True); `\
111	111		` glutInitDisplayMode(GLUT_DOUBLE or GLUT_RGB or GLUT_DEPTH); `\
112	112		` glutInitWindowSize(AppWidth, AppHeight); `\
113	113		` ScreenWidth := glutGet(GLUT_SCREEN_WIDTH); `\
114	114		` ScreenHeight := glutGet(GLUT_SCREEN_HEIGHT); `\
115	115		` glutInitWindowPosition((ScreenWidth - AppWidth) div 2,`\
116	116		` (ScreenHeight - AppHeight) div 2); `\
117	117		` glutCreateWindow('OpenGL Tutorial 1'); `\
118		-	\
	118	+
119	119		` InitializeGL; `\
120		-	\
	120	+
121	121		` glutDisplayFunc(@DrawGLScene); `\
122	122		` glutReshapeFunc(@ReSizeGLScene); `\
123	123		` glutKeyboardFunc(@GLKeyboard); `\
124		-	\
	124	+
125	125		` glutMainLoop; `\
126	126		`end.`
127	127
128	128		次のチュートリアルでは、少しコードを追加して、簡単な図形を書いてみます。
129	129
130	130		下記でソースコードやlinux/Windowsの実行ファイルをダウンロードできます。 [Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145).
131	131
132	132		# 単純な形状を描画する
133	133
134	134		今回は、少しだけコードを追加して、OpenGLの関数の説明にフォーカスします。
135	135
136	136		これまでのコードで説明します。
137	137
138	138		` .`\
139	139		` .`\
140	140		` .`\
141	141		` glMatrixMode(GL_PROJECTION);`\
142	142		` glLoadIdentity;`\
143	143		` gluPerspective(45, Width / Height, 0.1, 1000);`\
144		-	\
	144	+
145	145		` glMatrixMode(GL_MODELVIEW);`\
146	146		` glLoadIdentity;`\
147	147		`end;`
148	148
149		-	~~<b>glMatrixMode</b>関数で、変更したい行列を選択します。 OpenGL には、3つの行列があります。~~
	149	+	glMatrixMode関数で、変更したい行列を選択します。 OpenGL には、3つの行列があります。
150	150
151		-	~~<b>GL_MODELVIEW</b>: この行列は、頂点をモデル空間へ移動するためのものです。~~
	151	+	GL_MODELVIEW: この行列は、頂点をモデル空間へ移動するためのものです。
152	152
153		-	~~<b>GL_PROJECTION</b>: この行列は、3次元の位置を2次元の最終的に表示するピクセル位置に変換するためのものです。~~
	153	+	GL_PROJECTION: この行列は、3次元の位置を2次元の最終的に表示するピクセル位置に変換するためのものです。
154	154
155		-	~~<b>GL_TEXTURE</b>: この行列はテクスチャ座標を変換するためのものです。~~
	155	+	GL_TEXTURE: この行列はテクスチャ座標を変換するためのものです。
156	156
157	157		いったん、変更したい行列を選択したら、行列値に影響を与える関数をコールします。
158	158
159		-	<b>glLoadIdentity</b> は、行列をリセットするので、頂点位置に影響をあたえなくなります。ほとんどすべての行列関数は、現在の行列に、生成した一つの行列を掛けるので、時々この関数で行列をクリアする必要があるでしょう。（訳注：glLoadIdentityは、変換行列を単位行列にする。reset(リセット)や、clear(クリアする)、というと、プログラミング的な表現では、ゼロ行列をおもいうかべそうだが、原文作者の数学的な観念の表現であると考えて、そのまま和訳した）
	159	+	glLoadIdentity は、行列をリセットするので、頂点位置に影響をあたえなくなります。ほとんどすべての行列関数は、現在の行列に、生成した一つの行列を掛けるので、時々この関数で行列をクリアする必要があるでしょう。（訳注：glLoadIdentityは、変換行列を単位行列にする。reset(リセット)や、clear(クリアする)、というと、プログラミング的な表現では、ゼロ行列をおもいうかべそうだが、原文作者の数学的な観念の表現であると考えて、そのまま和訳した）
160	160
161		-	視野行列を設定したいなら、 <b>gluPerspective</b> を使うことができます。4つのパラメータ（アスペクト比、視野の近い側の面、遠い側の面）、が視野をあらわします。これは、シンプルです。
	161	+	視野行列を設定したいなら、 gluPerspective を使うことができます。4つのパラメータ（アスペクト比、視野の近い側の面、遠い側の面）、が視野をあらわします。これは、シンプルです。
162	162
163	163		（訳注：OpenGLの観念としては、視野は、体積としてとらえるので、視野体積として空間を捉えるとよいだろう。）それで、モデル行列を変更できます。この時点で、固有のものをセットすればよいでしょう。よろしいでしょうか。それでは、最初の形状を書いてみましょう。
164	164
165	165		`procedure DrawGLScene; cdecl;`\
166	166		`begin`\
167	167		` glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);`\
168		-	\
	168	+
169	169		` glLoadIdentity;`\
170	170		` glTranslatef(0, 0, -5);`\
171		-	\
	171	+
172	172		` glBegin(GL_TRIANGLES);`\
173	173		` glColor3f(1, 0, 0);`\
174	174		` glVertex3f(-1, -1, 0);`\
175		-	\
	175	+
176	176		` glColor3f(0, 1, 0);`\
177	177		` glVertex3f(1, -1, 0);`\
178		-	\
	178	+
179	179		` glColor3f(0, 0, 1);`\
180	180		` glVertex3f(0, 1, 0);`\
181	181		` glEnd;`\
182		-	\
	182	+
183	183		` glutSwapBuffers;`\
184	184		`end;`
185	185
186	186		すでに、glClear関数は使いましたが、これは、バッファをリセットします。次の２個の関数はスキップして、描画関数に注目します。
187	187
188		-	<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.
	188	+	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.
189	189
190	190		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.
191	191
192	192		GL_LINE_STRIP: Draws a connected group of line segments from the first vertex to the last. n-1 lines are drawn.
193	193
194	194		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.
195	195
196	196		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.
197	197
198	198		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.
199	199
200	200		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.
201	201
202	202		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.
203	203
204	204		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.
205	205
206	206		GL_POLYGON: Draws a single, convex polygon. Vertices 1 through n define this polygon.
207	207
208		-	![](/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.
	208	+	![](/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.
209	209
210		-	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.
	210	+	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.
211	211
212		-	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.
	212	+	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.
213	213
214		-	~~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.~~
	214	+	In the end you call glEnd functions that finishes drawing. You could now start another drawing block with new glBegin function if you wish.
215	215
216	216		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145).
217	217
218	218		# Using display lists
219	219
220		-	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.
	220	+	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.
221	221
222	222		`const`\
223	223		` LIST_OBJECT = 1;`\
224		-	\
	224	+
225	225		`procedure CreateList;`\
226	226		`begin`\
227	227		` glNewList(LIST_OBJECT, GL_COMPILE);`\
228	228		` glBegin(GL_TRIANGLE_FAN);`\
229	229		` glColor3f(1, 0, 0);`\
230	230		` glVertex3f(0, 0.5, 0);`\
231		-	\
	231	+
232	232		` glColor3f(1, 1, 0);`\
233	233		` glVertex3f(-0.5, -0.5, 0.5);`\
234		-	\
	234	+
235	235		` glColor3f(1, 1, 1);`\
236	236		` glVertex3f(0.5, -0.5, 0.5);`\
237		-	\
	237	+
238	238		` glColor3f(0, 1, 1);`\
239	239		` glVertex3f(0.5, -0.5, -0.5);`\
240		-	\
	240	+
241	241		` glColor3f(0, 0, 1);`\
242	242		` glVertex3f(-0.5, -0.5, -0.5);`\
243		-	\
	243	+
244	244		` glColor3f(0, 1, 0);`\
245	245		` glVertex3f(-0.5, -0.5, 0.5);`\
246	246		` glEnd;`\
247		-	\
	247	+
248	248		` glBegin(GL_QUADS);`\
249	249		` glColor3f(1, 1, 0);`\
250	250		` glVertex3f(-0.5, -0.5, 0.5);`\
251		-	\
	251	+
252	252		` glColor3f(1, 1, 1);`\
253	253		` glVertex3f(0.5, -0.5, 0.5);`\
254		-	\
	254	+
255	255		` glColor3f(0, 1, 1);`\
256	256		` glVertex3f(0.5, -0.5, -0.5);`\
257		-	\
	257	+
258	258		` glColor3f(0, 0, 1);`\
259	259		` glVertex3f(-0.5, -0.5, -0.5);`\
260		-	\
	260	+
261	261		` glColor3f(0, 1, 0);`\
262	262		` glVertex3f(-0.5, -0.5, 0.5);`\
263	263		` glEnd;`\
264	264		` glEndList;`\
265	265		`end;`
266	266
267		-	<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.
	267	+	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.
268	268
269		-	<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
	269	+	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
270	270
271	271		All created lists should be deleted. You will do that before program exits:
272	272
273	273		`procedure GLKeyboard(Key: Byte; X, Y: Longint); cdecl;`\
274	274		`begin`\
275	275		` if Key = 27 then`\
276	276		` begin`\
277	277		` glDeleteLists(LIST_OBJECT, 1);`\
278	278		` Halt(0);`\
279	279		` end;`\
280	280		`end;`
281	281
282		-	~~<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~~
	282	+	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
283	283
284	284		Now you know how to create and delete display lists... let's see how to draw them:
285	285
286	286		`procedure DrawGLScene; cdecl;`\
287	287		`begin`\
288	288		` glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);`\
289		-	\
	289	+
290	290		` glLoadIdentity;`\
291	291		` glTranslatef(-2, 0, -5);`\
292	292		` glRotatef(40, 1, 0, 1);`\
293	293		` glCallList(LIST_OBJECT);`\
294		-	\
	294	+
295	295		` glLoadIdentity;`\
296	296		` glTranslatef(1, -2, -10);`\
297	297		` glRotatef(62, 0, 1, 0);`\
298	298		` glCallList(LIST_OBJECT);`\
299		-	\
	299	+
300	300		` glLoadIdentity;`\
301	301		` glTranslatef(-4, 0.5, -15);`\
302	302		` glRotatef(200, 1, 0, 0);`\
303	303		` glCallList(LIST_OBJECT);`\
304		-	\
	304	+
305	305		` glutSwapBuffers;`\
306	306		`end;`
307	307
308		-	![](/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:
	308	+	![](/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:
309	309
310	310		GL_BYTE: list is treated as an array of signed bytes, each in the range -128 through 127.
311	311
312	312		GL_UNSIGNED_BYTE: list is treated as an array of unsigned bytes, each in the range 0 through 255.
313	313
314	314		GL_SHORT: list is treated as an array of signed two-byte integers, each in the range -32768 through 32767.
315	315
316	316		GL_UNSIGNED_SHORT: list is treated as an array of unsigned two-byte integers, each in the range 0 through 65535.
317	317
318	318		GL_INT: lists is treated as an array of signed four-byte integers.
319	319
320	320		GL_UNSIGNED_INT: list is treated as an array of unsigned four-byte integers.
321	321
322	322		GL_FLOAT: list is treated as an array of four-byte floating-point values.
323	323
324	324		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.
325	325
326	326		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.
327	327
328	328		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.
329	329
330	330		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.
331	331
332	332		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145).
333	333
334	334		# Full screen animation
335	335
336	336		Entering full screen mode is easy with GLUT. Let's change main part of the program:
337	337
338	338		`const`\
339	339		` FSMode = '800x600:32@75';`\
340		-	\
	340	+
341	341		`begin`\
342	342		` glutInitPascal(False);`\
343	343		` glutInitDisplayMode(GLUT_DOUBLE or GLUT_RGB or GLUT_DEPTH);`\
344	344		` glutGameModeString(FSMode);`\
345	345		` glutEnterGameMode;`\
346	346		` glutSetCursor(GLUT_CURSOR_NONE);`\
347		-	\
	347	+
348	348		` InitializeGL;`\
349		-	\
	349	+
350	350		` glutDisplayFunc(@DrawGLScene);`\
351	351		` glutReshapeFunc(@ReSizeGLScene);`\
352	352		` glutKeyboardFunc(@GLKeyboard);`\
353	353		` glutIdleFunc(@DrawGLScene);`\
354		-	\
	354	+
355	355		` glutMainLoop;`\
356	356		`end.`
357	357
358		-	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:
	358	+	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:
359	359
360	360		`[width "x" height][":" bpp]["@" hertz]`
361	361
362	362		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.
363	363
364		-	~~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:~~
	364	+	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:
365	365
366	366		`GLUT_CURSOR_RIGHT_ARROW`\
367	367		`GLUT_CURSOR_LEFT_ARROW`\
368	368		`GLUT_CURSOR_INFO`\
369	369		`GLUT_CURSOR_DESTROY`\
370	370		`GLUT_CURSOR_HELP`\
371	371		`GLUT_CURSOR_CYCLE`\
372	372		`GLUT_CURSOR_SPRAY`\
373	373		`GLUT_CURSOR_WAIT`\
374	374		`GLUT_CURSOR_TEXT`\
375	375		`GLUT_CURSOR_CROSSHAIR`\
376	376		`GLUT_CURSOR_UP_DOWN`\
377	377		`GLUT_CURSOR_LEFT_RIGHT`\
378	378		`GLUT_CURSOR_TOP_SIDE`\
379	379		`GLUT_CURSOR_BOTTOM_SIDE`\
380	380		`GLUT_CURSOR_LEFT_SIDE`\
381	381		`GLUT_CURSOR_RIGHT_SIDE`\
382	382		`GLUT_CURSOR_TOP_LEFT_CORNER`\
383	383		`GLUT_CURSOR_TOP_RIGHT_CORNER`\
384	384		`GLUT_CURSOR_BOTTOM_RIGHT_CORNER`\
385	385		`GLUT_CURSOR_BOTTOM_LEFT_CORNER`\
386	386		`GLUT_CURSOR_FULL_CROSSHAIR`\
387	387		`GLUT_CURSOR_NONE`\
388	388		`GLUT_CURSOR_INHERIT`
389	389
390		-	<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.
	390	+	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.
391	391
392	392		Now, let's look at the program termination where you need to exit full screen mode:
393	393
394	394		`procedure GLKeyboard(Key: Byte; X, Y: Longint); cdecl;`\
395	395		`begin`\
396	396		` if Key = 27 then`\
397	397		` begin`\
398	398		` glutLeaveGameMode;`\
399	399		` Halt(0);`\
400	400		` end;`\
401	401		`end;`
402	402
403		-	~~As you can see, all you need to do is to call <b>glutLeaveGameMode</b>.~~
	403	+	As you can see, all you need to do is to call glutLeaveGameMode.
404	404
405	405		Now, we'll introduce some new matrix functions. First, let's change ReSizeGLScene function:
406	406
407	407		`procedure ReSizeGLScene(Width, Height: Integer); cdecl;`\
408	408		`begin`\
409	409		` .`\
410	410		` .`\
411	411		` .`
412	412
413	413		` glMatrixMode(GL_MODELVIEW);`\
414	414		` glLoadIdentity;`\
415	415		` gluLookAt(0, 20, 25, 0, 0, 0, 0, 1, 0);`\
416	416		`end;`
417	417
418		-	<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.
	418	+	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.
419	419
420	420		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:
421	421
422	422		`procedure DrawGLScene; cdecl;`\
423	423		`var`\
424	424		` T: Single;`\
425	425		`begin`\
426	426		` T := glutGet(GLUT_ELAPSED_TIME) / 1000;`\
427	427		` glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);`\
428		-	\
	428	+
429	429		` glPushMatrix;`\
430	430		` glRotatef(5 * T, 0, 1, 0);`\
431	431		` glColor3f(1, 1, 0);`\
432	432		` glutWireSphere(2, 20, 20);`\
433	433		` glPopMatrix;`\
434		-	\
	434	+
435	435		` glPushMatrix;`\
436	436		` glRotatef(90 * T, 0, 1, 0);`\
437	437		` glTranslatef(5, 0, 0);`\
438	438		` glRotatef(40 * T, 0, 1, 0);`\
439	439		` glColor3f(1, 0, 0);`\
440	440		` glutWireSphere(0.6, 10, 10);`\
441	441		` glPopMatrix;`\
442		-	\
	442	+
443	443		` glPushMatrix;`\
444	444		` glRotatef(60 * T, 0, 1, 0);`\
445	445		` glTranslatef(-3, 0, 9);`\
446	446		` glRotatef(50 * T, 0, 1, 0);`\
447	447		` glColor3f(0, 1, 0);`\
448	448		` glutWireSphere(1, 16, 16);`\
449		-	\
	449	+
450	450		` glPushMatrix;`\
451	451		` glRotatef(360 * T, 0, 1, 0);`\
452	452		` glTranslatef(-1.7, 0, 0);`\
453	453		` glRotatef(50 * T, 0, 1, 0);`\
454	454		` glColor3f(0, 0, 1);`\
455	455		` glutWireSphere(0.4, 10, 10);`\
456	456		` glPopMatrix;`\
457		-	\
	457	+
458	458		` glPopMatrix;`\
459		-	\
	459	+
460	460		` glutSwapBuffers;`\
461	461		`end;`
462	462
463		-	![](/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.
	463	+	![](/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.
464	464
465		-	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.
	465	+	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.
466	466
467		-	<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.
	467	+	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.
468	468
469	469		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145).
470	470
471	471		# Light
472	472
473	473		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.
474	474
475	475		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.
476	476
477	477		`unit utils;`\
478		-	\
	478	+
479	479		`{$mode objfpc}{$H+}`\
480		-	\
	480	+
481	481		`interface`\
482		-	\
	482	+
483	483		`uses`\
484	484		` glut;`\
485		-	\
	485	+
486	486		`function GetTotalTime: Single;`\
487	487		`function GetDeltaTime: Single;`\
488	488		`procedure FrameRendered(Count: Integer = 1);`\
489	489		`function GetFPS: Single;`\
490		-	\
	490	+
491	491		`implementation`\
492		-	\
	492	+
493	493		`var`\
494	494		` OldTime: Integer = 0;`\
495	495		` FPSTime: Integer = 0;`\
496	496		` FPSCount: Integer = 0;`\
497		-	\
	497	+
498	498		`function GetTotalTime: Single;`\
499	499		`begin`\
500	500		` Result := glutGet(GLUT_ELAPSED_TIME) / 1000;`\
501	501		`end;`\
502		-	\
	502	+
503	503		`function GetDeltaTime: Single;`\
504	504		`var`\
505	505		` NewTime: Integer;`\
506	506		`begin`\
507	507		` NewTime := glutGet(GLUT_ELAPSED_TIME);`\
508	508		` Result := (NewTime - OldTime) / 1000;`\
509	509		` OldTime := NewTime;`\
510	510		`end;`\
511		-	\
	511	+
512	512		`procedure FrameRendered(Count: Integer);`\
513	513		`begin`\
514	514		` Inc(FPSCount, Count);`\
515	515		`end;`\
516		-	\
	516	+
517	517		`function GetFPS: Single;`\
518	518		`var`\
519	519		` NewTime: Integer;`\
520	520		`begin`\
521	521		` NewTime := glutGet(GLUT_ELAPSED_TIME);`\
522		-	\
	522	+
523	523		` Result := FPSCount / ((NewTime - FPSTime) / 1000);`\
524		-	\
	524	+
525	525		` FPSTime := NewTime;`\
526	526		` FPSCount := 0;`\
527	527		`end;`\
528		-	\
	528	+
529	529		`end.`
530	530
531	531		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.
532	532
533	533		Now, let's have fun with lights.
534	534
535	535		OpenGL have several types of light... ambient, diffuse, point, spot, specular and emissive light.
536	536
537	537		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.
538	538
539	539		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.
540	540
541	541		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.
542	542
543	543		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.
544	544
545	545		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.
546	546
547	547		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.
548	548
549	549		For simplicity we'll use only diffuse light in this tutorial. Later on, some other lights may appear in tutorials :)
550	550
551	551		Let's see how to enable light in scene:
552	552
553	553		`const`\
554	554		` DiffuseLight: array[0..3] of GLfloat = (0.8, 0.8, 0.8, 1);`\
555		-	\
	555	+
556	556		` glEnable(GL_LIGHTING);`\
557	557		` glLightfv(GL_LIGHT0, GL_DIFFUSE, DiffuseLight);`\
558	558		` glEnable(GL_LIGHT0);`
559	559
560		-	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.
	560	+	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.
561	561
562	562		More about glLightfv: <http://www.opengl.org//documentation/specs/man_pages/hardcopy/GL/html/gl/light.html>
563	563
564	564		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:
565	565
566	566		`glEnable(GL_COLOR_MATERIAL);`\
567	567		`glColorMaterial(GL_FRONT, GL_AMBIENT_AND_DIFFUSE);`
568	568
569		-	![](/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.
	569	+	![](/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.
570	570
571	571		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.
572	572
573	573		After all those setting ups, light will shine up your cube :)
574	574
575	575		Part of the text is copied from [The OpenGL Light Bible](http://www.falloutsoftware.com/tutorials/gl/gl8.htm)
576	576
577	577		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145).
578	578
579	579		# Bitmap fonts
580	580
581	581		Games and programs usually need to write some text on screen. GLUT provides several functions for drawing chars that are platform independent.
582	582
583	583		First, we'll show how to use default bitmap fonts. Almost all code additions will be made to utils.pas unit.
584	584
585	585		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:
586	586
587	587		`function glGetViewportWidth: Integer;`\
588	588		`var`\
589	589		` Rect: array[0..3] of Integer;`\
590	590		`begin`\
591	591		` glGetIntegerv(GL_VIEWPORT, @Rect);`\
592	592		` Result := Rect[2] - Rect[0];`\
593	593		`end;`\
594		-	\
	594	+
595	595		`function glGetViewportHeight: Integer;`\
596	596		`var`\
597	597		` Rect: array[0..3] of Integer;`\
598	598		`begin`\
599	599		` glGetIntegerv(GL_VIEWPORT, @Rect);`\
600	600		` Result := Rect[3] - Rect[1];`\
601	601		`end;`
602	602
603	603		We just get left/right, top/bottom and calculate width/height by subtracting them.
604	604
605	605		There must be functions for entering and leaving 2D mode:
606	606
607	607		`procedure glEnter2D;`\
608	608		`begin`\
609	609		` glMatrixMode(GL_PROJECTION);`\
610	610		` glPushMatrix;`\
611	611		` glLoadIdentity;`\
612	612		` gluOrtho2D(0, glGetViewportWidth, 0, glGetViewportHeight);`\
613		-	\
	613	+
614	614		` glMatrixMode(GL_MODELVIEW);`\
615	615		` glPushMatrix;`\
616	616		` glLoadIdentity;`\
617		-	\
	617	+
618	618		` glDisable(GL_DEPTH_TEST);`\
619	619		`end;`\
620		-	\
	620	+
621	621		`procedure glLeave2D;`\
622	622		`begin`\
623	623		` glMatrixMode(GL_PROJECTION);`\
624	624		` glPopMatrix;`\
625	625		` glMatrixMode(GL_MODELVIEW);`\
626	626		` glPopMatrix;`\
627		-	\
	627	+
628	628		` glEnable(GL_DEPTH_TEST);`\
629	629		`end;`
630	630
631		-	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.
	631	+	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.
632	632
633	633		Leaving 2D mode just returns old matrices and enable ZBuffer.
634	634
635	635		Now, we can create function for text drawing:
636	636
637	637		`procedure glWrite(X, Y: GLfloat; Font: Pointer; Text: String);`\
638	638		`var`\
639	639		` I: Integer;`\
640	640		`begin`\
641	641		` glRasterPos2f(X, Y);`\
642	642		` for I := 1 to Length(Text) do`\
643	643		` glutBitmapCharacter(Font, Integer(Text[I]));`\
644	644		`end;`
645	645
646		-	<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.
	646	+	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.
647	647
648		-	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.
	648	+	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.
649	649
650	650		This new functions will make text drawing very easy:
651	651
652	652		`procedure DrawGLScene; cdecl;`\
653	653		`begin`\
654	654		` glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);`\
655		-	\
	655	+
656	656		` glLoadIdentity;`\
657	657		` glTranslatef(0, 0, -5);`\
658	658		` glRotatef(GetTotalTime * 10, 0, 0.5, 0.5);`\
659		-	\
	659	+
660	660		` glColor3f(1, 0, 0);`\
661	661		` glutSolidCube(2);`\
662		-	\
	662	+
663	663		` glEnter2D;`\
664		-	\
	664	+
665	665		` glColor3f(0.2, 0.8 + 0.2 * Sin(GetTotalTime * 5), 0);`\
666	666		` glWrite(20, glGetViewportHeight - 20, GLUT_BITMAP_8_BY_13,`\
667	667		` Format('OpenGL Tutorial :: Bitmap Fonts :: FPS - %.2f FPS', [FPS]));`\
668		-	\
	668	+
669	669		` glColor3f(1, 1, 1);`\
670	670		` glWrite(50, glGetViewportHeight - 60, GLUT_BITMAP_9_BY_15, 'GLUT_BITMAP_9_BY_15');`\
671	671		` glWrite(50, glGetViewportHeight - 90, GLUT_BITMAP_8_BY_13, 'GLUT_BITMAP_8_BY_13');`\
672	672		` glWrite(50, glGetViewportHeight - 120, GLUT_BITMAP_TIMES_ROMAN_10, 'GLUT_BITMAP_TIMES_ROMAN_10');`\
673	673		` glWrite(50, glGetViewportHeight - 150, GLUT_BITMAP_TIMES_ROMAN_24, 'GLUT_BITMAP_TIMES_ROMAN_24');`\
674	674		` glWrite(50, glGetViewportHeight - 180, GLUT_BITMAP_HELVETICA_10, 'GLUT_BITMAP_HELVETICA_10');`\
675	675		` glWrite(50, glGetViewportHeight - 210, GLUT_BITMAP_HELVETICA_12, 'GLUT_BITMAP_HELVETICA_12');`\
676	676		` glWrite(50, glGetViewportHeight - 240, GLUT_BITMAP_HELVETICA_18, 'GLUT_BITMAP_HELVETICA_18');`\
677		-	\
	677	+
678	678		` glColor3f(0.5, 0.5, 1);`\
679	679		` glWrite(`\
680	680		` glGetViewportWidth - glutBitmapLength(GLUT_BITMAP_9_BY_15, LazText) - 5,`\
681	681		` 10, GLUT_BITMAP_9_BY_15, LazText);`\
682		-	\
	682	+
683	683		` glLeave2D;`\
684		-	\
	684	+
685	685		` glutSwapBuffers;`\
686		-	\
	686	+
687	687		` FrameRendered;`\
688	688		`end;`
689	689
690		-	![](/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.
	690	+	![](/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.
691	691
692	692		Note: See how cube looks without light.
693	693
694	694		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145).
695	695
696	696		# Textures
697	697
698	698		It's time to use textures :)
699	699
700	700		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.
701	701
702	702		Let's get started... we'll create display list for drawing textured rectangle:
703	703
704	704		`procedure CreateList;`\
705	705		`begin`\
706	706		` glNewList(LIST_OBJECT, GL_COMPILE);`\
707	707		` glBegin(GL_QUADS);`\
708	708		` glTexCoord2f(1, 0);`\
709	709		` glVertex3f( 2, 2, 0);`\
710	710		` glTexCoord2f(0, 0);`\
711	711		` glVertex3f(-2, 2, 0);`\
712	712		` glTexCoord2f(0, 1);`\
713	713		` glVertex3f(-2,-2, 0);`\
714	714		` glTexCoord2f(1, 1);`\
715	715		` glVertex3f( 2,-2, 0);`\
716	716		` glEnd;`\
717	717		` glEndList;`\
718	718		`end;`
719	719
720		-	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.
	720	+	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.
721	721
722	722		Texture loading is extremely easy with Vampyre Imaging Library:
723	723
724	724		`var`\
725	725		` Tex1, Tex2: GLuint;`\
726		-	\
	726	+
727	727		`procedure InitializeGL;`\
728	728		`begin`\
729	729		` glClearColor(0, 0, 0, 0);`\
730	730		` Tex1 := LoadGLTextureFromFile('ashwood.bmp');`\
731	731		` Tex2 := LoadGLTextureFromFile('Flare.bmp');`\
732	732		` glEnable(GL_TEXTURE_2D);`\
733	733		`end;`
734	734
735		-	~~<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.~~
	735	+	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.
736	736
737	737		To draw textured polygon you have to bind texture and setup texture coordinations (texture coordinations are set in display list in this tutorial):
738	738
739	739		` ...`\
740	740		` glLoadIdentity;`\
741	741		` glTranslatef(-5, 0, -15);`\
742	742		` glBindTexture(GL_TEXTURE_2D, Tex1);`\
743	743		` glCallList(LIST_OBJECT);`\
744	744		` ...`
745	745
746		-	~~<b>glBindTexture</b> function is used to select texture. When you draw polygins they will have selected texture on them. It's that easy :)~~
	746	+	glBindTexture function is used to select texture. When you draw polygins they will have selected texture on them. It's that easy :)
747	747
748	748		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:
749	749
750	750		` ...`\
751	751		` glLoadIdentity;`\
752	752		` glTranslatef(5, 0, -15);`\
753	753		` glBindTexture(GL_TEXTURE_2D, Tex1);`\
754	754		` glCallList(LIST_OBJECT);`\
755		-	\
	755	+
756	756		` glEnable(GL_BLEND);`\
757	757		` glBlendFunc(GL_ZERO, GL_SRC_COLOR);`\
758	758		` glLoadIdentity;`\
759	759		` glTranslatef(5, 0, -15);`\
760	760		` glBindTexture(GL_TEXTURE_2D, Tex2);`\
761	761		` glCallList(LIST_OBJECT);`\
762	762		` glDisable(GL_BLEND);`\
763	763		`...`
764	764
765		-	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:
	765	+	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:
766	766
767	767		`DrawingColor * SRCBLEND + BackgroundColor * DESTBLEND`
768	768
769		-	~~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:~~
	769	+	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:
770	770
771	771		`DrawingColor * 0 + BackgroundColor * DrawingColor`
772	772
773		-	~~<figure>~~
774		-	~~<img src="TexturesPic1.jpg" title="TexturesPic1.jpg" />~~
775		-	~~<figcaption>TexturesPic1.jpg</figcaption>~~
776		-	~~</figure>~~
	773	+	![](/wiki-images/d/d4/TexturesPic1.jpg)
777	774
778	775		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
779	776
780	777		Next time, we'll use extensions to show how to use singlepass multitexturing.
781	778
782	779		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145).
783	780
784	781		# Multitexturing (extensions)
785	782
786	783		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.
787	784
788	785		Let's see how code looks like:
789	786
790	787		`procedure InitializeGL;`\
791	788		`begin`\
792	789		` Load_GL_ARB_multitexture;`\
793	790		` glClearColor(0, 0, 0, 0);`\
794	791		` Tex1 := LoadGLTextureFromFile('Lazarus.bmp');`\
795	792		` Tex2 := LoadGLTextureFromFile('Mask.bmp');`\
796	793		` glActiveTextureARB(GL_TEXTURE0_ARB);`\
797	794		` glEnable(GL_TEXTURE_2D);`\
798	795		` glBindTexture(GL_TEXTURE_2D, Tex1);`\
799	796		` glActiveTextureARB(GL_TEXTURE1_ARB);`\
800	797		` glEnable(GL_TEXTURE_2D);`\
801	798		` glBindTexture(GL_TEXTURE_2D, Tex2);`\
802	799		`end;`
803	800
804		-	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.
	801	+	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.
805	802
806		-	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.
	803	+	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.
807	804
808	805		Since we setup every thing in initialization function, all we have to do is to draw object:
809	806
810	807		`procedure DrawGLScene; cdecl;`\
811	808		`begin`\
812	809		` glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);`\
813		-	\
	810	+
814	811		` glLoadIdentity;`\
815	812		` glTranslatef(0, 0, -5);`\
816		-	\
	813	+
817	814		` glBegin(GL_QUADS);`\
818	815		` glMultiTexCoord2fARB(GL_TEXTURE0_ARB, 1, 0);`\
819	816		` glMultiTexCoord2fARB(GL_TEXTURE1_ARB, 1, 0);`\
820	817		` glVertex3f(2.516, 2, 0);`\
821	818		` glMultiTexCoord2fARB(GL_TEXTURE0_ARB, 0, 0);`\
822	819		` glMultiTexCoord2fARB(GL_TEXTURE1_ARB, 0, 0);`\
823	820		` glVertex3f(-2.516, 2, 0);`\
824	821		` glMultiTexCoord2fARB(GL_TEXTURE0_ARB, 0, 1);`\
825	822		` glMultiTexCoord2fARB(GL_TEXTURE1_ARB, 0, 1);`\
826	823		` glVertex3f(-2.516,-2, 0);`\
827	824		` glMultiTexCoord2fARB(GL_TEXTURE0_ARB, 1, 1);`\
828	825		` glMultiTexCoord2fARB(GL_TEXTURE1_ARB, 1, 1);`\
829	826		` glVertex3f(2.516,-2, 0);`\
830	827		` glEnd;`\
831		-	\
	828	+
832	829		` glutSwapBuffers;`\
833	830		`end;`
834	831
835		-	![](/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.
	832	+	![](/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.
836	833
837	834		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.
838	835
839	836		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145).
840	837
841	838		# Render to texture
842	839
843	840		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.
844	841
845	842		First, we must create empty texture which well use to capture scene:
846	843
847	844		`procedure SetupRenderTexture;`\
848	845		`var`\
849	846		` Data: Pointer;`\
850	847		`begin`\
851	848		` GetMem(Data, 2562563);`\
852	849		` glGenTextures(1, @RenderTexture);`\
853	850		` glBindTexture(GL_TEXTURE_2D, RenderTexture);`\
854	851		` glTexImage2D(GL_TEXTURE_2D, 0, 3, 256, 256, 0, GL_RGB, GL_UNSIGNED_BYTE, Data);`\
855	852		` glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);`\
856	853		` glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);`\
857	854		` FreeMem(Data);`\
858	855		`end;`
859	856
860	857		Buffer for 256*256 RGB image is created and it is used to setup 2D texture.
861	858
862	859		Main part is in drawing function:
863	860
864	861		`procedure DrawGLScene; cdecl;`\
865	862		`var`\
866	863		` TotalTime: Single;`\
867	864		`begin`\
868	865		` glClearColor(0, 0, 0, 0);`\
869	866		` glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);`\
870	867		` glEnable(GL_LIGHTING);`\
871	868		` glDisable(GL_TEXTURE_2D);`\
872	869		` glViewport(0, 0, 256, 256);`\
873		-	\
	870	+
874	871		` TotalTime := GetTotalTime;`\
875		-	\
	872	+
876	873		` glLoadIdentity;`\
877	874		` glTranslatef(0, 0, -5);`\
878	875		` glRotatef(50 * TotalTime, 1, 0, 0);`\
879	876		` glRotatef(100 * TotalTime, 0, 1, 0);`\
880	877		` glRotatef(50 * TotalTime, 0, 0, 1);`\
881		-	\
	878	+
882	879		` glColor3f(1, 1, 1);`\
883	880		` glutSolidCube(2);`\
884		-	\
	881	+
885	882		` glCopyTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 0, 0, 256, 256, 0);`\
886		-	\
	883	+
887	884		` glClearColor(0.18, 0.20, 0.66, 0);`\
888	885		` glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);`\
889	886		` glDisable(GL_LIGHTING);`\
890	887		` glEnable(GL_TEXTURE_2D);`\
891	888		` glViewport(0, 0, AppWidth, AppHeight);`\
892		-	\
	889	+
893	890		` glLoadIdentity;`\
894	891		` glTranslatef(0, 0, -7);`\
895	892		` glRotatef(20 * TotalTime, 1, 0, 0);`\
896	893		` glRotatef(50 * TotalTime, 0, 1, 0);`\
897		-	\
	894	+
898	895		` glBegin(GL_QUADS);`\
899	896		` glTexCoord2f(1, 0);`\
900	897		` glVertex3f(2, 2, 0);`\
901	898		` glTexCoord2f(0, 0);`\
902	899		` glVertex3f(-2, 2, 0);`\
903	900		` glTexCoord2f(0, 1);`\
904	901		` glVertex3f(-2,-2, 0);`\
905	902		` glTexCoord2f(1, 1);`\
906	903		` glVertex3f(2,-2, 0);`\
907	904		` glEnd;`\
908		-	\
	905	+
909	906		` glutSwapBuffers;`\
910	907		`end;`
911	908
912		-	![](/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.
	909	+	![](/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.
913	910
914	911		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.
915	912
916		-	~~P.S. Captured texture can be saved using <b>SaveGLTextureToFile</b> function from [Vampyre Imaging Library](http://imaginglib.sourceforge.net/).~~
	913	+	P.S. Captured texture can be saved using SaveGLTextureToFile function from [Vampyre Imaging Library](http://imaginglib.sourceforge.net/).
917	914
918	915		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145).
919	916
920	917		# Vertex array
921	918
922	919		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.
923	920
924	921		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.
925	922
926	923		First, let's define some types and constants:
927	924
928	925		`type`\
929	926		` TVertex3f = record`\
930	927		` X, Y, Z: Single;`\
931	928		` end;`\
932		-	\
	929	+
933	930		` TColor3f = record`\
934	931		` R, G, B: Single;`\
935	932		` end;`\
936		-	\
	933	+
937	934		` VertexBuffer: array [0..5] of TVertex3f = (`\
938	935		` (X : 1; Y : 1; Z : 0),`\
939	936		` (X : -1; Y : 1; Z : 0),`\
940	937		` (X : -1; Y : -1; Z : 0),`\
941	938		` (X : 1; Y : 1; Z : 0),`\
942	939		` (X : -1; Y : -1; Z : 0),`\
943	940		` (X : 1; Y : -1; Z : 0)`\
944	941		` );`\
945	942		` ColorBuffer: array [0..5] of TColor3f = (`\
946	943		` (R : 1; G : 0; B : 1),`\
947	944		` (R : 0; G : 0; B : 1),`\
948	945		` (R : 0; G : 1; B : 0),`\
949	946		` (R : 1; G : 0; B : 1),`\
950	947		` (R : 0; G : 1; B : 0),`\
951	948		` (R : 1; G : 1; B : 0)`\
952	949		` );`
953	950
954	951		We have two buffers. One for vertex coordinates and one for vertex colors. This 6 vertices defines 2 triangles that forms rectangle.
955	952
956	953		Drawing primitives using buffers is easy:
957	954
958	955		` glEnableClientState(GL_VERTEX_ARRAY);`\
959	956		` glEnableClientState(GL_COLOR_ARRAY);`\
960	957		` glVertexPointer(3, GL_FLOAT, 0, @VertexBuffer[0]);`\
961	958		` glColorPointer(3, GL_FLOAT, 0, @ColorBuffer[0]);`\
962		-	\
	959	+
963	960		` glDrawArrays(GL_TRIANGLES, 0, Length(VertexBuffer));`\
964		-	\
	961	+
965	962		` glDisableClientState(GL_VERTEX_ARRAY);`\
966	963		` glDisableClientState(GL_COLOR_ARRAY);`
967	964
968		-	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:
	965	+	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:
969	966
970	967		`type`\
971	968		` TBufferData = record`\
972	969		` DataBefore: TDataBefore;`\
973	970		` Vertex: TVertex;`\
974	971		` DataAfter: TDataAfter;`\
975	972		` end;`\
976		-	\
	973	+
977	974		`Bytes between elements = SizeOf(TDataBefore) + SizeOf(TDataAfter)`
978	975
979	976		Last parameter if pointer to the begginig of buffer.
980	977
981		-	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).
	978	+	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).
982	979
983	980		When buffers are not needed you can disable them.
984	981
985	982		To demonstrate indexed mode, I made some simple mesh class that can load vertex, color and index data from external files:
986	983
987	984		`type`\
988	985		` TMesh = class`\
989	986		` private`\
990	987		` FVertices: array of TVertex3f;`\
991	988		` FColors: array of TColor3f;`\
992	989		` FIndices: array of Integer;`\
993	990		` procedure FreeBuffers;`\
994	991		` public`\
995	992		` constructor Create;`\
996	993		` destructor Destroy; override;`\
997	994		` procedure LoadMesh(FileName: String);`\
998	995		` procedure DrawMesh;`\
999	996		` end;`
1000	997
1001	998		FVertices will contain data about vertices, FColors data about color and FIndices data about indices when external file is loaded.
1002	999
1003	1000		First we'll write some code that deals with creation and destruction of class:
1004	1001
1005	1002		`procedure TMesh.FreeBuffers;`\
1006	1003		`begin`\
1007	1004		` FVertices := nil;`\
1008	1005		` FColors := nil;`\
1009	1006		` FIndices := nil;`\
1010	1007		`end;`\
1011		-	\
	1008	+
1012	1009		`constructor TMesh.Create;`\
1013	1010		`begin`\
1014	1011		` FreeBuffers;`\
1015	1012		`end;`\
1016		-	\
	1013	+
1017	1014		`destructor TMesh.Destroy;`\
1018	1015		`begin`\
1019	1016		` FreeBuffers;`\
1020	1017		` inherited Destroy;`\
1021	1018		`end;`
1022	1019
1023	1020		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:
1024	1021
1025	1022		`3 3`\
1026	1023		`-1 -1 0 1 1 1`\
1027	1024		`1 -1 0 1 1 1`\
1028	1025		`0 1 0 1 1 1`\
1029	1026		`0`\
1030	1027		`1`\
1031	1028		`2`
1032	1029
1033	1030		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).
1034	1031
1035	1032		Code for loading this data will loke like this:
1036	1033
1037	1034		`procedure TMesh.LoadMesh(FileName: String);`\
1038	1035		`var`\
1039	1036		` MeshFile: TextFile;`\
1040	1037		` VertexCount, IndexCount: Integer;`\
1041	1038		` iV, iI: Integer;`\
1042	1039		`begin`\
1043	1040		` FreeBuffers;`\
1044		-	\
	1041	+
1045	1042		` AssignFile(MeshFile, FileName);`\
1046	1043		` Reset(MeshFile);`\
1047		-	\
	1044	+
1048	1045		` ReadLn(MeshFile, VertexCount, IndexCount);`\
1049		-	\
	1046	+
1050	1047		` SetLength(FVertices, VertexCount);`\
1051	1048		` SetLength(FColors, VertexCount);`\
1052	1049		` SetLength(FIndices, IndexCount);`\
1053		-	\
	1050	+
1054	1051		` for iV := 0 to VertexCount - 1 do`\
1055	1052		` ReadLn(MeshFile,`\
1056	1053		` FVertices[iV].X, FVertices[iV].Y, FVertices[iV].Z,`\
1057	1054		` FColors[iV].R, FColors[iV].G, FColors[iV].B);`\
1058		-	\
	1055	+
1059	1056		` for iI := 0 to IndexCount - 1 do`\
1060	1057		` ReadLn(MeshFile, FIndices[iI]);`\
1061		-	\
	1058	+
1062	1059		` CloseFile(MeshFile);`\
1063	1060		`end;`
1064	1061
1065	1062		After loading data, we have everything for drawing:
1066	1063
1067	1064		`procedure TMesh.DrawMesh;`\
1068	1065		`begin`\
1069	1066		` glEnableClientState(GL_VERTEX_ARRAY);`\
1070	1067		` glEnableClientState(GL_COLOR_ARRAY);`\
1071	1068		` glVertexPointer(3, GL_FLOAT, 0, @FVertices[0]);`\
1072	1069		` glColorPointer(3, GL_FLOAT, 0, @FColors[0]);`\
1073		-	\
	1070	+
1074	1071		` glDrawElements(GL_TRIANGLES, Length(FIndices), GL_UNSIGNED_INT, @FIndices[0]);`\
1075		-	\
	1072	+
1076	1073		` glDisableClientState(GL_VERTEX_ARRAY);`\
1077	1074		` glDisableClientState(GL_COLOR_ARRAY);`\
1078	1075		`end;`
1079	1076
1080		-	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.
	1077	+	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.
1081	1078
1082	1079		![](/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:
1083	1080
1084	1081		`4 6`\
1085	1082		`1 1 0 1 0 1`\
1086	1083		`-1 1 0 0 0 1`\
1087	1084		`-1 -1 0 0 1 0`\
1088	1085		`1 -1 0 1 1 0`\
1089	1086		`0`\
1090	1087		`1`\
1091	1088		`2`\
1092	1089		`0`\
1093	1090		`2`\
1094	1091		`3`
1095	1092
1096	1093		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.
1097	1094
1098	1095		Download source code, linux executable or windows executable from [Lazarus CCR SourceForge](http://sourceforge.net/project/showfiles.php?group_id=92177&package_id=199145).
1099	1096
1100	1097		---
1101	1098		From the Free Pascal wiki, page "OpenGL Tutorial/ja", as it stood on 2009-01-29 after a change by Saeka-jp, 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