feat: V4

.github/workflows/lint.yml

@@ -8,22 +8,20 @@ env:
 jobs:
   lint:
     name: Lint
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     strategy:
       matrix:
-        node-version: [18]
+        node-version: [20]
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Setup Pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'pnpm'
+          cache: pnpm
       - name: Install dependencies
         run: pnpm install
       - name: Run Lint

CHANGELOG.md

@@ -1,3 +1,86 @@
+
+
+## [4.0.0-rc.2](https://github.com/Tresjs/cientos/compare/4.0.0-rc.1...4.0.0-rc.2) (2024-07-26)
+
+## [4.0.0-rc.1](https://github.com/Tresjs/cientos/compare/4.0.0-rc.0...4.0.0-rc.1) (2024-07-25)
+
+
+### Features
+
+* **fbo:** add autoRender flag as an option to useFBO ([#458](https://github.com/Tresjs/cientos/issues/458)) ([ddcd4ac](https://github.com/Tresjs/cientos/commit/ddcd4ac36cfd5b5cbb06e967878a9468b390a17c))
+
+## [4.0.0-rc.0](https://github.com/Tresjs/cientos/compare/4.0.0-next.1...4.0.0-rc.0) (2024-07-24)
+
+
+### Features
+
+* **Sparkles:** invalidate on update ([#446](https://github.com/Tresjs/cientos/issues/446)) ([cbfd226](https://github.com/Tresjs/cientos/commit/cbfd226b94fb363f3a59a735365c679e8142420f))
+
+
+### Bug Fixes
+
+* reimplement ContactShadows for v4 ([#449](https://github.com/Tresjs/cientos/issues/449)) ([d71c328](https://github.com/Tresjs/cientos/commit/d71c328969da64beee05088ced05bd7b632d6f31))
+* update to core v4.2.2 to remove warning on invalidation ([42afa6e](https://github.com/Tresjs/cientos/commit/42afa6e67962796d2ce076a29917262f9ca09ea5))
+
+## [4.0.0-next.1](https://github.com/Tresjs/cientos/compare/3.9.0...4.0.0-next.1) (2024-07-17)
+
+
+### ⚠ BREAKING CHANGES
+
+* **MeshReflectionMaterial:** add features/docs, reorganize
+
+### Features
+
+* 423 enable on demand render mode usage ([#436](https://github.com/Tresjs/cientos/issues/436)) ([b3eef40](https://github.com/Tresjs/cientos/commit/b3eef40430d23e2ba6c5a195c0cf510c0bc54ce9))
+* **AnimatedSprite:** add asSprite prop ([7a14b55](https://github.com/Tresjs/cientos/commit/7a14b5592d78f57785d04bd1484a35e501b7cceb))
+* **AnimatedSprite:** dispose texture onUnmounted ([18d6904](https://github.com/Tresjs/cientos/commit/18d6904570cc34ca9c3e64e6b42ec5c639a6e885))
+* **AnimatedSprite:** remove explicit click event ([042c350](https://github.com/Tresjs/cientos/commit/042c350883aec53bdf0331cc4b3378e06d87fb88))
+* **AnimatedSprite:** remove unnecessary Suspense ([082d695](https://github.com/Tresjs/cientos/commit/082d695f1a6843a8fa5edcd8e6c32ec8530a03a9))
+* **app:** 421 Update components to use useLoop instead of useRenderLoop ([ad3b290](https://github.com/Tresjs/cientos/commit/ad3b290c4afb3adf5bf36ccf02d08ea1beb98bc8))
+* **app:** Add the option for x and y in mouseparallax component ([#444](https://github.com/Tresjs/cientos/issues/444)) ([12d5834](https://github.com/Tresjs/cientos/commit/12d5834becba2cdfc26300fd5bf1ec1f9e26afe3))
+* re-remove tweakpane ([#425](https://github.com/Tresjs/cientos/issues/425)) ([72284ce](https://github.com/Tresjs/cientos/commit/72284ce2e0e378d353b3573a6216ad6f6dcd4425))
+* update to core v4.2 ([14b30f9](https://github.com/Tresjs/cientos/commit/14b30f99282ed3cb1d21cbdf31e672867d79f27c))
+
+
+### Bug Fixes
+
+* **Lensflare demo:** add camera [#435](https://github.com/Tresjs/cientos/issues/435) ([#441](https://github.com/Tresjs/cientos/issues/441)) ([981de57](https://github.com/Tresjs/cientos/commit/981de572c97183b8d2070925daa8209d2fa6b55e))
+* **MeshReflectionMaterial:** add features/docs, reorganize ([58703e3](https://github.com/Tresjs/cientos/commit/58703e362bbe731a56b7ce903160df13513ec18a))
+* remove hardcoded speed number, that setting at 0 doesn't stop the effect ([e67f3a2](https://github.com/Tresjs/cientos/commit/e67f3a295025ca1bfb1c0f664ceccefac389e0af))
+* **SkyDemo:** value.value -> value ([82fe77b](https://github.com/Tresjs/cientos/commit/82fe77b4dc11fd23b47e40bc33a843dc69cf017f))
+* **types:** fixed types generics for `useGLTF` ([#448](https://github.com/Tresjs/cientos/issues/448)) ([62a9bcc](https://github.com/Tresjs/cientos/commit/62a9bcc2d4490c7493667c3316441b5363cb42fc))
+* uncomment section ([fac2253](https://github.com/Tresjs/cientos/commit/fac22534818a15d49f631b790185f4f1266c7339))
+* vue attrs hyphenation issues ([4f9b61b](https://github.com/Tresjs/cientos/commit/4f9b61b954a916d8f8880798f06c03b79092896b))
+
+## [4.0.0-next.0](https://github.com/Tresjs/cientos/compare/3.9.0...4.0.0-next.1) (2024-03-27)
+
+
+### ⚠ BREAKING CHANGES
+
+* **app:** 349 Remove directives from cientos
+* **app:** 227 Change the keyboardcontrols implementation
+
+### Features
+
+* add arrow keys support ([39e2094](https://github.com/Tresjs/cientos/commit/39e2094338ba37613b189e7d593ecc2b0a35680b))
+* **AnimatedSprite:** add AnimatedSprite, playground, docs ([d6ea81b](https://github.com/Tresjs/cientos/commit/d6ea81b5540c2f4bf0f233e269ed98992ee8a551))
+* **AnimatedSprite:** allow [numCols, numRows] as atlas prop ([3309d9c](https://github.com/Tresjs/cientos/commit/3309d9c24ee1d006b41bdeaa29eac7c8f9658342))
+* **AnimatedSprite:** always emit last frame name on loop and on end ([ed16136](https://github.com/Tresjs/cientos/commit/ed16136a84143396ae8accc327429c1ef1fbdd1b))
+* **AnimatedSprite:** change default fps ([44831a4](https://github.com/Tresjs/cientos/commit/44831a492e6a881061b9a113d1a627026b172056))
+* **app:** 227 Change the keyboardcontrols implementation ([fed0f86](https://github.com/Tresjs/cientos/commit/fed0f86b3c92aa8ea86be0e6193e1639d421bcc2))
+* **app:** 227 Final details, ready to go ([6f06213](https://github.com/Tresjs/cientos/commit/6f06213d92f9b389c3d1fca377002ae0b060c87b))
+
+
+### Bug Fixes
+
+* **AnimatedSprite:** return nullFrame animation if requested animation not found ([453819e](https://github.com/Tresjs/cientos/commit/453819e0237b58177a34bbeee0af4ce44252195c))
+* **Atlas:** add missing argument to function call ([e6b147e](https://github.com/Tresjs/cientos/commit/e6b147e45520238e8fd467863972af8fe8f8ec37))
+
+
+### Code Refactoring
+
+* **app:** 349 Remove directives from cientos ([8fc4cd5](https://github.com/Tresjs/cientos/commit/8fc4cd582ba85cc09e000627449622e8861ec76a))
+
 ## [3.9.0](https://github.com/Tresjs/cientos/compare/3.8.0...3.9.0) (2024-05-07)
 
 ### Features
@@ -38,6 +121,22 @@
 * transformControls throws error when switching active camera ([f1a477a](https://github.com/Tresjs/cientos/commit/f1a477a46c341f6ed4e58fce1e8999e19feba8d0))
 * **type:** correct the east description ([c26da1f](https://github.com/Tresjs/cientos/commit/c26da1f11524f2445a1b0653f35354de4d3b10ed))
 
+## [4.0.0-next.0](https://github.com/Tresjs/cientos/compare/3.8.0...4.0.0-next.0) (2024-03-27)
+
+
+### Features
+
+* **app:** 252 adding ocean component ([7efb293](https://github.com/Tresjs/cientos/commit/7efb29300a5cda624801316e6bc4f33a88e8de04))
+* **app:** 252 Renamed as ocean, add sky support ([473bac6](https://github.com/Tresjs/cientos/commit/473bac61d9831b9334f4ba78b0d4ab979b7b167f))
+* **app:** Add RoundedBox component ([8b6cb67](https://github.com/Tresjs/cientos/commit/8b6cb67b686bf242aa6e96c3b68af535ddb944d1))
+
+
+### Bug Fixes
+
+* **app:** 252 Apply review feedback ([4449208](https://github.com/Tresjs/cientos/commit/4449208fccedca0a37ea2e62142b00188a21e0ad))
+* apply feedback ([3a50bc2](https://github.com/Tresjs/cientos/commit/3a50bc29c00dd64775643ab08fe3e5ba569c8248))
+* little detail in the interface ([fb6456a](https://github.com/Tresjs/cientos/commit/fb6456a063cc28868fe0178b28695c04ad812ccc))
+
 ## [3.8.0](https://github.com/Tresjs/cientos/compare/3.7.0...3.8.0) (2024-02-07)
 
 ### Features

docs/.vitepress/config.ts

@@ -1,20 +1,8 @@
 import { defineConfig } from 'vitepress'
 import { resolve } from 'pathe'
-import componentList from '../component-list/components'
 
 const whitelist = ['TresCanvas', 'TresLeches', 'TresScene']
 
-const collapsedSidebarCategories = new Set(['Materials', 'Shapes', 'Misc', 'Directives'])
-const sidebar = [
-  {
-    text: 'Guide',
-    items: [{ text: 'Introduction', link: '/guide/' }],
-  },
-  ...componentList,
-].map(
-  c => collapsedSidebarCategories.has(c.text) ? Object.assign(c, { collapsed: true }) : c,
-)
-
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: 'Cientos',
@@ -65,7 +53,116 @@ export default defineConfig({
       { text: 'Examples', link: 'https://lab.tresjs.org/' },
     ],
 
-    sidebar,
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          { text: 'Introduction', link: '/guide/' },
+          { text: 'Migration from v3', link: '/guide/migrating-from-v3' },
+        ],
+      },
+      {
+        text: 'Abstractions',
+        items: [
+          { text: 'Text3D', link: '/guide/abstractions/text-3d' },
+          { text: 'Levioso (Float)', link: '/guide/abstractions/levioso' },
+          { text: 'useAnimations', link: '/guide/abstractions/use-animations' },
+          { text: 'MouseParallax', link: '/guide/abstractions/mouse-parallax' },
+          { text: 'Lensflare', link: '/guide/abstractions/lensflare' },
+          { text: 'Reflector', link: '/guide/abstractions/reflector' },
+          { text: 'GlobalAudio', link: '/guide/abstractions/global-audio' },
+          { text: 'Fbo', link: '/guide/abstractions/fbo' },
+          { text: 'useFBO', link: '/guide/abstractions/use-fbo' },
+          { text: 'useSurfaceSampler', link: '/guide/abstractions/use-surface-sampler' },
+          { text: 'Sampler', link: '/guide/abstractions/sampler' },
+          { text: 'AnimatedSprite', link: '/guide/abstractions/animated-sprite' },
+        ],
+      },
+      {
+        text: 'Controls',
+        items: [
+          { text: 'OrbitControls', link: '/guide/controls/orbit-controls' },
+          { text: 'CameraControls', link: '/guide/controls/camera-controls' },
+          { text: 'TransformControls', link: '/guide/controls/transform-controls' },
+          { text: 'PointerLockControls', link: '/guide/controls/pointer-lock-controls' },
+          { text: 'KeyboardControls', link: '/guide/controls/keyboard-controls' },
+          { text: 'ScrollControls', link: '/guide/controls/scroll-controls' },
+          { text: 'MapControls', link: '/guide/controls/map-controls' },
+        ],
+      },
+      {
+        text: 'Loaders',
+        items: [
+          { text: 'useProgress', link: '/guide/loaders/use-progress' },
+          { text: 'useGLTF', link: '/guide/loaders/use-gltf' },
+          { text: 'GLTFModel', link: '/guide/loaders/gltf-model' },
+          { text: 'useFBX', link: '/guide/loaders/use-fbx' },
+          { text: 'FBXModel', link: '/guide/loaders/fbx-model' },
+          { text: 'useVideoTexture', link: '/guide/loaders/use-video-texture' },
+          { text: 'SVG', link: '/guide/loaders/svg' },
+        ],
+      },
+      {
+        text: 'Materials',
+        collapsed: true,
+        items: [
+          { text: 'WobbleMaterial', link: '/guide/materials/wobble-material' },
+          { text: 'MeshGlassMaterial', link: '/guide/materials/glass-material' },
+          { text: 'CustomShaderMaterial', link: '/guide/materials/custom-shader-material' },
+          { text: 'MeshReflectionMaterial', link: '/guide/materials/mesh-reflection-material' },
+        ],
+      },
+      {
+        text: 'Shapes',
+        collapsed: true,
+        items: [
+          { text: 'Box', link: '/guide/shapes/box' },
+          { text: 'CatmullRomCurve3', link: '/guide/shapes/catmullromcurve3' },
+          { text: 'Circle', link: '/guide/shapes/circle' },
+          { text: 'Cone', link: '/guide/shapes/cone' },
+          { text: 'Cylinder', link: '/guide/shapes/cylinder' },
+          { text: 'Dodecahedron', link: '/guide/shapes/dodecahedron' },
+          { text: 'Icosahedron', link: '/guide/shapes/icosahedron' },
+          { text: 'Line2', link: '/guide/shapes/line2' },
+          { text: 'Octahedron', link: '/guide/shapes/octahedron' },
+          { text: 'Plane', link: '/guide/shapes/plane' },
+          { text: 'Ring', link: '/guide/shapes/ring' },
+          { text: 'RoundedBox', link: '/guide/shapes/rounded-box' },
+          { text: 'Sphere', link: '/guide/shapes/sphere' },
+          { text: 'Superformula', link: '/guide/shapes/superformula' },
+          { text: 'Tetrahedron', link: '/guide/shapes/tetrahedron' },
+          { text: 'Torus', link: '/guide/shapes/torus' },
+          { text: 'TorusKnot', link: '/guide/shapes/torus-knot' },
+          { text: 'Tube', link: '/guide/shapes/tube' },
+        ],
+      },
+      {
+        text: 'Staging',
+        items: [
+          { text: 'Backdrop', link: '/guide/staging/backdrop' },
+          { text: 'Environment', link: '/guide/staging/environment' },
+          { text: 'useEnvironment', link: '/guide/staging/use-environment' },
+          { text: 'Sky', link: '/guide/staging/sky' },
+          { text: 'Stars', link: '/guide/staging/stars' },
+          { text: 'Smoke', link: '/guide/staging/smoke' },
+          { text: 'ContactShadows', link: '/guide/staging/contact-shadows' },
+          { text: 'Precipitation', link: '/guide/staging/precipitation' },
+          { text: 'Sparkles', link: '/guide/staging/sparkles' },
+          { text: 'Ocean', link: '/guide/staging/ocean' },
+        ],
+      },
+      {
+        text: 'Misc',
+        collapsed: true,
+        items: [
+          { text: 'Stats', link: '/guide/misc/stats' },
+          { text: 'Html', link: '/guide/misc/html-component' },
+          { text: 'StatsGl', link: '/guide/misc/stats-gl' },
+          { text: 'useGLTFExporter', link: '/guide/misc/use-gltf-exporter' },
+          { text: 'BakeShadows', link: '/guide/misc/bake-shadows' },
+        ],
+      },
+    ],
 
     socialLinks: [
       { icon: 'github', link: 'https://github.com/tresjs/cientos' },

docs/.vitepress/theme/components/AnimatedSpriteCenterDemo.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { AnimatedSprite, Box, OrbitControls } from '@tresjs/cientos'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+import type { AtlasData } from '../../../../src/core/abstractions/AnimatedSprite/Atlas'
+
+const { centerX, centerY, fps, asSprite } = useControls({
+  centerX: { value: 0.5, min: 0, max: 1, step: 0.1 },
+  centerY: { value: 0.5, min: 0, max: 1, step: 0.1 },
+  fps: { value: 5, min: 0, max: 30, step: 1 },
+  asSprite: true,
+})
+
+const centerDemoAtlas: AtlasData = { frames: [] }
+const centerDemoImgData = (() => {
+  const NUM_ROWS_COLS = 64
+  const rects: { x: number, y: number, w: number, h: number }[] = []
+  let h = 0
+  for (let r = 0; r < NUM_ROWS_COLS; r += h) {
+    let w = 0
+    h++
+    if (r + h >= NUM_ROWS_COLS) {
+      continue
+    }
+    for (let c = 0; c < NUM_ROWS_COLS; c += w) {
+      w++
+      if (c + w >= NUM_ROWS_COLS) {
+        continue
+      }
+      rects.push({ x: c, y: r, w, h })
+    }
+  }
+
+  const canvas = document.createElement('canvas')
+  const IMG_SIZE = 2048
+  const COL_SIZE = IMG_SIZE / NUM_ROWS_COLS
+  const ROW_SIZE = IMG_SIZE / NUM_ROWS_COLS
+  canvas.width = IMG_SIZE
+  canvas.height = IMG_SIZE
+  document.body.append(canvas)
+  const ctx = canvas.getContext('2d')!
+  const EDGE_center_SIZE = 6
+  rects.forEach((rect, i) => {
+    const frame = { x: rect.x * COL_SIZE, y: rect.y * ROW_SIZE, w: rect.w * COL_SIZE, h: rect.h * ROW_SIZE }
+    const { x, y, w, h } = frame
+    centerDemoAtlas.frames.push({ filename: `rect_${i.toString().padStart(4, '0')}`, frame })
+    ctx.fillStyle = '#222'
+    ctx.fillRect(x, y, w, h)
+
+    ctx.fillStyle = '#999'
+    ctx.fillRect(
+      x + w * 0.5 - EDGE_center_SIZE * 0.5,
+      y + h * 0.5 - EDGE_center_SIZE * 0.5,
+      EDGE_center_SIZE,
+      EDGE_center_SIZE,
+    )
+
+    ctx.fillRect(x, y, EDGE_center_SIZE, EDGE_center_SIZE)
+    ctx.fillRect(x + w * 0.5 - EDGE_center_SIZE * 0.5, y, EDGE_center_SIZE, EDGE_center_SIZE)
+    ctx.fillRect(x + w - EDGE_center_SIZE, y, EDGE_center_SIZE, EDGE_center_SIZE)
+
+    ctx.fillRect(x, y + h * 0.5 - EDGE_center_SIZE * 0.5, EDGE_center_SIZE, EDGE_center_SIZE)
+    ctx.fillRect(x + w - EDGE_center_SIZE, y + h * 0.5 - EDGE_center_SIZE * 0.5, EDGE_center_SIZE, EDGE_center_SIZE)
+
+    ctx.fillRect(x, y + h - EDGE_center_SIZE, EDGE_center_SIZE, EDGE_center_SIZE)
+    ctx.fillRect(x + w * 0.5 - EDGE_center_SIZE * 0.5, y + h - EDGE_center_SIZE, EDGE_center_SIZE, EDGE_center_SIZE)
+    ctx.fillRect(x + w - EDGE_center_SIZE, y + h - EDGE_center_SIZE, EDGE_center_SIZE, EDGE_center_SIZE)
+  })
+  const imgData = canvas.toDataURL()
+  canvas.parentElement?.removeChild(canvas)
+  return imgData
+})()
+</script>
+
+<template>
+  <TresLeches style="position:absolute; left:10px; top:10px;" />
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera
+      :position="[5, 1, 5]"
+      :look-at="[-2, 0, 0]"
+    />
+    <OrbitControls />
+    <TresGroup :position-x="2">
+      <Suspense>
+        <AnimatedSprite
+          :image="centerDemoImgData"
+          :atlas="centerDemoAtlas"
+          animation="rect"
+          :center="[centerX.value, centerY.value]"
+          :fps="fps.value"
+          :as-sprite="asSprite.value"
+        >
+          <TresGroup :scale="0.5">
+            <Box
+              :scale="[1, 0.06, 0.06]"
+              color="red"
+            />
+            <Box
+              :scale="[0.06, 1, 0.06]"
+              color="blue"
+            />
+            <Box
+              :scale="[0.06, 0.06, 1]"
+              color="green"
+            />
+          </TresGroup>
+        </AnimatedSprite>
+      </Suspense>
+      <TresGridHelper :args="[10, 10]" />
+    </TresGroup>
+  </TresCanvas>
+</template>