gridhopping/implementations/javascript/index.html at master · nenadmarkus/gridhopping · GitHub

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
<!DOCTYPE html>
<meta charset="utf-8"/>
<html>
<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">
	<meta name=viewport content="width=device-width,initial-scale=1">
	<link rel="stylesheet" href="styles.css">
	<title>LambdaCAD</title>
	<meta name="description" content="A tiny in-browser CAD tool.">
	<meta name="keywords" content="LambdaCAD, cad, computer aided design, signed distance functions, signed distance bounds, signed distance estimators, implicit functions, ray marching, sphere tracing">
	<base target="_parent">
</head>
<body>

	<h1>
		LambdaCAD (<a href="https://github.com/nenadmarkus/gridhopping">source</a>,
			<a href="https://arxiv.org/abs/2111.05778">paper</a>,
			<a href="https://nenadmarkus.github.io/p/fast-algo-sdb-to-mesh/">blog post</a>)
	</h1>
		<p>
			This is a tiny in-browser CAD tool based on the modified sphere tracing algorithm algorithm
			(we call it <code>gridhopping</code>).
			Edit the code and hit the build button (or shift+enter) to generate a shape.
		</p>
		<div class="container">
		<div class="element">
		<div id="VIEWPORT" style="height: 512px; width: 100%;"></div>
		<div>
			size: <input type="number" id="size" style="width: 10%;">
			&nbsp;&nbsp;&nbsp;&nbsp;
			resolution: <input type="number" id="resolution" style="width: 10%;">
		</div>
		</div>
		<div class="element">
		<textarea spellcheck="false" id="tryit" rows="29" style="width: 95%; resize: none;"></textarea>
		<div style="text-align: center;">
			<button class="button-style" id="build-button">Build and render</button>
			<button class="button-style" id="save-code-button">Save code</button>
			<button class="button-style" id="export-button">Export to STL</button>
		</div>
		<p id="log"></p>
		</div>
		</div>

		<div id="stl-download-popup" class="modal">
			<div class="modal-content">
				<h3>Export finished, download ready</h3>
				<button class="button-style" id="download-stl-button">Download</button>
				<hr>
				<p>If you like this project, consider giving it a star on GitHub.</p>
				<p>
					<a href="https://github.com/nenadmarkus/gridhopping">https://github.com/nenadmarkus/gridhopping</a>
				</p>
			</div>
		</div>

	<h3>Instructions</h3>
		<p>The polygonization occurs in a cube centered at the origin and with side length equal to <code>size</code>.
		This cube is partitioned into <code>pow(resolution, 3)</code> cells.
		If a surface of the shape passes through a cell, polygons (triangles) are generated to approximate this.
		You can vary the <code>size</code> and <code>resolution</code> parameters to generate more or less detailed 3D models, depending on your requirements.</p>

		<p>Anything you enter will be lost as soon as this page is reloaded.
		Thus, when building your own models, it is advised to store them in a text file locally on your computer and use copy-paste them into the code area above when you need to visualize and/or export to STL.</p>

	<h2>Examples</h2>
		<p>
			As explained, the <code>gridhopping</code> algorithm is used to polygonize implicit functions (or signed distance bounds) of the form <code>F(x, y, z)=0</code>.
			Note, however, that <code>F</code> has to be <a href="https://en.wikipedia.org/wiki/Lipschitz_continuity">Lipschitz continuous</a> in order to obtain correct results.
			Read more about this contraint <a href="https://nenadmarkus.github.io/p/lipschitz-continuity-and-sphere-tracing/">here</a>.
		</p>

		<p>
			In LambdaCAD, this function is set by the user by writing a small piece of JavaScript code.
			For example, the following code defines a sphere with a radius equal to 0.4 centered at the origin:
		</p>
		<pre>// sqrt(x^2 + y^2 + z^2) - radius = 0
return function (x, y, z) {
	const radius = 0.4;
	return Math.sqrt(x*x + y*y + z*z) - radius;
}</pre>

	<p>
		You can achieve the same with a built-in function:
	</p>
	<pre>return sphere(0.4);</pre>

	<p>
		A more complicated example:
	</p>
	<pre>return function (x, y, z) {
	const scale = 6;

	x *= scale;
	y *= scale;
	z *= scale;

	const r = Math.sqrt(x*x + y*y + z*z);
	const phi = Math.atan2(y, x);
	const r1 = Math.sin(1.5 * phi) + 1.5;
	const z1 = Math.cos(1.5 * phi);
	const r2 = Math.sin(1.5 * phi + 3.14156) + 1.5;
	const z2 = Math.cos(1.5 * phi + 3.14156);

	const x1=r1*Math.cos(phi), y1=r1*Math.sin(phi);
	const x2=r2*Math.cos(phi), y2=r2*Math.sin(phi);

	return (Math.min(
		Math.sqrt((x-x1)*(x-x1)+(y-y1)*(y-y1)+(z-z1)*(z-z1)),
		Math.sqrt((x-x2)*(x-x2)+(y-y2)*(y-y2)+(z-z2)*(z-z2))) - 0.3)/3.0/scale;
};</pre>

	<p>
		More examples can be found <a href="https://github.com/nenadmarkus/gridhopping/blob/master/implementations/javascript/examples.md">here</a>.
	</p>

	<h2>About</h2>
		<p>Copyright (c) 2020, <a href="https://nenadmarkus.github.io">Nenad Markuš</a>. All rights reserved.</p>

		<p>Read more about the project at <a href="https://github.com/nenadmarkus/gridhopping">https://github.com/nenadmarkus/gridhopping</a>.</p>

		<p>You can reach me at <code>nenad.markus@protonmail.com</code>.</p>

	<script src="meshviz/three.min.js"></script>
	<script src="meshviz/webgl_detector.js"></script>
	<script src="meshviz/OrbitControls.js"></script>
	<script src="meshviz/viewer.js"></script>

	<script src="index.js"></script>
</body>
</html>