-
Notifications
You must be signed in to change notification settings - Fork 50
/
index.html
103 lines (82 loc) · 5.46 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="generator" content="DocPad v6.53.0" />
<title>Voxel Builder</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css"
media="screen">
<link rel="stylesheet" href="css/index.css" type="text/css" media="screen">
</head>
<body>
<div id="wrapper">
<header>
<h1><a href="/">Voxel Builder</a></h1>
<p>Easy cube-based 3D design with DIY 2D/3D printing</p>
<nav>
<ul>
<li class="download"><a href="edit.html" class="topcoat-button--cta">Launch Builder</a>
</li>
</ul>
</nav>
</header>
<section id="hero">
<ul>
<li id="desktop-preview"></li>
<li id="mobile-preview"></li>
</ul>
</section>
<section class="features">
<p><strong>Voxel Builder</strong> is an open source tool that lets anyone design and edit 3D voxel (cube) models easily, right in their web browser.</p>
</section>
<section>
<h3>
<a name="how-it-works" class="anchor" href="#how-it-works"><span class="octicon octicon-link"></span></a>
How it works
</h3>
<p>Use the <a href="/edit">Builder</a> to create and edit voxel (AKA cube) models.</p>
<p><a href="http://github.com/maxogden/ndarray-stl/blob/master/img/mario-builder.png" target="_blank"><img src="http://github.com/maxogden/ndarray-stl/raw/master/img/mario-builder.png" alt="mario" style="max-width:100%;"></a></p>
<p>When you are done, export it as a PNG file (from the menu in Builder), like this:</p>
<p><a href="https://github-camo.global.ssl.fastly.net/e840a2fed3b267d9f2a79d378e644c9ba36bb0a0/687474703a2f2f692e696d6775722e636f6d2f6363426b4d56592e706e67" target="_blank"><img src="https://github-camo.global.ssl.fastly.net/e840a2fed3b267d9f2a79d378e644c9ba36bb0a0/687474703a2f2f692e696d6775722e636f6d2f6363426b4d56592e706e67" alt="mario-encoded" style="max-width:100%;"></a></p>
<p>You can manufacture your critter using either a 2D printer or a 3D printer.</p>
<h4>2D printer</h4>
<p>Visit <a href="http://maxogden.github.io/voxel-2d-print/" target="_blank">this page</a> and drop your critter PNG onto it to generate pages. Print the pages so that each layer is a different page on a color printer. Then use scissors and glue to assemble each layer!</p>
<p><img src="img/2d-detail.png"></p>
<p><img src="img/robot-detail.png"></p>
<h4>3D printer</h4>
<p>Visit <a href="http://maxogden.github.io/ndarray-stl/" target="_blank">this page</a> and drop your critter PNG onto it to generate a 3D printable STL file.</p>
<p><a href="http://github.com/maxogden/ndarray-stl/blob/master/img/mario-makerware.png" target="_blank"><img src="http://github.com/maxogden/ndarray-stl/raw/master/img/mario-makerware.png" alt="mario-makerware" style="max-width:100%;"></a></p>
<p>The above shows three STL files loaded into MakerWare: unsmoothed, smoothed with <a href="http://www.merl.com/papers/docs/TR99-24.pdf">surface nets</a> and smoothed with <a href="https://en.wikipedia.org/wiki/Marching_cubes">marching cubes</a>.</p>
<p><a name="printed-marios"></a><a href="#printed-marios"><img src="http://github.com/maxogden/ndarray-stl/raw/master/img/marios-irl.png" alt="marios" style="max-width:100%;"></a></p>
<p>Here are the 3 variations of Mario printed out by <a href="https://github.com/vladikoff">@vladikoff</a> at the Mozilla San Francisco office. You can view more photos from his print <a href="https://plus.google.com/106106671604413824025/posts/Nfw4aRmttEr">here</a>. Thanks, Vlad!</p>
<p>Mikola Lysenko, the designer of the Mario model and author of many of the algorithms in Voxel Builder, also wrote <a href="http://0fps.wordpress.com/2012/09/18/turning-8-bit-sprites-into-printable-3d-models/">a post</a> about the process of creating the 3D mario.</p>
<p>At this point in time there are over <a
href="http://mk30.github.io/voxelcrittersbank/">1400 creations</a> that have been made with Voxel Builder. Any of them can be loaded into the ndarray-stl demo. Here are some good ones:</p>
<ul>
<li><a href="http://maxogden.github.io/ndarray-stl/?png=http://i.imgur.com/XawptQv.png">elephant</a></li>
<li><a href="http://maxogden.github.io/ndarray-stl/?png=http://i.imgur.com/Gv5Q3UP.png">outrigger boat</a></li>
<li><a href="http://maxogden.github.io/ndarray-stl/?png=http://i.imgur.com/ZcSVaqy.png">race car</a></li>
</ul><h2>
</section>
</div>
<footer class="site">
<ul>
<li id="twitter"><a href="http://twitter.com/voxeljs"></a>
</li>
<li id="github"><a href="http://github.com/maxogden/voxel-painter"></a>
</li>
</ul>
</footer>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-38522202-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>