From 81baf8618de9d8dc1e25d0fc9c40671f4255ffbf Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Tue, 9 May 2023 10:43:59 +0200
Subject: [PATCH] feat: contact-shadows implementation

---
 package.json                                  |   2 +-
 playground/components.d.ts                    |   1 +
 .../src/components/ContactShadowsDemo.vue     |  62 +++++++
 playground/src/pages/index.vue                |   4 +-
 pnpm-lock.yaml                                |  15 +-
 src/core/abstractions/ContactShadows.vue      | 162 ++++++++++++++++++
 src/core/abstractions/index.ts                |   3 +-
 7 files changed, 237 insertions(+), 12 deletions(-)
 create mode 100644 playground/src/components/ContactShadowsDemo.vue
 create mode 100644 src/core/abstractions/ContactShadows.vue

diff --git a/package.json b/package.json
index e51e1734..1da1ea82 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
   "devDependencies": {
     "@alvarosabu/prettier-config": "^1.3.0",
     "@release-it/conventional-changelog": "^5.1.1",
+    "@tresjs/core": "2.0.0-rc.3",
     "@tweakpane/plugin-essentials": "^0.1.8",
     "@types/three": "^0.152.0",
     "@typescript-eslint/eslint-plugin": "^5.59.2",
@@ -74,7 +75,6 @@
     "vitepress": "1.0.0-alpha.75"
   },
   "dependencies": {
-    "@tresjs/core": "2.0.0-rc.2",
     "@vueuse/core": "^10.1.2",
     "three": "^0.152.2",
     "three-stdlib": "^2.21.10",
diff --git a/playground/components.d.ts b/playground/components.d.ts
index 7616d606..c1e8c612 100644
--- a/playground/components.d.ts
+++ b/playground/components.d.ts
@@ -10,6 +10,7 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AkuAku: typeof import('./src/components/AkuAku.vue')['default']
+    ContactShadowsDemo: typeof import('./src/components/ContactShadowsDemo.vue')['default']
     Gltf: typeof import('./src/components/gltf/index.vue')['default']
     LeviosoDemo: typeof import('./src/components/LeviosoDemo.vue')['default']
     MapControlsDemo: typeof import('./src/components/MapControlsDemo.vue')['default']
diff --git a/playground/src/components/ContactShadowsDemo.vue b/playground/src/components/ContactShadowsDemo.vue
new file mode 100644
index 00000000..2a487ba0
--- /dev/null
+++ b/playground/src/components/ContactShadowsDemo.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, useTweakPane, ContactShadows, TorusKnot } from '@cientos'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { shallowRef } from 'vue'
+import { watchEffect } from 'vue'
+import { shallowReactive } from 'vue'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const { pane } = useTweakPane()
+
+const leviosoState = shallowReactive({
+  speed: 5,
+  rotationFactor: 1,
+  floatFactor: 1,
+  range: [-0.1, 0.1],
+})
+
+pane.addInput(leviosoState, 'speed', {
+  step: 1,
+  min: 0,
+  max: 100,
+})
+
+pane.addInput(leviosoState, 'rotationFactor', {
+  step: 1,
+  min: 0,
+  max: 10,
+})
+
+pane.addInput(leviosoState, 'floatFactor', {
+  step: 1,
+  min: 0,
+  max: 10,
+})
+const groupRef = shallowRef()
+
+watchEffect(() => {
+  console.log(groupRef)
+})
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <OrbitControls />
+
+    <TorusKnot :position="[0, 4, 0]">
+      <TresMeshNormalMaterial />
+    </TorusKnot>
+    <ContactShadows />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
index e1a94d94..7dfa926b 100644
--- a/playground/src/pages/index.vue
+++ b/playground/src/pages/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import ModelsDemo from '../components/ModelsDemo.vue'
+import ContactShadowsDemo from '../components/ContactShadowsDemo.vue'
 </script>
 <template>
   <Suspense>
-    <ModelsDemo />
+    <ContactShadowsDemo />
   </Suspense>
 </template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 898ac013..a7bdebf8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,6 @@
 lockfileVersion: '6.0'
 
 dependencies:
-  '@tresjs/core':
-    specifier: 2.0.0-rc.2
-    version: 2.0.0-rc.2(three@0.152.2)(vue@3.2.47)
   '@vueuse/core':
     specifier: ^10.1.2
     version: 10.1.2(vue@3.2.47)
@@ -24,6 +21,9 @@ devDependencies:
   '@release-it/conventional-changelog':
     specifier: ^5.1.1
     version: 5.1.1(release-it@15.10.3)
+  '@tresjs/core':
+    specifier: 2.0.0-rc.3
+    version: 2.0.0-rc.3(three@0.152.2)(vue@3.2.47)
   '@tweakpane/plugin-essentials':
     specifier: ^0.1.8
     version: 0.1.8(tweakpane@3.1.9)
@@ -217,7 +217,7 @@ packages:
 
   /@alvarosabu/utils@2.3.0:
     resolution: {integrity: sha512-Uf+loPdTfNDPIOMCQlBVC9Db+UnmXVn/MTyVZNjPHmp2noOyux/U/vfjhJROGUvnHZxdYIMEpWVeTI/i/VCUJQ==}
-    dev: false
+    dev: true
 
   /@ampproject/remapping@2.2.1:
     resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
@@ -946,8 +946,8 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /@tresjs/core@2.0.0-rc.2(three@0.152.2)(vue@3.2.47):
-    resolution: {integrity: sha512-RwNuqv8suN2Fhg75sA9KiJLO10lbU5lC+mFPAK0VWsuIiSsKh9sZe+aImx3jULvcfAAJwqdaxU6ZfU6WinzDxg==}
+  /@tresjs/core@2.0.0-rc.3(three@0.152.2)(vue@3.2.47):
+    resolution: {integrity: sha512-CGYE8o1agT7FLlP/9+P9CY/WT0VYuQfPMqqUerD3sTdnkxPa3l77VSMJ4TRE8rjZQ1T2ePyvINRCUfcbDvWqlg==}
     peerDependencies:
       three: latest
       vue: ^3.2.47
@@ -958,7 +958,7 @@ packages:
       vue: 3.2.47
     transitivePeerDependencies:
       - '@vue/composition-api'
-    dev: false
+    dev: true
 
   /@trysound/sax@0.2.0:
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
@@ -5363,7 +5363,6 @@ packages:
 
   /three@0.152.2:
     resolution: {integrity: sha512-Ff9zIpSfkkqcBcpdiFo2f35vA9ZucO+N8TNacJOqaEE6DrB0eufItVMib8bK8Pcju/ZNT6a7blE1GhTpkdsILw==}
-    dev: false
 
   /through2@2.0.5:
     resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
diff --git a/src/core/abstractions/ContactShadows.vue b/src/core/abstractions/ContactShadows.vue
new file mode 100644
index 00000000..26eef7a2
--- /dev/null
+++ b/src/core/abstractions/ContactShadows.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { TresColor, useRenderLoop } from '@tresjs/core'
+import {
+  Color,
+  ColorRepresentation,
+  Material,
+  Mesh,
+  MeshDepthMaterial,
+  OrthographicCamera,
+  PlaneGeometry,
+  ShaderMaterial,
+  Texture,
+  WebGLRenderTarget,
+} from 'three'
+import { computed, shallowRef } from 'vue'
+import { useCientos } from '../useCientos'
+import { HorizontalBlurShader, VerticalBlurShader } from 'three-stdlib'
+
+export interface ContactShadowsProps {
+  opacity?: number
+  width?: number
+  height?: number
+  blur?: number
+  far?: number
+  smooth?: boolean
+  resolution?: number
+  frames?: number
+  scale?: number | [x: number, y: number]
+  color?: TresColor
+  depthWrite?: boolean
+}
+
+const props = withDefaults(defineProps<ContactShadowsProps>(), {
+  scale: 10,
+  frames: Infinity,
+  opacity: 1,
+  width: 1,
+  height: 1,
+  blur: 1,
+  far: 10,
+  resolution: 512,
+  smooth: true,
+  color: '#000000',
+  depthWrite: false,
+})
+
+const groupRef = shallowRef()
+const shadowRef = shallowRef<OrthographicCamera>()
+
+defineExpose({
+  value: groupRef,
+})
+
+const { state } = useCientos()
+
+const cameraW = computed(() => props.width * (Array.isArray(props.scale) ? props.scale[0] : props.scale || 1))
+const cameraH = computed(() => props.height * (Array.isArray(props.scale) ? props.scale[1] : props.scale || 1))
+
+// the render target that will show the shadows in the plane texture and
+// the target that we will use to blur the first render target
+let renderTarget = new WebGLRenderTarget(props.resolution, props.resolution)
+let renderTargetBlur = new WebGLRenderTarget(props.resolution, props.resolution)
+renderTargetBlur.texture.generateMipmaps = renderTarget.texture.generateMipmaps = false
+
+// make a plane and make it face up
+const planeGeometry = new PlaneGeometry(props.width, props.height).rotateX(Math.PI / 2)
+const blurPlane = new Mesh(planeGeometry)
+const depthMaterial = new MeshDepthMaterial()
+depthMaterial.depthTest = depthMaterial.depthWrite = false
+
+// Overwrite depthMaterial sahders
+
+depthMaterial.onBeforeCompile = shader => {
+  shader.uniforms = {
+    ...shader.uniforms,
+    ucolor: { value: new Color(props.color as ColorRepresentation) },
+  }
+  shader.fragmentShader = shader.fragmentShader.replace(
+    `void main() {`, //
+    `uniform vec3 ucolor;
+           void main() {
+          `,
+  )
+  shader.fragmentShader = shader.fragmentShader.replace(
+    'vec4( vec3( 1.0 - fragCoordZ ), opacity );',
+    // Colorize the shadow, multiply by the falloff so that the center can remain darker
+    'vec4( ucolor * fragCoordZ * 2.0, ( 1.0 - fragCoordZ ) * 1.0 );',
+  )
+}
+
+// Initialize the blur shaders
+const horizontalBlurMaterial = new ShaderMaterial(HorizontalBlurShader)
+const verticalBlurMaterial = new ShaderMaterial(VerticalBlurShader)
+verticalBlurMaterial.depthTest = horizontalBlurMaterial.depthTest = false
+
+// Blur the shadow
+
+function blurShadows(blur: number) {
+  if (!state.renderer || !shadowRef.value) return
+
+  blurPlane.visible = true
+  blurPlane.material = horizontalBlurMaterial
+  horizontalBlurMaterial.uniforms.tDiffuse.value = renderTarget.texture
+  horizontalBlurMaterial.uniforms.h.value = blur / props.resolution
+
+  state.renderer.setRenderTarget(renderTargetBlur)
+  state.renderer.render(blurPlane, shadowRef.value)
+
+  blurPlane.material = verticalBlurMaterial
+  verticalBlurMaterial.uniforms.tDiffuse.value = renderTargetBlur.texture
+  verticalBlurMaterial.uniforms.v.value = blur / props.resolution
+
+  state.renderer.setRenderTarget(renderTarget)
+  state.renderer.render(blurPlane, shadowRef.value)
+
+  blurPlane.visible = false
+}
+
+const { onLoop } = useRenderLoop()
+
+let count = 0
+let initialBackground: Color | Texture | null
+let initialOverrideMaterial: Material | null
+
+onLoop(() => {
+  if (!shadowRef.value || state.scene === undefined || state.renderer === undefined) return
+
+  if (frames === Infinity || count < props.frames) {
+    count++
+
+    // Save the initial background and override material
+    initialBackground = state.scene.background
+    initialOverrideMaterial = state.scene.overrideMaterial
+
+    // Render the shadows
+    groupRef.value.visible = false
+    state.scene.background = null
+    state.scene.overrideMaterial = depthMaterial
+    state.renderer.setRenderTarget(renderTarget)
+    state.renderer.render(state.scene, shadowRef.value)
+
+    // Blur the shadows
+    blurShadows(props.blur)
+    if (props.smooth) {
+      blurShadows(props.blur * 0.6)
+    }
+
+    // Restore the initial background and override material
+    state.scene.background = initialBackground
+    state.scene.overrideMaterial = initialOverrideMaterial
+    groupRef.value.visible = true
+  }
+})
+</script>
+<template>
+  <TresGroup ref="groupRef" :rotation-x="Math.PI / 2">
+    <TresMesh :geometry="planeGeometry" :scale="[1, -1, 1]" :rotation="[-Math.PI / 2, 0, 0]">
+      <TresMeshBasicMaterial transparent :map="renderTarget.texture" :opacity="opacity" :depth-write="depthWrite" />
+    </TresMesh>
+    <TresOrthographicCamera :args="[-cameraW / 2, cameraW / 2, cameraH / 2, -cameraH / 2, 0, far]" />
+  </TresGroup>
+</template>
diff --git a/src/core/abstractions/index.ts b/src/core/abstractions/index.ts
index b00efead..197ee7b0 100644
--- a/src/core/abstractions/index.ts
+++ b/src/core/abstractions/index.ts
@@ -5,7 +5,8 @@ import { PamCameraMouse } from './usePamCameraMouse/component'
 import Stars from './Stars.vue'
 import Smoke from './Smoke.vue'
 import Levioso from './Levioso.vue'
+import ContactShadows from './ContactShadows.vue'
 
 export * from './usePamCameraMouse'
 export * from './useEnvironment'
-export { Text3D, useAnimations, Environment, PamCameraMouse, Stars, Smoke, Levioso }
+export { Text3D, useAnimations, Environment, PamCameraMouse, Stars, Smoke, Levioso, ContactShadows }