From 4900a69c3047a341420741edba3e8bb10bd47031 Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Thu, 6 May 2021 22:30:51 +0200 Subject: [PATCH] ts => js for postprocessing --- .../vanruesc/{Effect.ts => Effect.js} | 31 +++++++--------- .../{EffectComposer.ts => EffectComposer.js} | 21 ++++------- .../vanruesc/{EffectPass.ts => EffectPass.js} | 35 ++++++------------- .../vanruesc/{Pass.ts => Pass.js} | 31 +++++++--------- .../vanruesc/{index.ts => index.js} | 0 5 files changed, 41 insertions(+), 77 deletions(-) rename src/components/postprocessing/vanruesc/{Effect.ts => Effect.js} (68%) rename src/components/postprocessing/vanruesc/{EffectComposer.ts => EffectComposer.js} (59%) rename src/components/postprocessing/vanruesc/{EffectPass.ts => EffectPass.js} (55%) rename src/components/postprocessing/vanruesc/{Pass.ts => Pass.js} (58%) rename src/components/postprocessing/vanruesc/{index.ts => index.js} (100%) diff --git a/src/components/postprocessing/vanruesc/Effect.ts b/src/components/postprocessing/vanruesc/Effect.js similarity index 68% rename from src/components/postprocessing/vanruesc/Effect.ts rename to src/components/postprocessing/vanruesc/Effect.js index 5568446..95f3d2b 100644 --- a/src/components/postprocessing/vanruesc/Effect.ts +++ b/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, 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, - 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, 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): 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 = 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() : [] }, -}) +} diff --git a/src/components/postprocessing/vanruesc/EffectPass.ts b/src/components/postprocessing/vanruesc/EffectPass.js similarity index 55% rename from src/components/postprocessing/vanruesc/EffectPass.ts rename to src/components/postprocessing/vanruesc/EffectPass.js index 55c0eff..3c28f31 100644 --- a/src/components/postprocessing/vanruesc/EffectPass.ts +++ b/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 - getEffectIndex: {(): number} - addEffect: {(effect: PP.Effect, index: number): number} - removeEffect: {(effect: PP.Effect): number} -} +export const EffectPassInjectionKey = Symbol('EffectPass') -export const EffectPassInjectionKey: InjectionKey = 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 = [] + 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() : [] }, -}) +} diff --git a/src/components/postprocessing/vanruesc/Pass.ts b/src/components/postprocessing/vanruesc/Pass.js similarity index 58% rename from src/components/postprocessing/vanruesc/Pass.ts rename to src/components/postprocessing/vanruesc/Pass.js index fcc5f16..7f86372 100644 --- a/src/components/postprocessing/vanruesc/Pass.ts +++ b/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, 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 -): 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 diff --git a/src/components/postprocessing/vanruesc/index.ts b/src/components/postprocessing/vanruesc/index.js similarity index 100% rename from src/components/postprocessing/vanruesc/index.ts rename to src/components/postprocessing/vanruesc/index.js