feat: add examples and example select form

clovers-front/src/App.tsx

@@ -19,7 +19,7 @@ import { ActionForm } from "./Forms/Actions";
 import { Preview } from "./Preview";
 import { REACT_APP_BACKEND, WS_ENDPOINT } from "./config";
 import useWebSocket from "react-use-websocket";
-import { collectFile, handleImport, handleExport } from "./io";
+import { collectFile, handleImport, handleExport, loadExample } from "./io";
 import { RenderResults } from "./RenderResults";
 import { RenderQueue } from "./RenderQueue";
 import {
@@ -209,6 +209,14 @@ function App() {
                 });
                 handleExport(scene_file);
               }}
+              handleExample={() =>
+                loadExample({
+                  setMessage,
+                  setCameraOptions,
+                  setSceneObjects,
+                  setMaterials,
+                })
+              }
             />
             <RenderOptionsForm
               object={renderOptions}

clovers-front/src/Examples/Example.tsx

@@ -0,0 +1,49 @@
+import { ReactElement, useState } from "react";
+import { Button } from "../Inputs/Button";
+import { exampleNames } from "../io";
+
+export const ExampleSelect = ({
+  id,
+  selected,
+  setSelected,
+}: {
+  id: string;
+  selected: string;
+  setSelected: React.Dispatch<React.SetStateAction<string>>;
+}): ReactElement => {
+  const options = exampleNames.map((name, index) => (
+    <option value={name} key={index}>
+      {name}
+    </option>
+  ));
+  return (
+    <select
+      id={id}
+      value={selected}
+      onChange={(e) => setSelected(e.target.value)}
+    >
+      {options}
+    </select>
+  );
+};
+
+export const ExampleForm = ({ handleExample }: { handleExample: any }) => {
+  const [selectedExample, setSelectedExample] = useState("cornell");
+
+  return (
+    <>
+      <label htmlFor="exampleSelect">select example:</label>
+      <ExampleSelect
+        id={"exampleSelect"}
+        selected={selectedExample}
+        setSelected={setSelectedExample}
+      />
+      <label htmlFor="loadExampleButton">load example:</label>
+      <Button
+        id="loadExampleButton"
+        handleClick={() => handleExample()}
+        text="load"
+      />
+    </>
+  );
+};

clovers-front/src/Examples/cornell.json

@@ -0,0 +1 @@
+{"time_0":0,"time_1":1,"camera":{"look_from":[278,278,-800],"look_at":[278,278,0],"up":[0,1,0],"vertical_fov":40,"aperture":0,"focus_distance":10},"background_color":[0,0,0],"objects":[{"kind":"Quad","q":[555,0,0],"u":[0,0,555],"v":[0,555,0],"material":"green wall","comment":"green wall, left"},{"kind":"Quad","q":[0,0,555],"u":[0,0,-555],"v":[0,555,0],"material":"red wall","comment":"red wall, right"},{"kind":"Quad","q":[0,0,0],"u":[555,0,0],"v":[0,0,555],"material":"grey wall","comment":"floor"},{"kind":"Quad","q":[0,555,0],"u":[555,0,0],"v":[0,0,555],"material":"grey wall","comment":"ceiling"},{"kind":"Quad","q":[0,0,555],"u":[555,0,0],"v":[0,555,0],"material":"grey wall","comment":"back wall"},{"kind":"Quad","q":[113,554,127],"u":[330,0,0],"v":[0,0,305],"material":"lamp","comment":"big ceiling light","priority":true},{"kind":"Translate","offset":[265,0,295],"comment":"moved tall box","object":{"kind":"RotateY","angle":15,"comment":"rotated tall box","object":{"kind":"Boxy","corner_0":[0,0,0],"corner_1":[165,330,165],"material":"grey wall","comment":"tall box"}}},{"kind":"Sphere","center":[190,90,190],"radius":90,"material":"Dense flint glass SF10","comment":"glass sphere","priority":true}],"materials":[{"name":"Dense flint glass SF10","kind":"Dispersive","cauchy_a":1.728,"cauchy_b":0.01342},{"name":"lamp","kind":"DiffuseLight","emit":{"kind":"SolidColor","color":[7,7,7]}},{"name":"green wall","kind":"Lambertian","albedo":{"kind":"SolidColor","color":[0.12,0.45,0.15]}},{"name":"red wall","kind":"Lambertian","albedo":{"kind":"SolidColor","color":[0.65,0.05,0.05]}},{"name":"grey wall","kind":"Lambertian","albedo":{"kind":"SolidColor","color":[0.73,0.73,0.73]}}]}

clovers-front/src/Examples/dispersive.json

@@ -0,0 +1 @@
+{ "time_0": 0, "time_1": 1, "camera": { "look_from": [-600, 310, -400], "look_at": [0, 310, 0], "up": [0, 1, 0], "vertical_fov": 35, "aperture": 0, "focus_distance": 10 }, "background_color": [0, 0, 0], "objects": [ { "kind": "Quad", "q": [555, 0, 0], "u": [0, 0, 555], "v": [0, 555, 0], "material": "grey wall", "comment": "wall, left" }, { "kind": "Quad", "q": [113, 750, 127], "u": [330, 0, 0], "v": [0, 0, 305], "material": "big lamp", "comment": "big ceiling light", "priority": true }, { "kind": "Quad", "q": [277, 554, 140], "u": [10, 0, 0], "v": [0, 0, 278], "material": "narrow lamp", "comment": "narrow ceiling light", "priority": true }, { "kind": "STL", "center": [300, 350, 278], "scale": 20, "rotation": [0, 0, -30], "path": "stl/prism.stl", "material": "Dense flint glass SF10", "comment": "triangular prism", "priority": true } ], "materials": [ { "name": "dielectric glass", "kind": "Dielectric", "refractive_index": 1.5, "color": [1, 1, 1] }, { "name": "Fused silica", "kind": "Dispersive", "cauchy_a": 1.458, "cauchy_b": 0.00354 }, { "name": "Borosilicate glass BK7", "kind": "Dispersive", "cauchy_a": 1.5046, "cauchy_b": 0.0042 }, { "name": "Hard crown glass K5", "kind": "Dispersive", "cauchy_a": 1.522, "cauchy_b": 0.00459 }, { "name": "Barium crown glass BaK4", "kind": "Dispersive", "cauchy_a": 1.569, "cauchy_b": 0.00531 }, { "name": "Barium flint glass BaF10", "kind": "Dispersive", "cauchy_a": 1.67, "cauchy_b": 0.00743 }, { "name": "Dense flint glass SF10", "kind": "Dispersive", "cauchy_a": 1.728, "cauchy_b": 0.01342 }, { "name": "Super dispersive glass", "kind": "Dispersive", "cauchy_a": 1.8, "cauchy_b": 0.5 }, { "name": "big lamp", "kind": "DiffuseLight", "emit": { "kind": "SolidColor", "color": [2, 2, 2] } }, { "name": "narrow lamp", "kind": "ConeLight", "spread": 2.0, "emit": { "kind": "SolidColor", "color": [25, 25, 25] } }, { "name": "grey wall", "kind": "Lambertian", "albedo": { "kind": "SolidColor", "color": [0.73, 0.73, 0.73] } } ] }

clovers-front/src/Forms/Actions.tsx

@@ -1,17 +1,20 @@
 import { ReactElement } from "react";
 import { Button } from "../Inputs/Button";
 import { FileInput } from "../Inputs/File";
+import { ExampleForm } from "../Examples/Example";
 
 export const ActionForm = ({
   handlePreview,
   handleRender,
   handleImport,
   handleExport,
+  handleExample,
 }: {
   handlePreview: any;
   handleRender: any;
   handleImport: any;
   handleExport: any;
+  handleExample: any;
 }): ReactElement => {
   return (
     <div className="OptionsForm">
@@ -45,6 +48,9 @@ export const ActionForm = ({
         handleClick={() => handleExport()}
         text="export"
       />
+      <hr />
+      <h3>examples</h3>
+      <ExampleForm handleExample={handleExample} />
     </div>
   );
 };

clovers-front/src/Forms/Scene.tsx

@@ -1,5 +1,6 @@
 import { ReactElement } from "react";
 import { ObjectForm, SceneObject } from "../Objects/SceneObject";
+import cornell from "../Examples/cornell.json";
 
 export const implicitSceneSettings = {
   time_0: 0,
@@ -10,89 +11,8 @@ export const implicitSceneSettings = {
 export type SceneObjects = Array<SceneObject>;
 export type ScenePriorityObjects = Array<SceneObject>;
 
-export const defaultSceneObjects: SceneObjects = [
-  {
-    kind: "Quad",
-    q: [555, 0, 0],
-    u: [0, 0, 555],
-    v: [0, 555, 0],
-    material: "green wall",
-    comment: "green wall, left",
-    priority: false,
-  },
-  {
-    kind: "Quad",
-    q: [0, 0, 555],
-    u: [0, 0, -555],
-    v: [0, 555, 0],
-    material: "red wall",
-    comment: "red wall, right",
-    priority: false,
-  },
-  {
-    kind: "Quad",
-    q: [0, 0, 0],
-    u: [555, 0, 0],
-    v: [0, 0, 555],
-    material: "grey wall",
-    comment: "floor",
-    priority: false,
-  },
-  {
-    kind: "Quad",
-    q: [0, 555, 0],
-    u: [555, 0, 0],
-    v: [0, 0, 555],
-    material: "grey wall",
-    comment: "ceiling",
-    priority: false,
-  },
-  {
-    kind: "Quad",
-    q: [0, 0, 555],
-    u: [555, 0, 0],
-    v: [0, 555, 0],
-    material: "grey wall",
-    comment: "back wall",
-    priority: false,
-  },
-  {
-    kind: "Quad",
-    q: [113, 554, 127],
-    u: [330, 0, 0],
-    v: [0, 0, 305],
-    material: "lamp",
-    comment: "big ceiling light",
-    priority: true,
-  },
-  {
-    kind: "Translate",
-    offset: [265, 0, 295],
-    comment: "moved tall box",
-    priority: false,
-    object: {
-      kind: "RotateY",
-      angle: 15,
-      comment: "rotated tall box",
-      priority: false,
-      object: {
-        kind: "Boxy",
-        corner_0: [0, 0, 0],
-        corner_1: [165, 330, 165],
-        material: "grey wall",
-        comment: "tall box",
-      },
-    },
-  },
-  {
-    kind: "Sphere",
-    center: [190, 90, 190],
-    radius: 90,
-    material: "dense flint glass SF10",
-    comment: "glass sphere",
-    priority: true,
-  },
-];
+export const defaultSceneObjects: SceneObjects =
+  cornell.objects as SceneObjects;
 
 export const SceneForm = ({
   sceneObjects,

clovers-front/src/Materials/Material.tsx

@@ -7,6 +7,7 @@ import { Isotropic, IsotropicForm } from "./Isotropic";
 import { Lambertian, LambertianForm } from "./Lambertian";
 import { Metal, MetalForm } from "./Metal";
 import { Dispersive, DispersiveForm } from "./Dispersive";
+import cornell from "../Examples/cornell.json";
 
 export type Material =
   | Dielectric
@@ -28,88 +29,7 @@ const MaterialKinds = [
 
 export type Materials = Array<Material>;
 
-export const defaultMaterials: Array<Material> = [
-  {
-    name: "lamp",
-    kind: "DiffuseLight",
-    emit: {
-      kind: "SolidColor",
-      color: [7, 7, 7],
-    },
-  },
-  {
-    name: "glass",
-    kind: "Dielectric",
-    refractive_index: 1.5,
-    color: [1, 1, 1],
-  },
-  {
-    name: "green wall",
-    kind: "Lambertian",
-    albedo: {
-      kind: "SolidColor",
-      color: [0.12, 0.45, 0.15],
-    },
-  },
-  {
-    name: "red wall",
-    kind: "Lambertian",
-    albedo: {
-      kind: "SolidColor",
-      color: [0.65, 0.05, 0.05],
-    },
-  },
-  {
-    name: "grey wall",
-    kind: "Lambertian",
-    albedo: {
-      kind: "SolidColor",
-      color: [0.73, 0.73, 0.73],
-    },
-  },
-  {
-    name: "non-dispersive glass",
-    kind: "Dielectric",
-    refractive_index: 1.5,
-    color: [1, 1, 1],
-  },
-  {
-    name: "fused silica",
-    kind: "Dispersive",
-    cauchy_a: 1.458,
-    cauchy_b: 0.00354,
-  },
-  {
-    name: "borosilicate glass BK7",
-    kind: "Dispersive",
-    cauchy_a: 1.5046,
-    cauchy_b: 0.0042,
-  },
-  {
-    name: "hard crown glass K5",
-    kind: "Dispersive",
-    cauchy_a: 1.522,
-    cauchy_b: 0.00459,
-  },
-  {
-    name: "barium crown glass BaK4",
-    kind: "Dispersive",
-    cauchy_a: 1.569,
-    cauchy_b: 0.00531,
-  },
-  {
-    name: "barium flint glass BaF10",
-    kind: "Dispersive",
-    cauchy_a: 1.67,
-    cauchy_b: 0.00743,
-  },
-  {
-    name: "dense flint glass SF10",
-    kind: "Dispersive",
-    cauchy_a: 1.728,
-    cauchy_b: 0.01342,
-  },
-];
+export const defaultMaterials: Materials = cornell.materials as Materials;
 
 const DebugForm = ({ material }: { material: Material }): ReactElement => {
   const id = useId();

clovers-front/src/io.ts

@@ -4,6 +4,15 @@ import { RenderOptions } from "./Forms/RenderOptions";
 import { SceneObject } from "./Objects/SceneObject";
 import { Materials } from "./Materials/Material";
 
+import cornell from "./Examples/cornell.json";
+import dispersive from "./Examples/dispersive.json";
+const examples = {
+  cornell,
+  dispersive,
+};
+type examplesType = keyof typeof examples;
+export const exampleNames = Object.keys(examples);
+
 export type handleImportParams = {
   setMessage: (msg: string) => void;
   setCameraOptions: (camera: CameraOptions) => void;
@@ -88,3 +97,31 @@ export const collectFile = ({
     scene_file,
   };
 };
+
+export const loadExample = ({
+  setMessage,
+  setCameraOptions,
+  setSceneObjects,
+  setMaterials,
+}: handleImportParams) => {
+  try {
+    const importElement: any = document.getElementById("exampleSelect");
+    const name = importElement.value as examplesType;
+    const {
+      // Ignoring a couple of fields for now that are handled in implicit / hidden settings.
+      // time_0,
+      // time_1,
+      // background_color,
+      camera,
+      objects,
+      materials,
+      // priority_objects, // TODO: handle import for priority objects
+    } = examples[name];
+    setCameraOptions(camera as CameraOptions);
+    setSceneObjects(objects as SceneObjects);
+    setMaterials(materials as Materials);
+  } catch (e) {
+    setMessage(`cannot load; could not parse example file: ${e}`);
+    return;
+  }
+};