build index.html

brandon-xyzw · Aug 1, 2023 · c14e2ac · c14e2ac
1 parent f0e6953
commit c14e2ac
Show file tree

Hide file tree

Showing 13 changed files with 2,498 additions and 10 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,9 +8,6 @@
 # testing
 /coverage
 
-# production
-/build
-
 # misc
 .DS_Store
 .env.local

diff --git a/README.md b/README.md
@@ -6,12 +6,6 @@
 
 See [here](https://greggman.github.io/webgpu-utils/docs)
 
-## Examples:
-
-* [Cube](examples/cube.html)
-* [2d-array](examples/cube.html)
-* [Cube-map](examples/cube-map.html)
-
 ## Random useful things for WebGPU
 
 As I do more WebGPU I find I need more and more helpers to make things
@@ -136,7 +130,7 @@ const rg16Texture2x2 = createTextureFromSource(
   device, rg16sint2x2, { format: 'rg16sint' });
 ```
 
-All data above can be a typeArray
+All data above can be a TypedArray
 
 ```js
 const singlePixelRedTexture = createTextureFromSource(
@@ -161,6 +155,40 @@ const texture = device.createTexture({
 generateMipmap(device, texture);
 ```
 
+### Create Buffers and attributes (interleaved)
+
+```js
+import { numMipLevels, generateMipmap } from 'webgpu-utils';
+
+const bi = wgh.createBufferInfoFromArrays(device, {
+  position: [1, 1, -1, 1, 1, 1, 1, -1, 1, 1, -1, -1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, 1, 1, 1, 1, 1, -1, -1, 1, -1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, -1, 1, -1, 1, 1, -1, 1, -1, -1, -1, -1, -1],
+  normal: [1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1],
+  texcoord: [1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1],
+  indices: [0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23],
+});
+
+const pipeline = device.createRenderPipeline({
+  layout: 'auto',
+  vertex: {
+    module,
+    entryPoint: 'myVSMain',
+    buffers: [ bi.bufferLayout ],  // <---
+  },
+  ...
+});
+
+// at render time
+passEncoder.setVertexBuffer(0, bi.vertexBuffer);
+passEncoder.setIndexBuffer(bi.indexBuffer, bi.indexFormat);
+passEncoder.drawIndexed(bi.numElements);
+```
+
+## Examples:
+
+* [Cube](examples/cube.html)
+* [2d-array](examples/cube.html)
+* [Cube-map](examples/cube-map.html)
+
 ## Usage
 
 * include from the net

diff --git a/build/templates/index.template b/build/templates/index.template
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<!-- this file is auto-generated from %(srcFileName)s. Do not edited directly -->
+<!--
+%(license)s
+-->
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta http-equiv="Content-Language" content="en">
+
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+<meta property="og:title" content="%(title)s" />
+<meta property="og:type" content="website" />
+<meta property="og:image" content="https://greggman.github.io/webgpu-utils/resources/images/twgljs.png" />
+<meta property="og:description" content="webgpu-utils, a WebGPU helper library" />
+<meta property="og:url" content="https://greggman.github.io/webgpu-utils/" />
+
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:site" content="@greggman">
+<meta name="twitter:creator" content="@greggman">
+<meta name="twitter:domain" content="twgljs.org">
+<meta name="twitter:title" content="TWGL.js">
+<meta name="twitter:url" content="https://greggman.github.io/webgpu-utils/">
+<meta name="twitter:description" content="webgpu-utils, a WebGPU helper library">
+<meta name="twitter:image:src" content="https://greggman.github.io/webgpu-utils/resources/images/twgljs.png">
+
+
+<title>%(title)s</title>
+
+<link rel="stylesheet" href="/resources/css/base.css" type="text/css" />
+<link href="/resources/images/webgpu-helper-icon.png" rel="shortcut icon" type="image/png">
+</head>
+<body>
+<iframe src="examples/background.html"></iframe>
+<div id="frame">
+  <div class="nav">
+    <ul>
+      <li><a href="https://greggman.github.io/webgpu-utils/docs/">Docs</a></li>
+      <li><a href="#examples">Examples</a></li>
+      <li><a href="#download">Download</a></li>
+    </ul>
+  </div>
+  <div id="content">
+    %(content)s
+  </div>
+</div>
+<style>
+#forkongithub a {
+    background: #000;
+    color: #fff;
+    text-decoration: none;
+    font-family: arial,sans-serif;
+    text-align: center;
+    font-weight: bold;
+    padding: 5px 40px;
+    font-size: 12px;
+    line-height: 24px;
+    position: relative;
+    transition: 0.5s;
+    display: block;
+}
+#forkongithub a:hover {
+    background: #c11;
+    color: #fff;
+}
+#forkongithub a::before,#forkongithub a::after {
+    content: "";
+    width: 100%;
+    display: block;
+    position: absolute;
+    top: 1px;
+    left: 0;
+    height: 1px;
+    background: #fff;
+}
+#forkongithub a::after {
+    bottom: 1px;
+    top: auto;
+}
+
+@media screen and (min-width: 400px){
+    #forkongithub{
+        position: fixed;
+        display: block;
+        top: 0;
+        right: 0;
+        width: 200px;
+        overflow: hidden;
+        height: 200px;
+        z-index: 9999;
+    }
+    #forkongithub a{
+        width: 200px;
+        position: absolute;
+        top: 40px;
+        right: -40px;
+        transform: rotate(45deg);
+        -webkit-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        -moz-transform: rotate(45deg);
+        -o-transform: rotate(45deg);
+        box-shadow: 4px 4px 10px rgba(0,0,0,0.8);
+    }
+}
+
+</style>
+<div id="forkongithub"><a href="https://github.com/greggman/webgpu-utils">Fork me on GitHub</a></div>
+</body>
+<script src="/examples/3rdparty/prettify.js"></script>
+<script src="/resources/js/index.js"></script>
+</html>
+
+
diff --git a/build/tools/makeindex.js b/build/tools/makeindex.js
@@ -0,0 +1,94 @@
+import fs from 'fs';
+import path from 'path';
+import MarkdownIt from 'markdown-it';
+import * as url from 'url';
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+const md = MarkdownIt({
+  html: true,
+  langPrefix: 'lang-',
+  typographer: true,
+  quotes: '“”‘’',
+});
+
+const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, '..', '..', 'package.json'), {encoding: 'utf8'}));
+
+function getLicense(pkg) {
+  return `@license webgpu-utils ${pkg.version} Copyright (c) 2023, Gregg Tavares All Rights Reserved.
+Available via the MIT license.
+see: http://github.com/greggman/webgpu-utils for details`;
+}
+
+/**
+ * Replace %(id)s in strings with values in objects(s)
+ *
+ * Given a string like `"Hello %(name)s from %(user.country)s"`
+ * and an object like `{name:"Joe",user:{country:"USA"}}` would
+ * return `"Hello Joe from USA"`.
+ *
+ * @param {string} str string to do replacements in
+ * @param {Object|Object[]} params one or more objects.
+ * @returns {string} string with replaced parts
+ */
+const replaceParams = (function() {
+  const replaceParamsRE = /%\(([^)]+)\)s/g;
+
+  return function(str, params) {
+    if (!params.length) {
+      params = [params];
+    }
+
+    return str.replace(replaceParamsRE, function(match, key) {
+      const colonNdx = key.indexOf(':');
+      if (colonNdx >= 0) {
+        /*
+        try {
+          const args = hanson.parse("{" + key + "}");
+          const handlerName = Object.keys(args)[0];
+          const handler = replaceHandlers[handlerName];
+          if (handler) {
+            return handler(args[handlerName]);
+          }
+          console.error("unknown substition handler: " + handlerName);
+        } catch (e) {
+          console.error(e);
+          console.error("bad substitution: %(" + key + ")s");
+        }
+        */
+        throw new Error('unsupported');
+      } else {
+        // handle normal substitutions.
+        const keys = key.split('.');
+        for (let ii = 0; ii < params.length; ++ii) {
+          let obj = params[ii];
+          for (let jj = 0; jj < keys.length; ++jj) {
+            const key = keys[jj];
+            obj = obj[key];
+            if (obj === undefined) {
+              break;
+            }
+          }
+          if (obj !== undefined) {
+            return obj;
+          }
+        }
+      }
+      console.error('unknown key: ' + key);
+      return '%(' + key + ')s';
+    });
+  };
+}());
+
+const html = md.render(fs.readFileSync('README.md', {encoding: 'utf8'}));
+const template = fs.readFileSync('build/templates/index.template', {encoding: 'utf8'});
+let content = replaceParams(template, {
+  content: html,
+  license: getLicense(pkg),
+  srcFileName: 'README.md',
+  title: 'webgpu-utils, a WebGPU helper library',
+  version: pkg.version,
+});
+content = content.replace(/href="https:\/\/greggman\.github\.io\/webgpu-utils\//g, 'href="./');
+fs.writeFileSync('index.html', content);
+
+