Create texture image

CMakeLists.txt

@@ -239,22 +239,22 @@ add_chapter (23_descriptor_sets
 
 add_chapter (24_texture_image
   SHADER 22_shader_ubo
-  TEXTURES ../../images/texture.jpg
+  TEXTURES images/texture.jpg
   LIBS glm::glm)
 
 # add_chapter (25_sampler
 #   SHADER 22_shader_ubo
-#   TEXTURES ../../images/texture.jpg
+#   TEXTURES images/texture.jpg
 #   LIBS glm::glm)
 #
 # add_chapter (26_texture_mapping
 #   SHADER 26_shader_textures
-#   TEXTURES ../../images/texture.jpg
+#   TEXTURES images/texture.jpg
 #   LIBS glm::glm)
 #
 # add_chapter (27_depth_buffering
 #   SHADER 27_shader_depth
-#   TEXTURES ../../images/texture.jpg
+#   TEXTURES images/texture.jpg
 #   LIBS glm::glm)
 #
 # add_chapter (28_model_loading

assets/images/data_oriented_design_diagram.svg

@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="600" height="450" xmlns="http://www.w3.org/2000/svg">
+  <!-- Data-Oriented Design Diagram -->
+  <style>
+    .data-array { fill: #e6f2ff; stroke: #0066cc; stroke-width: 2; }
+    .system { fill: #e6ffe6; stroke: #339933; stroke-width: 2; }
+    .oop-class { fill: #ffe6e6; stroke: #cc0000; stroke-width: 2; }
+    .text { font-family: Arial; font-size: 14px; text-anchor: middle; }
+    .small-text { font-family: Arial; font-size: 12px; text-anchor: middle; }
+    .title-text { font-family: Arial; font-size: 16px; font-weight: bold; text-anchor: middle; }
+    .main-title { font-family: Arial; font-size: 20px; font-weight: bold; text-anchor: middle; }
+    .arrow { stroke: #555; stroke-width: 2; marker-end: url(#arrowhead); }
+    .vs-text { font-family: Arial; font-size: 18px; font-weight: bold; text-anchor: middle; }
+  </style>
+
+  <!-- Arrow marker definition -->
+  <defs>
+    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#555" />
+    </marker>
+  </defs>
+
+  <text x="300" y="30" class="main-title">Data-Oriented Design</text>
+
+  <!-- Left side: Object-Oriented Approach -->
+  <text x="150" y="60" class="title-text">Object-Oriented Approach</text>
+
+  <!-- OOP Classes -->
+  <rect x="50" y="80" width="200" height="100" rx="5" class="oop-class" />
+  <text x="150" y="100" class="title-text">GameObject 1</text>
+  <text x="150" y="125" class="small-text">position: (10, 20, 30)</text>
+  <text x="150" y="145" class="small-text">rotation: (0, 45, 0)</text>
+  <text x="150" y="165" class="small-text">scale: (1, 1, 1)</text>
+
+  <rect x="50" y="190" width="200" height="100" rx="5" class="oop-class" />
+  <text x="150" y="210" class="title-text">GameObject 2</text>
+  <text x="150" y="235" class="small-text">position: (50, 0, 10)</text>
+  <text x="150" y="255" class="small-text">rotation: (90, 0, 0)</text>
+  <text x="150" y="275" class="small-text">scale: (2, 2, 2)</text>
+
+  <rect x="50" y="300" width="200" height="100" rx="5" class="oop-class" />
+  <text x="150" y="320" class="title-text">GameObject 3</text>
+  <text x="150" y="345" class="small-text">position: (0, 10, 50)</text>
+  <text x="150" y="365" class="small-text">rotation: (0, 180, 0)</text>
+  <text x="150" y="385" class="small-text">scale: (1, 3, 1)</text>
+
+  <!-- VS text -->
+  <text x="300" y="225" class="vs-text">VS</text>
+
+  <!-- Right side: Data-Oriented Approach -->
+  <text x="450" y="60" class="title-text">Data-Oriented Approach</text>
+
+  <!-- Data Arrays -->
+  <rect x="350" y="80" width="200" height="60" rx="5" class="data-array" />
+  <text x="450" y="100" class="title-text">Positions Array</text>
+  <text x="450" y="125" class="small-text">[10,20,30, 50,0,10, 0,10,50, ...]</text>
+
+  <rect x="350" y="150" width="200" height="60" rx="5" class="data-array" />
+  <text x="450" y="170" class="title-text">Rotations Array</text>
+  <text x="450" y="195" class="small-text">[0,45,0, 90,0,0, 0,180,0, ...]</text>
+
+  <rect x="350" y="220" width="200" height="60" rx="5" class="data-array" />
+  <text x="450" y="240" class="title-text">Scales Array</text>
+  <text x="450" y="265" class="small-text">[1,1,1, 2,2,2, 1,3,1, ...]</text>
+
+  <!-- Systems -->
+  <rect x="350" y="300" width="200" height="40" rx="5" class="system" />
+  <text x="450" y="325" class="title-text">Transform System</text>
+
+  <rect x="350" y="350" width="200" height="40" rx="5" class="system" />
+  <text x="450" y="375" class="title-text">Physics System</text>
+
+  <!-- Arrows from data to systems -->
+  <line x1="450" y1="140" x2="450" y2="300" class="arrow" />
+  <line x1="450" y1="210" x2="450" y2="300" class="arrow" />
+  <line x1="450" y1="280" x2="450" y2="300" class="arrow" />
+
+  <!-- Explanation -->
+  <text x="150" y="420" class="text">Objects with mixed data types</text>
+  <text x="450" y="420" class="text">Contiguous arrays of same data type</text>
+</svg>

assets/images/extra_square.svg

@@ -0,0 +1,240 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="89.14743mm"
+   height="58.706608mm"
+   viewBox="0 0 315.87672 208.01553"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="3d_geometry.svg">
+  <defs
+     id="defs4">
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="3.4283239 : 623.25581 : 1"
+       inkscape:vp_y="0 : 741.72186 : 0"
+       inkscape:vp_z="744.19986 : 656.59754 : 1"
+       inkscape:persp3d-origin="373.56148 : 401.7537 : 1"
+       id="perspective4136" />
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="3.1710559 : 602.23322 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="743.73008 : 647.18501 : 1"
+       inkscape:persp3d-origin="373.19803 : 303.60092 : 1"
+       id="perspective4136-1" />
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="4.6862849 : 603.37958 : 1"
+       inkscape:vp_y="0 : 839.48686 : 0"
+       inkscape:vp_z="745.24531 : 641.11602 : 1"
+       inkscape:persp3d-origin="374.71326 : 352.68169 : 1"
+       id="perspective4136-4" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.979899"
+     inkscape:cx="214.75667"
+     inkscape:cy="186.60972"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-left="10"
+     fit-margin-top="10"
+     fit-margin-bottom="10"
+     fit-margin-right="10"
+     inkscape:window-width="2560"
+     inkscape:window-height="1377"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Layer 3"
+     transform="translate(-219.62754,-456.27778)">
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"
+       d="m 273.21429,533.61218 99.64285,-29.10714 108.57143,22.14286 -99.82143,49.46428 z"
+       id="path4377"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"
+       d="m 274.46429,567.54075 99.82143,-32.85714 108.03571,24.64286 -99.46429,56.42857 z"
+       id="path4379"
+       inkscape:connector-curvature="0" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Layer 2"
+     transform="translate(-219.62754,-456.27778)" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-219.62754,-456.27778)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="254.81097"
+       y="537.43695"
+       id="text4239"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4241"
+         x="254.81097"
+         y="537.43695">v0</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="366.31015"
+       y="500.82339"
+       id="text4239-8"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4241-0"
+         x="366.31015"
+         y="500.82339">v1</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="484.49802"
+       y="528.8551"
+       id="text4239-85"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4241-6"
+         x="484.49802"
+         y="528.8551">v2</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="374.64392"
+       y="569.7663"
+       id="text4239-3"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4241-7"
+         x="374.64392"
+         y="569.7663">v3</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="254.68829"
+       y="571.53406"
+       id="text4239-7"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4241-8"
+         x="254.68829"
+         y="571.53406">v4</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="367.32031"
+       y="531.63306"
+       id="text4239-87"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4241-2"
+         x="367.32031"
+         y="531.63306">v5</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="485.50818"
+       y="562.69519"
+       id="text4239-71"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4241-60"
+         x="485.50818"
+         y="562.69519">v6</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="376.15915"
+       y="628.86023"
+       id="text4239-37"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4241-5"
+         x="376.15915"
+         y="628.86023">v7</tspan></text>
+    <circle
+       style="fill:#ff0000;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path4321"
+       cx="274.44583"
+       cy="567.61523"
+       r="1.9571706" />
+    <circle
+       style="fill:#ff0000;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path4321-8"
+       cx="273.05685"
+       cy="533.64886"
+       r="1.9571706" />
+    <circle
+       style="fill:#ff0000;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path4321-88"
+       cx="373.06195"
+       cy="504.48071"
+       r="1.9571706" />
+    <circle
+       style="fill:#ff0000;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path4321-0"
+       cx="481.68588"
+       cy="526.53003"
+       r="1.9571706" />
+    <circle
+       style="fill:#ff0000;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path4321-5"
+       cx="482.41071"
+       cy="559.1925"
+       r="1.9571706" />
+    <circle
+       style="fill:#ff0000;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path4321-2"
+       cx="381.77451"
+       cy="575.94904"
+       r="1.9571706" />
+    <circle
+       style="fill:#ff0000;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path4321-59"
+       cx="374.28571"
+       cy="534.50507"
+       r="1.9571706" />
+    <circle
+       style="fill:#ff0000;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path4321-84"
+       cx="382.85715"
+       cy="615.57648"
+       r="1.9571706" />
+  </g>
+</svg>

assets/images/matrix-order-comparison.svg

@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <style>
+      .title { font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; }
+      .subtitle { font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; }
+      .label { font-family: Arial, sans-serif; font-size: 12px; }
+      .step-label { font-family: Arial, sans-serif; font-size: 11px; }
+      .correct-path { stroke: #2E8B57; fill: #2E8B57; }
+      .incorrect-path { stroke: #DC143C; fill: #DC143C; }
+      .cube-correct { fill: #4CAF50; stroke: #2E7D32; stroke-width: 2; }
+      .cube-incorrect { fill: #F44336; stroke: #C62828; stroke-width: 2; }
+      .arrow { stroke-width: 2; marker-end: url(#arrowhead); }
+      .origin { fill: #666; stroke: #333; stroke-width: 1; }
+    </style>
+    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#333" />
+    </marker>
+  </defs>
+
+  <!-- Title -->
+  <text x="400" y="25" text-anchor="middle" class="title">Matrix Order Comparison: T × R × S vs R × T × S</text>
+
+  <!-- Correct Order Section -->
+  <text x="400" y="50" text-anchor="middle" class="subtitle correct-path">CORRECT ORDER: T × R × S (Applied right-to-left: Scale → Rotate → Translate)</text>
+
+  <!-- Step 1: Scale -->
+  <g transform="translate(50, 80)">
+    <text x="50" y="15" text-anchor="middle" class="step-label">Step 1: Scale</text>
+    <rect x="40" y="25" width="20" height="20" class="cube-correct" />
+    <text x="50" y="55" text-anchor="middle" class="label">Original cube</text>
+    <text x="50" y="70" text-anchor="middle" class="label">at origin</text>
+  </g>
+
+  <!-- Arrow 1 -->
+  <line x1="120" y1="115" x2="180" y2="115" class="arrow correct-path" />
+
+  <!-- Step 2: Rotate -->
+  <g transform="translate(200, 80)">
+    <text x="50" y="15" text-anchor="middle" class="step-label">Step 2: Rotate</text>
+    <polygon points="40,25 60,35 60,55 40,45" class="cube-correct" />
+    <text x="50" y="70" text-anchor="middle" class="label">Rotated in place</text>
+    <text x="50" y="85" text-anchor="middle" class="label">around its center</text>
+  </g>
+
+  <!-- Arrow 2 -->
+  <line x1="270" y1="115" x2="330" y2="115" class="arrow correct-path" />
+
+  <!-- Step 3: Translate -->
+  <g transform="translate(350, 80)">
+    <text x="50" y="15" text-anchor="middle" class="step-label">Step 3: Translate</text>
+    <polygon points="60,25 80,35 80,55 60,45" class="cube-correct" />
+    <text x="70" y="70" text-anchor="middle" class="label">Moved to new position</text>
+    <text x="70" y="85" text-anchor="middle" class="label">(final desired result)</text>
+    <!-- Origin point -->
+    <circle cx="30" cy="50" r="3" class="origin" />
+    <text x="30" y="65" text-anchor="middle" class="step-label">Origin</text>
+  </g>
+
+  <!-- Separator Line -->
+  <line x1="50" y1="200" x2="750" y2="200" stroke="#ccc" stroke-width="1" />
+
+  <!-- Incorrect Order Section -->
+  <text x="400" y="230" text-anchor="middle" class="subtitle incorrect-path">INCORRECT ORDER: R × T × S (Applied right-to-left: Scale → Translate → Rotate)</text>
+
+  <!-- Step 1: Scale -->
+  <g transform="translate(50, 260)">
+    <text x="50" y="15" text-anchor="middle" class="step-label">Step 1: Scale</text>
+    <rect x="40" y="25" width="20" height="20" class="cube-incorrect" />
+    <text x="50" y="55" text-anchor="middle" class="label">Original cube</text>
+    <text x="50" y="70" text-anchor="middle" class="label">at origin</text>
+  </g>
+
+  <!-- Arrow 1 -->
+  <line x1="120" y1="295" x2="180" y2="295" class="arrow incorrect-path" />
+
+  <!-- Step 2: Translate -->
+  <g transform="translate(200, 260)">
+    <text x="50" y="15" text-anchor="middle" class="step-label">Step 2: Translate</text>
+    <rect x="60" y="45" width="20" height="20" class="cube-incorrect" />
+    <text x="70" y="80" text-anchor="middle" class="label">Moved away from</text>
+    <text x="70" y="95" text-anchor="middle" class="label">origin first</text>
+    <!-- Origin point -->
+    <circle cx="30" cy="50" r="3" class="origin" />
+    <text x="30" y="65" text-anchor="middle" class="step-label">Origin</text>
+  </g>
+
+  <!-- Arrow 2 -->
+  <line x1="270" y1="295" x2="330" y2="295" class="arrow incorrect-path" />
+
+  <!-- Step 3: Rotate -->
+  <g transform="translate(350, 260)">
+    <text x="50" y="15" text-anchor="middle" class="step-label">Step 3: Rotate</text>
+    <rect x="30" y="65" width="20" height="20" class="cube-incorrect" />
+    <text x="70" y="50" text-anchor="middle" class="label">Rotated around world origin</text>
+    <text x="70" y="65" text-anchor="middle" class="label">(cube orbits, not desired!)</text>
+    <!-- Origin point -->
+    <circle cx="70" cy="30" r="3" class="origin" />
+    <text x="70" y="20" text-anchor="middle" class="step-label">Origin</text>
+    <!-- Orbital path indication -->
+    <path d="M 70,30 Q 40,50 40,85 Q 70,105 100,85 Q 130,50 100,30"
+          fill="none" stroke="#DC143C" stroke-width="1" stroke-dasharray="3,3" opacity="0.7" />
+  </g>
+
+  <!-- Key Insight Box -->
+  <g transform="translate(50, 380)">
+    <rect x="0" y="0" width="700" height="80" fill="#f8f9fa" stroke="#dee2e6" stroke-width="1" rx="5" />
+    <text x="20" y="25" class="subtitle">Key Insight:</text>
+    <text x="20" y="45" class="label">In the incorrect order, the cube is moved away from the origin first, then rotated around the world origin,</text>
+    <text x="20" y="60" class="label">causing it to orbit in a circle rather than rotate in place and then move to the desired position.</text>
+  </g>
+</svg>

assets/images/normalized_device_coordinates.svg

@@ -0,0 +1,219 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="168.23553mm"
+   height="76.127022mm"
+   viewBox="0 0 596.11016 269.74141"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="clip_coordinates.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="140.75091"
+     inkscape:cy="-3.0732866"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1600"
+     inkscape:window-height="837"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     fit-margin-top="10"
+     fit-margin-left="10"
+     fit-margin-right="10"
+     fit-margin-bottom="10" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-68.169789,-67.73013)">
+    <rect
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.37949777;stroke-opacity:1"
+       id="rect4136"
+       width="185.26089"
+       height="129.17273"
+       x="127.66544"
+       y="152.46893" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="142.5"
+       y="114.50506"
+       id="text4153"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4155"
+         x="142.5"
+         y="114.50506">Framebuffer coordinates</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="108.08633"
+       y="144.23506"
+       id="text4157"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4159"
+         x="108.08633"
+         y="144.23506">(0, 0)</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="289.4823"
+       y="143.68567"
+       id="text4157-1"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4159-7"
+         x="289.4823"
+         y="143.68567">(1920, 0)</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="102.49812"
+       y="299.52383"
+       id="text4157-0"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4159-3"
+         x="102.49812"
+         y="299.52383">(0, 1080)</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="277.83316"
+       y="298.46939"
+       id="text4157-1-3"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4159-7-2"
+         x="277.83316"
+         y="298.46939">(1920, 1080)</tspan></text>
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-opacity:1"
+       id="path4229"
+       cx="220.46579"
+       cy="218.48128"
+       r="1.767767" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="187.29964"
+       y="232.99626"
+       id="text4157-1-3-3"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4159-7-2-3"
+         x="187.29964"
+         y="232.99626">(960, 540)</tspan></text>
+    <rect
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.37949777;stroke-opacity:1"
+       id="rect4136-0"
+       width="185.26089"
+       height="129.17273"
+       x="426.228"
+       y="150.62413" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="465.34827"
+       y="112.66027"
+       id="text4153-2"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4155-2"
+         x="435.34827"
+         y="112.66027">Normalized device coordinates</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="406.6489"
+       y="142.39026"
+       id="text4157-9"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4159-0"
+         x="406.6489"
+         y="142.39026">(-1, -1)</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="588.04486"
+       y="141.84087"
+       id="text4157-1-4"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4159-7-21"
+         x="588.04486"
+         y="141.84087">(1, -1)</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="401.0607"
+       y="297.67902"
+       id="text4157-0-6"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4159-3-5"
+         x="401.0607"
+         y="297.67902">(-1, 1)</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="592.82428"
+       y="296.62457"
+       id="text4157-1-3-7"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4159-7-2-6"
+         x="592.82428"
+         y="296.62457">(1, 1)</tspan></text>
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-opacity:1"
+       id="path4229-5"
+       cx="519.02832"
+       cy="216.63647"
+       r="1.767767" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="500.14792"
+       y="231.15146"
+       id="text4157-1-3-3-8"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4159-7-2-3-0"
+         x="500.14792"
+         y="231.15146">(0, 0)</tspan></text>
+  </g>
+</svg>

assets/images/service_locator_pattern_diagram.svg

@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="600" height="450" xmlns="http://www.w3.org/2000/svg">
+  <!-- Service Locator Pattern Diagram -->
+  <style>
+    .interface { fill: #e6f2ff; stroke: #0066cc; stroke-width: 2; }
+    .implementation { fill: #fff2e6; stroke: #ff8c1a; stroke-width: 2; }
+    .locator { fill: #e6ffe6; stroke: #339933; stroke-width: 2; }
+    .client { fill: #f2e6ff; stroke: #8c1aff; stroke-width: 2; }
+    .text { font-family: Arial; font-size: 14px; text-anchor: middle; }
+    .small-text { font-family: Arial; font-size: 12px; text-anchor: middle; }
+    .title-text { font-family: Arial; font-size: 16px; font-weight: bold; text-anchor: middle; }
+    .main-title { font-family: Arial; font-size: 20px; font-weight: bold; text-anchor: middle; }
+    .arrow { stroke: #555; stroke-width: 2; marker-end: url(#arrowhead); }
+    .dashed { stroke-dasharray: 5,5; }
+  </style>
+
+  <!-- Arrow marker definition -->
+  <defs>
+    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#555" />
+    </marker>
+  </defs>
+
+  <text x="300" y="30" class="main-title">Service Locator Pattern</text>
+
+  <!-- Service Interface -->
+  <rect x="200" y="60" width="200" height="60" rx="5" class="interface" />
+  <text x="300" y="85" class="title-text">IAudioService</text>
+  <text x="300" y="105" class="small-text">+ PlaySound(soundName)</text>
+
+  <!-- Service Implementations -->
+  <rect x="50" y="170" width="180" height="60" rx="5" class="implementation" />
+  <text x="140" y="195" class="title-text">OpenALAudioService</text>
+  <text x="140" y="215" class="small-text">implements IAudioService</text>
+
+  <rect x="250" y="170" width="180" height="60" rx="5" class="implementation" />
+  <text x="340" y="195" class="title-text">NullAudioService</text>
+  <text x="340" y="215" class="small-text">implements IAudioService</text>
+
+  <rect x="450" y="170" width="100" height="60" rx="5" class="implementation" />
+  <text x="500" y="195" class="title-text">...</text>
+  <text x="500" y="215" class="small-text">Other services</text>
+
+  <!-- Service Locator -->
+  <rect x="200" y="280" width="200" height="80" rx="5" class="locator" />
+  <text x="300" y="305" class="title-text">ServiceLocator</text>
+  <text x="300" y="325" class="small-text">+ GetAudioService()</text>
+  <text x="300" y="345" class="small-text">+ ProvideAudioService(service)</text>
+
+  <!-- Client -->
+  <rect x="200" y="390" width="200" height="50" rx="5" class="client" />
+  <text x="300" y="420" class="title-text">Client Code</text>
+
+  <!-- Implementation to Interface arrows -->
+  <line x1="140" y1="170" x2="250" y2="120" class="arrow" />
+  <line x1="340" y1="170" x2="300" y2="120" class="arrow" />
+  <line x1="500" y1="170" x2="350" y2="120" class="arrow" />
+
+  <!-- Service Locator to Interface arrow -->
+  <line x1="300" y1="280" x2="300" y2="120" class="arrow" />
+
+  <!-- Service Locator to Implementations arrows -->
+  <line x1="250" y1="280" x2="140" y2="230" class="arrow dashed" />
+  <line x1="300" y1="280" x2="340" y2="230" class="arrow dashed" />
+  <line x1="350" y1="280" x2="500" y2="230" class="arrow dashed" />
+
+  <!-- Client to Service Locator arrow -->
+  <line x1="300" y1="390" x2="300" y2="360" class="arrow" />
+
+  <!-- Explanation -->
+  <text x="140" y="150" class="small-text">Concrete Implementations</text>
+  <text x="300" y="50" class="small-text">Service Interface</text>
+  <text x="300" y="270" class="small-text">Global Access Point</text>
+  <text x="300" y="380" class="small-text">Uses services via locator</text>
+</svg>

assets/images/triangle_coordinates.svg

@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="72.956146mm"
+   height="57.12682mm"
+   viewBox="0 0 258.50603 202.41786"
+   id="svg4303"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="triangle_coordinates.svg">
+  <defs
+     id="defs4305" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="430.81355"
+     inkscape:cy="-18.504758"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1600"
+     inkscape:window-height="837"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     fit-margin-top="10"
+     fit-margin-left="10"
+     fit-margin-right="10"
+     fit-margin-bottom="10" />
+  <metadata
+     id="metadata4308">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-173.60413,-102.58184)">
+    <rect
+       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:2.37900019;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4136-0"
+       width="185.26089"
+       height="129.17273"
+       x="210.2267"
+       y="139.20441" />
+    <path
+       style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 300,165.93363 -53.57143,72.14286 107.85714,0 z"
+       id="path4866"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccc" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="292.14285"
+       y="160.21935"
+       id="text4870"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4872"
+         x="292.14285"
+         y="160.21935">v0</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="357.85715"
+       y="244.50507"
+       id="text4874"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4876"
+         x="357.85715"
+         y="244.50507">v1</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="227.85713"
+       y="245.21935"
+       id="text4878"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4880"
+         x="227.85713"
+         y="245.21935">v2</tspan></text>
+  </g>
+</svg>

assets/images/vertex_vs_index.svg

@@ -0,0 +1,243 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="137.68689mm"
+   height="79.406677mm"
+   viewBox="0 0 487.86693 281.36224"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="vertex_vs_index.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.49497475"
+     inkscape:cx="-25.484848"
+     inkscape:cy="297.31319"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="10"
+     fit-margin-bottom="10"
+     fit-margin-right="10"
+     fit-margin-left="10"
+     inkscape:window-width="2560"
+     inkscape:window-height="1377"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-130.77675,-64.431342)">
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:1.77554488;stroke-miterlimit:4;stroke-dasharray:none"
+       id="rect4136"
+       width="152.18956"
+       height="103.36208"
+       x="184.03664"
+       y="148.54825" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1.77554488;stroke-miterlimit:4;stroke-dasharray:none"
+       d="M 184.03661,148.54824 336.22618,251.43473"
+       id="path4138"
+       inkscape:connector-curvature="0" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:17.7554493px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="179.28067"
+       y="113.35439"
+       id="text4140"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4142"
+         x="179.28067"
+         y="113.35439">Vertex buffer only</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:17.7554493px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="392.70364"
+       y="113.81391"
+       id="text4140-2"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4142-7"
+         x="392.70364"
+         y="113.81391">Vertex + index buffer</tspan></text>
+    <rect
+       style="fill:none;stroke:#000000;stroke-width:1.77554488;stroke-miterlimit:4;stroke-dasharray:none"
+       id="rect4136-9"
+       width="152.18956"
+       height="103.36208"
+       x="412.06735"
+       y="148.23116" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1.77554488;stroke-miterlimit:4;stroke-dasharray:none"
+       d="M 412.06731,148.23118 564.25688,251.11767"
+       id="path4138-5"
+       inkscape:connector-curvature="0" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:13.31658649px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="180.86603"
+       y="144.7435"
+       id="text4180"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4182"
+         x="180.86603"
+         y="144.7435">v0</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:13.31658649px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="329.09991"
+       y="144.52441"
+       id="text4180-1"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4182-8"
+         x="329.09991"
+         y="144.52441">v1</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:13.31658649px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="339.56296"
+       y="253.91068"
+       id="text4180-3"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4182-1"
+         x="339.56296"
+         y="253.91068">v2</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:13.31658649px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="326.56339"
+       y="267.86139"
+       id="text4180-8"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4182-12"
+         x="326.56339"
+         y="267.86139">v3</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:13.31658649px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="172.78851"
+       y="267.54434"
+       id="text4180-38"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4182-88"
+         x="172.78851"
+         y="267.54434">v4</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:13.31658649px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="165.81319"
+       y="157.20691"
+       id="text4180-7"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4182-10"
+         x="165.81319"
+         y="157.20691">v5</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:13.31658649px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="401.21762"
+       y="143.88382"
+       id="text4180-4"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4182-17"
+         x="401.21762"
+         y="143.88382">v0</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:13.31658649px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="559.92078"
+       y="144.20735"
+       id="text4180-1-3"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4182-8-8"
+         x="559.92078"
+         y="144.20735">v1</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:13.31658649px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="561.24097"
+       y="266.04681"
+       id="text4180-3-5"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4182-1-8"
+         x="561.24097"
+         y="266.04681">v2</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:13.31658649px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="398.45514"
+       y="266.90369"
+       id="text4180-8-3"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4182-12-6"
+         x="398.45514"
+         y="266.90369">v3</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:7.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="408.75"
+       y="245.21935"
+       id="text4306"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4308"
+         x="408.75"
+         y="245.21935" /></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:13.31658649px;line-height:125%;font-family:sans-serif;text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#0000ff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="492.57816"
+       y="291.54303"
+       id="text4310"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan4312"
+         x="492.57816"
+         y="291.54303">Indices</tspan><tspan
+         sodipodi:role="line"
+         x="492.57816"
+         y="308.18875"
+         id="tspan4314">{0, 1, 2, 2, 3, 0}</tspan></text>
+  </g>
+</svg>