feat: add new filter examples and enhance documentation with blur, color matrix, and displacement filters

Author: hairyf

docs/.vitepress/config.ts

@@ -30,6 +30,7 @@ const themeConfig: DefaultTheme.Config = {
         { text: 'Assets', link: '/examples/assets/async' },
         { text: 'Dom Container', link: '/examples/dom-container/html_text-area' },
         { text: 'Events', link: '/examples/events/buttons' },
+        { text: 'Filters', link: '/examples/filters/blur' },
         // { text: 'Text', link: '/examples/text/bitmap-text' },
         // { text: 'Graphics', link: '/examples/graphics/advanced' },
         // { text: 'Events', link: '/examples/events/click' },
@@ -170,6 +171,18 @@ const themeConfig: DefaultTheme.Config = {
           { text: 'Slider', link: '/examples/events/slider' },
         ],
       },
+      {
+        text: 'Filters',
+        collapsed: true,
+        items: [
+          { text: 'Blur', link: '/examples/filters/blur' },
+          { text: 'Color Matrix', link: '/examples/filters/color-matrix' },
+          { text: 'Custom shader / Glsl', link: '/examples/filters/custom-shader_glsl' },
+          { text: 'Custom / Interactive / Blending', link: '/examples/filters/custom_interactive_blending' },
+          { text: 'Displacement', link: '/examples/filters/displacement' },
+          { text: 'Displacement / Interactive', link: '/examples/filters/displacement_interactive' },
+        ],
+      },
       // {
       //   text: 'Container',
       //   collapsed: true,

docs/examples/events/demo/buttons.vue

@@ -9,7 +9,7 @@ type RecordSprite = SpriteElement & Record<string, any>
 const screen = useScreen()
 const textures = reactive<Record<string, Texture>>({})
 
-// 根据 screen 计算按钮位置和尺寸
+// calculate button positions and sizes based on screen
 const buttons = computed(() => {
   const { width, height } = screen.value
   return [
@@ -61,7 +61,7 @@ function onButtonOut(this: RecordSprite) {
     @loaded="Object.assign(textures, $event)"
   >
     <!-- create a background... -->
-    <Sprite texture="bg" :width="screen.width" :height="screen.height" />
+    <sprite texture="bg" :width="screen.width" :height="screen.height" />
     <!-- add it to the stage -->
     <sprite
       v-for="(p, i) in buttons"

docs/examples/events/demo/custom-hitarea.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Graphics, Polygon, Sprite } from 'pixi.js'
+import type { Sprite as SpriteElement } from 'pixi.js'
+import { Graphics, Polygon } from 'pixi.js'
 
 const hitArea = new Polygon([
   80,
@@ -24,21 +25,16 @@ const hitArea = new Polygon([
   50,
 ])
 
-const square = new Graphics()
-  .rect(400, 200, 75, 200)
-  .fill()
+const square = new Graphics().rect(400, 200, 75, 200).fill()
+const squareHit = new Graphics().rect(550, 200, 75, 200).fill()
 
-const squareHit = new Graphics()
-  .rect(550, 200, 75, 200)
-  .fill()
-
-function onClick(this: Sprite) {
+function onClick(this: SpriteElement) {
   this.tint = 0x333333
 }
-function onPointerOver(this: Sprite) {
+function onPointerOver(this: SpriteElement) {
   this.tint = 0x666666
 }
-function onPointerOut(this: Sprite) {
+function onPointerOut(this: SpriteElement) {
   this.tint = 0xFFFFFF
 }
 
@@ -57,21 +53,21 @@ const tBind = {
 
 <template>
   <assets alias="star" entry="https://pixijs.com/assets/yellowstar.png">
-    <Sprite v-bind="sBind" :x="0" texture="star" />
-    <Text v-bind="tBind" :x="25">
+    <sprite v-bind="sBind" :x="0" texture="star" />
+    <text v-bind="tBind" :x="25">
       Standard
-    </Text>
-    <Sprite v-bind="sBind" :x="200" :hit-area="hitArea" texture="star" />
-    <Text v-bind="tBind" :x="200 + 35">
+    </text>
+    <sprite v-bind="sBind" :x="200" :hit-area="hitArea" texture="star" />
+    <text v-bind="tBind" :x="200 + 35">
       Hit Area
-    </Text>
-    <Sprite v-bind="sBind" :x="400" :mask="square" texture="star" />
-    <Text v-bind="tBind" :x="400 + 10">
+    </text>
+    <sprite v-bind="sBind" :x="400" :mask="square" texture="star" />
+    <text v-bind="tBind" :x="400 + 10">
       Mask
-    </Text>
-    <Sprite v-bind="sBind" :x="550" :hit-area="hitArea" :mask="squareHit" texture="star" />
-    <Text v-bind="tBind" :x="550 + 10">
+    </text>
+    <sprite v-bind="sBind" :x="550" :hit-area="hitArea" :mask="squareHit" texture="star" />
+    <text v-bind="tBind" :x="550 + 10">
       Mask\nHit Area
-    </Text>
+    </text>
   </assets>
 </template>

docs/examples/events/demo/custom-pointer.vue

@@ -1,47 +1,50 @@
 <script lang="ts" setup>
-import type { Sprite as SpriteElement, SpriteOptions, Texture } from 'pixi.js'
+import type { Sprite as SpriteElement, Texture } from 'pixi.js'
 
-import { reactive } from 'vue'
+import { computed, reactive } from 'vue'
 import { onReady, useScreen } from 'vue3-pixi'
 
 type RecordSprite = SpriteElement & Record<string, any>
 
 const screen = useScreen()
 const textures = reactive<Record<string, Texture>>({})
 
-// set some silly values...
-const buttons: any[] = [
-  { x: 175, y: 75, scale: 1.2 },
-  { x: 655, y: 75 },
-  { x: 410, y: 325, rotation: Math.PI / 10 },
-  { x: 150, y: 465, scale: 0.8 },
-  { x: 685, y: 445, scale: { x: 0.8, y: 1.2 }, rotation: Math.PI },
-]
+// calculate button positions and sizes based on screen
+const buttons = computed(() => {
+  const { width, height } = screen.value
+  return [
+    { x: width * 0.25, y: height * 0.15, scale: 1.2 },
+    { x: width * 0.75, y: height * 0.15 },
+    { x: width * 0.5, y: height * 0.5, rotation: Math.PI / 10 },
+    { x: width * 0.2, y: height * 0.85, scale: 0.8 },
+    { x: width * 0.8, y: height * 0.85, scale: { x: 0.8, y: 1.2 }, rotation: Math.PI },
+  ]
+})
 
 function onButtonDown(this: RecordSprite) {
-  this._is_down = true
+  this.isDown = true
   this.texture = textures.buttonDown
   this.alpha = 1
 }
 
 function onButtonUp(this: RecordSprite) {
-  this._is_down = false
-  if (this._is_over)
+  this.isDown = false
+  if (this.isOver)
     this.texture = textures.buttonOver
   else
     this.texture = textures.button
 }
 
 function onButtonOver(this: RecordSprite) {
-  this._is_over = true
-  if (this._is_down)
+  this.isOver = true
+  if (this.isDown)
     return
   this.texture = textures.buttonOver
 }
 
 function onButtonOut(this: RecordSprite) {
-  this._is_over = false
-  if (this._is_down)
+  this.isOver = false
+  if (this.isDown)
     return
   this.texture = textures.button
 }

docs/examples/events/demo/dragging.vue

@@ -22,11 +22,11 @@ function onDragStart(this: SpriteElement) {
 }
 
 function onDragMove(event: FederatedPointerEvent) {
-  if (target.value) {
-    // Directly update the sprite's position
-    target.value.x = event.global.x
-    target.value.y = event.global.y
-  }
+  if (!target.value)
+    return
+  // Directly update the sprite's position
+  target.value.x = event.global.x
+  target.value.y = event.global.y
 }
 
 function onDragEnd() {
@@ -40,14 +40,17 @@ function onDragEnd() {
 function onLoaded(texture: Texture) {
   texture.source.scaleMode = 'nearest'
 
-  sprites.value = Array.from({ length: 10 }).fill(undefined).map(() => ({
-    x: Math.floor(Math.random() * screen.value.width),
-    y: Math.floor(Math.random() * screen.value.height),
-    onPointerdown: onDragStart,
-    texture,
-    scale: 3,
-    anchor: 0.5,
-  }))
+  sprites.value = Array
+    .from({ length: 10 })
+    .fill(undefined)
+    .map(() => ({
+      x: Math.floor(Math.random() * screen.value.width),
+      y: Math.floor(Math.random() * screen.value.height),
+      onPointerdown: onDragStart,
+      texture,
+      scale: 3,
+      anchor: 0.5,
+    }))
 }
 
 onReady((app) => {

docs/examples/events/demo/order.vue

@@ -44,7 +44,11 @@ for (const r of [stageRef, whiteBoxRef, blackBoxRef]) {
 
 <template>
   <text :x="2" :style="{ fontSize: 14 }">
-    Move your mouse slowly over the boxes to\nsee the order of pointerenter, pointerleave,\npointerover, pointerout events on each target!
+    Move your mouse slowly over the boxes to
+    \n
+    see the order of pointerenter, pointerleave,
+    \n
+    pointerover, pointerout events on each target!
   </text>
   <text :x="2" :y="80" :style="{ fontSize: 12 }">
     {{ logs.join('\n') }}

docs/examples/filters/blur.md

@@ -0,0 +1 @@
+<demo mode="full" :background-alpha="0" src="./demo/blur.vue" />

docs/examples/filters/color-matrix.md

@@ -0,0 +1 @@
+<demo mode="full" :background-alpha="0" src="./demo/color-matrix.vue" />

docs/examples/filters/custom-shader_glsl.md

@@ -0,0 +1 @@
+<demo mode="full" :background-alpha="0" src="./demo/custom-shader_glsl.vue" />

docs/examples/filters/custom_interactive_blending.md

@@ -0,0 +1 @@
+<demo mode="full" src="./demo/custom_interactive_blending.vue" />