feat: spectral rendering

clovers-back/Dockerfile

@@ -1,6 +1,6 @@
 # Based on https://github.com/LukeMathWalker/cargo-chef
 
-FROM lukemathwalker/cargo-chef:latest-rust-1.72 AS chef
+FROM lukemathwalker/cargo-chef:latest-rust-1.73 AS chef
 WORKDIR /app
 
 FROM chef AS planner

clovers-back/dev.Dockerfile

@@ -1,4 +1,4 @@
-FROM rust:1.72 as rust-hotreload
+FROM rust:1.73 as rust-hotreload
 WORKDIR /app
 
 RUN curl -L --proto '=https' --tlsv1.2 -sSf https://raw.githubusercontent.com/cargo-bins/cargo-binstall/main/install-from-binstall-release.sh | bash

clovers-batch/Dockerfile

@@ -1,6 +1,6 @@
 # Based on https://github.com/LukeMathWalker/cargo-chef
 
-FROM lukemathwalker/cargo-chef:latest-rust-1.72 AS chef
+FROM lukemathwalker/cargo-chef:latest-rust-1.73 AS chef
 WORKDIR /app
 
 FROM chef AS planner

clovers-batch/dev.Dockerfile

@@ -1,4 +1,4 @@
-FROM rust:1.72 as rust-hotreload
+FROM rust:1.73 as rust-hotreload
 WORKDIR /app
 
 RUN curl -L --proto '=https' --tlsv1.2 -sSf https://raw.githubusercontent.com/cargo-bins/cargo-binstall/main/install-from-binstall-release.sh | bash

clovers-batch/src/main.rs

@@ -83,7 +83,7 @@ async fn render(id: Uuid, postgres_pool: &Pool<Postgres>) {
     let mut img: RgbImage = ImageBuffer::new(width, height);
     img.enumerate_pixels_mut().for_each(|(x, y, pixel)| {
         let index = y * width + x;
-        *pixel = Rgb(pixelbuffer[index as usize].to_rgb_u8());
+        *pixel = Rgb(pixelbuffer[index as usize].into());
     });
     // Graphics assume origin at bottom left corner of the screen
     // Our buffer writes pixels from top left corner. Simple fix, just flip it!

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/RenderOptions.tsx

@@ -9,7 +9,6 @@ export type RenderOptions = {
   height: number;
   samples: number;
   max_depth: number;
-  gamma: number;
   quiet: boolean;
   normalmap: boolean;
 };
@@ -18,7 +17,6 @@ export const defaultRenderOptions: RenderOptions = {
   height: 1024,
   samples: 10,
   max_depth: 100,
-  gamma: 2.0,
   quiet: false,
   normalmap: false,
 };
@@ -86,12 +84,6 @@ export const RenderOptionsForm = ({
         path={path}
         setState={setState}
       />
-      <NumberInput
-        fieldname="gamma"
-        object={object}
-        path={path}
-        setState={setState}
-      />
       <CheckboxInput
         fieldname="normalmap"
         object={object}

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: "glass",
-    comment: "glass sphere",
-    priority: true,
-  },
-];
+export const defaultSceneObjects: SceneObjects =
+  cornell.objects as SceneObjects;
 
 export const SceneForm = ({
   sceneObjects,

clovers-front/src/Materials/Dispersive.tsx

@@ -0,0 +1,47 @@
+import { ReactElement } from "react";
+import { DeleteButton } from "../Inputs/DeleteButton";
+import { NumberInput } from "../Inputs/Number";
+import { TextInput } from "../Inputs/Text";
+
+export type Dispersive = {
+  kind: "Dispersive";
+  cauchy_a: number;
+  cauchy_b: number;
+  name: string;
+};
+
+export const DispersiveForm = ({
+  material,
+  path,
+  setState,
+}: {
+  material: Dispersive;
+  path: R.Path;
+  setState: React.Dispatch<React.SetStateAction<Dispersive>>;
+}): ReactElement => {
+  const kind = "Dispersive";
+  return (
+    <div className="OptionsForm">
+      <h3>{material.name || kind}</h3>
+      <TextInput
+        fieldname="name"
+        object={material}
+        path={path}
+        setState={setState}
+      />
+      <DeleteButton path={path} setState={setState} />
+      <NumberInput
+        fieldname="cauchy_a"
+        object={material}
+        path={path}
+        setState={setState}
+      />
+      <NumberInput
+        fieldname="cauchy_b"
+        object={material}
+        path={path}
+        setState={setState}
+      />
+    </div>
+  );
+};