fix(playground): update leches instances

docs/.vitepress/config.ts

@@ -63,8 +63,6 @@ export default defineConfig({
           { 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' },
         ],
       },
       {

docs/.vitepress/theme/components/CustomShaderMaterialDemo.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import {
-  CustomShaderMaterial,
-  useTweakPane,
-  OrbitControls,
-} from '@tresjs/cientos'
+import { CustomShaderMaterial } from '@tresjs/cientos'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
 
 import { MeshBasicMaterial } from 'three'
-import { onMounted, nextTick } from 'vue'
+import { watch, onMounted, nextTick } from 'vue'
 
 const { onLoop } = useRenderLoop()
 
@@ -53,50 +51,47 @@ const materialProps = {
 onMounted(async () => {
   await nextTick()
 
-  createDebugPanel()
-
   onLoop(() => {
     materialProps.uniforms.u_Time.value
-			+= 0.01 * materialProps.uniforms.u_WobbleSpeed.value
+      += 0.01 * materialProps.uniforms.u_WobbleSpeed.value
   })
 })
 
-function createDebugPanel() {
-  const { pane } = useTweakPane('.debug-container')
-
-  const folder = pane.addFolder({
-    title: 'Settings',
-  })
-
-  folder.addInput(materialProps.uniforms.u_WobbleSpeed, 'value', {
-    label: 'Wobble Speed',
+const { speed, amplitude, frequency } = useControls({
+  speed: {
+    value: materialProps.uniforms.u_WobbleSpeed.value,
     min: 0,
     max: 10,
-  })
+  },
 
-  folder.addInput(materialProps.uniforms.u_WobbleAmplitude, 'value', {
-    label: 'Wobble Amplitude',
+  amplitude: {
+    value: materialProps.uniforms.u_WobbleAmplitude.value,
     min: 0,
     max: 0.2,
-  })
+    step: 0.01,
+  },
 
-  folder.addInput(materialProps.uniforms.u_WobbleFrequency, 'value', {
-    label: 'Wobble Frequency',
+  frequency: {
+    value: materialProps.uniforms.u_WobbleFrequency.value,
     min: 1,
     max: 30,
-  })
-}
+  },
+})
+
+watch([speed.value, amplitude.value, frequency.value], () => {
+  materialProps.uniforms.u_WobbleSpeed.value = speed.value.value
+  materialProps.uniforms.u_WobbleAmplitude.value = amplitude.value.value
+  materialProps.uniforms.u_WobbleFrequency.value = frequency.value.value
+})
 </script>
 
 <template>
+  <TresLeches class="top-0 important-left-4" />
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera
       :position="[0, 2, 4]"
-      :look-at="[0, 0, 0]"
+      :look-at="[-1, 0, 0]"
     />
-
-    <OrbitControls />
-
     <TresMesh>
       <TresTorusKnotGeometry :args="[1, 0.3, 512, 32]" />
       <CustomShaderMaterial v-bind="materialProps" />
@@ -108,8 +103,8 @@ function createDebugPanel() {
 
 <style scoped>
 .debug-container {
-	position: absolute;
-	top: 0px;
-	right: 0px;
+  position: absolute;
+  top: 0px;
+  right: 0px;
 }
 </style>

docs/guide/misc/use-tweakpane.md

@@ -1,13 +1,14 @@
-# useTweakPane
-
-[TweakPane](https://cocopon.github.io/tweakpane/) is a JavaScript library for creating a user interface for tweaking values of JavaScript variables. It's a great tool for fine-tuning parameters and monitoring value changes on your three.js applications.
+# useTweakPane <Badge type="warning" text="deprecated" />
 
 ::: warning
 
-useTweakPane is going to be deprecated soon and will no longer be part of this package, please start migrating to [`@tresjs/leches` package](https://github.com/Tresjs/leches) or [v-tweakpane](https://github.com/vinayakkulkarni/v-tweakpane) instead.
+useTweakPane is deprecated as of Cientos v3.7.0 and will no longer be part of this package. Please migrate to [`@tresjs/leches` package](https://github.com/Tresjs/leches) or [v-tweakpane](https://github.com/vinayakkulkarni/v-tweakpane) instead.
 
 :::
 
+[TweakPane](https://cocopon.github.io/tweakpane/) is a JavaScript library for creating a user interface for tweaking values of JavaScript variables. It's a great tool for fine-tuning parameters and monitoring value changes on your three.js applications.
+
+
 ::: code-group
 
 ```bash [pnpm]

docs/package.json

@@ -9,8 +9,7 @@
     "preview": "vitepress preview"
   },
   "dependencies": {
-    "@tresjs/cientos": "workspace:^3.4.0",
-    "@tweakpane/plugin-essentials": "^0.2.0"
+    "@tresjs/cientos": "workspace:^3.4.0"
   },
   "devDependencies": {
     "@tresjs/leches": "^0.13.0",

playground/package.json

@@ -13,7 +13,7 @@
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
-    "@tresjs/leches": "^0.13.0",
+    "@tresjs/leches": "^0.14.0",
     "unplugin-auto-import": "^0.17.1",
     "unplugin-vue-components": "^0.25.2",
     "vite-plugin-glsl": "^1.2.0",

playground/src/pages/abstractions/FBODemo.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
-import { OrbitControls, useTweakPane, Fbo } from '@tresjs/cientos'
+import { OrbitControls, Fbo } from '@tresjs/cientos'
 import { SRGBColorSpace, ACESFilmicToneMapping } from 'three'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
 
 const gl = {
   clearColor: '#82DBC5',
@@ -35,27 +37,31 @@ onMounted(async () => {
     capsuleRef.value.rotation.x = elapsed * 0.471
     capsuleRef.value.rotation.z = elapsed * 0.632
   })
-
-  setupTweakpane()
 })
 
-function setupTweakpane() {
-  const { pane } = useTweakPane()
-
-  pane.title = 'FBO config'
-
-  pane.addInput(state, 'depth', { label: 'Toggle Depth Buffer' })
-
-  pane.addInput(state.settings, 'samples', {
+const { 'Depth Buffer': isUseDepthBuffer, 'MSAA Samples': numMsaaSamples } = useControls({
+  'Depth Buffer': state.depth,
+  'MSAA Samples': {
     label: 'MSAA Samples',
+    value: state.settings.samples,
     min: 0,
     max: 8,
     step: 1,
-  })
-}
+  },
+})
+
+watch(
+  isUseDepthBuffer.value,
+  () => { state.depth = isUseDepthBuffer.value.value },
+)
+watch(
+  numMsaaSamples.value,
+  () => { state.settings.samples = numMsaaSamples.value.value },
+)
 </script>
 
 <template>
+  <TresLeches />
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[0, 0.5, 5]" />
     <OrbitControls />

playground/src/pages/abstractions/LensflareDemo.vue

@@ -57,15 +57,16 @@ const rocks = new Array(ROCK_COUNT).fill(0).map((_, i) => ({
 
 const rockMaterial = new MeshPhongMaterial({ color: 0x123141, specular: 0xffffff, shininess: 1000 })
 
-const [seedRef, scaleRef] = useControls(
+const { seed: seedRef, scale: scaleRef } = useControls(
   {
     seed: { value: 847, min: 0, max: 2 ** 31, step: 1 },
     scale: { value: 1, min: 0, max: 2, step: 0.01 },
   })
 
 {
-  const [oversizeSize, oversizeSizeRand, oversizeNumElements,
-    oversizeNumElementsRand, oversizeColorA, oversizeColorB, oversizeColorC, oversizeSeed] = useControls(
+  const { OversizeSize0: oversizeSize, OversizeSizeRand0: oversizeSizeRand, OversizeCount0: oversizeNumElements,
+    OversizeCountRand0: oversizeNumElementsRand, OversizeColorA0: oversizeColorA, 
+    OversizeColorB0: oversizeColorB, OversizeColorC0: oversizeColorC, OversizeSeed0: oversizeSeed } = useControls(
     'Oversize',
     {
       size0: { value: 768, min: 0, max: 1024, step: 1 },
@@ -78,8 +79,9 @@ const [seedRef, scaleRef] = useControls(
       seed0: { value: 930104199, min: 0, max: 2 ** 31, step: 1 },
     })
 
-  const [raysSize, raysSizeRand, raysNumElements, raysNumElementsRand,
-    raysColorA, raysColorB, raysColorC, raysSeed] = useControls(
+  const { RaysSize1: raysSize, RaysSizeRand1: raysSizeRand, RaysCount1: raysNumElements, 
+    RaysCountRand1: raysNumElementsRand, RaysColorA1: raysColorA, RaysColorB1: raysColorB, 
+    RaysColorC1: raysColorC, RaysSeed1: raysSeed } = useControls(
     'Rays',
     {
       size1: { value: 180, min: 0, max: 512, step: 1 },
@@ -92,8 +94,9 @@ const [seedRef, scaleRef] = useControls(
       seed1: { value: 1021142105, min: 0, max: 2 ** 31, step: 1 },
     })
 
-  const [bodySize, bodySizeRand, bodyNumElements, bodyNumElementsRand,
-    bodyColorA, bodyColorB, bodyColorC, bodySeed] = useControls(
+  const { BodySize2: bodySize, BodySizeRand2: bodySizeRand, BodyCount2: bodyNumElements, 
+    BodyCountRand2: bodyNumElementsRand, BodyColorA2: bodyColorA, BodyColorB2: bodyColorB, 
+    BodyColorC2: bodyColorC, BodySeed2: bodySeed } = useControls(
     'Body',
     {
       size2: { value: 180, min: 0, max: 512, step: 1 },
@@ -106,8 +109,10 @@ const [seedRef, scaleRef] = useControls(
       seed2: { value: 1248736959, min: 0, max: 2 ** 31, step: 1 },
     })
 
-  const [frontSize, frontSizeRand, frontOffset, frontSpread, frontNumElements, frontNumElementsRand,
-    frontColorA, frontColorB, frontColorC, frontSeed] = useControls(
+  const { FrontSize3: frontSize, FrontSizeRand3: frontSizeRand, FrontOffset3: frontOffset, 
+    FrontSpread3: frontSpread, FrontCount3: frontNumElements, FrontCountRand3: frontNumElementsRand,
+    FrontColorA3: frontColorA, FrontColorB3: frontColorB, FrontColorC3: frontColorC, 
+    FrontSeed3: frontSeed } = useControls(
     'Front',
     {
       size3: { value: 20, min: 0, max: 512, step: 1 },
@@ -123,8 +128,9 @@ const [seedRef, scaleRef] = useControls(
     },
   )
 
-  const [backSize, backSizeRand, backOffset, backSpread, backNumElements, backNumElementsRand,
-    backColorA, backColorB, backColorC, backSeed] = useControls(
+  const { BackSize4: backSize, BackSizeRand4: backSizeRand, BackOffset4: backOffset, BackSpread4: backSpread, 
+    BackCount4: backNumElements, BackCountRand4: backNumElementsRand, BackColorA4: backColorA, 
+    BackColorB4: backColorB, BackColorC4: backColorC, BackSeed4: backSeed } = useControls(
     'Back',
     {
       size4: { value: 180, min: 0, max: 512, step: 1 },
@@ -291,8 +297,8 @@ const [seedRef, scaleRef] = useControls(
       :position="[10, 5, 0]"
     >
       <Lensflare
-        :scale="scaleRef.value.value"
-        :seed="seedRef.value.value"
+        :scale="scaleRef.value"
+        :seed="seedRef.value"
         :seed-props="seedPropsRef"
       />
     </TresPointLight>

playground/src/pages/abstractions/LeviosoDemo.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, useTweakPane, Levioso, TorusKnot } from '@tresjs/cientos'
+import { OrbitControls, Levioso, TorusKnot } from '@tresjs/cientos'
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 import { shallowRef, shallowReactive } from 'vue'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
 
 const gl = {
   clearColor: '#82DBC5',
@@ -13,36 +15,29 @@ const gl = {
   toneMapping: NoToneMapping,
 }
 
-const { pane } = useTweakPane()
-
 const leviosoState = shallowReactive({
   speed: 5,
   rotationFactor: 1,
   floatFactor: 1,
   range: [-0.1, 0.1],
 })
 
-pane.addInput(leviosoState, 'speed', {
-  step: 1,
-  min: 0,
-  max: 100,
-})
-
-pane.addInput(leviosoState, 'rotationFactor', {
-  step: 1,
-  min: 0,
-  max: 10,
+const { speed, rotationFactor, floatFactor } = useControls({
+  speed: { value: leviosoState.speed, min: 0, max: 100, step: 1 },
+  rotationFactor: { value: leviosoState.rotationFactor, min: 0, max: 10, step: 1 },
+  floatFactor: { value: leviosoState.floatFactor, min: 0, max: 10, step: 1 },
 })
 
-pane.addInput(leviosoState, 'floatFactor', {
-  step: 1,
-  min: 0,
-  max: 10,
+watch([speed.value, rotationFactor.value, floatFactor.value], () => {
+  leviosoState.speed = speed.value.value
+  leviosoState.rotationFactor = rotationFactor.value.value
+  leviosoState.floatFactor = floatFactor.value.value
 })
 const groupRef = shallowRef()
 </script>
 
 <template>
+  <TresLeches />
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[11, 11, 11]" />
     <OrbitControls />