forked from GeometryCollective/geometry-processing-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
195 lines (144 loc) · 11.3 KB
/
index.html
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
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!-- Begin Jekyll SEO tag v2.3.0 -->
<title>geometry-processing-js</title>
<meta property="og:title" content="geometry-processing-js" />
<meta property="og:locale" content="en_US" />
<link rel="canonical" href="https://geometrycollective.github.io/geometry-processing-js/" />
<meta property="og:url" content="https://geometrycollective.github.io/geometry-processing-js/" />
<meta property="og:site_name" content="geometry-processing-js" />
<script type="application/ld+json">
{
"name": "geometry-processing-js",
"description": null,
"author": null,
"@type": "WebSite",
"url": "https://geometrycollective.github.io/geometry-processing-js/",
"image": null,
"publisher": null,
"headline": "geometry-processing-js",
"dateModified": null,
"datePublished": null,
"sameAs": null,
"mainEntityOfPage": null,
"@context": "http://schema.org"
}
</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="/geometry-processing-js/assets/css/style.css?v=2f79cae4b141e25730e5ee49b6fe0178b86fdc19">
<meta name="viewport" content="width=device-width">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<header>
<img src="imgs/geometry-processing-js_logo.svg">
<p class="view"><a href="https://github.com/geometrycollective/geometry-processing-js">View the Project on GitHub <small></small></a></p>
<p>
<center>
<a href="imgs/geometry-processing-js_iphone.jpg"><img src="imgs/geometry-processing-js_iphone.jpg" width="130" height="109"></a><br>
<em>Demo running on iPhone 6</em>
</center>
</p>
<p>
<center>
<a href="imgs/geometry-processing-js_editing.jpg"><img src="imgs/geometry-processing-js_editing.jpg" width="130" height="97.5"></a><br>
<em>Editing geometry processing code in-browser (here just stretching by 2x)</em>
</center>
</p>
</header>
<section>
<h1 id="about">About</h1>
<p><tt>geometry-processing-js</tt> is a fast and flexible framework for 3D geometry processing on the web! Easy integration with HTML/WebGL makes it particularly suitable for things like mobile apps, online demos, and course content. For many
tasks, performance comes within striking distance of native (C++) code. Plus, since the framework is pure JavaScript, <strong>no compilation or installation</strong> is necessary: just copy the files and run from any web browser, on any
platform (including mobile). Moreover, geometry processing algorithms can be <strong>edited in the browser</strong> (using for instance the <a href="https://developers.google.com/web/tools/chrome-devtools/console/">JavaScript Console</a> in Chrome). So open up one of the demos and start editing! <tt>geometry-processing-js</tt> is developed by and maintained by the <a href="http://geometry.cs.cmu.edu">Geometry Collective</a> at <a href="http://www.cs.cmu.edu/">Carnegie Mellon University</a>.</p>
<p>At a high level, the framework is divided into three parts - a flexible halfedge mesh data structure, an optimized linear algebra package (based on <a href="http://eigen.tuxfamily.org">Eigen</a>), and code for various geometry processing algorithms.
Each algorithm comes with its own viewer for rendering.</p>
<p>Detailed documentation and unit tests for each of these parts can be found in the docs and tests directories of this <a href="https://github.com/geometrycollective/geometry-processing-js">repository</a>.</p>
<p><em>We're just getting rolling here, so stay tuned for more! :-)</em></p>
<h2 id="demos">Demos</h2> Click on the images below to try out some demos now! Since the algorithms are implemented in native JavaScript, they can be edited in-browser using developer tools like the <a href="https://developers.google.com/web/tools/chrome-devtools/console/">Console</a> in Google Chrome. (Note that the GUIs for these demos are just simple examples; any GUI can be used on top of the core geometry library.)
<table>
<tr>
<td><a href="projects/geometric-flow/index.html"><img width="120" height="120" src="imgs/demos/geometric-flow-icon.jpg"></a></td>
<td><a href="projects/discrete-curvatures-and-normals/index.html"><img width="120" height="120" src="imgs/demos/curvature-icon.jpg"></a></td>
<td><a href="projects/geodesic-distance/index.html"><img width="120" height="120" src="imgs/demos/geodesic_distance-icon.jpg"></a></td>
</tr>
<tr>
<td><a href="projects/parameterization/index.html"><img width="120" height="120" src="imgs/demos/parameterization-icon.jpg"></a></td>
<td><a href="projects/vector-field-decomposition/index.html"><img width="120" height="120" src="imgs/demos/vector-field-decomposition-icon.jpg"></a></td>
<td><a href="projects/poisson-problem/index.html"><img width="120" height="120" src="imgs/demos/poisson-problem-icon.jpg"></a></td>
</tr>
<tr>
<td><a href="projects/discrete-exterior-calculus/index.html"><img width="120" height="120" src="imgs/demos/discrete-exterior-calculus-icon.jpg"></a></td>
<td><a href="projects/direction-field-design/index.html"><img width="120" height="120" src="imgs/demos/direction-field-design-icon.jpg"></a></td>
</tr>
</tr>
</table>
<h2 id="getting-started">Code Snippet</h2> Since <tt>geometry-processing-js</tt> already implements many of the fundamental operations needed for geometry processing, it's easy to get up and running very quickly. Here's a short snippet showing how to solve a Poisson equation on a
mesh loaded by the GUI, which uses built-in routines for constructing the Laplace and mass matrices:
<div class="highlighter-rouge"><pre class="highlight"><code class="language-javascript" data-lang="javascript">// assign an index to each vertex of the mesh
let vertexIndex = indexElements(geometry.mesh.vertices);
// build cotan-Laplace and mass matrices
let A = geometry.laplaceMatrix(vertexIndex);
let M = geometry.massMatrix(vertexIndex);
let rhs = M.timesDense(rho);
// solve Poisson equation with a given right-hand side rhs
let llt = A.chol();
let phi = llt.solvePositiveDefinite(rhs);
</code></pre></div>
<h2 id="getting-started">Documentation</h2>
<p>Read the online docs <a href="docs/index.html">here</a> to get a sense of how <tt>geometry-processing-js</tt> works. (A list of modules and classes can be found in the menu at top). The quickest way to start playing around is to modify one
of the existing examples (in the <tt>projects</tt> subdirectory); small usage examples for individual classes can be found throughout the documentation.</p>
<p>Here are <a href="http://keenan.is/sendingyou/DDGShortCourseDemoSession.pdf">some slides</a> from a short tutorial at the <a href="https://www.ams.org/publications/journals/notices/201709/rnoti-p1016.pdf">AMS Short Course on Discrete Differential Geometry</a>.</p>
<h2 id="getting-started">Getting started</h2>
<ol>
<li>Clone the repository and change into the projects directory
<div class="highlighter-rouge"><pre class="highlight"><code>git clone https://github.com/geometrycollective/geometry-processing-js.git
cd geometry-processing-js/projects
</code></pre>
</div>
</li>
<li>Open the index.html file in any of the sub directories in a browser of your choice (Chrome and Firefox usually provide better rendering performance than Safari).</li>
</ol>
<h2 id="dependencies-all-included">Dependencies (all included)</h2>
<ol>
<li>
<p>Linear Algebra - A wrapper around the C++ library <a href="https://eigen.tuxfamily.org">Eigen</a> compiled to <a href="http://asmjs.org">asm.js</a> with <a href="http://emscripten.org">emscripten</a>. Future updates will compile the
more optimized sparse matrix library <a href="http://faculty.cse.tamu.edu/davis/suitesparse.html">Suitesparse</a> to asm.js. (Note that this wrapper can also be used for other, non-geometric projects which seek to use Eigen on
the web; you can find the standalone release <a href="https://rohan-sawhney.github.io/linear-algebra-js/">here</a>)</p>
</li>
<li>
<p>Rendering - <a href="https://threejs.org">three.js</a></p>
</li>
<li>
<p>Unit Tests - <a href="http://mochajs.org">Mocha</a> and <a href="http://chaijs.com">Chai</a></p>
</li>
</ol>
<h2 id="about-javascript">About Javascript</h2>
<p>The implementation of geometry-processing-js attempts to minimize the use of obscure Javascript language features. It should not be too difficult for anyone with experience in a dynamic language like Python or familiar with the principles
of Object Oriented Programming to get a handle on Javascript syntax by reading through some of the code in this framework. The documentation contains examples specific to this framework which will also be of help. For a more formal introduction
to Javascript, checkout this really nice <a href="https://javascript.info">tutorial</a>.</p>
<h2 id="author">Author</h2>
<p><a href="http://rohansawhney.io">Rohan Sawhney</a> (<a href="mailto:[email protected]">[email protected]</a>)</p>
<p><em>Design inspiration:</em> <a href="http://nmwsharp.com">Nick Sharp</a>, <a href="http://www.cs.cmu.edu/~kmcrane/">Keenan Crane</a></p>
<h2 id="license">License</h2>
<p><a href="https://opensource.org/licenses/MIT">MIT</a></p>
<h2 id="support">Support</h2>
<p>This work is supported in part by National Science Foundation award #1717320. Any opinions, findings, and conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily reflect the views of
the National Science Foundation</p>
<center>
<a href="http://geometry.cs.cmu.edu"><img src="imgs/geometry-collective-production.svg"></a>
</center>
<!--<p>This project is maintained by <a href="mailto:[email protected]">Rohan Sawhney</a></p>-->
<!-- <p><small>Hosted on GitHub Pages — Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p> -->
</section>
<footer> </footer>
</div>
<script src="/geometry-processing-js/assets/js/scale.fix.js"></script>
</body>
</html>