Add overlay support to the model

Each chunk can now define an overlay. An overlay is drawn over the base model, and can have its own `color`, `gradient`, and `mask` properties. An overlay can be used to apply a pattern over the entire model at once. Using an overlay does have a performance impact because each polygon in a chunk with an overlay gets duplicated. But it makes it dramatically easier to apply a pattern over the entire model at once. A demo of this functionality has been added, called "overlay". It is not the nicest looking example, but it does demonstrate the functionality well.
MetaMask · Oct 26, 2021 · c1befec · c1befec
1 parent 5d918e6
commit c1befec
Show file tree

Hide file tree

Showing 5 changed files with 453 additions and 6 deletions.
diff --git a/demo/src/index.html b/demo/src/index.html
@@ -14,6 +14,7 @@
       <li><a href="./recolor/index.html">recolor</a></li>
       <li><a href="./distort/index.html">distort</a></li>
       <li><a href="./fade/index.html">fade</a></li>
+      <li><a href="./overlay/index.html">overlay</a></li>
       <li><a href="./beta/index.html">beta</a></li>
       <li><a href="./flask/index.html">flask</a></li>
     </ol>

diff --git a/demo/src/overlay/index.html b/demo/src/overlay/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="../style.css">
+    <title>---</title>
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+    <meta charset=utf-8>
+  </head>
+  <body>
+    <div></div>
+    <script src="bundle.js"></script>
+    <p>Press C to copy the SVG text of the image.</p>
+  </body>
+</html>