Getting closer to cylinder rendering

seflless · Sep 25, 2023 · b97513b · b97513b
1 parent fd78db3
commit b97513b
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 11 deletions.
diff --git a/src/renderer/renderCylinder.ts b/src/renderer/renderCylinder.ts
@@ -205,13 +205,26 @@ export function renderCylinder(
   linearGradient.setAttribute("x2", rightOfTubeCenter.x.toString());
   linearGradient.setAttribute("y2", rightOfTubeCenter.y.toString());
 
+  const leftEdgeNormal = Vector3(0, 0, 1)
+    .crossProduct(yAxisCameraSpace)
+    .normalize();
+
+  const lightingSpace = Matrix4x4().lookAt(
+    Vector3(0, 0, 0),
+    leftEdgeNormal,
+    yAxisCameraSpace
+  );
+
   // Add the gradient stops
-  const GradientSteps = Math.min(2, Math.max(255, Math.floor(Radius)));
+  const GradientSteps = Math.max(2, Math.min(255, Math.floor(Radius)));
 
   for (let i = 0; i < GradientSteps; i++) {
     const normalized = i / (GradientSteps - 1);
-    const x = Math.sin(normalized * Math.PI);
+    const x = Math.cos(normalized * Math.PI + Math.PI / 2);
     const z = Math.cos(normalized * Math.PI + Math.PI);
+    const normal = Vector3(x, 0, z);
+
+    lightingSpace.applyToVector3(normal);
 
     const stopElement = document.createElementNS(
       "http://www.w3.org/2000/svg",
@@ -224,7 +237,7 @@ export function renderCylinder(
         scene.directionalLight.color,
         cylinder.fill,
         scene.ambientLightColor,
-        directionalLightInCameraSpace.dotProduct(Vector3(x, 0, z))
+        directionalLightInCameraSpace.dotProduct(normal)
       )
     );
     linearGradient.appendChild(stopElement);

diff --git a/workbench/Settings.ts b/workbench/Settings.ts
@@ -11,7 +11,12 @@ import {
   Viewport,
 } from "../src";
 
-export type LightingChoice = "reference" | "moonlit" | "underwater" | "none";
+export type LightingChoice =
+  | "reference"
+  | "black and white"
+  | "moonlit"
+  | "underwater"
+  | "none";
 
 export function getLighting(lighting: LightingChoice): {
   directionalLight: DirectionalLight;
@@ -38,6 +43,17 @@ export function getLighting(lighting: LightingChoice): {
       g: 252,
       b: 255,
     };
+  } else if (lighting === "black and white") {
+    ambientLightColor = {
+      r: 0,
+      g: 0,
+      b: 0,
+    };
+    directionalLightColor = {
+      r: 255,
+      g: 252,
+      b: 255,
+    };
   } else if (lighting === "moonlit") {
     //    Bluish white
     ambientLightColor = {

diff --git a/workbench/scenes/SingleCylinder.ts b/workbench/scenes/SingleCylinder.ts
@@ -40,13 +40,13 @@ export default function () {
     radius: referenceRadius,
     height,
     // radius: referenceRadius,
-    fill: Color(255, 0, 0),
+    fill: Color(255, 255, 255),
     stroke: Color(0, 0, 0),
     strokeWidth: 0,
   });
 
   const scene: Scene = {
-    ...getLighting("reference"),
+    ...getLighting("black and white"),
     shapes: [
       getEnvironment("grid"),
       // Axii(Vector3(-referenceRadius * 3, 0, 0)),
@@ -76,6 +76,7 @@ export default function () {
     const diffX = event.clientX - centerX;
     const diffY = event.clientY - centerY;
     const distance = Math.sqrt(diffX * diffX + diffY * diffY);
+    const lightSpeed = 2;
 
     const distanceNormalized = distance / referenceRadius;
     let degrees = distanceNormalized * 90;
@@ -86,17 +87,17 @@ export default function () {
       if (diffX < 0) {
         degrees *= -1;
       }
-      lightSphere.position.x = Math.sin((degrees / 180) * Math.PI);
-      lightSphere.position.y = 0.5;
-      lightSphere.position.z = Math.cos((degrees / 180) * Math.PI);
+      lightSphere.position.x = Math.sin((degrees / 180) * Math.PI * lightSpeed);
+      lightSphere.position.y = 0.0;
+      lightSphere.position.z = Math.cos((degrees / 180) * Math.PI * lightSpeed);
 
       if (event.buttons === 1) {
         console.log();
         lightSphere.position.z *= -1;
       }
     } else if (spinMode === "z") {
-      lightSphere.position.x = Math.sin((degrees / 180) * Math.PI);
-      lightSphere.position.y = Math.cos((degrees / 180) * Math.PI);
+      lightSphere.position.x = Math.sin((degrees / 180) * Math.PI * lightSpeed);
+      lightSphere.position.y = Math.cos((degrees / 180) * Math.PI * lightSpeed);
       lightSphere.position.z = 0;
     }
 
@@ -126,11 +127,17 @@ export default function () {
     // lightSphere.position.z =
     //   Math.cos(now * Math.PI * 2 * lightSpeed) * lightDistance;
 
+    // lightSphere.position = Vector3(1, 0, 1).multiply(lightDistance);
+
     scene.directionalLight.direction = lightSphere.position
+      .clone()
+      .setY(0)
       .clone()
       .normalize()
       .multiply(-1);
 
+    lightSphere.position.y = height / 2;
+
     render(document.getElementById("root")!, scene, viewport, camera);
   });
 }