Skip to content
Navigation Menu
{{ message }}
-
Notifications
You must be signed in to change notification settings - Fork 27
Expand file tree
/
Copy pathvertex.html
More file actions
281 lines (238 loc) · 20.6 KB
/
Copy pathvertex.html
File metadata and controls
281 lines (238 loc) · 20.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="generator" content="Docutils 0.18.1: http://docutils.sourceforge.net/" />
<title>A Mesh of Triangles — VPython 3.2 documentation</title>
<link rel="stylesheet" type="text/css" href="_static/pygments.css" />
<link rel="stylesheet" type="text/css" href="_static/alabaster.css" />
<script data-url_root="./" id="documentation_options" src="_static/documentation_options.js"></script>
<script src="_static/jquery.js"></script>
<script src="_static/underscore.js"></script>
<script src="_static/_sphinx_javascript_frameworks_compat.js"></script>
<script src="_static/doctools.js"></script>
<link rel="index" title="Index" href="genindex.html" />
<link rel="search" title="Search" href="search.html" />
<link rel="next" title="Extrusions" href="extrusion.html" />
<link rel="prev" title="group" href="group.html" />
<link rel="stylesheet" href="_static/custom.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=0.9, maximum-scale=0.9" />
</head><body>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body" role="main">
<section id="a-mesh-of-triangles">
<h1><a class="toc-backref" href="#id3" role="doc-backlink">A Mesh of Triangles</a><a class="headerlink" href="#a-mesh-of-triangles" title="Permalink to this heading">¶</a></h1>
<figure class="align-default">
<a class="reference internal image-reference" href="_images/3Dmesh.png"><img alt="_images/3Dmesh.png" src="_images/3Dmesh.png" style="width: 250px;" /></a>
</figure>
<nav class="contents" id="contents">
<p class="topic-title">Contents</p>
<ul class="simple">
<li><p><a class="reference internal" href="#a-mesh-of-triangles" id="id3">A Mesh of Triangles</a></p>
<ul>
<li><p><a class="reference internal" href="#vertex" id="id4">vertex</a></p></li>
<li><p><a class="reference internal" href="#triangle" id="id5">triangle</a></p>
<ul>
<li><p><a class="reference internal" href="#order-of-vertices-in-a-triangle" id="id6">Order of vertices in a triangle</a></p></li>
<li><p><a class="reference internal" href="#smoothing-joints" id="id7">Smoothing joints</a></p></li>
</ul>
</li>
<li><p><a class="reference internal" href="#quad" id="id8">quad</a></p>
<ul>
<li><p><a class="reference internal" href="#order-of-vertices-in-a-quad" id="id9">Order of vertices in a quad</a></p></li>
</ul>
</li>
<li><p><a class="reference internal" href="#texture-coordinates" id="id10">Texture Coordinates</a></p></li>
</ul>
</li>
</ul>
</nav>
<p>All 3D graphical objects, even spheres, are made of triangles. One way to design your own object is to build it out of triangles. A triangle requires three <strong>vertex</strong> objects. The appearance of a triangle, based on the colors of its vertices and the lights provided, is calculated using the normals to the triangle: vectors pointing away from the surface of the triangle. In the simplest case, the normal at each vertex is perpendicular to the surface of the triangle, as shown in the figure below.</p>
<figure class="align-default" id="id1">
<a class="reference internal image-reference" href="_images/triangle.png"><img alt="_images/triangle.png" src="_images/triangle.png" style="width: 400px;" /></a>
<figcaption>
<p><span class="caption-text">A triangle, showing the three vertices and the normal to each vertex.</span><a class="headerlink" href="#id1" title="Permalink to this image">¶</a></p>
</figcaption>
</figure>
<p>As is evident in the figure above, if adjacent vertices differ in color, the colors are blended smoothly between the two vertices.</p>
<p>Any surface can be approximated by a mesh of triangles, and the shape of the surface can be changed dynamically. See the example programs <a class="reference external" href="https://www.glowscript.org/#/user/GlowScriptDemos/folder/Examples/program/Plot3D">Plot3D</a> and <a class="reference external" href="https://www.glowscript.org/#/user/GlowScriptDemos/folder/Examples/program/Rug">Rug</a>.</p>
<section id="vertex">
<h2><a class="toc-backref" href="#id4" role="doc-backlink">vertex</a><a class="headerlink" href="#vertex" title="Permalink to this heading">¶</a></h2>
<dl class="py function">
<dt class="sig sig-object py">
<span class="sig-name descname"><span class="pre">myvertex</span> <span class="pre">=</span> <span class="pre">vertex(</span> <span class="pre">pos=vec(1,0,0),</span> <span class="pre">normal=vec(0,0,1),</span> <span class="pre">color=color.green</span> <span class="pre">)</span></span></dt>
<dd><dl class="field-list simple">
<dt class="field-odd">Parameters<span class="colon">:</span></dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>pos</strong> (<em>vector</em>) – The 3D position of the vertex.</p></li>
<li><p><strong>normal</strong> (<em>vector</em>) – In the simplest case, a vector perpendicular to the plane of the triangle of which the vertex is a component. Default: <0,0,1>. For vertices at positions p0, p1, and p2, the normal to the triangle is <code class="docutils literal notranslate"><span class="pre">norm(</span> <span class="pre">cross(</span> <span class="pre">(p1-p0),</span> <span class="pre">(p2-p1)</span> <span class="pre">)</span> <span class="pre">)</span></code></p></li>
<li><p><strong>color</strong> (<em>vector</em>) – The color of this vertex. If adjacent vertices differ in color, the colors will be blended smoothly between the vertices.</p></li>
<li><p><strong>opacity</strong> (<em>scalar</em>) – Opacity of the vertex.</p></li>
<li><p><strong>texpos</strong> (<em>vector</em>) – A 3D vector whose <em>x</em> and <em>y</em> components give texel coordinates. Currently <em>z</em> must be 0. See <a class="reference internal" href="#texture-coordinates">Texture Coordinates</a>.</p></li>
<li><p><strong>bumpaxis</strong> (<em>vector</em>) – The direction of the x-axis of the bumpmap at that location. Default <1,0,0>. See <a class="reference internal" href="#texture-coordinates">Texture Coordinates</a>.</p></li>
<li><p><strong>shininess</strong> (<em>scalar</em>) – Default 0.6; Range 0-1.</p></li>
<li><p><strong>emissive</strong> (<em>boolean</em>) – Default False. Object glows, losing all shading, if True.</p></li>
</ul>
</dd>
</dl>
</dd></dl>
</section>
<section id="triangle">
<h2><a class="toc-backref" href="#id5" role="doc-backlink">triangle</a><a class="headerlink" href="#triangle" title="Permalink to this heading">¶</a></h2>
<a class="reference internal image-reference" href="_images/triangle.png"><img alt="_images/triangle.png" src="_images/triangle.png" style="width: 400px;" /></a>
<section id="order-of-vertices-in-a-triangle">
<h3><a class="toc-backref" href="#id6" role="doc-backlink">Order of vertices in a triangle</a><a class="headerlink" href="#order-of-vertices-in-a-triangle" title="Permalink to this heading">¶</a></h3>
<p>Vertices of a triangle must be specified in the correct order. A right-hand rule is useful: point your right thumb in the direction of the normal, and your fingers curl from v0 to v1 to v2. To put it another way, looking down the normals from above, going from v0 to v1 to v2 should go counterclockwise.</p>
<dl class="py function">
<dt class="sig sig-object py">
<span class="sig-name descname"><span class="pre">T</span> <span class="pre">=</span> <span class="pre">triangle(</span> <span class="pre">v0=myvertex0,</span> <span class="pre">v1=myvertex1,</span> <span class="pre">v2=myvertex2</span> <span class="pre">)</span></span></dt>
<dd></dd></dl>
<p>or</p>
<dl class="py function">
<dt class="sig sig-object py">
<span class="sig-name descname"><span class="pre">T</span> <span class="pre">=</span> <span class="pre">triangle(</span> <span class="pre">vs</span> <span class="pre">=</span> <span class="pre">myvertexlist</span> <span class="pre">)</span></span></dt>
<dd><dl class="field-list simple">
<dt class="field-odd">Parameters<span class="colon">:</span></dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>v0</strong> (<em>vertex</em>) – A vertex of the triangle.</p></li>
<li><p><strong>v1</strong> (<em>vertex</em>) – The adjacent vertex, using the right-hand rule.</p></li>
<li><p><strong>v2</strong> (<em>vertex</em>) – The adjacent vertex, using the right-hand rule.</p></li>
<li><p><strong>vs</strong> (<em>list</em>) – A list of three vertex objects in order, using the right-hand rule. An alternative to specifying each vertext separately.</p></li>
<li><p><strong>texture</strong> (<em>class.attribute</em><em> or </em><em>path</em>) – The texture to be applied to the triangle. Alignment uses <em>texpos</em> from vertices.</p></li>
<li><p><strong>visible</strong> (<em>boolean</em>) – If <em>False</em>, triangle will not be visible.</p></li>
<li><p><strong>bumpmap</strong> (<em>class.attribute</em><em> or </em><em>path</em>) – Bumpmap associated with a texture.</p></li>
</ul>
</dd>
</dl>
</dd></dl>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">a</span> <span class="o">=</span> <span class="n">vertex</span><span class="p">(</span><span class="n">pos</span><span class="o">=</span><span class="n">vec</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span><span class="mi">0</span><span class="p">),</span> <span class="n">color</span><span class="o">=</span><span class="n">color</span><span class="o">.</span><span class="n">red</span><span class="p">)</span>
<span class="n">b</span> <span class="o">=</span> <span class="n">vertex</span><span class="p">(</span><span class="n">pos</span> <span class="o">=</span> <span class="n">vec</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span><span class="mi">0</span><span class="p">),</span> <span class="n">color</span><span class="o">=</span><span class="n">color</span><span class="o">.</span><span class="n">green</span><span class="p">)</span>
<span class="n">c</span> <span class="o">=</span> <span class="n">vertex</span><span class="p">(</span><span class="n">pos</span> <span class="o">=</span> <span class="n">vec</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">1</span><span class="p">,</span><span class="mi">0</span><span class="p">),</span> <span class="n">color</span><span class="o">=</span><span class="n">color</span><span class="o">.</span><span class="n">blue</span><span class="p">)</span>
<span class="n">t</span> <span class="o">=</span> <span class="n">triangle</span><span class="p">(</span><span class="n">v0</span><span class="o">=</span><span class="n">a</span><span class="p">,</span> <span class="n">v1</span><span class="o">=</span><span class="n">b</span><span class="p">,</span> <span class="n">v2</span><span class="o">=</span><span class="n">c</span><span class="p">)</span>
</pre></div>
</div>
<p>The code above produces this:</p>
<img alt="_images/triangle1.png" src="_images/triangle1.png" />
<p>The only way to rotate a triangle is to rotate each vertex.</p>
<figure class="align-default" id="id2">
<img alt="_images/tetrahedron.png" src="_images/tetrahedron.png" />
<figcaption>
<p><span class="caption-text">A tetrahedron made from four triangles. The triangles do not share vertices; each triangle needs three vertices of the same color, with normals perpendicular to the surface.</span><a class="headerlink" href="#id2" title="Permalink to this image">¶</a></p>
</figcaption>
</figure>
</section>
<section id="smoothing-joints">
<h3><a class="toc-backref" href="#id7" role="doc-backlink">Smoothing joints</a><a class="headerlink" href="#smoothing-joints" title="Permalink to this heading">¶</a></h3>
<p>A single object can be composed of many triangles. Two adjacent triangles can share vertices. However, if the triangles don’t lie in the same plane, the joint will be visible unless it is smoothed. To smooth a joint, the normals of the two surfaces must be averaged (n1+n2)/2, and applied to all shared vertices. This will work best if the angle between the surfaces is small.</p>
<p>For example, a sphere is made of many triangles that share vertices with their neighbors; the normals of each vertex are the average of the normals of the normal vectors for all the triangles sharing the vertex.</p>
</section>
</section>
<section id="quad">
<h2><a class="toc-backref" href="#id8" role="doc-backlink">quad</a><a class="headerlink" href="#quad" title="Permalink to this heading">¶</a></h2>
<p>A quad is a quadrilateral that consists of four <strong>vertex</strong> objects; sometimes it is convenient to specify quads instead of triangles, but the quads are actually broken into triangles before rendering.</p>
<section id="order-of-vertices-in-a-quad">
<h3><a class="toc-backref" href="#id9" role="doc-backlink">Order of vertices in a quad</a><a class="headerlink" href="#order-of-vertices-in-a-quad" title="Permalink to this heading">¶</a></h3>
<p>Vertices of a quad must be specified in the correct order. The right-hand rule described for triangles applies also to quads: point your right thumb in the direction of the normal, and your fingers curl from v0 to v1 to v2 to v3. To put it another way, looking down on the normals from above, going from v0 to v1 to v2 to v3 should go counterclockwise.</p>
<dl class="py function">
<dt class="sig sig-object py">
<span class="sig-name descname"><span class="pre">Q</span> <span class="pre">=</span> <span class="pre">quad(</span> <span class="pre">vs</span> <span class="pre">=</span> <span class="pre">[a,</span> <span class="pre">b,</span> <span class="pre">c,</span> <span class="pre">d]</span> <span class="pre">)</span></span></dt>
<dd></dd></dl>
<p>or</p>
<dl class="py function">
<dt class="sig sig-object py">
<span class="sig-name descname"><span class="pre">Q</span> <span class="pre">=</span> <span class="pre">quad(</span> <span class="pre">v0</span> <span class="pre">=</span> <span class="pre">a,</span> <span class="pre">v1</span> <span class="pre">=</span> <span class="pre">b,</span> <span class="pre">v2</span> <span class="pre">=</span> <span class="pre">c,</span> <span class="pre">v3</span> <span class="pre">=</span> <span class="pre">d</span> <span class="pre">)</span></span></dt>
<dd><dl class="field-list simple">
<dt class="field-odd">Parameters<span class="colon">:</span></dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>v0</strong> (<em>vertex</em>) – A vertex of the quad.</p></li>
<li><p><strong>v1</strong> (<em>vertex</em>) – The adjacent vertex, using the right-hand rule.</p></li>
<li><p><strong>v2</strong> (<em>vertex</em>) – The adjacent vertex, using the right-hand rule.</p></li>
<li><p><strong>v3</strong> (<em>vertex</em>) – The adjacent vertex, using the right-hand rule.</p></li>
<li><p><strong>vs</strong> (<em>list</em>) – A list containing all four vertices in order–an alternative to specifying all four separately.</p></li>
</ul>
</dd>
</dl>
</dd></dl>
<p>The only way to rotate a quad is to rotate each vertex.</p>
</section>
</section>
<section id="texture-coordinates">
<h2><a class="toc-backref" href="#id10" role="doc-backlink">Texture Coordinates</a><a class="headerlink" href="#texture-coordinates" title="Permalink to this heading">¶</a></h2>
<p>In order to apply a texture or a bumpmap to a mesh, it is necessary to specify how the texture or bumpmap should be positioned on the mesh. Each vertex has attributes <em>texpos</em> and <em>bumpaxis</em> to convey this information. You might want the texture to occupy only a portion of the object, or be stretched or distorted in some way. This is done by specifying “texel” coordinates, given as texpos vectors in the vertex objects.</p>
<p>Texel coordinates for a surface texture are specified by an “x” and a “y”, both ranging from 0 to 1 if the entire texture is to be displayed, left to right and bottom to top. (In many discussions texel coordinates are referred to as “u” and “v”, or as “s” and “t”.) In anticipation that WebGL will eventually enable 3D textures, which permit filling a textured volume, VPython uses a vector, but requires the third component of texpos vectors to be zero.</p>
<p>For example, to fill a quad with a texture, the texpos vectors in the vertex objects v0, v1, v2, and v3 would be vec(0,0,0), vec(1,0,0), vec(1,1,0), vec(0,1,0), no matter what the 3D pos attributes are. If you want only the lower quarter of the texture to fill the quad, the texpos vectors would be vec(0,0,0), vec(0.5,0,0), vec(0.5,0.5,0), vec(0,0.5,0). Note that <0,0,0> is at the lower left, and <1,1,0> is at the upper right.</p>
</section>
</section>
</div>
</div>
</div>
<div class="sphinxsidebar" role="navigation" aria-label="main navigation">
<div class="sphinxsidebarwrapper">
<h1 class="logo"><a href="index.html">VPython</a></h1>
<h3>Navigation</h3>
<p class="caption" role="heading"><span class="caption-text">Contents:</span></p>
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="objects.html">3D Objects</a></li>
<li class="toctree-l1"><a class="reference internal" href="rate.html">Animations</a></li>
<li class="toctree-l1"><a class="reference internal" href="canvas.html">Canvases</a></li>
<li class="toctree-l1"><a class="reference internal" href="cameraAndLights.html">Camera and Lighting</a></li>
<li class="toctree-l1"><a class="reference internal" href="colorOpacityGlow.html">Color/Opacity/Glow</a></li>
<li class="toctree-l1 current"><a class="reference internal" href="makeshapes.html">Design New Objects</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="compound.html">compound</a></li>
<li class="toctree-l2"><a class="reference internal" href="group.html">group</a></li>
<li class="toctree-l2 current"><a class="current reference internal" href="#">vertex, triangle, and quad</a></li>
<li class="toctree-l2"><a class="reference internal" href="extrusion.html">extrusion</a></li>
<li class="toctree-l2"><a class="reference internal" href="shapes_and_paths.html">shapes and paths</a></li>
<li class="toctree-l2"><a class="reference internal" href="clone.html">cloning an object</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="file.html">Files/Libraries</a></li>
<li class="toctree-l1"><a class="reference internal" href="graph.html">Graphs</a></li>
<li class="toctree-l1"><a class="reference internal" href="math.html">Math Functions</a></li>
<li class="toctree-l1"><a class="reference internal" href="workwithobjects.html">Object Attachments</a></li>
<li class="toctree-l1"><a class="reference internal" href="rotation.html">Rotation</a></li>
<li class="toctree-l1"><a class="reference internal" href="textoutput.html">Text output</a></li>
<li class="toctree-l1"><a class="reference internal" href="texture.html">Textures</a></li>
<li class="toctree-l1"><a class="reference internal" href="userinput.html">User Input</a></li>
<li class="toctree-l1"><a class="reference internal" href="webvs7.html">VPython/WebVpython</a></li>
<li class="toctree-l1"><a class="reference internal" href="license.html">VPython license</a></li>
<li class="toctree-l1"><a class="reference internal" href="resources.html">Additional Resources</a></li>
</ul>
<div class="relations">
<h3>Related Topics</h3>
<ul>
<li><a href="index.html">Documentation overview</a><ul>
<li><a href="makeshapes.html">Making New Objects</a><ul>
<li>Previous: <a href="group.html" title="previous chapter">group</a></li>
<li>Next: <a href="extrusion.html" title="next chapter">Extrusions</a></li>
</ul></li>
</ul></li>
</ul>
</div>
<div id="searchbox" style="display: none" role="search">
<h3 id="searchlabel">Quick search</h3>
<div class="searchformwrapper">
<form class="search" action="search.html" method="get">
<input type="text" name="q" aria-labelledby="searchlabel" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
<input type="submit" value="Go" />
</form>
</div>
</div>
<script>document.getElementById('searchbox').style.display = "block"</script>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="footer">
©2023, Ruth Chabay and Bruce Sherwood.
|
Powered by <a href="http://sphinx-doc.org/">Sphinx 5.0.2</a>
& <a href="https://github.com/bitprophet/alabaster">Alabaster 0.7.12</a>
|
<a href="_sources/vertex.rst.txt"
rel="nofollow">Page source</a>
</div>
</body>
</html>
You can’t perform that action at this time.