fix: 58 postprocessing breaks on nuxt (#69)

* feat: added pixelation effect component

* chore: added playground code for pixelation effect

* docs: pixelation effect docs

* chore: removed debug code

* chore: add nuxt playground

* fix: initilize effect composer onmounted if canvas sizes > 0

* chore: stats

* chore: removed onMounted in EffectComposer

---------

Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>

Author: alvarosabu

playground-nuxt/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

playground-nuxt/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

playground-nuxt/README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

playground-nuxt/app.vue

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

playground-nuxt/nuxt.config.ts

@@ -0,0 +1,17 @@
+import { resolve } from 'pathe'
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  modules: [
+    '@tresjs/nuxt',
+  ],
+  vite: {
+    resolve: {
+      alias: {
+        '@tresjs/post-processing': resolve(__dirname, '../src/'),
+      },
+      dedupe: ['three', '@tresjs/core'],
+    },
+  },
+})

playground-nuxt/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "nuxt-app",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@tresjs/cientos": "^3.5.1",
+    "@tresjs/nuxt": "^1.2.2",
+    "@types/three": "^0.152.1"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "latest",
+    "nuxt": "^3.8.0",
+    "vue": "^3.3.7",
+    "vue-router": "^4.2.5"
+  }
+}

playground-nuxt/pages/index.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { BlendFunction } from 'postprocessing'
+import { Color, BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { reactive } from 'vue'
+import { EffectComposer, Bloom } from '@tresjs/post-processing'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const bloomParams = reactive({
+  luminanceThreshold: 0.2,
+  luminanceSmoothing: 0.3,
+  intensity: 4.0,
+  blendFunction: BlendFunction.ADD,
+})
+</script>
+
+<template>
+  <TresCanvas
+    v-bind="gl"
+    window-size
+  >
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <TresMesh>
+      <TresSphereGeometry :args="[2, 32, 32]" />
+      <TresMeshStandardMaterial
+        color="hotpink"
+        :emissive="new Color('hotpink')"
+        :emissive-intensity="9"
+      />
+    </TresMesh>
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+    <Suspense>
+      <EffectComposer :depth-buffer="true">
+        <Bloom />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
+</template>

playground-nuxt/public/favicon.ico

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

playground-nuxt/server/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}