ts => js for postprocessing

src/components/postprocessing/vanruesc/Effect.js

@@ -1,14 +1,13 @@
-import { defineComponent, inject, onMounted, onUnmounted, PropType } from 'vue'
+import { defineComponent, inject, onMounted, onUnmounted } from 'vue'
 import { LoadingManager } from 'three'
-// @ts-ignore
 import * as PP from 'postprocessing'
-import { EffectPassInjectionKey, EffectPassInterface } from './EffectPass'
+import { EffectPassInjectionKey } from './EffectPass'
 
-type EffectTypes = 'bloom' | 'dof' | 'godrays' | 'smaa'
+// type EffectTypes = 'bloom' | 'dof' | 'godrays' | 'smaa'
 
 export default defineComponent({
   props: {
-    type: { type: String as PropType<EffectTypes>, required: true },
+    type: { type: String, required: true },
     options: { type: Object, default: () => ({}) },
     onReady: Function,
   },
@@ -19,23 +18,23 @@ export default defineComponent({
       return
     }
 
-    let effect: undefined | PP.Effect // not useful
+    let effect
     const effectIndex = effectPass.getEffectIndex()
 
-    const initEffect = (params: any = undefined) => {
+    const initEffect = (params) => {
       effect = createEffect(effectPass, props.type, props.options, params)
       if (!effect) {
         console.error('Invalid effect type')
         return
       }
-      props.onReady?.(effect)
+      if (props.onReady) props.onReady(effect)
       effectPass.addEffect(effect, effectIndex)
     }
 
     onMounted(() => {
       if (props.type === 'smaa') {
         const smaaImageLoader = new PP.SMAAImageLoader(new LoadingManager())
-        smaaImageLoader.load(([search, area]: [HTMLImageElement, HTMLImageElement]) => {
+        smaaImageLoader.load(([search, area]) => {
           initEffect({ smaaSearch: search, smaaArea: area })
         })
       } else {
@@ -53,12 +52,7 @@ export default defineComponent({
   render() { return [] },
 })
 
-function createEffect(
-  effectPass: EffectPassInterface,
-  type: string,
-  options: Record<string, any>,
-  assets: any = undefined
-): PP.Effect {
+function createEffect(effectPass, type, options, assets) {
   let effect
   switch (type) {
     case 'bloom' :
@@ -77,14 +71,13 @@ function createEffect(
   return effect
 }
 
-function createSmaaEffect(options: Record<string, any>, assets: any): PP.Pass {
+function createSmaaEffect(options, assets) {
   const { smaaSearch, smaaArea } = assets
-  // TODO : options
   const params = [options.preset ?? PP.SMAAPreset.HIGH, options.edgeDetectionMode ?? PP.EdgeDetectionMode.COLOR]
   return new PP.SMAAEffect(smaaSearch, smaaArea, ...params)
 }
 
-function createGodraysEffect(effectPass: EffectPassInterface, options: Record<string, any>): PP.Pass {
+function createGodraysEffect(effectPass, options) {
   const opts = { ...options }
   const { lightSource } = options
   if (typeof lightSource !== 'string') {
@@ -93,7 +86,7 @@ function createGodraysEffect(effectPass: EffectPassInterface, options: Record<st
   }
   delete opts.lightSource
 
-  const lightSourceComp = effectPass.renderer.$root?.$refs[lightSource] as any
+  const lightSourceComp = effectPass.renderer.$root.$refs[lightSource]
   if (!lightSourceComp) {
     console.error('Invalid lightSource ref')
     return

src/components/postprocessing/vanruesc/EffectComposer.js

@@ -1,20 +1,11 @@
-import { defineComponent, inject, InjectionKey, onUnmounted, provide } from 'vue'
+import { inject, onUnmounted, provide } from 'vue'
 import { Clock } from 'three'
-// @ts-ignore
-import * as PP from 'postprocessing'
+import { EffectComposer } from 'postprocessing'
 import { RendererInjectionKey } from '../../../../build/trois.module.js'
-import { RendererPublicInterface } from '../../../../build/trois'
-// import { RendererInjectionKey, RendererPublicInterface } from '../../../export'
 
-export interface EffectComposerInterface {
-  renderer: RendererPublicInterface
-  composer: PP.EffectComposer
-  getPassIndex: {(): number}
-}
+export const ComposerInjectionKey = Symbol('Composer')
 
-export const ComposerInjectionKey: InjectionKey<EffectComposerInterface> = Symbol('Composer')
-
-export default defineComponent({
+export default {
   setup() {
     const renderer = inject(RendererInjectionKey)
     if (!renderer) {
@@ -22,7 +13,7 @@ export default defineComponent({
       return
     }
 
-    const composer = new PP.EffectComposer(renderer.renderer)
+    const composer = new EffectComposer(renderer.renderer)
     const clock = new Clock()
     const render = () => { composer.render(clock.getDelta()) }
     const setSize = () => { composer.setSize(renderer.size.width, renderer.size.height) }
@@ -47,4 +38,4 @@ export default defineComponent({
   render() {
     return this.$slots.default ? this.$slots.default() : []
   },
-})
+}

src/components/postprocessing/vanruesc/EffectPass.js

@@ -1,23 +1,10 @@
-import { defineComponent, inject, InjectionKey, onUnmounted, provide } from 'vue'
-// @ts-ignore
-import * as PP from 'postprocessing'
-import { ComposerInjectionKey, EffectComposerInterface } from './EffectComposer'
-import { RendererPublicInterface } from '../../../../build/trois'
-// import { RendererPublicInterface } from '../../../export'
+import { inject, onUnmounted, provide } from 'vue'
+import { EffectPass } from 'postprocessing'
+import { ComposerInjectionKey } from './EffectComposer.js'
 
-export interface EffectPassInterface {
-  composer: EffectComposerInterface
-  renderer: RendererPublicInterface
-  effectPass: PP.EffectPass
-  effects: Array<PP.Effect>
-  getEffectIndex: {(): number}
-  addEffect: {(effect: PP.Effect, index: number): number}
-  removeEffect: {(effect: PP.Effect): number}
-}
+export const EffectPassInjectionKey = Symbol('EffectPass')
 
-export const EffectPassInjectionKey: InjectionKey<EffectPassInterface> = Symbol('Composer')
-
-export default defineComponent({
+export default {
   props: {
     // needsSwap: { type: Boolean, default: false },
     renderToScreen: { type: Boolean, default: false },
@@ -30,9 +17,9 @@ export default defineComponent({
     }
 
     const passIndex = composer.getPassIndex()
-    let effectPass: PP.EffectPass
+    let effectPass
 
-    const effects: Array<PP.Effect> = []
+    const effects = []
     let effectIndex = 0
     const getEffectIndex = () => { return effectIndex++ }
 
@@ -42,16 +29,16 @@ export default defineComponent({
         composer.composer.removePass(effectPass)
         effectPass.dispose()
       }
-      effectPass = new PP.EffectPass(composer.renderer.camera, ...effects)
+      effectPass = new EffectPass(composer.renderer.camera, ...effects)
       composer.composer.addPass(effectPass, passIndex)
     }
 
-    const addEffect = (effect: PP.Effect, index: number) => {
+    const addEffect = (effect, index) => {
       effects.splice(index, 1, effect)
       refreshEffectPass()
     }
 
-    const removeEffect = (effect: PP.Effect) => {
+    const removeEffect = (effect) => {
       const index = effects.indexOf(effect)
       if (index >= 0) {
         effects.splice(index, 1)
@@ -76,4 +63,4 @@ export default defineComponent({
     })
   },
   render() { return this.$slots.default ? this.$slots.default() : [] },
-})
+}

src/components/postprocessing/vanruesc/Pass.js

@@ -1,15 +1,12 @@
-import { defineComponent, inject, onUnmounted, PropType } from 'vue'
-// @ts-ignore
-import * as PP from 'postprocessing'
+import { inject, onUnmounted } from 'vue'
+import { BlurPass, RenderPass } from 'postprocessing'
 import { ComposerInjectionKey } from './EffectComposer'
-import { RendererPublicInterface } from '../../../../build/trois'
-// import { RendererPublicInterface } from '../../../export'
 
-type PassTypes = 'render' | 'blur'
+// type PassTypes = 'render' | 'blur'
 
-export default defineComponent({
+export default {
   props: {
-    type: { type: String as PropType<PassTypes>, required: true },
+    type: { type: String, required: true },
     options: { type: Object, default: () => ({}) },
     // needsSwap: { type: Boolean, default: false },
     renderToScreen: { type: Boolean, default: false },
@@ -22,17 +19,17 @@ export default defineComponent({
       return {}
     }
 
-    let pass: undefined | PP.Pass
+    let pass
     const passIndex = composer.getPassIndex()
 
-    const initPass = (params: any = undefined) => {
+    const initPass = () => {
       pass = createPass(composer.renderer, props.type, props.options)
       if (!pass) {
         console.error('Invalid pass type')
         return
       }
       pass.renderToScreen = props.renderToScreen
-      props.onReady?.(pass)
+      if (props.onReady) props.onReady(pass)
       composer.composer.addPass(pass, passIndex)
     }
 
@@ -46,20 +43,16 @@ export default defineComponent({
     initPass()
   },
   render() { return [] },
-})
+}
 
-function createPass(
-  renderer: RendererPublicInterface,
-  type: string,
-  options: Record<string, any>
-): PP.Pass {
+function createPass(renderer, type, options) {
   let pass
   switch (type) {
     case 'render' :
-      pass = new PP.RenderPass(renderer.scene, renderer.camera)
+      pass = new RenderPass(renderer.scene, renderer.camera)
       break
     case 'blur' :
-      pass = new PP.BlurPass(options)
+      pass = new BlurPass(options)
       break
   }
   return pass