@splinetool/runtime 1.12.98 → 2.0.1

package/build/snippets/hana-82e9eb82a79dead4/js-imports.js

@@ -0,0 +1,93 @@
+
+export async function loadImageFromBytes(bytes) {
+    const blob = new Blob([bytes])
+    const url = URL.createObjectURL(blob)
+    return createImageBitmap(blob).finally(() => {
+      URL.revokeObjectURL(url)
+    })
+}
+
+export async function loadImageFromUrl(url) {
+    return fetch(url)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`Failed to fetch image: ${response.statusText}`);
+            }
+            return response.blob();
+        })
+        .then(blob => createImageBitmap(blob));
+}
+
+// Video Imports
+function setupVideo(video) {
+    video.preload = "auto"; 
+    video.autoplay = true; //iOs hack to show the first frame
+    video.loop = true;
+    video.muted = true;
+    video.playsInline = true;
+    video.currentTime = 0.01;
+    video.load();
+
+    video.onloadeddata = () => {
+        video.muted = true;
+        // DOMException: The play() request was interrupted by a new load request.
+        // https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
+        const playPromise = video.play();
+
+        if (playPromise !== undefined) {
+            playPromise
+                .then((_) => {
+                    // Automatic playback started! Do nothing all good!
+                })
+                .catch(() => {
+                    // for some reason the video could not be played (The play() request was interrupted by a new load request.)
+                    // so let's try to play it again
+                    video.play();
+                }).finally(() => {
+                    video.pause();
+                });
+        }
+    };
+
+    let copyVideo = false;
+    video.addEventListener("playing", function() {
+        copyVideo = true;
+    }, true);
+
+    return new Promise((resolve) => {
+        const checkVideo = () => {
+            if (copyVideo) {
+                resolve(video);
+            } else {
+                setTimeout(checkVideo, 10);
+            }
+        };
+        checkVideo();
+    });
+} 
+
+
+export async function loadVideoFromBytes(bytes) {
+    const blob = new Blob([bytes])
+    const video = document.createElement('video');
+    video.src = URL.createObjectURL(blob);
+    return setupVideo(video);
+}
+
+
+export async function loadVideoFromUrl(url) {
+    return fetch(url)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`Failed to fetch video: ${response.statusText}`);
+            }
+            return response.blob();
+        })
+        .then(async blob => {
+            const video = document.createElement('video');
+            video.src = URL.createObjectURL(blob);
+            return setupVideo(video);
+        });
+}
+
+

package/package.json

@@ -1,91 +1,106 @@
 {
-  "name": "@splinetool/runtime",
-  "version": "1.12.98",
-  "description": "Spline is a collaborative design platform for creating production-ready interactive experiences in multiple dimensions. © 2025 Spline, Inc.",
-  "keywords": [
-    "spline",
-    "3D",
-    "webgl",
-    "shader",
-    "interactive",
-    "collaborative"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/splinetool/spline.git",
-    "directory": "packages/runtime"
-  },
-  "type": "module",
-  "main": "./build/runtime.js",
-  "module": "./build/runtime.js",
-  "types": "./runtime.d.ts",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org",
-    "access": "public"
-  },
-  "react-native": "./build/runtime.js",
-  "exports": {
-    ".": {
-      "types": "./runtime.d.ts",
-      "import": "./build/runtime.js",
-      "require": "./build/runtime.cjs"
-    },
-    "./build/runtime.js": {
-      "types": "./runtime.d.ts",
-      "import": "./build/runtime.js",
-      "require": "./build/runtime.cjs"
-    }
-  },
-  "files": [
-    "build",
-    "runtime.d.ts"
-  ],
-  "scripts": {
-    "build": "cross-env NODE_ENV=production node --experimental-json-modules ./esbuild.mjs",
-    "test-server-side": "cross-env NODE_ENV=test node --experimental-json-modules ./esbuild.mjs && node ./build/runtime.cjs && echo '✅ Pass'",
-    "lint": "eslint src/ --max-warnings=0 --cache",
-    "format": "prettier src/ --write",
-    "typecheck": "tsc",
-    "prepublishOnly": "node ../../scripts/verify-publish-target.mjs",
-    "analyze": "cross-env GENERATE_SOURCEMAP=true npm run build && cross-env NODE_OPTIONS=--no-experimental-fetch source-map-explorer 'build/runtime.js' --no-border-checks",
-    "example": "cross-env IS_PROD=true npm run build && vite"
-  },
-  "dependencies": {
-    "on-change": "4.0.0",
-    "semver-compare": "1.0.0"
-  },
-  "devDependencies": {
-    "@types/semver-compare": "1.0.1",
-    "browserslist": "4.16.7",
-    "browserslist-to-esbuild": "1.1.1",
-    "cross-env": "7.0.3",
-    "esbuild": "0.15.16",
-    "esbuild-plugin-glslify": "1.0.1",
-    "eslint": "8.46.0",
-    "glslify-import": "3.1.0",
-    "jest": "30.2.0",
-    "lodash-es": "4.17.21",
-    "prettier": "2.6.2",
-    "source-map-explorer": "2.5.2",
-    "spe": "*",
-    "spe2d": "*",
-    "three": "0.149.0",
-    "typescript": "^5.2.2",
-    "vite": "5.4.10"
-  },
-  "browserslist": {
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ],
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all",
-      "not IE <= 11",
-      "Safari >= 13.0",
-      "not Android <= 4.4"
-    ]
-  }
+	"name": "@splinetool/runtime",
+	"version": "2.0.1",
+	"description": "Spline is a collaborative design platform for creating production-ready interactive experiences in multiple dimensions. © 2025 Spline, Inc.",
+	"keywords": [
+		"spline",
+		"3D",
+		"webgl",
+		"shader",
+		"interactive",
+		"collaborative"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/splinetool/spline.git",
+		"directory": "packages/runtime"
+	},
+	"type": "module",
+	"main": "./build/runtime.js",
+	"module": "./build/runtime.js",
+	"types": "./runtime.d.ts",
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org",
+		"access": "public"
+	},
+	"react-native": "./build/runtime.js",
+	"exports": {
+		".": {
+			"types": "./runtime.d.ts",
+			"import": "./build/runtime.js",
+			"require": "./build/runtime.cjs"
+		},
+		"./build/runtime.js": {
+			"types": "./runtime.d.ts",
+			"import": "./build/runtime.js",
+			"require": "./build/runtime.cjs"
+		},
+		"./build/runtime.standalone.js": "./build/runtime.standalone.js",
+		"./build/runtime.standalone.webgl.js": "./build/runtime.standalone.webgl.js",
+		"./build/runtime.standalone.webgpu.js": "./build/runtime.standalone.webgpu.js",
+		"./build/runtime.standalone.webgpu.min.js": "./build/runtime.standalone.webgpu.min.js",
+		"./build/runtime.standalone.webgpu.micro.js": "./build/runtime.standalone.webgpu.micro.js",
+		"./build/physics.js": "./build/physics.js",
+		"./build/physics.wasm": "./build/physics.wasm"
+	},
+	"files": [
+		"build",
+		"runtime.d.ts"
+	],
+	"scripts": {
+		"build": "cross-env NODE_ENV=production node --experimental-json-modules ./esbuild.mjs",
+		"test-server-side": "cross-env NODE_ENV=test node --experimental-json-modules ./esbuild.mjs && node ./build/runtime.cjs && echo '✅ Pass'",
+		"lint": "oxlint src/ --max-warnings=0",
+		"format": "oxfmt src/",
+		"format:check": "oxfmt --check src/",
+		"check-types": "tsc --noEmit",
+		"prepublishOnly": "node ../../scripts/verify-publish-target.mjs",
+		"analyze": "cross-env GENERATE_SOURCEMAP=true npm run build && cross-env NODE_OPTIONS=--no-experimental-fetch source-map-explorer 'build/runtime.js' --no-border-checks",
+		"example": "cross-env IS_PROD=true npm run build && vite",
+		"upload-cdn": "node scripts/upload-runtime-cdn.mjs"
+	},
+	"dependencies": {
+		"on-change": "4.0.0",
+		"semver-compare": "1.0.0"
+	},
+	"devDependencies": {
+		"@aws-sdk/client-s3": "3.1095.0",
+		"@dimforge/rapier3d": "0.19.3",
+		"@dimforge/rapier3d-compat": "0.19.3",
+		"@types/semver-compare": "1.0.1",
+		"@types/three": "0.185.0",
+		"@vercel/blob": "2.4.0",
+		"acorn": "8.17.0",
+		"acorn-walk": "8.3.5",
+		"browserslist": "4.16.7",
+		"browserslist-to-esbuild": "1.1.1",
+		"cross-env": "7.0.3",
+		"esbuild": "0.15.16",
+		"esbuild-plugin-glslify": "1.0.1",
+		"glslify-import": "3.1.0",
+		"jest": "30.2.0",
+		"source-map-explorer": "2.5.2",
+		"spe": "*",
+		"spe2d": "*",
+		"terser": "5.48.0",
+		"three": "0.185.0",
+		"typescript": "^5.2.2",
+		"vite": "6.4.3",
+		"vite-plugin-static-copy": "4.1.1"
+	},
+	"browserslist": {
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		],
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all",
+			"not IE <= 11",
+			"Safari >= 13.0",
+			"not Android <= 4.4"
+		]
+	}
 }

package/runtime.d.ts

@@ -66,6 +66,52 @@ declare module '@splinetool/runtime' {
 		seek: (ms: number) => TransitionFactory;
 	};
 
+	/**
+	 * Structural stand-in for THREE.Material — pass an instance from YOUR
+	 * three install (this package never re-exports three, and the copy it
+	 * bundles is a different module instance from yours), or one built by
+	 * `createCustomMaterial` against the runtime's bundled three.
+	 */
+	export interface ThreeMaterialLike {
+		readonly isMaterial: true;
+	}
+
+	/**
+	 * The curated namespace `createCustomMaterial` hands its factory: the runtime's
+	 * BUNDLED three instance — the only one TSL node graphs can compile in.
+	 * Members: `tsl` (the full three/tsl function object — Fn, uniform, vec3,
+	 * texture, wgslFn, positionLocal, …), the NodeMaterial classes
+	 * (NodeMaterial, MeshBasicNodeMaterial, MeshStandardNodeMaterial,
+	 * MeshPhysicalNodeMaterial, MeshPhongNodeMaterial, MeshLambertNodeMaterial,
+	 * MeshToonNodeMaterial, MeshMatcapNodeMaterial, MeshNormalNodeMaterial,
+	 * SpriteNodeMaterial, PointsNodeMaterial, LineBasicNodeMaterial,
+	 * LineDashedNodeMaterial), and core essentials (Color, Vector2/3/4,
+	 * Matrix3/4, Texture, CanvasTexture, DataTexture, VideoTexture, side +
+	 * blending + wrapping + filter + color-space constants).
+	 *
+	 * Typed opaquely to keep this file self-contained. With @types/three
+	 * installed you can cast for full types — the values really do come from
+	 * a separate module instance, matching this runtime's three minor (0.185):
+	 * ```ts
+	 * const t = three as unknown as typeof import('three/webgpu') & {
+	 *   tsl: typeof import('three/tsl');
+	 * };
+	 * ```
+	 */
+	export interface SplineThreeNamespace {
+		readonly tsl: Record<string, any>;
+		readonly NodeMaterial: new (...args: any[]) => ThreeMaterialLike;
+		readonly MeshBasicNodeMaterial: new (...args: any[]) => ThreeMaterialLike;
+		readonly MeshStandardNodeMaterial: new (
+			...args: any[]
+		) => ThreeMaterialLike;
+		readonly MeshPhysicalNodeMaterial: new (
+			...args: any[]
+		) => ThreeMaterialLike;
+		readonly Color: new (...args: any[]) => any;
+		readonly [key: string]: any;
+	}
+
 	export type SPEObject = {
 		name: string;
 		uuid: string;
@@ -74,7 +120,13 @@ declare module '@splinetool/runtime' {
 		position: { x: number; y: number; z: number };
 		rotation: { x: number; y: number; z: number };
 		scale: { x: number; y: number; z: number };
-		material?: Material;
+		/**
+		 * For objects created with a three.js material instance
+		 * (createObject's `material`), this is that instance (behind a
+		 * transparent change-tracking proxy, so edits through it re-render
+		 * automatically); otherwise a snapshot of the Spline layered material.
+		 */
+		material?: Material | ThreeMaterialLike;
 
 		/**
 		 * Sets the color of the object's material if it is a mesh and if it has a color layer.
@@ -115,6 +167,93 @@ declare module '@splinetool/runtime' {
 		transition: (params: TransitionParams) => TransitionFactory;
 	};
 
+	export type Vec3Like =
+		| [number, number, number]
+		| { x?: number; y?: number; z?: number };
+
+	export type CreateMaterialOptions = {
+		/** A css color for the material's color layer. */
+		color?: string;
+		roughness?: number;
+		metalness?: number;
+		reflectivity?: number;
+		/** Opacity of the color layer (0–1). */
+		alpha?: number;
+	};
+
+	export type CreateObjectOptions = {
+		/** Defaults to the type's friendly name, deduped with a numeric suffix. */
+		name?: string;
+		/** Name or uuid of the parent object (or its SPEObject). Defaults to the active page. */
+		parent?: string | SPEObject;
+		/** World units. Defaults to [0, 0, 0]. */
+		position?: Vec3Like;
+		/**
+		 * Degrees (Spline convention). Note that the returned proxy's
+		 * `.rotation` is a three.js Euler in radians.
+		 */
+		rotation?: Vec3Like;
+		/** A number applies uniformly. Defaults to [1, 1, 1]. */
+		scale?: Vec3Like | number;
+		visible?: boolean;
+		castShadow?: boolean;
+		receiveShadow?: boolean;
+		/** Shorthand for material: { color } — a css color string. */
+		color?: string;
+		/**
+		 * Either a shared material name/id from the document (the material is
+		 * then genuinely shared — editing it restyles every object using it),
+		 * a css color string, inline material properties, a **three.js
+		 * material instance** from your own three install, or a
+		 * `(three) => material` **factory** receiving the bundled namespace
+		 * (the inline form of {@link Application.createCustomMaterial}, same
+		 * as setMaterial accepts).
+		 *
+		 * Three.js material instances are supported on the `webgpu` backend
+		 * only (the default wherever WebGPU is available; the call throws on
+		 * the classic WebGL pipeline). Accepted: **built-in materials** from
+		 * your own three install (MeshStandardMaterial, MeshPhysicalMaterial,
+		 * MeshBasicMaterial, MeshNormalMaterial, … — converted by three's node
+		 * library) and **TSL shader materials built with
+		 * {@link Application.createCustomMaterial}**. GLSL ShaderMaterials
+		 * throw, and so do TSL NodeMaterials built from your own three/webgpu
+		 * import (the runtime bundles its own copy of three, and a node graph
+		 * from a separate module instance cannot compile in it — build it via
+		 * createCustomMaterial instead). Scene lights and shadows apply; Spline's
+		 * environment IBL does not (set your own `envMap`). Property edits are
+		 * live; structural changes (new maps, flag flips) need
+		 * `material.needsUpdate = true`. The runtime never disposes your
+		 * material — you own its lifecycle.
+		 */
+		material?:
+			| string
+			| CreateMaterialOptions
+			| ThreeMaterialLike
+			| ((three: SplineThreeNamespace) => ThreeMaterialLike);
+	} & {
+		/**
+		 * Any other key is a type-specific parameter: geometry inputs for
+		 * shapes (width, height, depth, cornerRadius, spikes, …), text
+		 * properties for Text (text, fontSize, font, …), light properties for
+		 * lights (intensity, distance, …).
+		 */
+		[parameter: string]: unknown;
+	};
+
+	export type CloneObjectOptions = {
+		/** Defaults to '<source name> Copy', deduped with a numeric suffix. */
+		name?: string;
+		/** Name or uuid of the new parent (or its SPEObject). Defaults to the source's parent. */
+		parent?: string | SPEObject;
+		/** World units. */
+		position?: Vec3Like;
+		/** Degrees (Spline convention). */
+		rotation?: Vec3Like;
+		/** A number applies uniformly. */
+		scale?: Vec3Like | number;
+		visible?: boolean;
+	};
+
 	export class Application {
 		_controls: any;
 		renderOnDemand: boolean;
@@ -143,10 +282,54 @@ declare module '@splinetool/runtime' {
 				 * If not set the runtime will load the WASM files from the CDN.
 				 */
 				wasmPath?: string;
+
+				/**
+				 * Rendering backend. When not set, the runtime auto-selects:
+				 * `webgpu` (the node-material pipeline on three's
+				 * WebGPURenderer, loaded as a separate chunk, with the
+				 * render-bundle scene pass on) wherever the browser grants a
+				 * WebGPU adapter, `webgl` everywhere else — and any WebGPU init
+				 * failure still falls back to `webgl`. Pass `webgl` to force
+				 * the classic pipeline, or `webgpu` to force the node pipeline.
+				 * When the option is not set, the `?renderer=webgpu|webgl2|webgl`
+				 * URL param overrides the auto-selection (diagnostics); an
+				 * explicit option always wins over the URL. The server-side CJS
+				 * build compiles the WebGPU branch out and always uses `webgl`;
+				 * the single-file standalones ship per export setting —
+				 * `runtime.standalone.js` carries both pipelines,
+				 * `runtime.standalone.webgpu.js` / `.webgl.js` carry one and
+				 * show a clear notice when asked for the other. All Spline
+				 * instances on a page must use the same backend.
+				 */
+				renderer?: 'webgl' | 'webgpu';
+
+				/**
+				 * How the scene's HTML content (authored in the editor's HTML
+				 * frame, shipped inside the .splinecode) is presented over
+				 * the canvas.
+				 * - `sandbox` (default): a sandboxed iframe with an opaque
+				 *   origin — the content's scripts cannot touch the host
+				 *   page. The safe default for pages that embed scenes they
+				 *   didn't author.
+				 * - `inline`: the content is grafted into the host document
+				 *   and its scripts run as ordinary page scripts with
+				 *   `window.spline` bound directly to this Application — no
+				 *   postMessage frame of latency. Only for pages whose
+				 *   author IS the scene author (Spline's own exports pass
+				 *   this).
+				 * - `none`: don't present the HTML content at all.
+				 */
+				htmlContentMode?: 'sandbox' | 'inline' | 'none';
 			}
 		);
 		/**
 		 * Loads an exported Spline scene
+		 *
+		 * If the scene carries HTML content (authored in the editor's HTML
+		 * frame), the runtime automatically layers it over the canvas in a
+		 * sandboxed iframe wired to this Application through the injected
+		 * `spline` bridge — the same HTML + 3D composition as the editor
+		 * preview. It is removed on dispose().
 		 * @param path the url pointing toward a .splinecode file
 		 * @param variables a key:value object describing initial values of the variables in the file
 		 */
@@ -323,6 +506,95 @@ declare module '@splinetool/runtime' {
 			objectNameOrId: string,
 			urlOrBuffer: string | Uint8Array
 		): void {}
+
+		/**
+		 * Creates a new object in the loaded scene and returns its SPEObject
+		 * proxy. The object lives only in this runtime session — it is never
+		 * persisted back to the Spline file.
+		 *
+		 * ```js
+		 * const cube = await spline.createObject('Cube', {
+		 *   position: [0, 100, 0],
+		 *   width: 150,
+		 *   material: { color: '#ff3b30', roughness: 0.4 },
+		 * });
+		 * ```
+		 * @param type A shape name ('Cube', 'Sphere', 'Torus', …, 'Text' — the
+		 * 'Geometry' suffix is optional), 'CustomMesh' (raw vertex geometry —
+		 * pass `vertices` as a flat [x,y,z, …] number[] or Float32Array, plus
+		 * optional `indices`/`normals`/`uvs`; winding slips are safety-netted:
+		 * inverted closed solids are flipped, open surfaces render
+		 * double-sided), 'Group', or a light type ('PointLight', 'SpotLight',
+		 * 'DirectionalLight').
+		 * @param options Placement, material, and type-specific parameters.
+		 */
+		createObject(
+			type: string,
+			options?: CreateObjectOptions
+		): Promise<SPEObject>;
+
+		/**
+		 * Builds a custom three.js material — including TSL shader materials —
+		 * against the runtime's BUNDLED three instance (the only one TSL node
+		 * graphs can compile in; materials built from your own three/webgpu
+		 * import cannot work — see {@link SplineThreeNamespace}).
+		 *
+		 * ```js
+		 * const glow = await spline.createCustomMaterial((three) => {
+		 *   const m = new three.MeshStandardNodeMaterial();
+		 *   m.colorNode = three.tsl.vec3(1, 0, 1);
+		 *   return m;
+		 * });
+		 * await spline.createObject('Sphere', { material: glow });
+		 * ```
+		 *
+		 * The returned material is a plain reusable instance: share it across
+		 * any number of createObject calls, tweak its properties/uniforms live,
+		 * and dispose it yourself (the runtime never disposes it). WebGPU
+		 * backend only — throws on the classic WebGL pipeline.
+		 */
+		createCustomMaterial(
+			factory: (three: SplineThreeNamespace) => ThreeMaterialLike
+		): Promise<ThreeMaterialLike>;
+
+		/**
+		 * Replaces an EXISTING mesh's material with a custom three.js
+		 * material — a built-in instance from your own three install, a
+		 * material from {@link Application.createCustomMaterial}, or a
+		 * factory receiving the bundled namespace. WebGPU backend only.
+		 *
+		 * The replacement is pinned (document-driven material updates no
+		 * longer touch the mesh) and consumer-owned (never disposed by the
+		 * runtime; no unset). Runtime-only, never persisted. Resolves to the
+		 * applied material.
+		 */
+		setMaterial(
+			target: string | SPEObject,
+			materialOrFactory:
+				| ThreeMaterialLike
+				| ((three: SplineThreeNamespace) => ThreeMaterialLike)
+		): Promise<ThreeMaterialLike>;
+
+		/**
+		 * Deep-clones an existing object (any type, including its subtree)
+		 * with fresh ids and returns the clone's SPEObject proxy. This also
+		 * covers types createObject can't build (imported models, vectors,
+		 * booleans, …). By default the clone lands next to its source under
+		 * the same parent, named '<source> Copy'.
+		 * @param source The name or uuid of the object to clone, or its SPEObject.
+		 * @param options Placement overrides and name.
+		 */
+		cloneObject(
+			source: string | SPEObject,
+			options?: CloneObjectOptions
+		): SPEObject;
+
+		/**
+		 * Removes an object (and its whole subtree) from the scene.
+		 * @param target The name or uuid of the object, or its SPEObject.
+		 * @returns true when an object was removed, false when none matched.
+		 */
+		removeObject(target: string | SPEObject): boolean;
 	}
 
 	/* ================== MATERIALS ================== */
@@ -335,7 +607,21 @@ declare module '@splinetool/runtime' {
 		color: string;
 	};
 
-	/* ---------- FRESNEL LAYER ---------- */
+	/* ---------- VERTEX COLOR LAYER ---------- */
+	export type VertexColorLayer = {
+		readonly type: 'vertexColor';
+		alpha: number;
+	};
+
+	/* ---------- CAVITY LAYER ---------- */
+export type CavityLayer = {
+	readonly type: 'cavity';
+	alpha: number;
+	ridge: number;
+	valley: number;
+};
+
+/* ---------- FRESNEL LAYER ---------- */
 	export type FresnelLayer = {
 		readonly type: 'fresnel';
 		alpha: number;
@@ -345,6 +631,17 @@ declare module '@splinetool/runtime' {
 		factor: number;
 	};
 
+	/* ---------- DUST LAYER ---------- */
+	export type DustLayer = {
+		readonly type: 'dust';
+		alpha: number;
+		color: string;
+		coverage: number;
+		softness: number;
+		noiseStrength: number;
+		noiseScale: number;
+	};
+
 	/* ---------- RAINBOW LAYER ---------- */
 	export type RainbowLayer = {
 		readonly type: 'rainbow';
@@ -684,7 +981,9 @@ declare module '@splinetool/runtime' {
 
 	export type Layer =
 		| ColorLayer
+		| VertexColorLayer
 		| FresnelLayer
+		| DustLayer
 		| RainbowLayer
 		| NormalLayer
 		| GradientLayer