Allow Skybox to take a Color (#57)

This PR Adds the ability to set the color of the skybox using the URL
parameters.

- Now you can pass a color's hexadecimal number (without the #) in the
  skybox parameter, and that will set the skybox to that color.

studio-web/src/lib/studio.element.ts

@@ -2,7 +2,6 @@ import { inject } from "@storyteller/framework";
 import * as studio from "@storyteller/studio";
 import {
 	type InitOptions,
-	type SkyboxId,
 	StudioMode,
 	ViewportSize,
 } from "@storyteller/studio";
@@ -21,7 +20,7 @@ export class StudioElement extends LitElement {
 	@property() mixamoPath?: string;
 	@property() sceneImport?: string;
 	@property() storytellerScene?: string;
-	@property() skyboxId?: SkyboxId;
+	@property() skyboxId?: string;
 	@property({ type: Number }) mode?: StudioMode;
 
 	@inject(CANVAS_PROVIDER)

studio-web/src/lib/url-params.ts

@@ -1,4 +1,4 @@
-import { type SkyboxId, StudioMode } from "@storyteller/studio";
+import { StudioMode } from "@storyteller/studio";
 import { match } from "@storyteller/utility";
 
 export class StudioURLParams {
@@ -12,9 +12,7 @@ export class StudioURLParams {
 	get mixamo() { return this.#nativeParams.get("mixamo") ?? undefined; }
 	get sceneImport() { return this.#nativeParams.get("sceneImport") ?? undefined; }
 	get scene() { return this.#nativeParams.get("scene") ?? undefined; }
-	get skybox() {
-		return this.#nativeParams.get("skybox") as SkyboxId ?? undefined;
-	}
+	get skybox() { return this.#nativeParams.get("skybox") ?? undefined; }
 	get mode(): StudioMode {
 		return match(this.#nativeParams.get("mode"), {
 			"studio": () => StudioMode.Editor,

studio/src/lib.rs

@@ -136,6 +136,8 @@ pub enum InitAsset {
     /// Initialize the application by retargeting a Mixamo animation onto the
     /// bundled `Mannequin.gltf` model.
     MixamoAnim(String),
+    /// Initialize the application by loading an arbitary model given an identifier
+    MediaAsset(String),
 }
 
 pub fn start(init: InitParams, mode: StudioMode, window_config: Option<Window>) -> App {
@@ -231,5 +233,6 @@ fn init_from_asset(app: &mut App, asset: InitAsset, skybox_id: String) {
                 ew.send(ImportSceneEvent(scene.clone()));
             });
         }
+        InitAsset::MediaAsset(_) => todo!(),
     }
 }

studio/src/skybox.rs

@@ -39,12 +39,21 @@ struct SkyboxAssets {
 }
 
 fn load_skybox(mut cmd: Commands, assets: Res<AssetServer>, id: Res<SkyboxId>) {
-    let paths = SkyboxPaths::new(&**id);
-    cmd.insert_resource(SkyboxAssets {
-        cubemap: assets.load(paths.cubemap),
-        env_diffuse: assets.load(paths.env_diffuse),
-        env_specular: assets.load(paths.env_specular),
-    });
+    let id = &**id;
+    if let Ok(color) = Color::hex(id) {
+        cmd.insert_resource(ClearColor(color));
+        cmd.insert_resource(AmbientLight {
+            color,
+            brightness: 1.0,
+        })
+    } else {
+        let paths = SkyboxPaths::new(id);
+        cmd.insert_resource(SkyboxAssets {
+            cubemap: assets.load(paths.cubemap),
+            env_diffuse: assets.load(paths.env_diffuse),
+            env_specular: assets.load(paths.env_specular),
+        });
+    }
 }
 
 fn skybox_assets_loaded(

studio/src/wasm/init.rs

@@ -6,19 +6,10 @@ use crate::{InitAsset, InitParams, StudioMode, ViewportSize};
 
 #[wasm_bindgen(typescript_custom_section)]
 const WASM_ENTRY_POINTS: &str = r#"
-export type SkyboxId
-    = "gum_trees_4k"
-    | "kloofenfal_28d_misty_4k"
-    | "meadow_4k"
-    | "promenade_de_vidy_4k"
-    | "scythian_tombs_4k"
-    | "test_scene"
-    ;
-
 export interface InitOptions {
     mode: StudioMode;
     /** Required for all entry-points except `initFromStorytellerScene()` */
-    skyboxId?: SkyboxId;
+    skyboxId?: string;
     canvasSelector: string;
     canvasAlt: string;
     viewportSize: ViewportSize;