feat(cientos): Add CustomShaderMaterial wrapper (#261)

* Add `CustomShaderMaterial` wrapper

* fix: pass props as arg to custom shader, remove extra class

* chore: remove unused import

* Update demo

* Add control panel

* Use matcap material

* Lint

* Add docs

* Fix typo

---------

Co-authored-by: alvarosabu <alvaro.saburido@gmail.com>

docs/.vitepress/config.ts

@@ -72,6 +72,7 @@ export default defineConfig({
         items: [
           { text: 'WobbleMaterial', link: '/guide/materials/wobble-material' },
           { text: 'MeshGlassMaterial', link: '/guide/materials/glass-material' },
+          { text: 'CustomShaderMaterial', link: '/guide/materials/custom-shader-material' },
         ],
       },
       {

docs/.vitepress/theme/components/CustomShaderMaterialDemo.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import {
+  CustomShaderMaterial,
+  useTweakPane,
+  OrbitControls,
+} from '@tresjs/cientos'
+
+import { MeshBasicMaterial } from 'three'
+import { onMounted, nextTick } from 'vue'
+
+const { onLoop } = useRenderLoop()
+
+const gl = {
+  clearColor: '#82DBC5',
+}
+
+const materialProps = {
+  baseMaterial: MeshBasicMaterial,
+  fragmentShader: `
+    varying float vWobble;
+
+    uniform float u_Time;
+
+    void main() {
+      float wobble = vWobble * 0.5 + 0.5;
+      csm_FragColor = mix(vec4(0.0, 0.4, 1.5, 1.0), vec4(1.2, 0.6, 0.8, 1.0), wobble);
+    }
+  `,
+  vertexShader: `
+    uniform float u_Time;
+    uniform float u_WobbleSpeed;
+    uniform float u_WobbleAmplitude;
+    uniform float u_WobbleFrequency;
+
+    varying float vWobble;
+
+    void main() {
+      float wobble = sin(csm_Position.z * u_WobbleFrequency + u_Time * u_WobbleSpeed);
+      csm_Position += normal * wobble * u_WobbleAmplitude;
+
+      vWobble = wobble;
+    }
+  `,
+  uniforms: {
+    u_Time: { value: 0 },
+    u_WobbleSpeed: { value: 3 },
+    u_WobbleAmplitude: { value: 0.07 },
+    u_WobbleFrequency: { value: 3 },
+  },
+}
+
+onMounted(async () => {
+  await nextTick()
+
+  createDebugPanel()
+
+  onLoop(() => {
+    materialProps.uniforms.u_Time.value
+			+= 0.01 * materialProps.uniforms.u_WobbleSpeed.value
+  })
+})
+
+function createDebugPanel() {
+  const { pane } = useTweakPane('.debug-container')
+
+  const folder = pane.addFolder({
+    title: 'Settings',
+  })
+
+  folder.addInput(materialProps.uniforms.u_WobbleSpeed, 'value', {
+    label: 'Wobble Speed',
+    min: 0,
+    max: 10,
+  })
+
+  folder.addInput(materialProps.uniforms.u_WobbleAmplitude, 'value', {
+    label: 'Wobble Amplitude',
+    min: 0,
+    max: 0.2,
+  })
+
+  folder.addInput(materialProps.uniforms.u_WobbleFrequency, 'value', {
+    label: 'Wobble Frequency',
+    min: 1,
+    max: 30,
+  })
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera
+      :position="[0, 2, 4]"
+      :look-at="[0, 0, 0]"
+    />
+
+    <OrbitControls />
+
+    <TresMesh>
+      <TresTorusKnotGeometry :args="[1, 0.3, 512, 32]" />
+      <CustomShaderMaterial v-bind="materialProps" />
+    </TresMesh>
+  </TresCanvas>
+
+  <div class="debug-container" />
+</template>
+
+<style scoped>
+.debug-container {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+}
+</style>

docs/guide/materials/custom-shader-material.md

@@ -0,0 +1,15 @@
+# TresCustomShaderMaterial <Badge type="warning" text="^3.6.0" />
+
+<DocsDemo>
+  <CustomShaderMaterialDemo />
+</DocsDemo>
+
+The `cientos` package provides a new `<TresCustomShaderMaterial />` component which is a wrapper around the [`three-custom-shader-material`](https://github.com/FarazzShaikh/THREE-CustomShaderMaterial) class. As states in the repo, it _"lets you extend Three.js' material library with your own Vertex and Fragment shaders"_.
+
+## Usage
+
+<<< @/.vitepress/theme/components/CustomShaderMaterialDemo.vue{4,9,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,59,60,99}
+
+## Props
+
+Being a wrapper around the `CustomShaderMaterial` class, the `<TresCustomShaderMaterial />` component accepts all the props that the class does. You can find the full list of props in the [official repo](https://github.com/FarazzShaikh/THREE-CustomShaderMaterial).

package.json

@@ -61,6 +61,7 @@
     "camera-controls": "^2.7.2",
     "stats-gl": "^1.0.5",
     "stats.js": "^0.17.0",
+    "three-custom-shader-material": "^5.4.0",
     "three-stdlib": "^2.27.3"
   },
   "devDependencies": {

playground/src/pages/materials/CustomShaderMaterialDemo.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { TresCanvas, useRenderLoop, useTexture } from '@tresjs/core'
+import {
+  CustomShaderMaterial,
+  StatsGl,
+  useTweakPane,
+  OrbitControls,
+} from '@tresjs/cientos'
+
+import { MeshMatcapMaterial } from 'three'
+import { onMounted, nextTick } from 'vue'
+
+const { onLoop } = useRenderLoop()
+
+const gl = {
+  clearColor: '#82DBC5',
+}
+
+const texture01 = await useTexture({
+  matcap: '/matcap_01.png',
+})
+
+const materialProps = {
+  baseMaterial: MeshMatcapMaterial,
+  matcap: texture01.matcap,
+  fragmentShader: `
+    varying float vWobble;
+
+    uniform float u_Time;
+
+    void main() {
+      float wobble = vWobble * 0.5 + 0.5;
+      vec4 csm_DiffuseColor2 = mix(vec4(0.0, 0.0, 0.0, 1.0), vec4(1.0, 0.0, 2.0, 1.0), wobble);
+      csm_DiffuseColor = mix(csm_DiffuseColor, csm_DiffuseColor2, wobble);
+    }
+  `,
+  vertexShader: `
+    uniform float u_Time;
+    uniform float u_WobbleSpeed;
+    uniform float u_WobbleAmplitude;
+    uniform float u_WobbleFrequency;
+
+    varying float vWobble;
+
+    void main() {
+      float wobble = sin(csm_Position.z * u_WobbleFrequency + u_Time * u_WobbleSpeed);
+      csm_Position += normal * wobble * u_WobbleAmplitude;
+
+      vWobble = wobble;
+    }
+  `,
+  uniforms: {
+    u_Time: { value: 0 },
+    u_WobbleSpeed: { value: 3 },
+    u_WobbleAmplitude: { value: 0.07 },
+    u_WobbleFrequency: { value: 3 },
+  },
+}
+
+onMounted(async () => {
+  await nextTick()
+
+  createDebugPanel()
+
+  onLoop(() => {
+    materialProps.uniforms.u_Time.value
+			+= 0.01 * materialProps.uniforms.u_WobbleSpeed.value
+  })
+})
+
+function createDebugPanel() {
+  const { pane } = useTweakPane()
+
+  const folder = pane.addFolder({
+    title: 'Settings',
+  })
+
+  folder.addInput(materialProps.uniforms.u_WobbleSpeed, 'value', {
+    label: 'Wobble Speed',
+    min: 0,
+    max: 10,
+  })
+
+  folder.addInput(materialProps.uniforms.u_WobbleAmplitude, 'value', {
+    label: 'Wobble Amplitude',
+    min: 0,
+    max: 0.2,
+  })
+
+  folder.addInput(materialProps.uniforms.u_WobbleFrequency, 'value', {
+    label: 'Wobble Frequency',
+    min: 1,
+    max: 30,
+  })
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera
+      :position="[0, 2, 4]"
+      :look-at="[0, 0, 0]"
+    />
+
+    <OrbitControls />
+
+    <TresMesh>
+      <TresTorusKnotGeometry :args="[1, 0.3, 512, 32]" />
+      <CustomShaderMaterial v-bind="materialProps" />
+    </TresMesh>
+
+    <Suspense>
+      <StatsGl />
+    </Suspense>
+  </TresCanvas>
+</template>

playground/src/router/routes/materials.ts

@@ -9,4 +9,9 @@ export const materialsRoutes = [
     name: 'GlassMaterial',
     component: () => import('../../pages/materials/GlassMaterialDemo.vue'),
   },
-]
+  {
+    path: '/materials/custom-shader-material',
+    name: 'CustomShaderMaterial',
+    component: () => import('../../pages/materials/CustomShaderMaterialDemo.vue'),
+  },
+]