Load assets from url, add textures pane

Author: ekzhang

package.json

@@ -11,10 +11,8 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "byte-base64": "^1.1.0",
     "gl-matrix": "^3.3.0",
     "regl": "^2.1.0",
-    "resl": "^1.0.3",
     "tweakpane": "^2.2.1"
   },
   "devDependencies": {

src/index.js

@@ -2,99 +2,155 @@ import Regl from "regl";
 import { mat4 } from "gl-matrix";
 import Tweakpane from "tweakpane";
 
+import { loadMesh } from "./geometry";
+import { generatePencilTextures } from "./texture";
+import { saveImage, loadImage } from "./utils";
 import fragmentShader from "./frag.glsl?raw";
 import vertexShader from "./vert.glsl?raw";
-import rawTexture from "../textures/texture_256_64_64.json";
-import bunny from "../models/bunny_1k_2_sub.json";
-import { loadMesh } from "./geometry";
-import {
-  TextureData,
-  displayImageData,
-  generatePencilTextures,
-} from "./texture";
-
-const pane = new Tweakpane({ title: "Parameters" });
-const params = {
-  scale: 15,
-  zoom: 0.5,
-  height: 0.2,
-  rotate: true,
-  speed: 0.5,
-  angle: 0,
-};
-pane.addInput(params, "scale", { min: 0, max: 50 });
-pane.addInput(params, "zoom", { min: -5, max: 5 });
-pane.addInput(params, "height", { min: -1, max: 1 });
-pane.addSeparator();
-pane.addInput(params, "rotate");
-pane.addInput(params, "speed", { min: -1.0, max: 1.0 });
-pane.addInput(params, "angle", { min: 0, max: 2 * Math.PI });
+import pencilTexturesUrl from "../textures/texture_256_64_64.png";
+import bunnyUrl from "../models/bunny_1k_2_sub.json?url";
 
 const regl = Regl({ extensions: ["OES_standard_derivatives"] });
 
-const width = rawTexture.width;
-const height = rawTexture.height;
-const numTextures = rawTexture.numTextures;
-//const texture = generatePencilTextures(numTextures, width, height);
-//console.log(JSON.stringify(texture));
-const texture = new TextureData(rawTexture.data, width, height, numTextures);
-//displayImageData(texture);
-
-const pencilTextures = regl.texture({
-  data: texture.data,
-  width: width,
-  height: height * numTextures,
-  mag: "linear",
-  min: "mipmap",
-  mipmap: true,
-});
+class Renderer {
+  async start() {
+    this.initPane();
+    await Promise.all([this.initTextures(), this.loadMesh(bunnyUrl)]);
+
+    regl.frame(() => {
+      if (this.params.rotate) {
+        this.params.angle =
+          (this.params.angle + this.params.speed / 100.0) % (2 * Math.PI);
+        this.pane.refresh();
+      }
+      const t = this.params.angle;
+      const radius = Math.pow(2, -this.params.zoom);
+      const height = this.params.height;
+
+      regl.clear({ color: [1, 1, 1, 1] });
+      this.draw({
+        eye: [radius * Math.cos(t), height, radius * Math.sin(t)],
+        center: [0, height, 0],
+      });
+    });
+  }
+
+  initPane() {
+    const pane = new Tweakpane({ title: "Parameters" });
+    const params = {
+      scale: 15,
+      zoom: 0.8,
+      height: 0.2,
+      rotate: true,
+      speed: 0.5,
+      angle: 0,
+    };
+
+    pane.addInput(params, "scale", { min: 0, max: 50 });
+
+    const camera = pane.addFolder({ title: "Camera" });
+    camera.addInput(params, "zoom", { min: -5, max: 5 });
+    camera.addInput(params, "height", { min: -1, max: 1 });
+    camera.addSeparator();
+    camera.addInput(params, "rotate");
+    camera.addInput(params, "speed", { min: -1.0, max: 1.0 });
+    camera.addInput(params, "angle", { min: 0, max: 2 * Math.PI });
+
+    const textures = pane.addFolder({ title: "Textures" });
+    const texParams = {
+      number: 64,
+      width: 64,
+      height: 64,
+      save: false,
+    };
+    textures.addInput(texParams, "number", { min: 8, max: 256, step: 8 });
+    textures.addInput(texParams, "width", { min: 16, max: 128, step: 8 });
+    textures.addInput(texParams, "height", { min: 16, max: 128, step: 8 });
+    textures.addInput(texParams, "save");
+    textures.addButton({ title: "Generate" }).on("click", () => {
+      this.generateTextures(texParams);
+    });
+
+    this.pane = pane;
+    this.params = params;
+  }
 
-const { elements, attributes } = loadMesh(bunny);
+  async initTextures() {
+    const textures = regl.texture({
+      data: await loadImage(pencilTexturesUrl),
+      mag: "linear",
+      min: "mipmap",
+      mipmap: true,
+    });
+    this.setTextures(256, textures);
+  }
+
+  setTextures(numTextures, pencilTextures) {
+    this.numTextures = numTextures;
+    this.pencilTextures = pencilTextures;
+  }
+
+  generateTextures(texParams) {
+    const img = generatePencilTextures(
+      texParams.number,
+      texParams.width,
+      texParams.height
+    );
+    const textures = regl.texture({
+      data: img.data,
+      width: texParams.width,
+      height: texParams.height * texParams.number,
+      mag: "linear",
+      min: "mipmap",
+      mipmap: true,
+    });
+    if (texParams.save) {
+      saveImage("textures.png", img);
+    }
+    this.setTextures(texParams.number, textures);
+  }
+
+  async loadMesh(url) {
+    const resp = await fetch(url);
+    const mesh = await resp.json();
+    const { attributes, elements } = loadMesh(mesh);
+    this.attributes = attributes;
+    this.elements = elements;
+  }
+}
 
-const draw = regl({
+Renderer.prototype.draw = regl({
   frag: fragmentShader,
   vert: vertexShader,
-  attributes,
-  elements,
+  attributes: {
+    position: regl.this("attributes.position"),
+    normal: regl.this("attributes.normal"),
+    indexInTriangle: regl.this("attributes.indexInTriangle"),
+    curvature: regl.this("attributes.curvature"),
+  },
+  elements: regl.this("elements"),
   uniforms: {
     eye: regl.prop("eye"),
-    view: (context, props) => {
+    view: (_, props) => {
       return mat4.lookAt([], props.eye, props.center, [0, 1, 0]);
     },
-    projection: ({ viewportWidth, viewportHeight }) =>
-      mat4.perspective(
-        [],
-        Math.PI / 4,
-        viewportWidth / viewportHeight,
-        0.01,
-        1000
-      ),
-    resolution: (c) => [
-      c.drawingBufferWidth,
-      c.drawingBufferHeight,
-      Math.min(c.drawingBufferWidth, c.drawingBufferHeight),
+    projection: ({ viewportWidth, viewportHeight }) => {
+      const ratio = viewportWidth / viewportHeight;
+      return mat4.perspective([], Math.PI / 4, ratio, 0.01, 1000);
+    },
+    resolution: ({ drawingBufferWidth, drawingBufferHeight }) => [
+      drawingBufferWidth,
+      drawingBufferHeight,
+      Math.min(drawingBufferWidth, drawingBufferHeight),
     ],
     pixelRatio: regl.context("pixelRatio"),
-    scale: () => params.scale, // How large the textures are scaled in world space
-    numTextures: () => 1.0 * numTextures,
-    pencilTextures: () => pencilTextures,
+    scale: regl.this("params.scale"), // How large the textures are scaled in world space
+    numTextures: regl.this("numTextures"),
+    pencilTextures: regl.this("pencilTextures"),
+  },
+  cull: {
+    enable: true,
   },
 });
 
-regl.frame(() => {
-  if (params.rotate) {
-    params.angle = (params.angle + params.speed / 100.0) % (2 * Math.PI);
-    pane.refresh();
-  }
-  const t = params.angle;
-  const radius = Math.pow(2, -params.zoom);
-  const height = params.height;
-
-  regl.clear({
-    color: [1, 1, 1, 1],
-  });
-  draw({
-    eye: [radius * Math.cos(t), height, radius * Math.sin(t)],
-    center: [0, height, 0],
-  });
-});
+new Renderer().start();

src/texture.js

@@ -1,26 +1,3 @@
-import * as base64 from "byte-base64";
-
-export class TextureData {
-  constructor(data, width, height, numTextures) {
-    if (typeof data === "string") {
-      this.data = new Uint8ClampedArray(base64.base64ToBytes(data));
-    } else {
-      this.data = data;
-    }
-    this.width = width;
-    this.height = height;
-    this.numTextures = numTextures;
-  }
-  toJSON() {
-    return {
-      numTextures: this.numTextures,
-      width: this.width,
-      height: this.height,
-      data: base64.bytesToBase64(this.data),
-    };
-  }
-}
-
 export function generatePencilTextures(numTextures, width, height) {
   const paper = new Paper(width, height);
   const textures = new Uint8ClampedArray(4 * width * height * numTextures);
@@ -36,24 +13,7 @@ export function generatePencilTextures(numTextures, width, height) {
     }
     paper.clear();
   }
-  return new TextureData(textures, width, height, numTextures);
-}
-
-//for debugging purposes
-export function displayImageData(textureData) {
-  const imgData = new ImageData(
-    textureData.data,
-    textureData.width,
-    textureData.height * textureData.numTextures
-  );
-  let canvas = document.createElement("canvas");
-  let ctx = canvas.getContext("2d");
-  ctx.canvas.width = imgData.width;
-  ctx.canvas.height = imgData.height;
-  ctx.putImageData(imgData, 0, 0);
-  let img = document.createElement("img");
-  img.src = canvas.toDataURL("image/png");
-  document.body.appendChild(img);
+  return new ImageData(textures, width, height * numTextures);
 }
 
 class Paper {

src/utils.js

@@ -1,8 +1,8 @@
-export function saveImage(imageData) {
+export function saveImage(filepath, imageData) {
   const canvas = document.createElement("canvas");
   document.body.appendChild(canvas);
-  canvas.width = this.width;
-  canvas.height = this.height;
+  canvas.width = imageData.width;
+  canvas.height = imageData.height;
   canvas.getContext("2d").putImageData(imageData, 0, 0);
   const dataUrl = canvas.toDataURL();
   canvas.remove();
@@ -13,3 +13,11 @@ export function saveImage(imageData) {
   textureLink.click();
   textureLink.remove();
 }
+
+export function loadImage(url) {
+  const img = document.createElement("img");
+  img.src = url;
+  return new Promise((resolve) => {
+    img.onload = () => resolve(img);
+  });
+}