<img alt="images/sa.large.png" src="images/sa.large.png" style="width: 32px;" />

<img alt="images/nc.large.png" src="images/nc.large.png" style="width: 32px;" />

<div class="line-block">

<div class="line"><a class="reference external" href="http://www.labri.fr/perso/nrougier/python-opengl">www.labri.fr/perso/nrougier/python-opengl</a></div>

</div>

</div>

.. figure:: movies/chapter-03/quad-scale.mp4

:loop:

:controls:

:figwidth: 35%

taste in the three exercises below but we'll see much more powerful shader

tricks in the next chapters.</p>

<div class="right figure" id="figure-movies/chapter-03/quad-scale.mp4" style="width: 35%">

<source src="movies/chapter-03/quad-scale.mp4"></source>

</video>

<p class="caption">Figure</p>

<p>Solution: <a class="reference external" href="code/chapter-03/quad-scale.py">code/chapter-03/quad-scale.py</a></p>

<hr class="docutils" />

<div class="right figure" id="figure-movies/chapter-03/quad-rotate.mp4" style="width: 35%">

<source src="movies/chapter-03/quad-rotate.mp4"></source>

</video>

<p class="caption">Figure</p>

<div class="section" id="actual-rendering">

<h2><a class="toc-backref" href="#id15">Actual rendering</a></h2>

<div class="right figure" id="figure-movies/chapter-05/solid-cube.mp4" style="width: 35%">

<source src="movies/chapter-05/solid-cube.mp4"></source>

</video>

<p class="caption">Figure</p>

<span class="punctuation">}</span> <span class="error">&quot;&quot;&quot;</span>

</pre>

<div class="right figure" id="figure-movies/chapter-05/color-cube.mp4" style="width: 35%">

<source src="movies/chapter-05/color-cube.mp4"></source>

</video>

<p class="caption">Figure</p>

<div class="section" id="outlined-cube">

<h3><a class="toc-backref" href="#id15">Outlined cube</a></h3>

<div class="right figure" id="figure-movies/chapter-05/outline-cube.mp4" style="width: 35%">

<source src="movies/chapter-05/outline-cube.mp4"></source>

</video>

<p class="caption">Figure</p>

<div class="section" id="textured-cube">

<h3><a class="toc-backref" href="#id15">Textured cube</a></h3>

<div class="right figure" id="figure-movies/chapter-05/texture-cube.mp4" style="width: 35%">

<source src="movies/chapter-05/texture-cube.mp4"></source>

</video>

<p class="caption">Figure</p>

<div class="section" id="id16">

<h2><a class="toc-backref" href="#id15">Exercises</a></h2>

<div class="right figure" id="figure-movies/chapter-05/color-border-cube-1.mp4" style="width: 35%">

<source src="movies/chapter-05/color-border-cube-1.mp4"></source>

</video>

<p class="caption">Figure</p>

<p><strong>Solution</strong>: <a class="reference external" href="code/chapter-05/border-cube.py">code/chapter-05/border-cube.py</a></p>

<hr class="docutils" />

<div class="right figure" id="figure-movies/chapter-05/color-border-cube-2.mp4" style="width: 35%">

<source src="movies/chapter-05/color-border-cube-2.mp4"></source>

</video>

<p class="caption">Figure</p>

outside the circle.</p>

<p>Now, let's check if OpenGL is consistent with our maths. We'll write a fragment

shader that compute the color according to the distance to the shape. We'll use

border (with some tolerance or we won't see anything).</p>

<pre class="code glsl literal-block">

<span class="keyword">float</span> <span class="name">distance</span><span class="punctuation">(</span><span class="keyword">vec2</span> <span class="name">P</span><span class="punctuation">,</span> <span class="keyword">vec2</span> <span class="name">center</span><span class="punctuation">,</span> <span class="keyword">float</span> <span class="name">radius</span><span class="punctuation">)</span>

<h4>Circle</h4>

<p>Distance to a circle is the easiest to compute.</p>

<div class="right figure" id="figure-movies/chapter-06/SDF-circle.mp4" style="width: 25%">

<source src="movies/chapter-06/SDF-circle.mp4"></source>

</video>

<p class="caption">Figure</p>

<p>The distance from a point P to a plane (line in 2d) is the distance from P to

the projection of P onto the place.</p>

<div class="right figure" id="figure-movies/chapter-06/SDF-plane.mp4" style="width: 25%">

<source src="movies/chapter-06/SDF-plane.mp4"></source>

</video>

<p class="caption">Figure</p>

<p>When computing distance to a box, one has to take care of the distance to the

vertices defining the box.</p>

<div class="right figure" id="figure-movies/chapter-06/SDF-box.mp4" style="width: 25%">

<source src="movies/chapter-06/SDF-box.mp4"></source>

</video>

<p class="caption">Figure</p>

<div class="section" id="rounded-box">

<h4>Rounded Box</h4>

<div class="right figure" id="figure-movies/chapter-06/SDF-round-box.mp4" style="width: 25%">

<source src="movies/chapter-06/SDF-round-box.mp4"></source>

</video>

<p class="caption">Figure</p>

<div class="section" id="fake-box">

<h4>Fake Box</h4>

<div class="right figure" id="figure-movies/chapter-06/SDF-fake-box.mp4" style="width: 25%">

<source src="movies/chapter-06/SDF-fake-box.mp4"></source>

</video>

<p class="caption">Figure</p>

<div class="section" id="true-triangle">

<h4>True triangle</h4>

<div class="right figure" id="figure-movies/chapter-06/SDF-triangle.mp4" style="width: 25%">

<source src="movies/chapter-06/SDF-triangle.mp4"></source>

</video>

<p class="caption">Figure</p>

<div class="section" id="round-triangle">

<h4>Round triangle</h4>

<div class="right figure" id="figure-movies/chapter-06/SDF-round-triangle.mp4" style="width: 25%">

<source src="movies/chapter-06/SDF-round-triangle.mp4"></source>

</video>

<p class="caption">Figure</p>

<div class="section" id="fake-triangle">

<h4>Fake triangle</h4>

<div class="right figure" id="figure-movies/chapter-06/SDF-fake-triangle.mp4" style="width: 25%">

<source src="movies/chapter-06/SDF-fake-triangle.mp4"></source>

</video>

<p class="caption">Figure</p>

<div class="section" id="true-ellipse">

<h4>True ellipse</h4>

<div class="right figure" id="figure-movies/chapter-06/SDF-ellipse.mp4" style="width: 25%">

<source src="movies/chapter-06/SDF-ellipse.mp4"></source>

</video>

<p class="caption">Figure</p>

<div class="section" id="fake-but-fast-ellipse">

<h4>Fake (but fast) ellipse</h4>

<div class="right figure" id="figure-movies/chapter-06/SDF-fake-ellipse.mp4" style="width: 25%">

<source src="movies/chapter-06/SDF-fake-ellipse.mp4"></source>

</video>

<p class="caption">Figure</p>

<div class="section" id="ellipses">

<h2><a class="toc-backref" href="#id27">Ellipses</a></h2>

<div class="right figure" id="figure-movies/chapter-07/ellipses.mp4" style="width: 30%">

<source src="movies/chapter-07/ellipses.mp4"></source>

</video>

<p class="caption">Figure</p>

<div class="section" id="antialiased-triangles">

<h3><a class="toc-backref" href="#id27">Antialiased triangles</a></h3>

<div class="right figure" id="figure-movies/chapter-07/triangles.mp4" style="width: 30%">

<source src="movies/chapter-07/triangles.mp4"></source>

</video>

<p class="caption">Figure</p>

to say that the precision of the distance is directly correlated with the size

of your texture...</p>

<div class="right figure" id="figure-movies/chapter-08/texture-marker.mp4" style="width: 30%">

<source src="movies/chapter-08/texture-marker.mp4"></source>

</video>

<p class="caption">Figure</p>

<div class="section" id="light-and-shadows">

<h3><a class="toc-backref" href="#id29">Light and shadows</a></h3>

<div class="right figure" id="figure-movies/chapter-08/SDF-light-shadow.mp4" style="width: 50%">

<source src="movies/chapter-08/SDF-light-shadow.mp4"></source>

</video>

<p class="caption">Figure</p>

if a given fragment is inside the joint area or not. This requires a specific

parameterization that relies on having a different tesselation with 4×n

vertices instead of 2×n. I won't explain all the details here but only provide

<p>If you look at the sources, you'll see I'm using a geometry shader, which is a

new type of shader that is not officially available in GL ES 2.0 but which is

nonetheless available on a wide number of implementations. This geometry shader

<p class="caption">Figure</p>

<div class="legend">

Different line joints using a geometry shader. See

</div>

</div>

<div class="section" id="bezier-curves">

<div class="section" id="simple-dotted-pattern">

<h3><a class="toc-backref" href="#id39">Simple dotted pattern</a></h3>

<div class="right figure" id="figure-movies/chapter-09/linestrip-dotted.mp4" style="width: 35%">

<source src="movies/chapter-09/linestrip-dotted.mp4"></source>

</video>

<p class="caption">Figure</p>

<span class="punctuation">...</span>

</pre>

<div class="right figure" id="figure-movies/chapter-09/linestrip-spaded.mp4" style="width: 35%">

<source src="movies/chapter-09/linestrip-spaded.mp4"></source>

</video>

<p class="caption">Figure</p>

<a class="reference external" href="http://jcgt.org/published/0002/02/08/code.zip">Python implementation</a>. The

result is illustrated on the movies below.</p>

<div class="left figure" id="figure-movies/chapter-09/stars.mp4" style="width: 30%">

<source src="movies/chapter-09/stars.mp4"></source>

</video>

<p class="caption">Figure</p>

</div>

<div class="left figure" id="figure-movies/chapter-09/sphere.mp4" style="width: 30%">

<source src="movies/chapter-09/sphere.mp4"></source>

</video>

<p class="caption">Figure</p>

</div>

<div class="left figure" id="figure-movies/chapter-09/tiger.mp4" style="width: 30%">

<source src="movies/chapter-09/tiger.mp4"></source>

</video>

<p class="caption">Figure</p>

<div class="section" id="d-lines">

<h2><a class="toc-backref" href="#id39">3D lines</a></h2>

<div class="right figure" id="figure-movies/chapter-09/linestrip-3d.mp4" style="width: 35%">

<source src="movies/chapter-09/linestrip-3d.mp4"></source>

</video>

<p class="caption">Figure</p>

<div class="section" id="varying-apparent-thickness">

<h3><a class="toc-backref" href="#id39">Varying apparent thickness</a></h3>

<div class="right figure" id="figure-movies/chapter-09/linestrip-3d-better.mp4" style="width: 35%">

<source src="movies/chapter-09/linestrip-3d-better.mp4"></source>

</video>

<p class="caption">Figure</p>

.. figure:: movies/chapter-11/boy.mp4

:figclass: right

:loop:

:controls:

:figwidth: 35%

.. figure:: data/quad-grid.mp4

:loop:

:controls:

:figwidth: 35%

:figclass: left

if 'loop' in node:

atts['loop'] = True

if 'autoplay' in node:

if 'width' in node:

atts['width'] = node['width']

if 'height' in node: