From 3a488f0c62f9bab4b2d4b1626f36b4b0d34415e2 Mon Sep 17 00:00:00 2001 From: Alvaro Saburido Date: Wed, 27 Sep 2023 08:10:46 +0200 Subject: [PATCH] feat: 23 html component (#184) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: render html from tres back to vue app * feat: correct objectScale and calculatePosition * feat: transform html * feat: add px to style transforms * feat: first attempt of occlussion * feat: fixed occlussion * feat: update html to new `useContextProvider` * feat: occlude works 🥳🎉 * docs: html page * docs: html examples * chore: update lock * chore: updated lock with docs * fix: build issue Stats * fix: add will change trasnform to force GPU * chore: lock update * docs: scroll control demo remove console * docs: temp * docs: why is broken idg * chore: remove console logs * docs: add client only again * docs: props table * chore: updated lint * chore: added rule override and fix Sky * chore: move html transform utils to its own file * chore: fixed lint issue on utils * chore: html shaders to glsl files * chore: disposal of shaderMaterial * chore: added vite-plugin-glsl for build * chore: install correct deps * chore: fix lint misc routes * docs: added geometry and material props to html * chore: components playground dts --- .gitignore | 5 +- docs/.vitepress/config.ts | 15 +- docs/.vitepress/theme/TresLayout.vue | 4 +- docs/.vitepress/theme/components/DocsDemo.vue | 6 +- docs/.vitepress/theme/components/HtmlDemo.vue | 40 + .../theme/components/HtmlLaptopDemo.vue | 61 + .../theme/components/HtmlOccludeDemo.vue | 57 + docs/components.d.ts | 5 +- docs/guide/misc/html-component.md | 185 +++ docs/package.json | 4 +- docs/vite.config.ts | 1 - package.json | 32 +- playground/package.json | 8 +- playground/src/pages/misc/HTMLDemo.vue | 84 ++ playground/src/pages/misc/LaptopDemo.vue | 63 + playground/src/router/index.ts | 1 + playground/src/router/routes/misc.ts | 10 + ...s.timestamp-1692851323714-59f8a1cdcae6.mjs | 39 - pnpm-lock.yaml | 1223 ++++++----------- src/core/misc/html/HTML.vue | 409 ++++++ src/core/misc/html/shaders/fragment.glsl | 3 + src/core/misc/html/shaders/vertex.glsl | 26 + src/core/misc/html/utils.ts | 91 ++ src/core/misc/index.ts | 4 +- src/core/staging/Sky.vue | 1 + stats.html | 8 + vite.config.ts | 17 +- 27 files changed, 1545 insertions(+), 857 deletions(-) create mode 100644 docs/.vitepress/theme/components/HtmlDemo.vue create mode 100644 docs/.vitepress/theme/components/HtmlLaptopDemo.vue create mode 100644 docs/.vitepress/theme/components/HtmlOccludeDemo.vue create mode 100644 docs/guide/misc/html-component.md create mode 100644 playground/src/pages/misc/HTMLDemo.vue create mode 100644 playground/src/pages/misc/LaptopDemo.vue delete mode 100644 playground/vite.config.ts.timestamp-1692851323714-59f8a1cdcae6.mjs create mode 100644 src/core/misc/html/HTML.vue create mode 100644 src/core/misc/html/shaders/fragment.glsl create mode 100644 src/core/misc/html/shaders/vertex.glsl create mode 100644 src/core/misc/html/utils.ts diff --git a/.gitignore b/.gitignore index 9ef79b54..1e7085c3 100644 --- a/.gitignore +++ b/.gitignore @@ -22,5 +22,6 @@ dist-ssr *.njsproj *.sln *.sw? -docs/.vitepress/dist -docs/.vitepress/cache/deps/*.* \ No newline at end of file +docs/.vitepress/dist/ +docs/.vitepress/cache/ +docs/.vitepress/.temp/ \ No newline at end of file diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 2df3fd5b..e6bb4e05 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -1,9 +1,13 @@ import { defineConfig } from 'vitepress' -import Unocss from 'unocss/vite' -import svgLoader from 'vite-svg-loader' import { resolve } from 'pathe' import { templateCompilerOptions } from '@tresjs/core' +const whitelist = [ + 'TresCanvas', + 'TresLeches', + 'TresScene', +] + // https://vitepress.dev/reference/site-config export default defineConfig({ title: 'Cientos', @@ -104,6 +108,7 @@ export default defineConfig({ items: [ { text: 'useTweakpane', link: '/guide/misc/use-tweakpane' }, { text: 'Stats', link: '/guide/misc/stats' }, + { text: 'Html', link: '/guide/misc/html-component' }, { text: 'StatsGl', link: '/guide/misc/stats-gl' }, ], }, @@ -142,6 +147,10 @@ export default defineConfig({ }, }, vue: { - ...templateCompilerOptions, + template: { + compilerOptions: { + isCustomElement: (tag: string) => tag.startsWith('Tres') && !whitelist.includes(tag) || tag === 'primitive', + }, + }, }, }) diff --git a/docs/.vitepress/theme/TresLayout.vue b/docs/.vitepress/theme/TresLayout.vue index c61001ab..e2c36f4f 100644 --- a/docs/.vitepress/theme/TresLayout.vue +++ b/docs/.vitepress/theme/TresLayout.vue @@ -1,8 +1,8 @@