Adding dark edge lines in light mode + enabling SSAO (#2219)

* adding dark edge lines in light mode + enabling SSAO

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Rerun CI

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Frank Noirot <frank@zoo.dev>
Co-authored-by: Frank Noirot <frank@kittycad.io>

e2e/playwright/storageStates.ts

@@ -7,6 +7,7 @@ export const TEST_SETTINGS = {
     theme: Themes.Dark,
     onboardingStatus: 'dismissed',
     projectDirectory: '',
+    enableSSAO: false,
   },
   modeling: {
     defaultUnit: 'in',

src/components/ModelingMachineProvider.tsx

@@ -77,7 +77,7 @@ export const ModelingMachineProvider = ({
     auth,
     settings: {
       context: {
-        app: { theme },
+        app: { theme, enableSSAO },
         modeling: { defaultUnit, highlightEdges },
       },
     },
@@ -87,6 +87,7 @@ export const ModelingMachineProvider = ({
   useSetupEngineManager(streamRef, token, {
     theme: theme.current,
     highlightEdges: highlightEdges.current,
+    enableSSAO: enableSSAO.current,
   })
   const { htmlRef } = useStore((s) => ({
     htmlRef: s.htmlRef,

src/components/SettingsAuthProvider.tsx

@@ -7,7 +7,12 @@ import React, { createContext, useEffect } from 'react'
 import useStateMachineCommands from '../hooks/useStateMachineCommands'
 import { settingsMachine } from 'machines/settingsMachine'
 import { toast } from 'react-hot-toast'
-import { getThemeColorForEngine, setThemeClass, Themes } from 'lib/theme'
+import {
+  getThemeColorForEngine,
+  getOppositeTheme,
+  setThemeClass,
+  Themes,
+} from 'lib/theme'
 import decamelize from 'decamelize'
 import {
   AnyStateMachine,
@@ -99,6 +104,9 @@ export const SettingsAuthProviderBase = ({
     {
       context: loadedSettings,
       actions: {
+        //TODO: batch all these and if that's difficult to do from tsx,
+        // make it easy to do
+
         setClientSideSceneUnits: (context, event) => {
           const newBaseUnit =
             event.type === 'set.modeling.defaultUnit'
@@ -115,6 +123,16 @@ export const SettingsAuthProviderBase = ({
               color: getThemeColorForEngine(context.app.theme.current),
             },
           })
+
+          const opposingTheme = getOppositeTheme(context.app.theme.current)
+          engineCommandManager.sendSceneCommand({
+            cmd_id: uuidv4(),
+            type: 'modeling_cmd_req',
+            cmd: {
+              type: 'set_default_system_properties',
+              color: getThemeColorForEngine(opposingTheme),
+            },
+          })
         },
         setEngineEdges: (context) => {
           engineCommandManager.sendSceneCommand({

src/hooks/useSetupEngineManager.ts

@@ -11,9 +11,11 @@ export function useSetupEngineManager(
   settings = {
     theme: Themes.System,
     highlightEdges: true,
+    enableSSAO: true,
   } as {
     theme: Themes
     highlightEdges: boolean
+    enableSSAO: boolean
   }
 ) {
   const {

src/lang/std/engineConnection.ts

@@ -4,7 +4,7 @@ import { Models } from '@kittycad/lib'
 import { exportSave } from 'lib/exportSave'
 import { uuidv4 } from 'lib/utils'
 import { getNodePathFromSourceRange } from 'lang/queryAst'
-import { Themes, getThemeColorForEngine } from 'lib/theme'
+import { Themes, getThemeColorForEngine, getOppositeTheme } from 'lib/theme'
 import { DefaultPlanes } from 'wasm-lib/kcl/bindings/DefaultPlanes'
 
 let lastMessage = ''
@@ -941,6 +941,7 @@ export class EngineCommandManager {
     settings = {
       theme: Themes.Dark,
       highlightEdges: true,
+      enableSSAO: true,
     },
   }: {
     setMediaStream: (stream: MediaStream) => void
@@ -953,6 +954,7 @@ export class EngineCommandManager {
     settings?: {
       theme: Themes
       highlightEdges: boolean
+      enableSSAO: boolean
     }
   }) {
     this.makeDefaultPlanes = makeDefaultPlanes
@@ -969,7 +971,8 @@ export class EngineCommandManager {
       return
     }
 
-    const url = `${VITE_KC_API_WS_MODELING_URL}?video_res_width=${width}&video_res_height=${height}`
+    const additionalSettings = settings.enableSSAO ? '&post_effect=ssao' : ''
+    const url = `${VITE_KC_API_WS_MODELING_URL}?video_res_width=${width}&video_res_height=${height}${additionalSettings}`
     this.engineConnection = new EngineConnection({
       engineCommandManager: this,
       url,
@@ -989,6 +992,18 @@ export class EngineCommandManager {
             color: getThemeColorForEngine(settings.theme),
           },
         })
+
+        // Sets the default line colors
+        const opposingTheme = getOppositeTheme(settings.theme)
+        this.sendSceneCommand({
+          cmd_id: uuidv4(),
+          type: 'modeling_cmd_req',
+          cmd: {
+            type: 'set_default_system_properties',
+            color: getThemeColorForEngine(opposingTheme),
+          },
+        })
+
         // Set the edge lines visibility
         this.sendSceneCommand({
           type: 'modeling_cmd_req',

src/lib/settings/initialSettings.tsx

@@ -156,6 +156,13 @@ export function createSettings() {
           </div>
         ),
       }),
+      enableSSAO: new Setting<boolean>({
+        defaultValue: true,
+        description:
+          'Whether or not Screen Space Ambient Occlusion (SSAO) is enabled',
+        validate: (v) => typeof v === 'boolean',
+        hideOnPlatform: 'both', //for now
+      }),
       onboardingStatus: new Setting<string>({
         defaultValue: '',
         validate: (v) => typeof v === 'string',

src/lib/theme.ts

@@ -23,6 +23,17 @@ export function setThemeClass(theme: Themes) {
   }
 }
 
+// Returns the resolved theme in use (Dark || Light)
+export function getResolvedTheme(theme: Themes) {
+  return theme === Themes.System ? getSystemTheme() : theme
+}
+
+// Returns the opposing theme
+export function getOppositeTheme(theme: Themes) {
+  const resolvedTheme = getResolvedTheme(theme)
+  return resolvedTheme === Themes.Dark ? Themes.Light : Themes.Dark
+}
+
 /**
  * The engine takes RGBA values from 0-1
  * So we convert from the conventional 0-255 found in Figma
@@ -30,7 +41,7 @@ export function setThemeClass(theme: Themes) {
  * @returns { r: number, g: number, b: number, a: number }
  */
 export function getThemeColorForEngine(theme: Themes) {
-  const resolvedTheme = theme === Themes.System ? getSystemTheme() : theme
+  const resolvedTheme = getResolvedTheme(theme)
   const dark = 28 / 255
   const light = 249 / 255
   return resolvedTheme === Themes.Dark