chore: cientos playground structure alike (#76)

* chore: new playground structure * chore: tres leches GUI on glitch demo * chore: bloom and glitch demos leches
Tresjs · Nov 8, 2023 · 01c36c8 · 01c36c8
1 parent cdb9497
commit 01c36c8
Show file tree

Hide file tree

Showing 11 changed files with 394 additions and 170 deletions.
diff --git a/playground/index.html b/playground/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Vue + TS</title>
   </head>

diff --git a/playground/public/favicon.svg b/playground/public/favicon.svg
diff --git a/playground/public/logo.svg b/playground/public/logo.svg
diff --git a/playground/public/nuxt-stones/package.json b/playground/public/nuxt-stones/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "docs",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vitepress dev",
+    "build": "vitepress build",
+    "preview": "vitepress preview"
+  },
+  "dependencies": {
+    "@tresjs/cientos": "^3.0.1",
+    "@tresjs/core": "^3.2.2",
+    "@tresjs/post-processing": "workspace:^",
+    "gsap": "^3.11.5"
+  },
+  "devDependencies": {
+    "unocss": "^0.52.3",
+    "unplugin-vue-components": "^0.24.1",
+    "vite-svg-loader": "^4.0.0",
+    "vitepress": "1.0.0-beta.1"
+  }
+}
diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -1,5 +1,17 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+function setBodyClass(routeName: string) {
+  document.title = `Post-processing Playground - ${routeName}`
+  document.body.className = routeName
+}
+watch([route], () => setBodyClass(route.name?.toString() ?? ''))
+</script>
 
 <template>
-  <router-view />
+  <Suspense>
+    <router-view />
+  </Suspense>
 </template>
diff --git a/playground/src/components/GlitchDemo.vue b/playground/src/components/GlitchDemo.vue
diff --git a/playground/src/components/UnrealBloom.vue b/playground/src/components/UnrealBloom.vue
diff --git a/playground/src/pages/bloom.vue b/playground/src/pages/bloom.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { Color, BasicShadowMap, NoToneMapping } from 'three'
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, useTweakPane } from '@tresjs/cientos'
+import { BlendFunction, KernelSize } from 'postprocessing'
+import { EffectComposer, Bloom } from '@tresjs/post-processing'
+import { onMounted, reactive, ref, watch } from 'vue'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#121212',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  toneMapping: NoToneMapping,
+}
+
+useControls('fpsgraph')
+
+const materialRef = ref()
+const {
+  intensity,
+  blendFunction, 
+  resolution,
+  kernelSize,
+  mipmapBlur,
+} = useControls({
+  intensity: {
+    value: 4.0,
+    min: 0,
+    max: 10,
+    step: 0.1,
+  },
+  blendFunction: {
+    options: Object.keys(BlendFunction).map(key => ({
+      text: key,
+      value: BlendFunction[key],
+    })),
+    value: BlendFunction.ADD,
+  },
+  resolution: {
+    value: 256,
+    min: 64,
+    max: 512,
+    step: 64,
+  },
+  kernelSize: {
+    options: Object.keys(KernelSize).map(key => ({
+      text: key,
+      value: KernelSize[key],
+    })),
+    value: KernelSize.VERY_SMALL,
+  },
+  mipmapBlur: true,
+})
+
+const { threshold, smoothing } = useControls('luminance', {
+  threshold: {
+    value: 0.2,
+    min: 0,
+    max: 1,
+    step: 0.01,
+  },
+  smoothing: {
+    value: 0.3,
+    min: 0,
+    max: 1,
+    step: 0.01,
+  },
+})
+
+onMounted(() => {
+  if (materialRef.value) {
+    const { value: emissiveIntensity } = useControls({
+      emissiveIntensity: {
+        value: 1,
+        min: 0,
+        max: 10,
+        step: 0.1,
+      },
+    })
+    
+    watch(emissiveIntensity, (newValue) => {
+      materialRef.value.emissiveIntensity = newValue
+    })
+  }
+})
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas
+    v-bind="gl"
+    :disable-render="true"
+  >
+    <TresPerspectiveCamera
+      :position="[5, 5, 5]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+    <TresMesh>
+      <TresSphereGeometry :args="[2, 32, 32]" />
+      <TresMeshStandardMaterial
+        color="hotpink"
+        :emissive="new Color('hotpink')"
+        :emissive-intensity="9"
+      />
+    </TresMesh>
+    <TresMesh :position="[2, 2, -2]">
+      <TresSphereGeometry :args="[2, 32, 32]" />
+      <TresMeshStandardMaterial color="hotpink" />
+    </TresMesh>
+    <TresMesh>
+      <TresSphereGeometry :args="[2, 32, 32]" />
+      <TresMeshStandardMaterial
+        ref="materialRef"
+        color="hotpink"
+        :emissive="new Color('hotpink')"
+        :emissive-intensity="1"
+      />
+    </TresMesh>
+    <TresGridHelper />
+    <TresAmbientLight :intensity="0.5" />
+    <TresDirectionalLight
+      :position="[3, 3, 3]"
+      :intensity="2"
+    />
+    <Suspense>
+      <EffectComposer :depth-buffer="true">
+        <Bloom
+          :luminance-threshold="threshold.value"
+          :luminance-smoothing="smoothing.value"
+          :intensity="intensity.value"
+          :blend-function="blendFunction.value"
+          :kernel-size="kernelSize.value"
+          :resolution="resolution.value"
+          :mipmap-blur="mipmapBlur.value"
+        />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
+</template>