feat(nds): improve 3d model and texture display

app/components/Screen.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { LOGICAL_WIDTH, LOGICAL_HEIGHT, SCREEN_SCALE } from "~/utils/screen";
+
 const canvas = useTemplateRef("canvas");
 
 const renderCallbacks = new Map<RenderCallback, number>();
@@ -31,8 +33,8 @@ const handleCanvasClick = (event: MouseEvent) => {
   if (!canvas.value) return;
 
   const rect = canvas.value.getBoundingClientRect();
-  const scaleX = SCREEN_WIDTH / rect.width;
-  const scaleY = SCREEN_HEIGHT / rect.height;
+  const scaleX = LOGICAL_WIDTH / rect.width;
+  const scaleY = LOGICAL_HEIGHT / rect.height;
 
   const x = (event.clientX - rect.left) * scaleX;
   const y = (event.clientY - rect.top) * scaleY;
@@ -59,6 +61,9 @@ const renderFrame = (timestamp: number) => {
   // render
   ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
 
+  ctx.save();
+  ctx.scale(SCREEN_SCALE, SCREEN_SCALE);
+
   const sortedCallbacks = Array.from(renderCallbacks.entries())
     .sort((a, b) => a[1] - b[1])
     .map(([callback]) => callback);
@@ -71,6 +76,8 @@ const renderFrame = (timestamp: number) => {
     ctx.restore();
   }
 
+  ctx.restore();
+
   lastRealFrameTime = Date.now() - start;
 
   animationFrameId = requestAnimationFrame(renderFrame);
@@ -86,6 +93,8 @@ onMounted(() => {
   ctx = canvas.value.getContext("2d");
   if (!ctx) throw new Error("Missing 2d context");
 
+  ctx.imageSmoothingEnabled = false;
+
   canvas.value.addEventListener("click", handleCanvasClick);
   canvas.value.addEventListener("wheel", handleCanvasWheel, { passive: true });