CHANGELOG.md

@@ -1,5 +1,40 @@
 
 
+## [2.0.0](https://example.com///compare/1.3.0...2.0.0) (2023-12-11)
+
+
+### Features
+
+* 65 add vite plugin glsl for shaders support via options ([#68](https://example.com//null/issues/68)) ([965803a](https://example.com///commit/965803af819bb4946eb49a696ec558527076c2da))
+* nuxt devtools tab ([#66](https://example.com//null/issues/66)) ([3c131f6](https://example.com///commit/3c131f6b836b7f28168cdc4773fa6fb6b7ec6279))
+
+## [1.4.0-next.1](https://example.com///compare/1.4.0-next.0...1.4.0-next.1) (2023-12-10)
+
+
+### Features
+
+* icons for bones, groups, skinned mesh and fix subitem tree borders ([d0672da](https://example.com///commit/d0672da7598e2b637e95caf086734831729ff069))
+
+
+### Bug Fixes
+
+* issues with reactivity and renderer info ([6fbb87c](https://example.com///commit/6fbb87cb7f85800e48935b183abfc64c1a52bc28))
+
+## [1.4.0-next.0](https://example.com///compare/1.3.0...1.4.0-next.0) (2023-12-06)
+
+
+### Features
+
+* change name to scenegraphitem ([8368efc](https://example.com///commit/8368efc6432ee3b4943fd5c3ba850bca352e1a85))
+* devtools scene graph and cb injection ([0cc3e31](https://example.com///commit/0cc3e31541f44b182587821c03ed3523795b6e7b))
+* nuxt ui on client and more info about scene objects ([1c6e53d](https://example.com///commit/1c6e53d93905b2d4d29b82832e154ad80fba6e7a))
+* use devtool cb and perf stats from core ([e35d546](https://example.com///commit/e35d546d3c30d0ce2064aa339201833395dfc1e6))
+
+
+### Bug Fixes
+
+* **types:** improve types ([29ff44d](https://example.com///commit/29ff44d0da6f743e7ebf757d599ab5112f38760a))
+
 ## [1.3.0](https://example.com///compare/1.2.2...1.3.0) (2023-12-02)
 
 

README.md

@@ -19,6 +19,7 @@ Official Nuxt module for TresJS. Build 3D scenes as they were Vue components.
 - `TresCanvas` client only, you don't need to add `.client` to the component name or `<ClientOnly />`
 - Automatically configures vue compiler to support TresJS components, see [why](https://tresjs.org/guide/troubleshooting.html#failed-resolve-component-trescomponent-%F0%9F%A4%94)?
 - All the DX Magic that comes with Nuxt ✨
+-  NEW v2: TresJS nuxt devtools.
 
 ## Quick Setup
 
@@ -52,6 +53,67 @@ If you want to use the any package from the TresJS ecosystem, you can install th
 pnpm add @tresjs/cientos @tresjs/post-processing
 ```
 
+## Devtools
+
+![Devtools](/public/tresjs-nuxt-devtools.png)
+
+TresJS nuxt module comes with a devtools extension that allows you to inspect the 3D scene and measure performance.
+
+To activate the devtools, you need to add the `devtools` option to the `tres` section of `nuxt.config.ts`.
+
+
+```js
+export default defineNuxtConfig({
+  modules: ['@tresjs/nuxt', '@nuxt/devtools' ],
+  tres: {
+    devtools: true,
+  },
+})
+```
+
+## GLSL shaders support
+
+TresJS nuxt module comes with a vite plugin that allows you to import GLSL shaders as strings. It uses [`vite-plugin-glsl`](https://github.com/UstymUkhman/vite-plugin-glsl) under the hood.
+
+```js
+export default defineNuxtConfig({
+  modules: ['@tresjs/nuxt', '@nuxt/devtools' ],
+  tres: {
+    glsl: true,
+  },
+})
+```
+
+With this option enabled, you can import GLSL shaders as strings in your components.
+
+```vue
+<script setup lang="ts">
+import vertexShader from './shaders/vertex.glsl'
+import fragmentShader from './shaders/fragment.glsl'
+
+const uniforms = {
+  uTime: { value: 0 },
+  uAmplitude: { value: new Vector2(0.1, 0.1) },
+  uFrequency: { value: new Vector2(20, 5) },
+}
+</script>
+
+<template>
+  <TresMesh
+    :position="[0, 4, 0]"
+  >
+    <TresSphereGeometry :args="[2, 32, 32]" />
+    <TresShaderMaterial
+      :vertex-shader="vertexShader"
+      :fragment-shader="fragmentShader"
+      :uniforms="uniforms"
+    />
+  </TresMesh>
+</template>
+```
+
+
+
 ## Development
 
 ```bash

client/.nuxtrc

@@ -0,0 +1 @@
+imports.autoImport=true

client/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

client/components/Graph.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue'
+
+const props = withDefaults(defineProps<{
+  points: Array<number> // Array of y-values
+  value: number
+  unit: string
+  label: string
+  color: string
+}>(),
+{
+  points: () => [],
+  value: 0,
+  unit: '',
+  label: '',
+  color: 'green',
+})
+
+const width = 160
+const height = 40
+const strokeWidth = 2
+
+// Determine the maximum value for scaling the graph
+const maxValue = ref(140)
+
+// Update maxValue to accommodate the range of y-values in points
+watchEffect(() => {
+  const highestValue = Math.max(...props.points, 30) // Ensure at least 30
+  maxValue.value = Math.max(highestValue, maxValue.value)
+})
+
+const pointsF = computed(() => props.points.map(
+  (point, index) =>
+    `${index * strokeWidth},${height - (point * height / maxValue.value)}`,
+).join(' '))  
+</script>
+
+<template>
+  <div
+    class="
+      graph
+      relative
+      p-1
+      rounded
+      text-right
+      text-xs 
+      outline-none
+      border-none
+      font-sans
+    "
+  >
+    <div class="absolute bottom-0.5 right-0.5 font-mono text-xs">
+      {{ Math.round(value) }} {{ unit }}
+    </div>
+    <svg
+      width="100%"
+      :height="height"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline
+        :points="pointsF"
+        fill="none"
+        :stroke="color"
+        :stroke-width="strokeWidth"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </div>
+</template>
+
+<style>
+.graph {
+  background-color: rgba(var(--nui-c-context), 0.1);
+  color: rgba(var(--nui-c-context), 1);
+}
+
+.graph polyline {
+  stroke: rgba(var(--nui-c-context), 1);
+}
+</style>

client/components/ModuleAuthorNote.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <NTip
+    n="teal"
+    class="py-4"
+  >
+    <p class="font-bold">
+      Note for module authors:
+    </p>
+    Nuxt DevTools is in early preview and the API is subject to change.
+    Which means the setup in this template is only presenting the current state of the API.
+    We suggest following closely to the changes in the <NLink
+      href="https://github.com/nuxt/devtools"
+      target="_blank"
+    >
+      nuxt/devtools
+    </NLink> repository.<br>
+    The UI components are coming from <NLink
+      href="https://github.com/nuxt/devtools/tree/main/packages/devtools-ui-kit"
+      target="_blank"
+    >
+      @nuxt/devtools-ui-kit
+    </NLink>.
+  </NTip>
+</template>

client/components/Pane.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+}>()
+</script>
+
+<template>
+  <div
+    class="relative
+    px-4
+    py-6
+    border
+    border-solid
+    border-gray-200
+    rounded
+    my-4"
+  >
+    <span
+      class="absolute
+      bg-white
+      text-xs
+      dark:bg-[#151515]
+      text-gray-400
+      px-2
+      rounded
+      -top-2
+      left-2"
+    >{{ title }}</span>
+    <slot />
+  </div>
+</template>

client/components/PerformanceMonitor.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { useDevtoolsHook } from '../composables/useDevtoolsHook'
+import { bytesToKB } from '../utils'
+
+const { fps, memory, renderer } = useDevtoolsHook()
+</script>
+
+<template>
+  <div class="grid grid-cols-2 gap-4">
+    <NCard
+      class="col-span-1"
+      n="green"
+    >
+      <Graph
+        :points="fps.accumulator"
+        :value="fps.value"
+        color="green"
+        n="green"
+        unit="FPS"
+        label="FPS"
+      />
+    </NCard>
+    <NCard
+      class="col-span-1"
+      n="green"
+    >
+      <Graph
+        :points="memory.accumulator"
+        :value="memory.currentMem"
+        color="yellow"
+        n="yellow"
+        unit="MB"
+        label="memory"
+      />
+    </NCard>
+    <Pane title="Memory ">
+      <div class="flex p4 justify-around w-full">
+        <div class="flex flex-col items-center gap-2">
+          <div class="flex items-center font-mono gap-2">
+            {{ renderer.info?.memory?.geometries || 0 }}
+            <i class="i-iconoir-box-3d-three-points" />
+          </div>
+          <span class="text-xs text-gray-500">Geometries</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <div class="flex items-center font-mono gap-2">
+            {{ renderer.info?.memory?.textures || 0 }}
+            <i class="i-iconoir-select-face-3d" />
+          </div>
+          <span class="text-xs text-gray-500">Textures</span>
+        </div>
+      </div>
+      <div class="p4">
+        <NTip class="text-sm">
+          <Icon
+            class="mr2"
+            name="carbon:information"
+          />Memory allocated by objects is aprox <strong>{{ bytesToKB(memory.allocatedMem) }} KB </strong>
+        </NTip>
+      </div>
+    </Pane>
+    <Pane title="Render">
+      <div class="grid grid-cols-2 p4 justify-around w-full">
+        <div class="flex flex-col items-center gap-2 mb4">
+          <div class="flex items-center font-mono gap-2">
+            {{ renderer?.info?.render?.calls || 0 }}
+            <i class="i-iconoir-comp-align-left" />
+          </div>
+          <span class="text-xs text-gray-500">Calls</span>
+        </div>
+        <div class="flex flex-col items-center gap-2 mb4">
+          <div class="flex items-center font-mono gap-2">
+            {{ renderer?.info?.render?.triangles || 0 }}
+            <i class="i-iconoir-triangle" />
+          </div>
+          <span class="text-xs text-gray-500">Triangles</span>
+        </div>
+        <div class="flex flex-col items-center gap-2 mb4">
+          <div class="flex items-center font-mono gap-2">
+            {{ renderer?.info?.render?.points || 0 }}
+            <i class="i-iconoir-one-point-circle" />
+          </div>
+          <span class="text-xs text-gray-500">Points</span>
+        </div>
+        <div class="flex flex-col items-center gap-2 mb4">
+          <div class="flex items-center font-mono gap-2">
+            {{ renderer?.info?.render?.lines || 0 }}
+            <i class="i-iconoir-linear" />
+          </div>
+          <span class="text-xs text-gray-500">Lines</span>
+        </div>
+      </div>
+    </Pane>
+  </div>
+  <div class="">
+    <Pane title="Programs">
+      <ProgramsModule />
+    </Pane>
+  </div>
+</template>