Create texture image

2025-12-20 20:49:11 +00:00
1 parent 284a7a818a
commit 893a0e5452
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Do not edit this file with editors other than diagrams.net -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1048px" height="459px" viewBox="-0.5 -0.5 1048 459" content="&lt;mxfile host=&quot;embed.diagrams.net&quot; modified=&quot;2022-10-12T15:53:17.522Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36&quot; version=&quot;20.4.0&quot; etag=&quot;V8JofEWywiOIbGqLktb0&quot; type=&quot;embed&quot;&gt;&lt;diagram id=&quot;YEs5Dt37yxoMLo3k3fk7&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="167" y="37" width="280" height="280" fill="#d5e8d4" stroke="#82b366" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe flex-end; width: 282px; height: 1px; padding-top: 177px; margin-left: -117px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: right;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">Dispatch</div></div></div></foreignObject><text x="165" y="181" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="end">Dispatch</text></switch></g><rect x="177" y="47" width="80" height="80" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="none"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 87px; margin-left: 178px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">Workgroup<br />[0,0,2]</div></div></div></foreignObject><text x="217" y="91" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchLine truncated
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Do not edit this file with editors other than diagrams.net -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="656px" height="272px" viewBox="-0.5 -0.5 656 272" content="&lt;mxfile host=&quot;embed.diagrams.net&quot; modified=&quot;2022-10-12T17:06:56.284Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36&quot; version=&quot;20.4.0&quot; etag=&quot;qMMYRikB_moY2cLSGLiZ&quot; type=&quot;embed&quot;&gt;&lt;diagram id=&quot;o2ChMLTZ2C2O1pMgjvea&quot;&gt;5Vlbc+IgGP01ee2EYGJ8rLbdfdlZZ92ZPmP4TJglwSF4669fMMTctNu6WsfJk3CAj3DOd4HRwZN0+02SZfJDUOCO59Ktg58cz0MDFOofg+wKZBjgAoglo3ZSBczYG1jQteiKUcgbE5UQXLFlE4xElkGkGhiRUmya0xaCN3ddktju6FbALCIcOtNeGVVJgYbesMK/A4uTcmcUjIqRlJSTreE8IVRsahB+dvBECqGKVrqdADfklbwU615OjB4+TEKmPrLAKxasCV/Zs9nvUrvysJDRR8OZ7kWc5DmLHDxOVMo1gHRTilVGwdhzda9YDjRuU1V9ETqcUzsIiBSU3Okpm4pJ37KT1EgsMQmcKLZumidW0Phg7rDDVDC9seda5yuJ35W+6DYt5GIlI7CL6sS17ATBPwwpImNQHUO6UTt1Be11Oa4R/pRGmcg0OKYkT/aioLtWq8UyDs6Uq20IuVeTa9CR60WSFDSktwy4Jmg8l7oVm9YTcEV+s/3wfrLrPqCgo6+CrWrqSDiLMxOSWiiQGliDVEynqEc7kDJKzfKxhJy9kfnelNF8ac64P7U/dvwnY2ulRF4kWWM6V1L8gYngQlb+tGCctyB7Tr0vbD/rPuUC12/IMrLdmnchdMS92sFW96SGdO/o5Hd0+gWE9ob6diIMu9QfC2x8AeaDDvOvkinoK/XeF1I/PKeW3G35CJrZ5ezq0bJzxeIRdvSZzcY/tc+6xmk75WNKjPtr5YoJD1Pt0YqJ7P1q0hRxk+jYmy1JZEY3+sLeVLweAo6HKYFwEXXiRY8EUQjzxWUiJGxFSClcvS4ER/wmvECIjE5JgM6VwL2sAj6EdHBMgdCb4yC4igLoKxUoK/6RKxT64BVq2Jtigm94hULo4rGC8R0Gy03zFeq+4XtZM26bsnr8SB9c6pHeNjS62jULnX6kex+sMH5vKox/ywrTfaX/b3IbhHeY3AY3rTDdB3svy3xbhGtWGN2t/gUoMlz1Xwp+/gs=&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);"><defs/><g><path d="M 7 50 L 640.63 50" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 645.88 50 L 638.88 53.5 L 640.63 50 L 638.88 46.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 247 270 L 247 10" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="stroke"/><rect x="92" y="5" width="110" height="40" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 25px; margin-left: 147px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">Frame 0<br />DeltaTime = 0.16</div></div></div></foreignObject><text x="147" y="29" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Frame 0...</text></switch></g><rect x="7" y="95" width="50" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 110px; margin-left: 32px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">Read</div></div></div></foreignObject><text x="32" y="114" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Read</text></switch></g><rect x="7" y="195" width="50" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 210px; margin-left: 32px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">Write</div></div></div></foreignObject><text x="32" y="214" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">Write</text></switch></g><path d="M 52 270 L 52 10" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><rect x="67" y="170" width="160" Line truncated
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>