Filters allow you to add special effects to your animiations
Pass a filter to your animations through the :filter prop of an animation entity and it will automatically be loaded and the final rendered output of that component (and any sub components) will pass through whatever filter you have provided before being rendered on screen
<script>
// FilterExample.vue
import Bytepath from "bytepath";
import OceanScene from "../../../bytepathnpm/Samples/Scenes/Ocean/OceanScene";
// All of these filters can also be used in your own projects
let Filters = Bytepath.samples.filters;
let Matrix = Filters.enterTheMatrix;
let Underwater = Filters.underwater;
let Lime = Filters.limeFilter;
let Peach = Filters.peachFilter;
let Shadow = Filters.dropShadow;
export default Bytepath.CreateAsset({
name: "FilterExample",
data() {
return {index: 1};
},
computed: {
useFilter() {
return [
null,
Matrix,
Lime,
Underwater,
Shadow,
Peach][this.index];
}
},
components: { OceanScene },
});
</script>
<template>
<!-- FilterExample.vue -->
<div>
<input type="radio" id="matrix" v-model.number="index" value="1"/>Enter The Matrix<br/>
<input type="radio" id="lime" v-model.number="index" value="2"/>Lime Gram<br/>
<input type="radio" id="under" v-model.number="index" value="3"/>Underwater<br/>
<input type="radio" id="shadow" v-model.number="index" value="4"/>Drop Shadow<br/>
<input type="radio" id="peach" v-model.number="index" value="5"/>Peach Gram<br/>
<input type="radio" id="nofilter" v-model.number="index" value="0"/>None<br/>
<ocean-scene :show-viewbox="true" align="topleft" :filter="useFilter" :keyframe="keyframe"/>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
Filters accept all of the same props as an asset including keyframe and can also have animations, just like an asset can.
TIP
Currently, Filters are more of a proof of concept to show that this is possible and creating your own filters is a bit of a chore. Thus, for the current release, consider it not possible to create custom filters. Expect this to improve in future releases