1
- Quickstart
1
+ Quickstart
2
2
===============================================================================
3
3
4
4
.. contents :: .
@@ -12,9 +12,9 @@ For the **really** impatient, you can try to run the code in the `teaser image
12
12
open on your desktop with a red color in the background. If you now want to
13
13
understand how this works, you'll have to read the text below.
14
14
15
-
16
- Preliminaries
17
- -------------
15
+
16
+ Preliminaries
17
+ -------------------------------------------------------------------------------
18
18
19
19
The main difficulty for newcomers in programming modern OpenGL is that it
20
20
requires to underdtand a lot of different concepts at once and then, to perform
@@ -25,8 +25,8 @@ first OpenGL program using the raw interface and our goal is to display a
25
25
simple colored quad (i.e. a red square).
26
26
27
27
28
- Normalize Device Coordinates
29
- ++++++++++++++++++++++++++++
28
+ Normalize Device Coordinates
29
+ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
30
30
31
31
.. figure :: images/chapter-03/NDC.png
32
32
:figwidth: 40%
@@ -53,8 +53,8 @@ some problems, especially when you're dealing with the mouse pointer whose
53
53
**y ** coordinate goes this other way around.
54
54
55
55
56
- Triangulation
57
- +++++++++++++
56
+ Triangulation
57
+ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
58
58
59
59
.. figure :: images/chapter-03/triangulation.png
60
60
:figwidth: 35%
@@ -98,8 +98,8 @@ Our quad can now be using triangle `(V₀,V₁,V₂)` and triangle `(V₁,V₂,V
98
98
is exactly what we need to tell OpenGL.
99
99
100
100
101
- GL Primitives
102
- +++++++++++++
101
+ GL Primitives
102
+ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
103
103
104
104
.. figure :: images/chapter-03/gl-primitives.png
105
105
:figwidth: 40%
@@ -136,8 +136,8 @@ because we took care of describing the two triangles following this implicit
136
136
structure.
137
137
138
138
139
- Interpolation
140
- +++++++++++++
139
+ Interpolation
140
+ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
141
141
142
142
.. figure :: images/chapter-03/interpolation.png
143
143
:figwidth: 40%
@@ -186,8 +186,8 @@ shader. And this property will be used and abused in this book.
186
186
187
187
188
188
189
- The hard way
190
- ------------
189
+ The hard way
190
+ -------------------------------------------------------------------------------
191
191
192
192
Having reviewed some important OpenGL concepts, it's time to code our quad
193
193
example. But, before even using OpenGL, we need to open a window with a valid GL
@@ -240,8 +240,8 @@ simple case, we just ask OpenGL to swap buffers (this avoids flickering).
240
240
Finally, the keyboard callback allows us to exit by pressing the `Escape ` key.
241
241
242
242
243
- Writing shaders
244
- +++++++++++++++
243
+ Writing shaders
244
+ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
245
245
246
246
Now that your window has been created, we can start writing our program, that
247
247
is, we need to write a vertex and a fragment shader. For the vertex shader, the
@@ -289,8 +289,8 @@ notation. `1.0` for alpha channel means fully opaque.
289
289
}
290
290
291
291
292
- Compiling the program
293
- +++++++++++++++++++++
292
+ Compiling the program
293
+ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
294
294
295
295
We wrote our shader and we need now to build a program that will link the
296
296
vertex and the fragment shader together. Building such program is relatively
@@ -364,8 +364,8 @@ because we'll use a single program in this example:
364
364
gl.glUseProgram(program)
365
365
366
366
367
- Uploading data to the GPU
368
- +++++++++++++++++++++++++
367
+ Uploading data to the GPU
368
+ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
369
369
370
370
Next, we need to build CPU data and the corresponding GPU buffer that will hold
371
371
a copy of the CPU data (GPU cannot access CPU memory). In Python, things are
@@ -440,8 +440,9 @@ Let's now fill our CPU data and upload it to the newly created GPU buffer:
440
440
gl.glBufferData(gl.GL_ARRAY_BUFFER , data.nbytes, data, gl.GL_DYNAMIC_DRAW )
441
441
442
442
443
- Rendering
444
- +++++++++
443
+
444
+ Rendering
445
+ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
445
446
446
447
We're done, we can now rewrite the display function:
447
448
@@ -474,8 +475,9 @@ numpy. Of course, you can design your own library to ease the writing of GL
474
475
Python applications.
475
476
476
477
477
- Uniform color
478
- +++++++++++++
478
+
479
+ Uniform color
480
+ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
479
481
480
482
.. figure :: images/chapter-03/glumpy-quad-uniform-color.png
481
483
:figwidth: 30%
@@ -516,8 +518,9 @@ If you run the new `<code/glut-quad-uniform-color.py>`_ example, you should
516
518
obtain the blue quad as shown on the right.
517
519
518
520
519
- Varying color
520
- +++++++++++++
521
+
522
+ Varying color
523
+ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
521
524
522
525
523
526
.. figure :: images/chapter-03/glumpy-quad-varying-color.png
@@ -612,8 +615,8 @@ thanks to NumPy:
612
615
613
616
614
617
615
- The easy way
616
- ------------
618
+ The easy way
619
+ -------------------------------------------------------------------------------
617
620
618
621
As we've seen in the previous section, displaying a simple quad using modern GL
619
622
is quite tedious and requires a fair number of operations and this why from now
@@ -716,8 +719,8 @@ program.
716
719
`<code/chapter-03/quad-glumpy.py>`_
717
720
718
721
719
- Uniform color
720
- +++++++++++++
722
+ Uniform color
723
+ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
721
724
722
725
Adding a `uniform ` specified color like is only a matter of modifying the
723
726
fragment shader as in the previous section an directly assigning the color to
@@ -729,8 +732,8 @@ the quad program (see `<code/chapter-03/glumpy-quad-uniform-color.py>`_):
729
732
730
733
731
734
732
- Varying color
733
- +++++++++++++
735
+ Varying color
736
+ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
734
737
735
738
Adding a per-vertex color like is also and only a matter of modifying the
736
739
fragment shader as in the previous section an directly assigning the color to
@@ -794,8 +797,8 @@ the quad program (see `<code/chapter-03/glumpy-quad-varying-color.py>`_):
794
797
795
798
796
799
797
- Exercises
798
- ---------
800
+ Exercises
801
+ -------------------------------------------------------------------------------
799
802
800
803
Now we can play a bit with the shader and hopefully you'll understand why
801
804
learning to program the dynamic graphic pipeline is worth the effort. Modifying
0 commit comments