chore: added shader example to playground

package.json

@@ -90,7 +90,6 @@
     "vite": "^4.1.4",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-dts": "2.1.0",
-    "vite-plugin-glsl": "^1.1.2",
     "vite-plugin-inspect": "^0.7.16",
     "vite-plugin-require-transform": "^1.0.9",
     "vite-svg-loader": "^4.0.0",

playground/components.d.ts

@@ -15,6 +15,8 @@ declare module '@vue/runtime-core' {
     Responsiveness: typeof import('./src/components/Responsiveness.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    ShadersExperiment: typeof import('./src/components/ShadersExperiment/index.vue')['default']
+    'ShadersExperiment.vue': typeof import('./src/components/shadersExperiment.vue/index.vue')['default']
     Shapes: typeof import('./src/components/Shapes.vue')['default']
     TestSphere: typeof import('./src/components/TestSphere.vue')['default']
     Text3D: typeof import('./src/components/Text3D.vue')['default']

playground/package.json

@@ -16,10 +16,11 @@
   "devDependencies": {
     "@tresjs/cientos": "2.0.0-alpha.5",
     "@vitejs/plugin-vue": "^4.1.0",
-    "typescript": "^4.9.3",
+    "typescript": "^5.0.2",
     "unplugin-auto-import": "^0.15.2",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "^4.2.0",
+    "vite": "^4.2.1",
+    "vite-plugin-glsl": "^1.1.2",
     "vue-tsc": "^1.2.0"
   }
 }

playground/pnpm-lock.yaml

@@ -4,10 +4,11 @@ specifiers:
   '@tresjs/cientos': 2.0.0-alpha.5
   '@vitejs/plugin-vue': ^4.1.0
   three: ^0.150.1
-  typescript: ^4.9.3
+  typescript: ^5.0.2
   unplugin-auto-import: ^0.15.2
   unplugin-vue-components: ^0.24.1
-  vite: ^4.2.0
+  vite: ^4.2.1
+  vite-plugin-glsl: ^1.1.2
   vue: ^3.2.47
   vue-router: ^4.1.6
   vue-tsc: ^1.2.0
@@ -20,11 +21,12 @@ dependencies:
 devDependencies:
   '@tresjs/cientos': 2.0.0-alpha.5_three@0.150.1+vue@3.2.47
   '@vitejs/plugin-vue': 4.1.0_vite@4.2.1+vue@3.2.47
-  typescript: 4.9.5
+  typescript: 5.0.2
   unplugin-auto-import: 0.15.2
   unplugin-vue-components: 0.24.1_vue@3.2.47
   vite: 4.2.1
-  vue-tsc: 1.2.0_typescript@4.9.5
+  vite-plugin-glsl: 1.1.2_vite@4.2.1
+  vue-tsc: 1.2.0_typescript@5.0.2
 
 packages:
 
@@ -982,9 +984,9 @@ packages:
       is-number: 7.0.0
     dev: true
 
-  /typescript/4.9.5:
-    resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==}
-    engines: {node: '>=4.2.0'}
+  /typescript/5.0.2:
+    resolution: {integrity: sha512-wVORMBGO/FAs/++blGNeAVdbNKtIh1rbBL2EyQ1+J9lClJ93KiiKe8PmFIVdXhHcyv44SL9oglmfeSsndo0jRw==}
+    engines: {node: '>=12.20'}
     hasBin: true
     dev: true
 
@@ -1071,6 +1073,18 @@ packages:
       webpack-virtual-modules: 0.5.0
     dev: true
 
+  /vite-plugin-glsl/1.1.2_vite@4.2.1:
+    resolution: {integrity: sha512-zmXsfc1vn2MlYve9t3FAoWuhLyoCkNS1TuQL+TkXZL7tGmBjRErp10eNYxcse5tK9oUC5MyJpNc4ElpQnx8DoA==}
+    engines: {node: '>= 16.15.1', npm: '>= 8.11.0'}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0
+    dependencies:
+      '@rollup/pluginutils': 5.0.2
+      vite: 4.2.1
+    transitivePeerDependencies:
+      - rollup
+    dev: true
+
   /vite/4.2.1:
     resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -1135,7 +1149,7 @@ packages:
       he: 1.2.0
     dev: true
 
-  /vue-tsc/1.2.0_typescript@4.9.5:
+  /vue-tsc/1.2.0_typescript@5.0.2:
     resolution: {integrity: sha512-rIlzqdrhyPYyLG9zxsVRa+JEseeS9s8F2BbVVVWRRsTZvJO2BbhLEb2HW3MY+DFma0378tnIqs+vfTzbcQtRFw==}
     hasBin: true
     peerDependencies:
@@ -1143,7 +1157,7 @@ packages:
     dependencies:
       '@volar/vue-language-core': 1.2.0
       '@volar/vue-typescript': 1.2.0
-      typescript: 4.9.5
+      typescript: 5.0.2
     dev: true
 
   /vue/3.2.47:

playground/src/components/ShadersExperiment/index.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { BasicShadowMap, sRGBEncoding, NoToneMapping, Vector2 } from 'three'
+import { TresCanvas, TresInstance, useRenderLoop } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import vertexShader from './shaders/vertex.glsl'
+import fragmentShader from './shaders/fragment.glsl'
+import { ShallowRef } from 'vue'
+
+const gl = {
+  clearColor: '#4f4f4f',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputEncoding: sRGBEncoding,
+  toneMapping: NoToneMapping,
+}
+
+const blobRef: ShallowRef<TresInstance | null> = shallowRef(null)
+
+const uniforms = {
+  uTime: { value: 0 },
+  uAmplitude: { value: new Vector2(0.1, 0.1) },
+  uFrequency: { value: new Vector2(20, 5) },
+}
+
+const { onLoop } = useRenderLoop()
+onLoop(({ elapsed }) => {
+  if (blobRef.value) {
+    blobRef.value.material.uniforms.uTime.value = elapsed
+  }
+})
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <OrbitControls />
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <TresMesh ref="blobRef" :position="[0, 4, 0]">
+      <TresSphereGeometry :args="[2, 32, 32]" />
+      <TresShaderMaterial :vertex-shader="vertexShader" :fragment-shader="fragmentShader" :uniforms="uniforms" />
+    </TresMesh>
+    <TresMesh :rotation="[-Math.PI / 2, 0, 0]">
+      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+      <TresMeshBasicMaterial color="#444" />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>

playground/src/components/ShadersExperiment/shaders/fragment.glsl

@@ -0,0 +1,6 @@
+precision mediump float;
+varying vec2 vUv;
+
+void main() {
+    gl_FragColor = vec4(1.0, vUv.y, 0.5, 1.0);
+}

playground/src/components/ShadersExperiment/shaders/vertex.glsl

@@ -0,0 +1,15 @@
+uniform vec2 uAmplitude;
+uniform vec2 uFrequency;
+uniform float uTime;
+
+varying vec2 vUv;
+
+void main() {
+    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+    modelPosition.y += sin(modelPosition.x * uFrequency.x - uTime) * uAmplitude.x;
+    modelPosition.x += cos(modelPosition.y * uFrequency.y - uTime) * uAmplitude.y;
+
+    vec4 viewPosition = viewMatrix * modelPosition;
+    gl_Position = projectionMatrix * viewPosition;
+    vUv = uv;
+}

playground/src/components/gltf/TheExperiment.vue

@@ -3,7 +3,6 @@ import { sRGBEncoding, BasicShadowMap, NoToneMapping } from 'three'
 import { TresCanvas } from '/@/'
 import { GLTFModel, OrbitControls } from '@tresjs/cientos'
 
-
 const state = reactive({
   clearColor: '#82DBC5',
   shadows: true,
@@ -17,12 +16,11 @@ const state = reactive({
 const akuAkuRef = ref(null)
 
 watchEffect(() => {
-  if(akuAkuRef.value) {
+  if (akuAkuRef.value) {
     const model = akuAkuRef.value.getModel().children[0]
     console.log('akuAkuRef', model)
   }
 })
-
 </script>
 <template>
   <TresCanvas v-bind="state">
@@ -31,7 +29,11 @@ watchEffect(() => {
     <TresAmbientLight :intensity="0.5" />
 
     <Suspense>
-        <GLTFModel ref="akuAkuRef" path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf" draco />
+      <GLTFModel
+        ref="akuAkuRef"
+        path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf"
+        draco
+      />
       <!--   <AkuAku /> -->
     </Suspense>
     <TresAxesHelper />

playground/src/pages/index.vue

@@ -1,9 +1,7 @@
-<script setup lang="ts">
-
-</script>
+<script setup lang="ts"></script>
 <template>
-    <router-link to="/shapes">Shapes</router-link>
-    <Suspense>
-        <TheBasic />
-    </Suspense>
-</template>
+  <router-link to="/shapes">Shapes</router-link>
+  <Suspense>
+    <ShadersExperiment />
+  </Suspense>
+</template>

playground/src/style.css

@@ -8,4 +8,4 @@ body {
 #app {
   height: 100%;
   width: 100%;
-}
+}

playground/vite.config.ts

@@ -3,28 +3,32 @@ import vue from '@vitejs/plugin-vue'
 import { resolve } from 'pathe'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
-
+import glsl from 'vite-plugin-glsl'
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue({
-    template: {
-      compilerOptions: {
-        isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',
+  plugins: [
+    glsl(),
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',
+        },
       },
-    },
-  }),
-  AutoImport({
-    dts: true,
-    eslintrc: {
-      enabled: true, // <-- this
-    },
-    imports: ['vue'],
-  }),
-  Components({ /* options */ }),],
+    }),
+    AutoImport({
+      dts: true,
+      eslintrc: {
+        enabled: true, // <-- this
+      },
+      imports: ['vue'],
+    }),
+    Components({
+      /* options */
+    }),
+  ],
   resolve: {
     alias: {
       '/@': resolve(__dirname, '../src'),
-      
     },
     dedupe: ['@tresjs/core', 'three'],
   },

pnpm-lock.yaml

@@ -51,7 +51,7 @@ importers:
       '@release-it/conventional-changelog': 5.1.1_release-it@15.9.1
       '@stackblitz/sdk': 1.8.2
       '@tresjs/cientos': 2.0.0-alpha.5_three@0.150.1
-      '@types/three': 0.149.0
+      '@types/three': 0.150.0
       '@typescript-eslint/eslint-plugin': 5.56.0_cnkxirszkzb4o6ts7gbclno24e
       '@typescript-eslint/parser': 5.56.0_eslint@8.36.0
       '@vitejs/plugin-vue': 4.0.0_vite@4.1.4
@@ -1235,12 +1235,25 @@ packages:
     resolution: {integrity: sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==}
     dev: true
 
+  /@types/stats.js/0.17.0:
+    resolution: {integrity: sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==}
+    dev: true
+
   /@types/three/0.149.0:
     resolution: {integrity: sha512-fgNBm9LWc65ER/W0cvoXdC0iMy7Ke9e2CONmEr6Jt8sDSY3sw4DgOubZfmdZ747dkPhbQrgRQAWwDEr2S/7IEg==}
     dependencies:
       '@types/webxr': 0.5.1
     dev: true
 
+  /@types/three/0.150.0:
+    resolution: {integrity: sha512-AGhnz/pfV9lajfPMrzRyP/nySpZYfpoXdayGk0Tiwkzc6hsWOCkz/Q696Muxn9HV2EkQJ3u8g/dDt7jcP5Tecg==}
+    dependencies:
+      '@types/stats.js': 0.17.0
+      '@types/webxr': 0.5.1
+      fflate: 0.6.10
+      lil-gui: 0.17.0
+    dev: true
+
   /@types/web-bluetooth/0.0.16:
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
 
@@ -4504,6 +4517,10 @@ packages:
       type-check: 0.4.0
     dev: true
 
+  /lil-gui/0.17.0:
+    resolution: {integrity: sha512-MVBHmgY+uEbmJNApAaPbtvNh1RCAeMnKym82SBjtp5rODTYKWtM+MXHCifLe2H2Ti1HuBGBtK/5SyG4ShQ3pUQ==}
+    dev: true
+
   /lines-and-columns/1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
     dev: true