feat: on-demand Wobble Material

Tresjs · Jun 17, 2024 · 14b3bc3 · 14b3bc3
1 parent ee5f40d
commit 14b3bc3
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/...nd/src/pages/materials/WobbleMaterial.vue → ...rc/pages/materials/WobbleMaterialDemo.vue b/...nd/src/pages/materials/WobbleMaterial.vue → ...rc/pages/materials/WobbleMaterialDemo.vue
@@ -20,6 +20,7 @@ const context = ref()
   <TresCanvas
     v-bind="gl"
     ref="context"
+    render-mode="on-demand"
   >
     <TresPerspectiveCamera :position="[3, 3, 3]" />
     <TresMesh>

diff --git a/playground/src/router/routes/materials.ts b/playground/src/router/routes/materials.ts
@@ -2,7 +2,7 @@ export const materialsRoutes = [
   {
     path: '/materials/wobble-material',
     name: 'WobbleMaterial',
-    component: () => import('../../pages/materials/WobbleMaterial.vue'),
+    component: () => import('../../pages/materials/WobbleMaterialDemo.vue'),
   },
   {
     path: '/materials/glass-material',

diff --git a/src/core/materials/meshWobbleMaterial/index.vue b/src/core/materials/meshWobbleMaterial/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue'
 import { useLoop, useTresContext } from '@tresjs/core'
+import { useOnDemandInvalidation } from '../../../composables/useOnDemandInvalidation'
 
 import { WobbleMaterialImpl as MeshWobbleMaterial } from './material'
 
@@ -15,6 +16,8 @@ const props = withDefaults(
   },
 )
 
+const { invalidateOnDemand } = useOnDemandInvalidation(props)
+
 const materialRef = shallowRef()
 
 const { extend } = useTresContext()
@@ -25,6 +28,7 @@ const { onBeforeRender } = useLoop()
 onBeforeRender(({ elapsed }) => {
   if (materialRef.value) {
     materialRef.value.time = elapsed * props?.speed
+    invalidateOnDemand()
   }
 })