feat: mesh occlusion base work

scripts/buildAssets.ts

@@ -1,6 +1,7 @@
 import { NodeIO } from '@gltf-transform/core';
 import { config } from 'dotenv';
 import { readdir, writeFile } from 'fs/promises';
+import { parse } from 'path';
 import { argv } from 'process';
 import sharp from 'sharp';
 import { Vector3Tuple } from 'three';
@@ -107,6 +108,7 @@ interface VehicleDefinitions {
       level: number;
       yawLimits: string | string[];
       gunPosition: string | string[];
+      models: { undamaged: string };
       guns: {
         [key: string]: {
           reloadTime: number;
@@ -216,6 +218,7 @@ if (allTargets || targets?.includes('definitions')) {
         const tankTurrets = Object.keys(tankDefinition.root.turrets0).map(
           (turretKey) => {
             const turret = tankDefinition.root.turrets0[turretKey];
+            console.log(parse(turret.models.undamaged).name);
             const turretId = toUniqueId(nation, turretList.root.ids[turretKey]);
             const turretYaw = (
               typeof turret.yawLimits === 'string'
@@ -344,21 +347,20 @@ if (allTargets || targets?.includes('definitions')) {
   );
 
   console.log('Committing tank definitions...');
-  writeFile('test.json', JSON.stringify(tankDefinitions));
+  // await commitMultipleFiles(
-  await commitMultipleFiles(
+  //   'tresabhi',
-    'tresabhi',
+  //   'blitzkrieg-assets',
-    'blitzkrieg-assets',
+  //   'main',
-    'main',
+  //   'definitions',
-    'definitions',
+  //   [
-    [
+  //     {
-      {
+  //       content: JSON.stringify(tankDefinitions),
-        content: JSON.stringify(tankDefinitions),
+  //       encoding: 'utf-8',
-        encoding: 'utf-8',
+  //       path: 'definitions/tanks.json',
-        path: 'definitions/tanks.json',
+  //     },
-      },
+  //   ],
-    ],
+  //   true,
-    true,
+  // );
-  );
 }
 
 if (

src/app/tools/tankopedia/[id]/page.tsx

@@ -22,6 +22,7 @@ import {
 } from '@radix-ui/themes';
 import { Environment, OrbitControls } from '@react-three/drei';
 import { Canvas, useLoader } from '@react-three/fiber';
+import { EffectComposer, SSAO } from '@react-three/postprocessing';
 import { go } from 'fuzzysort';
 import { debounce } from 'lodash';
 import Link from 'next/link';
@@ -117,6 +118,18 @@ export default function Page({ params }: { params: { id: string } }) {
                   {/* I really like apartment, dawn, and sunset */}
                   <Environment preset="apartment" />
 
+                  <EffectComposer enabled={true}>
+                    <SSAO
+                      worldDistanceFalloff={1.0}
+                      worldDistanceThreshold={Infinity}
+                      worldProximityFalloff={0.5}
+                      worldProximityThreshold={8.0}
+                      samples={10}
+                      radius={0.25}
+                      intensity={10}
+                    />
+                  </EffectComposer>
+
                   <group ref={model}>
                     <primitive object={gltf.scene} />
                   </group>