feat(MeshDiscardMaterial): add component, playground, docs

docs/.vitepress/config.ts

@@ -110,6 +110,7 @@ export default defineConfig({
           { text: 'MeshGlassMaterial', link: '/guide/materials/glass-material' },
           { text: 'CustomShaderMaterial', link: '/guide/materials/custom-shader-material' },
           { text: 'MeshReflectionMaterial', link: '/guide/materials/mesh-reflection-material' },
+          { text: 'MeshDiscardMaterial', link: '/guide/materials/mesh-discard-material' },
         ],
       },
       {

docs/component-list/components.ts

@@ -59,6 +59,10 @@ export default [
         text: 'HolographicMaterial',
         link: '/guide/materials/holographic-material',
       },
+      {
+        text: 'MeshDiscardMaterial',
+        link: '/guide/materials/mesh-discard-material',
+      },
     ],
   },
   {

docs/guide/materials/mesh-discard-material.md

@@ -0,0 +1,22 @@
+# MeshDiscardMaterial
+
+`<MeshDiscardMaterial />` hides the object it's attached to. The object's shadows and children will be rendered.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { MeshDiscardMaterial } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera />
+    <TresMesh>
+      <TresBoxGeometry />
+      <MeshDiscardMaterial />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```

playground/vue/src/pages/materials/MeshDiscardMaterialDemo.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { MeshDiscardMaterial } from '@tresjs/cientos'
+
+const i = shallowRef(0)
+
+let intervalId: string | number | NodeJS.Timeout | undefined
+onMounted(() => {
+  intervalId = setInterval(() => {
+    i.value++
+  }, 1000)
+})
+
+onUnmounted(() => {
+  clearInterval(intervalId)
+})
+</script>
+
+<template>
+  <TresCanvas clear-color="#333">
+    <TresPerspectiveCamera :position="[0, 0, 5]" />
+    <TresMesh>
+      <TresBoxGeometry />
+      <MeshDiscardMaterial v-if="i % 2" />
+      <TresMeshNormalMaterial v-else />
+      <TresMesh :position-y="1" :scale="0.33">
+        <TresBoxGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+    </TresMesh>
+  </TresCanvas>
+</template>

playground/vue/src/router/routes/materials.ts

@@ -24,4 +24,9 @@ export const materialsRoutes = [
     name: 'HolographicMaterial',
     component: () => import('../../pages/materials/HolographicMaterialDemo.vue'),
   },
+  {
+    path: '/materials/discard-material',
+    name: 'MeshDiscardMaterial',
+    component: () => import('../../pages/materials/MeshDiscardMaterialDemo.vue'),
+  },
 ]

src/core/materials/index.ts

@@ -1,7 +1,8 @@
 import CustomShaderMaterial from './customShaderMaterial/index.vue'
 import HolographicMaterial from './holographicMaterial/index.vue'
+import MeshDiscardMaterial from './meshDiscardMaterial/index.vue'
 import MeshGlassMaterial from './meshGlassMaterial/index.vue'
 import MeshReflectionMaterial from './meshReflectionMaterial/index.vue'
 import MeshWobbleMaterial from './meshWobbleMaterial/index.vue'
 
-export { CustomShaderMaterial, HolographicMaterial, MeshGlassMaterial, MeshReflectionMaterial, MeshWobbleMaterial }
+export { CustomShaderMaterial, HolographicMaterial, MeshDiscardMaterial, MeshGlassMaterial, MeshReflectionMaterial, MeshWobbleMaterial }

src/core/materials/meshDiscardMaterial/index.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useTresContext } from '@tresjs/core'
+import { shallowRef } from 'vue'
+import { MeshDiscardMaterial } from './material'
+
+const meshDiscardMaterialRef = shallowRef()
+
+const { extend } = useTresContext()
+
+extend({ MeshDiscardMaterial })
+
+defineExpose({ instance: meshDiscardMaterialRef })
+</script>
+
+<template>
+  <TresMeshDiscardMaterial ref="meshDiscardMaterialRef" />
+</template>

src/core/materials/meshDiscardMaterial/material.ts

@@ -0,0 +1,9 @@
+import { ShaderMaterial } from 'three'
+
+export class MeshDiscardMaterial extends ShaderMaterial {
+  constructor() {
+    super()
+    this.vertexShader = 'void main() { }'
+    this.fragmentShader = 'void main() { gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0); discard;}'
+  }
+}