diff --git a/blog/2023-10-03-pixi-v8-beta.md b/blog/2023-10-03-pixi-v8-beta.md index e1443423e..476e6ade3 100644 --- a/blog/2023-10-03-pixi-v8-beta.md +++ b/blog/2023-10-03-pixi-v8-beta.md @@ -120,4 +120,4 @@ Start experimenting with PixiJS v8 Beta today and join us in shaping the future ### Keep in touch! -"To stay in the loop, we invite you to follow [Doormat23](https://twitter.com/Doormat23) and [PixiJS](https://twitter.com/PixiJS) on social media, where we'll be unveiling more exciting updates shortly. Alternatively, you can join our vibrant community on [Discord](https://discord.gg/nrnDP9wtyX) for direct engagement and real-time conversations. +"To stay in the loop, we invite you to follow [Doormat23](https://twitter.com/Doormat23) and [PixiJS](https://bsky.app/profile/pixijs.com) on social media, where we'll be unveiling more exciting updates shortly. Alternatively, you can join our vibrant community on [Discord](https://discord.gg/nrnDP9wtyX) for direct engagement and real-time conversations. diff --git a/blog/2024-03-05-pixi-v8-launches.md b/blog/2024-03-05-pixi-v8-launches.md index 51e08ec4a..6b1b32a87 100644 --- a/blog/2024-03-05-pixi-v8-launches.md +++ b/blog/2024-03-05-pixi-v8-launches.md @@ -245,4 +245,4 @@ Let's continue to innovate and push the boundaries of web graphics together. You ## 📲 Keep in touch -To stay in the loop, we invite you to follow [Doormat23](https://twitter.com/Doormat23) and [PixiJS](https://twitter.com/PixiJS) on social media, where we'll be unveiling more exciting updates shortly. Alternatively, you can join our vibrant community on [Discord](https://discord.gg/nrnDP9wtyX) for direct engagement and real-time chit-chats. +To stay in the loop, we invite you to follow [Doormat23](https://twitter.com/Doormat23) and [PixiJS](https://bsky.app/profile/pixijs.com) on social media, where we'll be unveiling more exciting updates shortly. Alternatively, you can join our vibrant community on [Discord](https://discord.gg/nrnDP9wtyX) for direct engagement and real-time chit-chats. diff --git a/blog/2024-06-14-pixi-spine.md b/blog/2024-06-14-pixi-spine.md index 574c93844..80575a9e3 100644 --- a/blog/2024-06-14-pixi-spine.md +++ b/blog/2024-06-14-pixi-spine.md @@ -60,4 +60,4 @@ You can also check out the live v8 examples [here](https://pixijs.io/spine-v8/ex ## 📲 Stay Connected -Follow [Doormat23](https://twitter.com/Doormat23) and [PixiJS](https://twitter.com/PixiJS) on social media for the latest updates. Join our vibrant community on [Discord](https://discord.gg/nrnDP9wtyX) for real-time discussions and support. +Follow [Doormat23](https://twitter.com/Doormat23) and [PixiJS](https://bsky.app/profile/pixijs.com) on social media for the latest updates. Join our vibrant community on [Discord](https://discord.gg/nrnDP9wtyX) for real-time discussions and support. diff --git a/blog/2024-07-18-assetpack-1.0.0.md b/blog/2024-07-18-assetpack-1.0.0.md index f2a6e3850..4a680e31e 100644 --- a/blog/2024-07-18-assetpack-1.0.0.md +++ b/blog/2024-07-18-assetpack-1.0.0.md @@ -129,4 +129,4 @@ We are committed to continuously improving AssetPack, and your feedback is inval ## 🌐 Stay Connected -Follow [Zyie](https://twitter.com/_Zyie_) and [PixiJS](https://twitter.com/PixiJS) on social media for the latest updates. Join our vibrant community on [Discord](https://discord.gg/nrnDP9wtyX) for real-time discussions and support. +Follow [Zyie](https://twitter.com/_Zyie_) and [PixiJS](https://bsky.app/profile/pixijs.com) on social media for the latest updates. Join our vibrant community on [Discord](https://discord.gg/nrnDP9wtyX) for real-time discussions and support. diff --git a/blog/2024-10-03-pixi-v8-particle-container.md b/blog/2024-10-03-pixi-v8-particle-container.md index 2d50f6e0b..29d5f4c7f 100644 --- a/blog/2024-10-03-pixi-v8-particle-container.md +++ b/blog/2024-10-03-pixi-v8-particle-container.md @@ -1,15 +1,15 @@ --- -title: ParticleContainer - The New Speed Demon in PixiJS v8 -description: Introducing the new ParticleContainer in PixiJS v8—faster than ever, optimized for rendering millions of particles effortlessly. -slug: particlecontainer-v8 -authors: - - name: Mat Groves - title: PixiJS - url: https://github.com/GoodboyDigital - image_url: https://github.com/GoodboyDigital.png -tags: [PixiJS, ParticleContainer, WebGL, Games, Performance, Optimization] -hide_table_of_contents: true -keywords: ['PixiJS', 'ParticleContainer', 'game development', 'web graphics', 'optimization', 'WebGL'] +title: ParticleContainer - The New Speed Demon in PixiJS v8 +description: Introducing the new ParticleContainer in PixiJS v8—faster than ever, optimized for rendering millions of particles effortlessly. +slug: particlecontainer-v8 +authors: + - name: Mat Groves + title: PixiJS + url: https://github.com/GoodboyDigital + image_url: https://github.com/GoodboyDigital.png +tags: [PixiJS, ParticleContainer, WebGL, Games, Performance, Optimization] +hide_table_of_contents: true +keywords: ['PixiJS', 'ParticleContainer', 'game development', 'web graphics', 'optimization', 'WebGL'] --- PixiJS v8 has taken speed to the next level with the release of its new `ParticleContainer`. This new feature brings a jaw-dropping performance boost, capable of rendering 100K+ without breaking a sweat. If you’ve got tons of elements to throw on the screen, you’re in for a treat! @@ -18,7 +18,7 @@ PixiJS v8 has taken speed to the next level with the release of its new `Particl ## 🚀 New ParticleContainer Design -The key difference in PixiJS v8 is that the `ParticleContainer` doesn’t deal with sprites any more, it works with lightweight **particles**. While particles share many properties with sprites (like texture, position, anchor, scale, rotation, alpha and color), they cut out unnecessary overhead. The result is **speed**, pure and simple. +The key difference in PixiJS v8 is that the `ParticleContainer` doesn’t deal with sprites any more, it works with lightweight **particles**. While particles share many properties with sprites (like texture, position, anchor, scale, rotation, alpha and color), they cut out unnecessary overhead. The result is **speed**, pure and simple. How fast, you ask? Well, take a look on my machine (Macbook Pro M3): @@ -100,4 +100,4 @@ Ready to give it a spin? Try out the new `ParticleContainer` in PixiJS v8, and p ## 🌐 Stay Connected -Follow [Doormat23](https://twitter.com/Doormat23) and [PixiJS](https://twitter.com/PixiJS) on social media for the latest updates. Join our vibrant community on [Discord](https://discord.gg/nrnDP9wtyX) for real-time discussions and support. +Follow [Doormat23](https://twitter.com/Doormat23) and [PixiJS](https://bsky.app/profile/pixijs.com) on social media for the latest updates. Join our vibrant community on [Discord](https://discord.gg/nrnDP9wtyX) for real-time discussions and support. diff --git a/blog/2025-11-29-pixi-v8.6.0.md b/blog/2025-11-29-pixi-v8.6.0.md new file mode 100644 index 000000000..29c876127 --- /dev/null +++ b/blog/2025-11-29-pixi-v8.6.0.md @@ -0,0 +1,163 @@ +--- +title: PixiJS Update - Survey & v8.6.0 +description: A look at the recent updates and improvements in PixiJS. +slug: better-docs-v8 +authors: + - name: Zyie + title: PixiJS Admin + url: https://github.com/zyie + image_url: https://github.com/zyie.png +tags: [PixiJS, Updates, Improvements] +hide_table_of_contents: true +keywords: ['PixiJS', 'Updates', 'Improvements', 'QoL'] +--- +import Example from '@site/src/components/Example/index'; +import version from '@site/docs/pixi-version.json'; + + +Thank you to everyone who participated in our survey! One thing came through loud and clear: **better documentation is a top priority for the PixiJS community**. We’ve taken your feedback to heart, and work is already underway to make significant improvements. + +This post is part of our commitment to better communication. We’ll share how we’re tackling documentation updates and shine a light on some of the great features and improvements we’ve introduced since PixiJS v8 that might have flown under the radar! + + + +## 📖 Improving Documentation +Documentation is critical for a library like PixiJS, and we recognize there’s room for growth. Below is a list of the changes we’re making to improve the documentation: + + - **More Examples**: + - Adding more examples for both beginners and experienced developers to learn from to the website. + - Add example/guide for each feature we introduce on release, to help you understand how to use it right away. + - **Updated Guides**: + - Overhaul our current set of guides to better reflect the current state of PixiJS. + - Add more guides to cover the basics of PixiJS + - **Starter Templates**: + - Create a set of starter templates to help you get up and running quickly. These templates will be available through an `npm create` command. + - **API Doc Improvements**: + - Improve documentation of types. + - Include inline examples and explanations. + - Ensure all public API's are written from the perspective of the user, not the developer. + - Look into providing a toggle for exposing internal API's, with the default being to hide them. This will help reduce the noise in the API docs for most users while stil giving plugin developers access to the internals. + - **Migration Guide**: + - Improving the migration guide to help you upgrade your codebase to the latest version of PixiJS. + - Explore backporting more deprecations where possible to help you upgrade your codebase more easily. + +These changes will take time, but they are high on our priority list. If you have any suggestions or feedback, please let us know on [Bluesky](https://bsky.app/profile/pixijs.com) or [Discord](https://discord.gg/nrnDP9wtyX). + +## ✨ What’s New? +We’ve been hard at work delivering new features and improvements, but let’s be honest—we haven’t done the best job announcing them. Here’s a quick rundown of the highlights from our recent releases. + +:::info NOTE +We will be bringing out more detailed guides/examples on all of these features as well, this is just the start! +::: + +### v8.6.0 +- **cacheAsTexture**: Containers now have a `cacheAsTexture()` function. It behaves similarly to `cacheAsBitmap` from v7 and will render the container to a texture instead of rendering the container itself. + + This can be great for performance if the container is static, as instead of rendering all the children etc., it will just render a single texture. + As well as this the process of caching is also relatively low cost, with the trade-off being memory usage as the use of a texture does increase memory (for the texture itself). + + :::info Guide + We have a full guide on this feature [here](/8.x/guides/advanced/cache-as-texture). + ::: + +- **pixelLine**: The `pixelLine` property is a neat feature of the PixiJS Graphics API that allows you to create lines that remain 1 pixel thick, regardless of scaling or zoom level. This feature is especially useful for achieving crisp, pixel-perfect visuals, particularly in retro-style or grid-based games, technical drawing, or UI rendering. + + :::info Guide + We have a full guide on this feature [here](/8.x/guides/components/graphics-pixel-line). + ::: + + +- **New Global Methods**: We have added three new functions to Container to make it easier to work with global transforms / tints / alphas. + + - **getGlobalTransform** + ```ts + const skipUpdate = false; + const outMatrix = new Matrix(); + + // writes and returns outMatrix; + const globalTransform = container.getGlobalTransform(outMatrix, skipUpdate); + ``` + - **getGlobalTint** + ```ts + const skipUpdate = false; + // returns rgb color + const globalTint = container.getGlobalTint(skipUpdate); + ``` + - **getGlobalAlpha** + ```ts + const skipUpdate = false; + // returns alpha as number; + const globalAlpha = container.getGlobalAlpha(skipUpdate); + ``` + + :::info INFO + if `skipUpdate` is true - it will be faster but may be outdated - uses the last rendered data + + if `skipUpdate` is false - it will be 100% accurate but slower - recalculates transform chain + ::: +### v8.5.0 +- **ParticleContainer**: Faster than ever, optimized for rendering a million particles effortlessly. + + The `ParticleContainer` shines when you need insane numbers of visual elements on-screen, especially when you want them moving and interacting in real time. Whether you're building particle effects, swarms of characters, or abstract art installations, PixiJS v8 has you covered. The static vs. dynamic property system gives you granular control over performance, allowing you to fine-tune the balance between flexibility and speed. + + :::info Blog + We have a blog post on this feature [here](/blog/particlecontainer-v8). + ::: + + + +- **Inverse Masking**: + You can now use `element.setMask({ mask, inverse: true })` to create an inverse mask effect. This is great for creating cut-out effects or other creative visuals. + + +### v8.4.0 + - **Multiview**: Support for renderering the same context to multiple canvases. Eliminating the need for multiple PixiJS instances and duplicating resources. + Simply add `await app.init({ multiView: true})` and when rendering, pass in the target canvas to render to. `renderer.render({ container, target: canvasOnDom1 })` + + :::tip EXPERIMENTAL + This feature is still experimental and currently interaction only works on the first canvas. + ::: + +### v8.3.0 + - **PerspectiveMesh**: A new mesh type that allows you to create 3D perspective effect + + +### v8.2.0 + - **Container Reparenting**: You can now reparent a container to another container without it looking visually different with two new methods `reparentChild(child)` and `reparentChildAt(child, 1)`. + + Usually when you move a child from one container to another, it will visually jump to the new container. This is because the child's transform is relative to the parent container. With these new methods, the child will keep its position and scale relative to the new parent container. + + ```ts + const container1 = new Container(); + const container2 = new Container(); + + const sprite = new Sprite(); + container1.scale = 5; + container1.addChild(sprite); + + // visually the sprite will remain in the same position and scale + // despite container1 and container2 having different scales. + container2.reparentChild(sprite); + ``` + +### v8.1.0 + - **Generic Typing for Container**: You can now specify the type of children that a container can have. e.g. + ```typescript + const container = new Container(); + container.addChild(new Sprite()); + container.addChild(new Graphics()); // This will throw a type error + ``` + - **DTS Bundles**: We now provide a single TypeScript definition file with all pixi exports under the `PIXI` namespace, similar to the defintion file we generated in v6. This can be useful for users that are using PixiJS in a non-module environment, and need to include the definition file manually. + + This file can be found on all of our releases on Github in the "Assets" section, or through `https://pixijs.download/vX.X.X/pixi.d.ts`. + +## 🗣️ Looking Ahead +We’re committed to addressing the feedback you’ve shared and continuing to improve PixiJS. In addition to better documentation, you can expect more regular updates to keep you informed about what’s new. + +Your input is vital to PixiJS’s success, and we encourage you to share your thoughts through Bluesky, Github, and the Discord channel. Thanks for your continued support as we work to make PixiJS better for everyone. + +The PixiJS Team + +## 🌐 Stay Connected + +Follow [Zyie](https://bsky.app/profile/zyie.bsky.social) and [PixiJS](https://bsky.app/profile/pixijs.com) on social media for the latest updates. Join our vibrant community on [Discord](https://discord.gg/nrnDP9wtyX) for real-time discussions and support. diff --git a/docs/guides/advanced/cache-as-texture.md b/docs/guides/advanced/cache-as-texture.md index 67b7ebc2d..b31d79644 100644 --- a/docs/guides/advanced/cache-as-texture.md +++ b/docs/guides/advanced/cache-as-texture.md @@ -4,7 +4,9 @@ The `cacheAsTexture` function in PixiJS is a powerful tool for optimizing rendering in your applications. By rendering a container and its children to a texture, `cacheAsTexture` can significantly improve performance for static or infrequently updated containers. Let's explore how to use it effectively, along with its benefits and considerations. -> **Note:** `cacheAsTexture` is PixiJS v8's equivalent of the previous `cacheAsBitmap` functionality. If you're migrating from v7 or earlier, simply replace `cacheAsBitmap` with `cacheAsTexture` in your code. +:::info Note +`cacheAsTexture` is PixiJS v8's equivalent of the previous `cacheAsBitmap` functionality. If you're migrating from v7 or earlier, simply replace `cacheAsBitmap` with `cacheAsTexture` in your code. +::: --- @@ -77,7 +79,7 @@ import * as PIXI from 'pixi.js'; aliens.push(alien); alienContainer.addChild(alien); } - + // this will cache the container and its children as a single texture // so instead of drawing 100 sprites, it will draw a single texture! alienContainer.cacheAsTexture() @@ -158,4 +160,4 @@ Once the texture is cached, updating it via `updateCacheTexture()` is efficient - **Reusing the texture**: If you want to create a new texture based on the container, its better to use `const texture = renderer.generateTexture(container)` and share that amongst you objects! -By understanding and applying `cacheAsTexture` strategically, you can significantly enhance the rendering performance of your PixiJS projects. Happy coding! \ No newline at end of file +By understanding and applying `cacheAsTexture` strategically, you can significantly enhance the rendering performance of your PixiJS projects. Happy coding! diff --git a/docs/pixi-version.json b/docs/pixi-version.json index 6b9bac02d..eb7709837 100644 --- a/docs/pixi-version.json +++ b/docs/pixi-version.json @@ -1,10 +1,10 @@ { "versionLabel": "v8.x", - "version": "8.6.0", - "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.6.0", - "build": "https://pixijs.download/v8.6.0/pixi.min.js", - "docs": "https://pixijs.download/v8.6.0/docs/index.html", - "npm": "8.6.0", + "version": "8.6.2", + "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.6.2", + "build": "https://pixijs.download/v8.6.2/pixi.min.js", + "docs": "https://pixijs.download/v8.6.2/docs/index.html", + "npm": "8.6.2", "prerelease": false, "latest": true } \ No newline at end of file diff --git a/pixi-versions.json b/pixi-versions.json index d3bca956f..ebbac9b42 100644 --- a/pixi-versions.json +++ b/pixi-versions.json @@ -12,11 +12,11 @@ }, { "versionLabel": "v8.x", - "version": "8.6.0", - "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.6.0", - "build": "https://pixijs.download/v8.6.0/pixi.min.js", - "docs": "https://pixijs.download/v8.6.0/docs/index.html", - "npm": "8.6.0", + "version": "8.6.2", + "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.6.2", + "build": "https://pixijs.download/v8.6.2/pixi.min.js", + "docs": "https://pixijs.download/v8.6.2/docs/index.html", + "npm": "8.6.2", "prerelease": false, "latest": true, "isCurrent": true diff --git a/src/components/Example/index.module.scss b/src/components/Example/index.module.scss index 32cfa1ddc..60babfe3c 100644 --- a/src/components/Example/index.module.scss +++ b/src/components/Example/index.module.scss @@ -15,3 +15,9 @@ } } } + +.embedded { + width: 700px; + margin: 0 auto; + height: 400px; +} diff --git a/src/components/Example/index.tsx b/src/components/Example/index.tsx index 25aa576c3..a12b75418 100644 --- a/src/components/Example/index.tsx +++ b/src/components/Example/index.tsx @@ -5,15 +5,16 @@ import styles from './index.module.scss'; import BrowserOnly from '@docusaurus/BrowserOnly'; import { getExampleEntry } from '@site/src/examples'; import { extractSource } from '../Playground/PixiPlayground/useEditorCode'; +import classNames from 'classnames'; -export default function Example({ id, pixiVersion }: { id: string; pixiVersion: IVersion }) +export default function Example({ id, pixiVersion, mode }: { id: string; pixiVersion: IVersion; mode?: any }) { const entry = getExampleEntry(pixiVersion.version, id); const source = (entry?.source ?? entry) as string | Record; const { indexCode, extraFiles } = extractSource(source); return ( -
+
{() => ( )} diff --git a/src/components/Playground/PixiPlayground/index.module.scss b/src/components/Playground/PixiPlayground/index.module.scss index 6eafd4476..3e821fd9c 100644 --- a/src/components/Playground/PixiPlayground/index.module.scss +++ b/src/components/Playground/PixiPlayground/index.module.scss @@ -178,16 +178,15 @@ right: 0; background: url(/static/images/logo-p.svg) center center no-repeat; z-index: 100; - animation: 1s infinite alternate loadingPulse; + animation: loadingPulse 1s infinite alternate ease-in-out; + background-size: 20%; } @keyframes loadingPulse { from { - background-size: 20%; opacity: 0.7; } to { - background-size: 23%; opacity: 1; } } diff --git a/src/components/Playground/PixiPlayground/index.tsx b/src/components/Playground/PixiPlayground/index.tsx index 2d9d7720f..ad6117385 100644 --- a/src/components/Playground/PixiPlayground/index.tsx +++ b/src/components/Playground/PixiPlayground/index.tsx @@ -10,7 +10,7 @@ import type { CodeChangeCallbackType } from './MonacoEditor'; import styles from './index.module.scss'; -type BasePlaygroundMode = 'tutorial' | 'fullscreen' | 'example'; +type BasePlaygroundMode = 'tutorial' | 'fullscreen' | 'example' | 'embedded'; type BasePlaygroundProps = { useTabs: boolean; @@ -32,9 +32,11 @@ function BasePlayground({ useTabs, mode, onCodeChanged }: BasePlaygroundProps) // TODO: we don't change the value of activeFile so why the key? return ( -
- -
+ {mode !== 'embedded' && ( +
+ +
+ )}
diff --git a/src/examples/v8.0.0/basic/cacheAsTexture.js b/src/examples/v8.0.0/basic/cacheAsTexture.js index 5bc049e28..c3524899a 100644 --- a/src/examples/v8.0.0/basic/cacheAsTexture.js +++ b/src/examples/v8.0.0/basic/cacheAsTexture.js @@ -23,8 +23,8 @@ import { Application, Assets, Container, Sprite } from 'pixi.js'; // create an empty container const alienContainer = new Container(); - alienContainer.x = 400; - alienContainer.y = 300; + alienContainer.x = app.screen.width / 2; + alienContainer.y = app.screen.height / 2; // make the stage interactive app.stage.eventMode = 'static'; @@ -40,8 +40,8 @@ import { Application, Assets, Container, Sprite } from 'pixi.js'; alien.tint = Math.random() * 0xffffff; - alien.x = Math.random() * 800 - 400; - alien.y = Math.random() * 600 - 300; + alien.x = Math.random() * app.screen.width - app.screen.width / 2; + alien.y = Math.random() * app.screen.height - app.screen.height / 2; alien.anchor.x = 0.5; alien.anchor.y = 0.5; aliens.push(alien); diff --git a/src/examples/v8.0.0/examplesData.json b/src/examples/v8.0.0/examplesData.json index 33a4692a9..08e163ce8 100644 --- a/src/examples/v8.0.0/examplesData.json +++ b/src/examples/v8.0.0/examplesData.json @@ -61,7 +61,8 @@ "masks": [ "graphics", "sprite", - "filter" + "filter", + "inverseMask" ], "filtersBasic": [ "blur", @@ -74,6 +75,7 @@ "custom" ], "meshAndShaders": [ + "perspectiveMesh", "texturedMeshBasic", "texturedMeshAdvanced", "triangle", diff --git a/src/examples/v8.0.0/graphics/pixelLine.js b/src/examples/v8.0.0/graphics/pixelLine.js index 857dac08d..f001a6888 100644 --- a/src/examples/v8.0.0/graphics/pixelLine.js +++ b/src/examples/v8.0.0/graphics/pixelLine.js @@ -75,7 +75,8 @@ function buildGrid(graphics) }); // Position label in top-left corner - label.x = 20; - label.y = 20; + label.position.set(20, 20); + label.width = app.screen.width - 40; + label.scale.y = label.scale.x; app.stage.addChild(label); })(); diff --git a/src/examples/v8.0.0/index.ts b/src/examples/v8.0.0/index.ts index c79eda934..2f4eb1d12 100644 --- a/src/examples/v8.0.0/index.ts +++ b/src/examples/v8.0.0/index.ts @@ -62,6 +62,7 @@ import pixelLine from '!!raw-loader!./graphics/pixelLine.js'; import filter from '!!raw-loader!./masks/filter.js'; import graphics from '!!raw-loader!./masks/graphics.js'; import sprite from '!!raw-loader!./masks/sprite.js'; +import inverseMask from '!!raw-loader!./masks/inverseMask.js'; import instancedGeometry from '!!raw-loader!./meshAndShaders/instancedGeometry/index.js'; import instancedGeometryVert from '!!raw-loader!./meshAndShaders/instancedGeometry/instancedGeometry.vert'; @@ -96,6 +97,7 @@ import triangle from '!!raw-loader!./meshAndShaders/triangle/index.js'; import triangleVert from '!!raw-loader!./meshAndShaders/triangle/triangle.vert'; import triangleFrag from '!!raw-loader!./meshAndShaders/triangle/triangle.frag'; import triangleWgsl from '!!raw-loader!./meshAndShaders/triangle/triangle.wgsl'; +import perspectiveMesh from '!!raw-loader!./meshAndShaders/perspectiveMesh.js'; import offscreenCanvasBasic from '!!raw-loader!./offscreenCanvas/basic.js'; import webWorker from '!!raw-loader!./offscreenCanvas/webWorker.js'; @@ -153,13 +155,13 @@ const examplesSource: ExamplesSourceType = { graphics: { advanced, dynamic, + fillGradient, + meshFromPath, + pixelLine, simple, svg, svgLoad, texture, - fillGradient, - meshFromPath, - pixelLine, }, events: { click, @@ -175,6 +177,7 @@ const examplesSource: ExamplesSourceType = { masks: { filter, graphics, + inverseMask, sprite, }, textures: { @@ -229,6 +232,7 @@ const examplesSource: ExamplesSourceType = { starWarp, }, meshAndShaders: { + perspectiveMesh, instancedGeometry: { index: instancedGeometry, 'src/instancedGeometry.vert': instancedGeometryVert, diff --git a/src/examples/v8.0.0/masks/inverseMask.js b/src/examples/v8.0.0/masks/inverseMask.js new file mode 100644 index 000000000..360816b67 --- /dev/null +++ b/src/examples/v8.0.0/masks/inverseMask.js @@ -0,0 +1,27 @@ +import { Application, Graphics } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + const rect = new Graphics().rect(0, 0, 400, 400).fill('red'); + const masky = new Graphics().star(160, 160, 5, 100).fill('yellow'); + + masky.width = 240; + masky.height = 240; + + rect.setMask({ + mask: masky, + inverse: true, + }); + + app.stage.addChild(rect, masky); + app.stage.position.set(window.innerWidth / 2 - 200, window.innerHeight / 2 - 200); +})(); diff --git a/src/examples/v8.0.0/meshAndShaders/perspectiveMesh.js b/src/examples/v8.0.0/meshAndShaders/perspectiveMesh.js new file mode 100644 index 000000000..7ad7fcf42 --- /dev/null +++ b/src/examples/v8.0.0/meshAndShaders/perspectiveMesh.js @@ -0,0 +1,106 @@ +import { Application, PerspectiveMesh, Assets } from 'pixi.js'; + +(async () => +{ + // Create a new application + const app = new Application(); + + // Initialize the application + await app.init({ background: '#1099bb', resizeTo: window }); + + // Append the application canvas to the document body + document.body.appendChild(app.canvas); + + const texture = await Assets.load({ + src: 'https://pixijs.com/assets/eggHead.png', + }); + + const points = [ + { x: 0, y: 0 }, + { x: texture.width, y: 0 }, + { x: texture.width, y: texture.height }, + { x: 0, y: texture.height }, + ]; + + const outPoints = points.map((p) => ({ ...p })); + + const mesh = app.stage.addChild( + new PerspectiveMesh({ + texture, + pivot: { + x: texture.width / 2, + y: texture.height / 2, + }, + x: app.screen.width / 2, + y: app.screen.height / 2, + width: texture.width, + height: texture.height, + }), + ); + + mesh.scale = 2; + + let angleX = 0; + let angleY = 0; + + // Function to apply 3D rotation to the points + function rotate3D(points, outPoints, angleX, angleY, perspective) + { + const radX = (angleX * Math.PI) / 180; + const radY = (angleY * Math.PI) / 180; + const cosX = Math.cos(radX); + const sinX = Math.sin(radX); + const cosY = Math.cos(radY); + const sinY = Math.sin(radY); + + for (let i = 0; i < points.length; i++) + { + const src = points[i]; + const out = outPoints[i]; + const x = src.x - texture.width / 2; + const y = src.y - texture.height / 2; + let z = 0; // Assume initial z is 0 for this 2D plane + + // Rotate around Y axis + const xY = cosY * x - sinY * z; + + z = sinY * x + cosY * z; + + // Rotate around X axis + const yX = cosX * y - sinX * z; + + z = sinX * y + cosX * z; + + // Apply perspective projection + const scale = perspective / (perspective - z); + + out.x = xY * scale + texture.width / 2; + out.y = yX * scale + texture.height / 2; + } + } + + app.ticker.add(() => + { + rotate3D(points, outPoints, angleX, angleY, 300); + mesh.setCorners( + outPoints[0].x, + outPoints[0].y, + outPoints[1].x, + outPoints[1].y, + outPoints[2].x, + outPoints[2].y, + outPoints[3].x, + outPoints[3].y, + ); + }); + + app.stage.hitArea = app.screen; + app.stage.eventMode = 'static'; + app.stage.on('pointermove', (e) => + { + const { x, y } = e.global; + + angleY = -(x - mesh.x) / 10; + angleX = -(y - mesh.y) / 10; + }); +})();