upd: Dispose material preview renderer

- Moved material preview image generator to utils

src/pbr_preview/src/lib/actions/materialTexture.ts

@@ -21,6 +21,7 @@ const colorDataUrl = (color: THREE.Color, src?: HTMLCanvasElement) => {
 
   return canvas.toDataURL();
 };
+import { colorDataUrl, generatePreviewImage } from "../util";
 
 setups.push(() => {
   registry.createMaterialTexture = new Action("create_material_texture", {

src/pbr_preview/src/lib/tools/materialBrush.ts

@@ -4,48 +4,8 @@ import {
   debounceApplyPbrMaterial,
 } from "../applyPbrMaterial";
 import { MaterialBrush } from "../MaterialBrush";
-import { vue as Vue, three as THREE } from "../../deps";
-import { getSelectedTexture } from "../util";
-
-const generatePreviewImage = (settings: object) => {
-  const renderer = new THREE.WebGLRenderer({
-    alpha: true,
-    antialias: true,
-  });
-  const scene = new THREE.Scene();
-  const camera = new THREE.PerspectiveCamera(75, 96 / 96, 0.1, 1000);
-
-  const ambientLight = new THREE.AmbientLight(0xffffff, 0.75);
-  scene.add(ambientLight);
-
-  const pointLight = new THREE.PointLight(0xffffff, 1, 100);
-  pointLight.position.set(5, 5, 5);
-  scene.add(pointLight);
-  const geometry = new THREE.SphereGeometry(1, 32, 32);
-
-  const material = new THREE.MeshStandardMaterial({
-    color: settings.albedo,
-    metalness: settings.metalness ?? 0,
-    roughness: settings.roughness ?? 1,
-    emissive: settings.emissive,
-    bumpScale: settings.height ?? 0,
-    envMap: PreviewScene.active?.cubemap ?? null,
-    envMapIntensity: 0.5,
-  });
-
-  const sphere = new THREE.Mesh(geometry, material);
-  scene.add(sphere);
-
-  camera.position.x = 0;
-  camera.position.y = 0;
-  camera.position.z = 2;
-
-  renderer.setSize(96, 96);
-
-  renderer.render(scene, camera);
-
-  return renderer.domElement.toDataURL();
-};
+import { vue as Vue } from "../../deps";
+import { getSelectedTexture, generatePreviewImage } from "../util";
 
 const STORAGE_NAMESPACE = "materialBrushPresets";
 

src/pbr_preview/src/lib/util.ts

@@ -1,3 +1,4 @@
+import { three as THREE } from "../deps";
 export function getSelectedTexture(): Texture | null {
   if (Texture.selected) {
     return Texture.selected;
@@ -87,3 +88,79 @@ export function debounce(func: Function, wait: number) {
     timeout = setTimeout(later, wait);
   };
 }
+
+export function generatePreviewImage(
+  settings:
+    | THREE.MeshStandardMaterial
+    | (THREE.MeshStandardMaterialParameters & {
+        albedo: THREE.ColorRepresentation;
+        emissive: THREE.ColorRepresentation;
+        height?: number;
+      })
+) {
+  const renderer = new THREE.WebGLRenderer({
+    alpha: true,
+    antialias: true,
+  });
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(75, 96 / 96, 0.1, 1000);
+
+  const ambientLight = new THREE.AmbientLight(0xffffff, 0.75);
+  scene.add(ambientLight);
+
+  const pointLight = new THREE.PointLight(0xffffff, 1, 100);
+  pointLight.position.set(5, 5, 5);
+  scene.add(pointLight);
+  const geometry = new THREE.SphereGeometry(1, 32, 32);
+
+  const material =
+    settings instanceof THREE.MeshStandardMaterial &&
+    settings.isMeshStandardMaterial
+      ? settings
+      : new THREE.MeshStandardMaterial({
+          color: settings.albedo,
+          metalness: settings.metalness ?? 0,
+          roughness: settings.roughness ?? 1,
+          emissive: settings.emissive,
+          bumpScale: settings.height ?? 0,
+          envMap: PreviewScene.active?.cubemap ?? null,
+          envMapIntensity: 0.5,
+        });
+
+  const sphere = new THREE.Mesh(geometry, material);
+  scene.add(sphere);
+
+  camera.position.x = 0;
+  camera.position.y = 0;
+  camera.position.z = 2;
+
+  renderer.setSize(96, 96);
+
+  renderer.render(scene, camera);
+
+  const data = renderer.domElement.toDataURL();
+
+  renderer.dispose();
+
+  return data;
+}
+
+export function colorDataUrl(color: THREE.Color, src?: HTMLCanvasElement) {
+  const canvas = src ?? document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+
+  if (!ctx) {
+    return null;
+  }
+
+  const width = Math.max(Project ? Project.texture_width : 16, 16);
+  const height = Math.max(Project ? Project.texture_height : 16, 16);
+
+  canvas.width = width;
+  canvas.height = height;
+
+  ctx.fillStyle = `rgb(${color.r * 255}, ${color.g * 255}, ${color.b * 255})`;
+  ctx.fillRect(0, 0, width, height);
+
+  return canvas.toDataURL();
+}