chore: translate lesson 8

README.md

@@ -48,50 +48,57 @@ cd packages/lesson_001
 pnpm run dev
 ```
 
-## Lesson 1
+## Lesson 1 - Initialize canvas
 
 -   A hardware abstraction layer based on WebGL1/2 and WebGPU.
 -   Canvas API design.
 -   Implementing a simple plugin system.
 -   Implementing a rendering plugin based on the hardware abstraction layer.
 
-## Lesson 2
+## Lesson 2 - Draw a circle
 
 -   Adding shapes to the canvas.
 -   Drawing a circle using SDF.
 -   Anti Aliasing.
 -   Dirty flag design pattern.
 
-## Lesson 3
+## Lesson 3 - Scene graph and transform
 
 -   Transformations. Make shapes support pan, zoom, rotate, and skew transformations.
 -   Scene graph.
 
-## Lesson 4
+## Lesson 4 - Camera
 
 -   What is a Camera?
 -   Projection transformation.
 -   Camera transformation.
 -   Camera animation. Using Landmark transition between different camera states.
 
-## Lesson 5
+## Lesson 5 - Grid
 
 -   Drawing straight lines using Line Geometry or screen-space techniques.
 -   Drawing dots grid.
 
-## Lesson 6
+## Lesson 6 - Event System
 
 -   Implement an event system compatible with DOM Event API.
 -   How to pick a circle.
 -   Implement a drag-and-drop plugin based on our event system.
 -   Support for pinch zoom gestures.
 
-## Lesson 7
+## Lesson 7 - Web UI
 
 -   Developing Web UI with Lit and Shoelace
 -   Implementing a canvas component
 -   Implementing a zoom toolbar component
 
+# Lesson 8 - Optimize performance
+
+-   What is a draw call
+-   Reducing draw calls with culling
+-   Reducing draw calls by combining batches
+-   Using spatial indexing to improve pickup efficiency
+
 [infinitecanvas]: https://infinitecanvas.tools/
 [Figma]: https://madebyevan.com/figma/building-a-professional-design-tool-on-the-web/
 [Modyfi]: https://digest.browsertech.com/archive/browsertech-digest-how-modyfi-is-building-with/

README.zh_CN.md

@@ -51,49 +51,56 @@ cd packages/lesson_001
 pnpm run dev
 ```
 
-## 课程 1
+## 课程 1 - 初始化画布
 
 -   基于 WebGL1/2 和 WebGPU 的硬件抽象层
 -   画布 API 设计
 -   实现一个简单的插件系统
 -   基于硬件抽象层实现一个渲染插件
 
-## 课程 2
+## 课程 2 - 绘制圆
 
 -   向画布中添加图形
 -   使用 SDF 绘制一个圆形
 -   反走样
 
-## 课程 3
+## 课程 3 - 变换和场景图
 
 -   变换。让图形支持平移、缩放、旋转、斜切变换。
 -   场景图。
 
-## 课程 4
+## 课程 4 - 相机
 
 -   相机是什么？
 -   投影变换。
 -   相机变换。通过一个插件实现平移、旋转和缩放功能。
 -   相机动画。平滑过渡到任意相机状态。
 
-## 课程 5
+## 课程 5 - 绘制网格
 
 -   绘制直线网格。使用 Line Geometry 或者屏幕空间技术。
 -   绘制点网格。
 
-## 课程 6
+## 课程 6 - 事件系统
 
 -   参考 DOM API 实现事件系统
 -   如何拾取一个圆形
 -   实现一个拖拽插件
 -   支持双指缩放手势
 
-## 课程 7
+## 课程 7 - Web UI
 
 -   使用 Lit 和 Shoelace 开发 Web UI
 -   实现画布组件，监听页面宽高变换
 -   实现缩放组件
 
+## 课程 8 - 性能优化
+
+-   什么是 Draw call
+-   使用剔除减少 draw call
+-   使用合批减少 draw call
+-   使用空间索引提升拾取效率
+
 [infinitecanvas]: https://infinitecanvas.tools/
 [Figma]: https://madebyevan.com/figma/building-a-professional-design-tool-on-the-web/
 [Modyfi]: https://digest.browsertech.com/archive/browsertech-digest-how-modyfi-is-building-with/

packages/lesson_008/src/Canvas.ts

@@ -224,7 +224,7 @@ export class Canvas {
       }
     });
     // find group with max z-index
-    hitTestList.sort((a, b) => b.globalRenderOrder - a.globalRenderOrder);
+    hitTestList.sort((a, b) => a.globalRenderOrder - b.globalRenderOrder);
 
     return hitTestList;
   }

packages/lesson_008/src/drawcalls/SDF.ts

@@ -20,7 +20,7 @@ import { vert, frag } from '../shaders/sdf';
 import { paddingMat3 } from '../utils';
 
 export class SDF extends Drawcall {
-  protected maxInstances = 5000;
+  // protected maxInstances = 5000;
 
   #program: Program;
   #fragUnitBuffer: Buffer;

packages/site/docs/.vitepress/config/en.js

@@ -92,6 +92,10 @@ export const en = defineConfig({
                 text: 'Reduce draw calls with instanced array',
                 link: 'instanced',
               },
+              {
+                text: 'Optimize picking performance with RBush',
+                link: 'picking',
+              },
             ],
           },
         ],

packages/site/docs/.vitepress/config/zh.js

@@ -80,6 +80,10 @@ export const zh = defineConfig({
                 text: '通过实例化数组减少 draw call',
                 link: 'instanced',
               },
+              {
+                text: '通过 RBush 加速拾取',
+                link: 'picking',
+              },
             ],
           },
         ],

packages/site/docs/components/Picking.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { Circle } from '@infinite-canvas-tutorial/lesson8';
+import { onMounted, ref } from 'vue';
+import Stats from 'stats.js';
+
+const total = ref(0);
+const culled = ref(0);
+const circles = [];
+let canvas;
+
+const stats = new Stats();
+stats.showPanel(0);
+const $stats = stats.dom;
+$stats.style.position = 'absolute';
+$stats.style.left = '0px';
+$stats.style.top = '0px';
+
+const add500Circles = () => {
+  for (let i = 0; i < 500; i++) {
+    const fill = `rgb(${Math.floor(Math.random() * 255)},${Math.floor(
+      Math.random() * 255,
+    )},${Math.floor(Math.random() * 255)})`;
+    const circle = new Circle({
+      cx: Math.random() * 1000,
+      cy: Math.random() * 1000,
+      r: Math.random() * 20,
+      fill,
+      batchable: true,
+      cullable: true,
+    });
+    canvas.appendChild(circle);
+    circles.push(circle);
+
+    circle.addEventListener('pointerenter', () => {
+      circle.fill = 'red';
+    });
+    circle.addEventListener('pointerleave', () => {
+      circle.fill = fill;
+    });
+  }
+};
+
+onMounted(() => {
+  const $canvas = document.querySelector('ic-canvas-lesson8');
+
+  $canvas.parentElement.appendChild($stats);
+
+  $canvas.addEventListener('ic-ready', (e) => {
+    canvas = e.detail;
+    add500Circles();
+  });
+
+  $canvas.addEventListener('ic-frame', (e) => {
+    stats.update();
+    total.value = circles.length;
+    culled.value = circles.filter((circle) => circle.culled).length;
+  });
+});
+</script>
+
+<template>
+  <span>total: {{ total }}</span>
+  &nbsp;
+  <span>culled: {{ culled }}</span>
+  &nbsp;
+  <sl-button size="small" @click="add500Circles">Add 500 circles</sl-button>
+  <div style="position: relative">
+    <ic-canvas-lesson8></ic-canvas-lesson8>
+  </div>
+</template>

packages/site/docs/example/picking.md

@@ -0,0 +1,11 @@
+---
+---
+
+We can enhance picking performance with RBush, see:
+<a href="/guide/lesson-008">Performace optimazation</a>
+
+<script setup>
+import Picking from '../components/Picking.vue'
+</script>
+
+<Picking />