Improve performance

deluksic · Jan 13, 2025 · 23acc89 · 23acc89
1 parent f86e127
commit 23acc89
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 107 deletions.
diff --git a/docs/assets/index-BlA0zTNF.css b/docs/assets/index-BlA0zTNF.css
diff --git a/docs/assets/index-DimjPUGy.css b/docs/assets/index-DimjPUGy.css
diff --git a/docs/assets/index-DnxXs-qt.js b/docs/assets/index-DnxXs-qt.js
diff --git a/docs/assets/index-ZI7z1YVS.js b/docs/assets/index-ZI7z1YVS.js
diff --git a/docs/index.html b/docs/index.html
@@ -6,8 +6,8 @@
     <meta name="theme-color" content="#000000" />
     <link rel="shortcut icon" type="image/ico" href="./assets/favicon-mtvwWgEY.ico" />
     <title>Solid App</title>
-    <script type="module" crossorigin src="./assets/index-ZI7z1YVS.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-DimjPUGy.css">
+    <script type="module" crossorigin src="./assets/index-DnxXs-qt.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-BlA0zTNF.css">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/demo/App.module.css b/src/demo/App.module.css
@@ -17,6 +17,7 @@
   position: relative;
   height: 100dvh;
   color: var(--color-text);
+  background-color: var(--color-background);
 }
 
 .controls {

diff --git a/src/demo/App.tsx b/src/demo/App.tsx
@@ -74,7 +74,7 @@ function Inside() {
       setSelectedCircleIndex(undefined)
 
       {
-        const circle = circles[index]!
+        const circle = circles()[index]!
         if (vec2.distance(circle.center, world) < circle.radius) {
           return
         }
@@ -129,7 +129,7 @@ function Inside() {
 
   return (
     <Circles
-      circles={circles.map((c, i) => ({
+      circles={circles().map((c, i) => ({
         ...c,
         styleIndex: theme().getStyleIndex(style(i)),
       }))}
@@ -142,7 +142,7 @@ function Inside() {
 export function App() {
   return (
     <div class={ui.page} classList={{ [ui[colorScheme()]]: true }}>
-      <div class={ui.circleCounter}>Number of Circles: {circles.length}</div>
+      <div class={ui.circleCounter}>Number of Circles: {circles().length}</div>
       <div class={ui.controls}>
         <label>
           <input
@@ -163,7 +163,7 @@ export function App() {
           Debug mode
         </label>
       </div>
-      <Show when={circles.length === 0}>
+      <Show when={circles().length === 0}>
         <div class={ui.welcomeMessage}>
           <h1>Apollonian Circles</h1>
           <p class={ui.welcomeMessageSubtitle}>

diff --git a/src/demo/Circles.tsx b/src/demo/Circles.tsx
@@ -39,7 +39,7 @@ const CircleStyle = struct({
   fadeColor: vec4f,
 })
 
-const N = 10000
+const N = 100000
 const SUBDIVS = 24
 
 const uniformBindGroupLayout = tgpu.bindGroupLayout({
@@ -128,14 +128,15 @@ export function Circles(props: CirclesProps) {
   const camera = useCamera()
   const { root, device } = useRootContext()
   const { context } = useCanvas()
+  const circles = createMemo(() => props.circles)
 
   const circlesBuffer = root
     .createBuffer(arrayOf(Circle, N))
     .$usage('storage')
     .$name('circles')
 
   createEffect(() => {
-    circlesBuffer.write(props.circles)
+    circlesBuffer.write(circles())
   })
 
   const colorBuffer = root
@@ -246,8 +247,8 @@ export function Circles(props: CirclesProps) {
     pass.setPipeline(pipeline)
     pass.setBindGroup(0, root.unwrap(camera.bindGroup))
     pass.setBindGroup(1, root.unwrap(uniformBindGroup))
-    if (props.circles.length > 0) {
-      pass.draw((SUBDIVS + 1) * 2, props.circles.length)
+    if (circles().length > 0) {
+      pass.draw((SUBDIVS + 1) * 2, circles().length)
     }
     pass.end()
 

diff --git a/src/demo/state.ts b/src/demo/state.ts
@@ -37,14 +37,16 @@ function vec2Normalize(a: v2f) {
 //   center: vec2f(random() * 10 - 5, random() * 10 - 5),
 //   radius: random() * 0.05 + 0.05,
 // }))
-export const [circles, setCircles] = createStore<Circle[]>([])
+export const [circles, setCircles] = createSignal<Circle[]>([], {
+  equals: false,
+})
 export const [debug, setDebug] = createSignal(false)
 export const [colorScheme, setColorScheme] = createSignal(
   getPreferredColorScheme(),
 )
 
 export function chooseOrCreateCircle(xy: v2f): number {
-  const circles_ = unwrap(circles)
+  const circles_ = circles()
   const index = circles_.findIndex(
     (c) => vec2.distance(c.center, xy) < c.radius,
   )
@@ -54,13 +56,13 @@ export function chooseOrCreateCircle(xy: v2f): number {
         circles.push({ center: xy, radius: 0 })
       }),
     )
-    return circles.length - 1
+    return circles().length - 1
   }
   return index
 }
 
 export function closestFirstCircle(queryCircleIndex: number) {
-  const circles_ = unwrap(circles)
+  const circles_ = circles()
   let radius = Number.POSITIVE_INFINITY
   let index = undefined
   const { center } = circles_[queryCircleIndex]!
@@ -89,7 +91,7 @@ export function closestSecondCircle(
   firstCircleIndex: number,
   queryCircleIndex: number,
 ) {
-  const circles_ = unwrap(circles)
+  const circles_ = circles()
   const firstCircle = circles_[firstCircleIndex]!
   const queryCircle = circles_[queryCircleIndex]!
   const d = vec2Normalize(
@@ -209,13 +211,13 @@ export function closestThirdCircle(
   secondCircleIndex: number,
   queryCircleIndex: number,
 ) {
-  const circles_ = unwrap(circles)
+  const circles_ = circles()
   const queryCircle = circles_[queryCircleIndex]!
   const firstCircle = circles_[firstCircleIndex]!
   const secondCircle = circles_[secondCircleIndex]!
   let radius = Number.POSITIVE_INFINITY
   let index: number | undefined = undefined
-  for (let i = 0; i < circles.length; ++i) {
+  for (let i = 0; i < circles_.length; ++i) {
     if (
       i === queryCircleIndex ||
       i === firstCircleIndex ||
@@ -247,7 +249,7 @@ export async function growUntilRadius(
   zoom: Accessor<number>,
   stop: Promise<PointerEvent>,
 ) {
-  const circle = circles[index]!
+  const circle = circles()[index]!
   while (true) {
     const result = await Promise.race([nextAnimationFrame(), stop])
     if (result instanceof PointerEvent) {
@@ -258,13 +260,11 @@ export async function growUntilRadius(
     if (!nextCenter) {
       return
     }
-    setCircles(
-      index,
-      produce((circle) => {
-        circle.radius = nextRadius
-        circle.center = nextCenter
-      }),
-    )
+    setCircles((p) => {
+      p[index]!.radius = nextRadius
+      p[index]!.center = nextCenter
+      return p
+    })
     if (nextRadius === maxRadius) {
       return
     }