@vyr/three-browser 0.0.1

package/src/option/Geometry.ts

@@ -0,0 +1,22 @@
+import { language } from '../locale'
+
+const cylinderOptions = [
+    { label: language.get('option.Geometry.cylinder.true'), value: true },
+    { label: language.get('option.Geometry.cylinder.false'), value: false },
+]
+
+const extrudeUvOptions = [
+    { label: language.get('option.Geometry.extrudeUv.true'), value: true },
+    { label: language.get('option.Geometry.extrudeUv.false'), value: false },
+]
+
+const tubeOptions = [
+    { label: language.get('option.Geometry.tube.true'), value: true },
+    { label: language.get('option.Geometry.tube.false'), value: false },
+]
+
+export {
+    cylinderOptions,
+    extrudeUvOptions,
+    tubeOptions,
+}

package/src/option/Material.ts

@@ -0,0 +1,42 @@
+import { MaterialCombine, MaterialNormalMapType, MaterialSide, MaterialDlending,MaterialDepthFunc } from '@vyr/three'
+import { language } from '../locale'
+
+const combineOptions = [
+    { label: language.get('option.Material.combine.multiply'), value: MaterialCombine.MultiplyOperation },
+    { label: language.get('option.Material.combine.blend'), value: MaterialCombine.MixOperation },
+    { label: language.get('option.Material.combine.add'), value: MaterialCombine.AddOperation },
+]
+const normalTypeOptions = [
+    { label: language.get('option.Material.normalType.tangentialSpace'), value: MaterialNormalMapType.TangentSpaceNormalMap },
+    { label: language.get('option.Material.normalType.objectSpace'), value: MaterialNormalMapType.ObjectSpaceNormalMap },
+]
+
+const sideOptions = [
+    { label: language.get('option.Material.side.back'), value: MaterialSide.BackSide },
+    { label: language.get('option.Material.side.front'), value: MaterialSide.FrontSide },
+    { label: language.get('option.Material.side.double'), value: MaterialSide.DoubleSide },
+]
+const blendingOptions = [
+    { label: language.get('option.Material.blending.disabled'), value: MaterialDlending.NoBlending },
+    { label: language.get('option.Material.blending.normal'), value: MaterialDlending.NormalBlending },
+    { label: language.get('option.Material.blending.overlay'), value: MaterialDlending.AdditiveBlending },
+    { label: language.get('option.Material.blending.subtractive'), value: MaterialDlending.SubtractiveBlending },
+    { label: language.get('option.Material.blending.multiplicative'), value: MaterialDlending.MultiplyBlending },
+]
+const depthFuncOptions = [
+    { label: language.get('option.Material.depthFunc.never'), value: MaterialDepthFunc.NeverDepth },
+    { label: language.get('option.Material.depthFunc.always'), value: MaterialDepthFunc.AlwaysDepth },
+    { label: language.get('option.Material.depthFunc.less'), value: MaterialDepthFunc.LessDepth },
+    { label: language.get('option.Material.depthFunc.less/equal'), value: MaterialDepthFunc.LessEqualDepth },
+    { label: language.get('option.Material.depthFunc.greater/equal'), value: MaterialDepthFunc.GreaterEqualDepth },
+    { label: language.get('option.Material.depthFunc.greater'), value: MaterialDepthFunc.GreaterDepth },
+    { label: language.get('option.Material.depthFunc.notEqual'), value: MaterialDepthFunc.NotEqualDepth },
+]
+
+export {
+    combineOptions,
+    normalTypeOptions,
+    sideOptions,
+    blendingOptions,
+    depthFuncOptions,
+}

package/src/option/Mesh.ts

@@ -0,0 +1,10 @@
+import { language } from '../locale'
+
+const typeOptions = [
+    { label: language.get('option.Mesh.type.one'), value: 1 },
+    { label: language.get('option.Mesh.type.multiple'), value: 2 },
+]
+
+export {
+    typeOptions,
+}

package/src/option/Shadow.ts

@@ -0,0 +1,18 @@
+import { SceneShadow } from '@vyr/three'
+import { language } from '../locale'
+
+const typeOptions = [
+    { label: language.get('option.shadow.type.basicShadowMap'), value: SceneShadow.BasicShadowMap },
+    { label: language.get('option.shadow.type.PCFShadowMap'), value: SceneShadow.PCFShadowMap },
+    { label: language.get('option.shadow.type.PCFSoftShadowMap'), value: SceneShadow.PCFSoftShadowMap },
+    { label: language.get('option.shadow.type.VSMShadowMap'), value: SceneShadow.VSMShadowMap },
+]
+const updateOptions = [
+    { label: language.get('option.shadow.update.manual'), value: false },
+    { label: language.get('option.shadow.update.auto'), value: true },
+]
+
+export {
+    typeOptions,
+    updateOptions,
+}

package/src/option/Texture.ts

@@ -0,0 +1,55 @@
+import { TextureMapping, TextureWrap, TextureFType, TextureFormat, TextureColorSpace } from '@vyr/three'
+import { language } from '../locale'
+
+const mappingOptions = [
+    { label: language.get('option.Texture.mapping.UVMapping'), value: TextureMapping.UVMapping },
+    { label: language.get('option.Texture.mapping.cubeReflectionMapping'), value: TextureMapping.CubeReflectionMapping },
+    { label: language.get('option.Texture.mapping.cubeRefractionMapping'), value: TextureMapping.CubeRefractionMapping },
+    { label: language.get('option.Texture.mapping.equirectangularReflectionMapping'), value: TextureMapping.EquirectangularReflectionMapping },
+    { label: language.get('option.Texture.mapping.equirectangularRefractionMapping'), value: TextureMapping.EquirectangularRefractionMapping },
+    { label: language.get('option.Texture.mapping.cubeUVReflectionMapping'), value: TextureMapping.CubeUVReflectionMapping },
+]
+const wrapOptions = [
+    { label: language.get('option.Texture.wrap.repeatWrapping'), value: TextureWrap.RepeatWrapping },
+    { label: language.get('option.Texture.wrap.clampToEdgeWrapping'), value: TextureWrap.ClampToEdgeWrapping },
+    { label: language.get('option.Texture.wrap.mirroredRepeatWrapping'), value: TextureWrap.MirroredRepeatWrapping },
+]
+const ftypeOptions = [
+    { label: language.get('option.Texture.ftype.unsignedByteType'), value: TextureFType.UnsignedByteType },
+    { label: language.get('option.Texture.ftype.byteType'), value: TextureFType.ByteType },
+    { label: language.get('option.Texture.ftype.shortType'), value: TextureFType.ShortType },
+    { label: language.get('option.Texture.ftype.unsignedShortType'), value: TextureFType.UnsignedShortType },
+    { label: language.get('option.Texture.ftype.intType'), value: TextureFType.IntType },
+    { label: language.get('option.Texture.ftype.unsignedIntType'), value: TextureFType.UnsignedIntType },
+    { label: language.get('option.Texture.ftype.floatType'), value: TextureFType.FloatType },
+    { label: language.get('option.Texture.ftype.halfFloatType'), value: TextureFType.HalfFloatType },
+    { label: language.get('option.Texture.ftype.unsignedShort4444Type'), value: TextureFType.UnsignedShort4444Type },
+    { label: language.get('option.Texture.ftype.unsignedShort5551Type'), value: TextureFType.UnsignedShort5551Type },
+    { label: language.get('option.Texture.ftype.unsignedInt248Type'), value: TextureFType.UnsignedInt248Type },
+    { label: language.get('option.Texture.ftype.unsignedInt5999Type'), value: TextureFType.UnsignedInt5999Type },
+]
+const formatOptions = [
+    { label: language.get('option.Texture.format.alphaFormat'), value: TextureFormat.AlphaFormat },
+    { label: language.get('option.Texture.format.redFormat'), value: TextureFormat.RedFormat },
+    { label: language.get('option.Texture.format.redIntegerFormat'), value: TextureFormat.RedIntegerFormat },
+    { label: language.get('option.Texture.format.RGFormat'), value: TextureFormat.RGFormat },
+    { label: language.get('option.Texture.format.RGIntegerFormat'), value: TextureFormat.RGIntegerFormat },
+    { label: language.get('option.Texture.format.RGBFormat'), value: TextureFormat.RGBFormat },
+    { label: language.get('option.Texture.format.RGBAFormat'), value: TextureFormat.RGBAFormat },
+    { label: language.get('option.Texture.format.RGBAIntegerFormat'), value: TextureFormat.RGBAIntegerFormat },
+    { label: language.get('option.Texture.format.depthFormat'), value: TextureFormat.DepthFormat },
+    { label: language.get('option.Texture.format.depthStencilFormat'), value: TextureFormat.DepthStencilFormat },
+]
+const colorSpaceOptions = [
+    { label: language.get('option.Texture.colorSpace.no'), value: TextureColorSpace.NoColorSpace },
+    { label: language.get('option.Texture.colorSpace.SRGB'), value: TextureColorSpace.SRGBColorSpace },
+    { label: language.get('option.Texture.colorSpace.linearSRGB'), value: TextureColorSpace.LinearSRGBColorSpace },
+]
+
+export {
+    mappingOptions,
+    wrapOptions,
+    ftypeOptions,
+    formatOptions,
+    colorSpaceOptions,
+}

package/src/option/index.ts

@@ -0,0 +1,6 @@
+export * as Animation from './Animation'
+export * as Geometry from './Geometry'
+export * as Material from './Material'
+export * as Texture from './Texture'
+export * as Mesh from './Mesh'
+export * as Shadow from './Shadow'

package/src/service/footer/action/geometry/index.ts

@@ -0,0 +1,73 @@
+import { Action, DataService, runtime } from "@vyr/runtime";
+import { Category, Descriptor } from "@vyr/engine";
+import { defineScheme } from '@vyr/service-rpc';
+import { BoxGeometryDescriptor, BufferGeometryDescriptor, CircleGeometryDescriptor, CylinderGeometryDescriptor, ExtrudeGeometryDescriptor, PlaneGeometryDescriptor, RingGeometryDescriptor, SphereGeometryDescriptor, SurfaceGeometryDescriptor, TubeGeometryDescriptor } from "@vyr/three";
+import { language } from '../../../../locale'
+
+class AddGeometryAction extends Action {
+    static id = 'footer.AddGeometry'
+    static generate = (label: string, Class: typeof Descriptor) => {
+        class ClassAction extends Action {
+            static id = `footer.${Class.type}`
+            label = label
+            update() {
+                this.show = true
+                this.disabled = false
+            }
+            validator() {
+                return false
+            }
+            execute() {
+                const dataService = runtime.get<DataService>('data')
+                const modifyValue = dataService.footer.status.mouseRegion === 'directory' ? dataService.footer.status.mouseItem : dataService.footer.directory
+                dataService.footer.status.modifyMode = 'add'
+                dataService.footer.status.modifyModeAdd = 'file'
+                dataService.footer.status.modifyContent = new Class().serialization()
+                dataService.footer.status.modifySuffix = Category.geometrySuffix
+                dataService.footer.status.modifyValue = modifyValue
+            }
+        }
+        return new ClassAction()
+    }
+    label = language.get('footer.action.addGeometry.label')
+    order = 5
+
+    constructor() {
+        super()
+        this.children.push(
+            AddGeometryAction.generate(language.get('descriptor.type.BoxGeometry'), BoxGeometryDescriptor),
+            AddGeometryAction.generate(language.get('descriptor.type.CircleGeometry'), CircleGeometryDescriptor),
+            AddGeometryAction.generate(language.get('descriptor.type.CylinderGeometry'), CylinderGeometryDescriptor),
+            AddGeometryAction.generate(language.get('descriptor.type.PlaneGeometry'), PlaneGeometryDescriptor),
+            AddGeometryAction.generate(language.get('descriptor.type.RingGeometry'), RingGeometryDescriptor),
+            AddGeometryAction.generate(language.get('descriptor.type.SphereGeometry'), SphereGeometryDescriptor),
+            AddGeometryAction.generate(language.get('descriptor.type.ExtrudeGeometry'), ExtrudeGeometryDescriptor),
+            AddGeometryAction.generate(language.get('descriptor.type.SurfaceGeometry'), SurfaceGeometryDescriptor),
+            AddGeometryAction.generate(language.get('descriptor.type.TubeGeometry'), TubeGeometryDescriptor),
+            AddGeometryAction.generate(language.get('descriptor.type.BufferGeometry'), BufferGeometryDescriptor),
+        )
+    }
+    update() {
+        this.show = false
+        this.disabled = true
+
+        const dataService = runtime.get<DataService>('data')
+        if (dataService.footer.status.mouseRegion === 'directory') {
+            if (dataService.footer.status.mouseItem === null) return
+            if (dataService.footer.status.mouseItem.scheme !== defineScheme.static) return
+        } else if (dataService.footer.status.mouseRegion === 'manifest') {
+            if (dataService.footer.status.mouseItem !== null) return
+            if (dataService.footer.directory.scheme !== defineScheme.static) return
+        }
+
+        this.show = true
+
+        this.disabled = false
+    }
+    validator() {
+        return false
+    }
+    execute() { }
+}
+
+export { AddGeometryAction }

package/src/service/footer/action/index.ts

@@ -0,0 +1,9 @@
+import { AddMaterialAction } from "./material";
+import { AddGeometryAction } from "./geometry";
+import { AddTextureAction } from "./texture";
+
+export default [
+    AddMaterialAction,
+    AddGeometryAction,
+    AddTextureAction,
+]

package/src/service/footer/action/material/index.ts

@@ -0,0 +1,70 @@
+import { Action, DataService, runtime } from "@vyr/runtime";
+import { Category, Descriptor } from "@vyr/engine";
+import { defineScheme } from '@vyr/service-rpc'
+import { MeshBasicMaterialDescriptor, MeshPhongMaterialDescriptor, MeshStandardMaterialDescriptor, PointsMaterialDescriptor, ShaderMaterialDescriptor, ShadowMaterialDescriptor, SpriteMaterialDescriptor } from "@vyr/three";
+import { language } from '../../../../locale'
+
+class AddMaterialAction extends Action {
+    static id = 'footer.AddMaterial'
+    static generate = (label: string, Class: typeof Descriptor) => {
+        class ClassAction extends Action {
+            static id = `footer.${Class.type}`
+            label = label
+            update() {
+                this.show = true
+                this.disabled = false
+            }
+            validator() {
+                return false
+            }
+            execute() {
+                const dataService = runtime.get<DataService>('data')
+                const modifyValue = dataService.footer.status.mouseRegion === 'directory' ? dataService.footer.status.mouseItem : dataService.footer.directory
+                dataService.footer.status.modifyMode = 'add'
+                dataService.footer.status.modifyModeAdd = 'file'
+                dataService.footer.status.modifyContent = new Class().serialization()
+                dataService.footer.status.modifySuffix = Category.materialSuffix
+                dataService.footer.status.modifyValue = modifyValue
+            }
+        }
+        return new ClassAction()
+    }
+    label = language.get('footer.action.addMaterial.label')
+    order = 5
+
+    constructor() {
+        super()
+        this.children.push(
+            AddMaterialAction.generate(language.get('descriptor.type.MeshBasicMaterial'), MeshBasicMaterialDescriptor),
+            AddMaterialAction.generate(language.get('descriptor.type.MeshPhongMaterial'), MeshPhongMaterialDescriptor),
+            AddMaterialAction.generate(language.get('descriptor.type.MeshStandardMaterial'), MeshStandardMaterialDescriptor),
+            AddMaterialAction.generate(language.get('descriptor.type.PointsMaterial'), PointsMaterialDescriptor),
+            AddMaterialAction.generate(language.get('descriptor.type.SpriteMaterial'), SpriteMaterialDescriptor),
+            AddMaterialAction.generate(language.get('descriptor.type.ShadowMaterial'), ShadowMaterialDescriptor),
+            AddMaterialAction.generate(language.get('descriptor.type.ShaderMaterial'), ShaderMaterialDescriptor),
+        )
+    }
+
+    update() {
+        this.show = false
+        this.disabled = true
+
+        const dataService = runtime.get<DataService>('data')
+        if (dataService.footer.status.mouseRegion === 'directory') {
+            if (dataService.footer.status.mouseItem === null) return
+            if (dataService.footer.status.mouseItem.scheme !== defineScheme.static) return
+        } else if (dataService.footer.status.mouseRegion === 'manifest') {
+            if (dataService.footer.status.mouseItem !== null) return
+            if (dataService.footer.directory.scheme !== defineScheme.static) return
+        }
+
+        this.show = true
+        this.disabled = false
+    }
+    validator() {
+        return false
+    }
+    execute() { }
+}
+
+export { AddMaterialAction }

package/src/service/footer/action/texture/index.ts

@@ -0,0 +1,63 @@
+import { runtime, Action, DataService } from '@vyr/runtime'
+import { Category, Descriptor } from '@vyr/engine'
+import { defineScheme } from '@vyr/service-rpc'
+import { TextureDescriptor } from '@vyr/three'
+import { language } from '../../../../locale'
+
+class AddTextureAction extends Action {
+    static id = 'footer.AddTexture'
+    static generate = (label: string, Class: typeof Descriptor) => {
+        class ClassAction extends Action {
+            static id = `footer.${Class.type}`
+            label = label
+            update() {
+                this.show = true
+                this.disabled = false
+            }
+            validator() {
+                return false
+            }
+            execute() {
+                const dataService = runtime.get<DataService>('data')
+                const modifyValue = dataService.footer.status.mouseRegion === 'directory' ? dataService.footer.status.mouseItem : dataService.footer.directory
+                dataService.footer.status.modifyMode = 'add'
+                dataService.footer.status.modifyModeAdd = 'file'
+                dataService.footer.status.modifyContent = new Class().serialization()
+                dataService.footer.status.modifySuffix = Category.textureSuffix
+                dataService.footer.status.modifyValue = modifyValue
+            }
+        }
+        return new ClassAction()
+    }
+    label = language.get('footer.action.addTexture.label')
+    order = 5
+
+    constructor() {
+        super()
+        this.children.push(
+            AddTextureAction.generate(language.get('descriptor.type.Texture'), TextureDescriptor)
+        )
+    }
+    update() {
+        this.show = false
+        this.disabled = true
+
+        const dataService = runtime.get<DataService>('data')
+        if (dataService.footer.status.mouseRegion === 'directory') {
+            if (dataService.footer.status.mouseItem === null) return
+            if (dataService.footer.status.mouseItem.scheme !== defineScheme.static) return
+        } else if (dataService.footer.status.mouseRegion === 'manifest') {
+            if (dataService.footer.status.mouseItem !== null) return
+            if (dataService.footer.directory.scheme !== defineScheme.static) return
+        }
+
+        this.show = true
+        this.disabled = false
+    }
+    validator() {
+        return false
+    }
+    execute() { }
+}
+
+export { AddTextureAction }

package/src/service/global/index.ts

@@ -0,0 +1 @@
+export * from './scripts'

package/src/service/global/scripts/index.ts

@@ -0,0 +1,12 @@
+import { language, executePreset } from "@vyr/three";
+
+const scripts = [
+    {
+        label: language.get(executePreset.GeoMap.drilldown.scriptable as any),
+        value: executePreset.GeoMap.drilldown.scriptable,
+    },
+]
+
+export {
+    scripts
+}

package/src/service/index.ts

@@ -0,0 +1,79 @@
+import { SetupService } from '@vyr/service'
+import { ShortcutkeyService, InspectorService, runtime, DataService } from '@vyr/runtime'
+import { NodeDescriptor } from '@vyr/engine'
+import { SceneServiceDescriptor, GeoMapDescriptor, HTMLConvertDescriptor, InstancedMeshDescriptor, MeshDescriptor, ModelDescriptor, OrthographicCameraDescriptor, ParticleDescriptor, PerspectiveCameraDescriptor, PointsDescriptor, SpriteDescriptor, TextDescriptor } from '@vyr/three'
+import { language } from '../locale'
+import sidebarSceneAction from './sidebar/scene/action'
+import sidebarAssetAction from './sidebar/asset/action'
+import inspectorViewer from './inspector'
+import footerAction from './footer/action'
+import * as global from './global'
+
+const setup: SetupService['setup'] = async () => {
+    const dataService = runtime.get<DataService>('data')
+    const shortcutkeyService = runtime.get<ShortcutkeyService>('shortcutkey')
+
+    const footer = shortcutkeyService.get('footer')
+    for (const Action of footerAction) footer.add(new Action())
+
+    const sidebar = shortcutkeyService.get('sidebar')
+    const collection = [...sidebarSceneAction, ...sidebarAssetAction]
+    for (const Action of collection) sidebar.add(new Action())
+
+    const addServiceAction = sidebar.get('sidebar.scene.AddService')
+    if (addServiceAction) {
+        //@ts-ignore
+        const generate = addServiceAction.generate
+        addServiceAction.children.push(
+            generate(language.get('descriptor.type.SceneService'), SceneServiceDescriptor),
+            // generate(language.get('descriptor.type.ComposerService'), ComposerServiceDescriptor),
+        )
+    }
+
+    const sceneAddNodeAction = sidebar.get('sidebar.scene.AddNode')
+    if (sceneAddNodeAction) {
+        //@ts-ignore
+        const generate = sceneAddNodeAction.generate
+        sceneAddNodeAction.children.push(
+            generate(language.get('descriptor.type.Node'), NodeDescriptor),
+            generate(language.get('descriptor.type.Text'), TextDescriptor),
+            generate(language.get('descriptor.type.Points'), PointsDescriptor),
+            generate(language.get('descriptor.type.Mesh'), MeshDescriptor),
+            generate(language.get('descriptor.type.InstancedMesh'), InstancedMeshDescriptor),
+            generate(language.get('descriptor.type.Sprite'), SpriteDescriptor),
+            generate(language.get('descriptor.type.Particle'), ParticleDescriptor),
+            generate(language.get('descriptor.type.GeoMap'), GeoMapDescriptor),
+            generate(language.get('descriptor.type.Model'), ModelDescriptor),
+            generate(language.get('descriptor.type.HTMLConvert'), HTMLConvertDescriptor),
+            // generate(language.get('descriptor.type.Pass'), PassDescriptor),
+            generate(language.get('descriptor.type.PerspectiveCamera'), PerspectiveCameraDescriptor),
+            generate(language.get('descriptor.type.OrthographicCamera'), OrthographicCameraDescriptor),
+        )
+    }
+
+    const assetAddNodeAction = sidebar.get('sidebar.asset.AddNode')
+    if (assetAddNodeAction) {
+        //@ts-ignore
+        const generate = assetAddNodeAction.generate
+        assetAddNodeAction.children.push(
+            generate(language.get('descriptor.type.Node'), NodeDescriptor),
+            generate(language.get('descriptor.type.Text'), TextDescriptor),
+            generate(language.get('descriptor.type.Points'), PointsDescriptor),
+            generate(language.get('descriptor.type.Mesh'), MeshDescriptor),
+            generate(language.get('descriptor.type.InstancedMesh'), InstancedMeshDescriptor),
+            generate(language.get('descriptor.type.Sprite'), SpriteDescriptor),
+            generate(language.get('descriptor.type.Particle'), ParticleDescriptor),
+            generate(language.get('descriptor.type.GeoMap'), GeoMapDescriptor),
+            generate(language.get('descriptor.type.Model'), ModelDescriptor),
+            generate(language.get('descriptor.type.HTMLConvert'), HTMLConvertDescriptor),
+            // generate(language.get('descriptor.type.Pass'), PassDescriptor),
+        )
+    }
+
+    const inspectorService = runtime.get<InspectorService>('inspector')
+    for (const viewer of inspectorViewer) inspectorService.set(viewer.type, viewer.import)
+
+    for (const script of global.scripts) dataService.addScripte(script)
+}
+
+export { setup }

package/src/service/inspector/GeoMapViewer.vue

@@ -0,0 +1,32 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.GeoMap')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <node-fragment></node-fragment>
+        <geo-map-fragment></geo-map-fragment>
+    </vyr-card>
+</template>
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { GeoMapDescriptor } from '@vyr/three';
+import { VyrCard, } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../locale'
+import { providerDescriptor } from '../../common';
+import NodeFragment from '../../fragment/NodeFragment.vue';
+import GeoMapFragment from '../../fragment/GeoMapFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+const descriptor = ref(null) as Ref<GeoMapDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<GeoMapDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/HTMLConvertViewer.vue

@@ -0,0 +1,31 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.HTMLConvert')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <node-fragment></node-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { HTMLConvertDescriptor } from '@vyr/three';
+import { VyrCard, } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../locale'
+import { providerDescriptor } from '../../common';
+import NodeFragment from '../../fragment/NodeFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+const descriptor = ref(null) as Ref<HTMLConvertDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<HTMLConvertDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/InstanceMeshViewer.vue

@@ -0,0 +1,33 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.InstancedMesh')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <node-fragment></node-fragment>
+        <instanced-mesh-fragment></instanced-mesh-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { InstancedMeshDescriptor } from '@vyr/three';
+import { VyrCard, } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../locale'
+import { providerDescriptor } from '../../common';
+import NodeFragment from '../../fragment/NodeFragment.vue';
+import InstancedMeshFragment from '../../fragment/InstancedMeshFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+const descriptor = ref(null) as Ref<InstancedMeshDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<InstancedMeshDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/MeshViewer.vue

@@ -0,0 +1,33 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.Mesh')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <node-fragment></node-fragment>
+        <mesh-fragment></mesh-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { MeshDescriptor } from '@vyr/three';
+import { VyrCard, } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../locale'
+import { providerDescriptor } from '../../common';
+import NodeFragment from '../../fragment/NodeFragment.vue';
+import MeshFragment from '../../fragment/MeshFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+const descriptor = ref(null) as Ref<MeshDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<MeshDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>

package/src/service/inspector/ModelViewer.vue

@@ -0,0 +1,34 @@
+<template>
+    <vyr-card v-if="descriptor" :title="language.get('descriptor.type.Model')" :scroll="true">
+        <base-fragment :raw="raw"></base-fragment>
+        <node-fragment></node-fragment>
+        <model-fragment></model-fragment>
+    </vyr-card>
+</template>
+
+
+<script lang="ts" setup>
+import { Ref, ref, watch } from 'vue'
+import { Descriptor } from '@vyr/engine';
+import { ModelDescriptor } from '@vyr/three';
+import { VyrCard, } from '@vyr/design';
+import { BaseFragment, providerDescriptor as builtinProviderDescriptor } from '@vyr/builtin'
+import { language } from '../../locale'
+import { providerDescriptor } from '../../common';
+import NodeFragment from '../../fragment/NodeFragment.vue';
+import ModelFragment from '../../fragment/ModelFragment.vue';
+
+const props = defineProps<{ raw: string, uuid: string }>()
+
+const descriptor = ref(null) as Ref<ModelDescriptor | null>
+const watchEditItem = (cur: string) => {
+    if (!cur) return descriptor.value = null
+    descriptor.value = Descriptor.get<ModelDescriptor>(cur)
+}
+watch(() => props.uuid, watchEditItem, { immediate: true })
+
+providerDescriptor(descriptor)
+builtinProviderDescriptor(descriptor)
+</script>
+
+<style lang="less" scoped></style>