Feat: v8 launch post

.eslintrc.js

@@ -37,6 +37,9 @@ module.exports = {
     rules: {
         'no-empty-function': 0,
         'no-prototype-builtins': 0,
+        'no-mixed-operators': 0,
+        'no-console': 0,
+        'global-require': 0,
         'react-hooks/rules-of-hooks': 'error',
         'react-hooks/exhaustive-deps': 'error',
         'spaced-comment': [1, 'always', { markers: ['/'] }],

.gitignore

@@ -8,6 +8,16 @@
 .docusaurus
 .cache-loader
 
+# Generated Example and Tutorial Markdowns
+/docs/tutorials/*
+!/docs/tutorials/index.md
+/docs/examples/*
+!/docs/examples/index.md
+/versioned_docs/version-*/tutorials/*
+!/versioned_docs/version-*/tutorials/index.md
+/versioned_docs/version-*/examples/*
+!/versioned_docs/version-*/examples/index.md
+
 # Misc
 .DS_Store
 .env.local
@@ -21,3 +31,7 @@ yarn-error.log*
 .vscode
 .idea
 .eslintcache
+
+scripts/pixiVersions.json
+
+.ghtoken

README.md

@@ -24,3 +24,81 @@ $ npm build
 
 This command generates static content into the `build` directory and can be served using any static contents hosting service.
 
+### Working with Content
+
+Core content on the website is within the working `docs` directory and can have various versions that were snapshot and copied over into the `versioned_docs` directory.
+
+Core content consists of:
+- Guides
+- Examples
+- Tutorials
+
+#### Guides
+
+These are static markdown pages that can be added and edited directly within the `docs/guides` directory.
+
+#### Examples
+
+These are markdown compilations of the JS files on the `src/examples` directory. They are also versioned to match the versions of the docs snapshots. If the exact version of the example is not found, it will fallback to the best-matched most recent version of the examples. be Only the `docs/examples/index.md` entry point can be altered, but the examples themselves should be worked on from within the `src/examples/{version}` directories. Once updated, the command below can be called to generate out the markdown compilations of the examples.
+
+```
+$ npm run generate-example-docs
+```
+
+This command will trigger example markdowns generation on all of the docs directories altogether, both the working docs directory and the versioned docs directories.
+
+__Note__: The examples within the docs version active on the website will be shown on the drop-down menu on the Playground page to serve as starting points for users to explore PixiJS features to their heart's content
+
+#### Tutorials
+
+These also markdown compilations of groups of files on the `src/tutorials` directory. Each tutorial group consists of a number of steps where each step contains a JS code file accompanied by an instruction markdown file, and a separate completed JS code file if there is a next step to proceed towards. These completed code can be toggled on/off from the instruction card of the corresponded step. Like the examples, these are also versioned to match the versions of the docs snapshots and will fallback to the best-matched most recent version of the tutorials if the exact version is not found. Only the `docs/tutorials/index.md` entry point can be altered, but the tutorial groups themselves should be worked on from within the `src/tutorial/{version}` directories. Once updated, the command below can be called to generate out the markdown compilations of the tutorial groups.
+
+```
+$ npm run generate-tutorial-docs
+```
+
+This command will trigger tutorial markdowns generation on all of the docs directories altogether, both the working docs directory and the versioned docs directories.
+
+#### Workflow
+
+```
+$ npm start
+```
+
+The local development command will also trigger the `generate-content` command which, in turns, calls the `generate-example-docs` script and `generate-tutorial-docs` script respectively. Since the compiled markdown pages contain dynamic components, changes within the examples source or the tutorials source will be reflected on hot reloads.
+
+However, when adding or removing tutorials or examples, please make sure to re-do `npm start` or run `generate-content` manually to keep the markdown pages of these content up-to-date.
+
+#### Versioning
+
+Docs versioning is native to Docusaurus, but to make it easier to manage it is coupled with the PixiJS version. A `pixi-version.json` is required on the working docs directory to create a versioned snapshot of the docs. This can be generated and altered using the following command:
+
+```
+$ npm run generate-pixi-version-config
+```
+
+The command will retrieve the up-to-date versions and tags from PixiJS and display out as an interactive list for selection.
+
+Once satisfied with the state of the working docs and wanting to create a snapshot to make way for another upcoming version, the following command can be called:
+
+```
+$ npm run create-docs-version-snapshot
+```
+
+This will copy everything from the working docs into its own directory within the `versioned_docs` directory and named correspondingly to the version number from the encapsulated `pixi-version.json`, if chosen to be created as a specific version snapshot. If chosen to be snapshot as a generic version then the version key will be simplified to `{major}.x` (eg. `7.x`). Generic version snapshot is recommended over the specific one for maintaining major docs, but for a major version where multiple versions of docs are needed then the ability to create specific version snapshots can be handy. The command will also trigger `update-global-version-config` script which adds the pixi version config to the master `pixi-versions.json` on the root and alter the version config on the `docusaurus.config.js` accordingly. Docusaurus will also add the version to its `versions.json` file on the root.
+
+An existing docs snapshot can be removed using the following command:
+
+```
+$ npm run remove-docs-version-snapshot
+```
+
+Or can have its pixi version config altered to another version using the command:
+
+```
+$ npm run switch-snapshot-pixi-version-config
+```
+
+where both come with an interactive list of all the snapshots for selection to be actioned on accordingly.
+
+The `update-pixi-version-configs` script is also called pre-build and pre-deploy to update all the outdated labels or metadata on the `pixi-version.json` config on all the docs directories.

blog/2025-2-15-pixi-v8-launches.md

@@ -0,0 +1,228 @@
+---
+title: PixiJS v8 Launches! 🎉
+description: PixiJS v8 The Future of 2D Web Graphics is Here!
+slug: pixi-v8-launches
+authors:
+  - name: GoodBoyDigital
+    title: PixiJS Creator
+    url: https://github.com/GoodBoyDigital
+    image_url: https://github.com/GoodBoyDigital.png
+tags: [PixiJS, WebGPU, WebGL]
+hide_table_of_contents: true
+keywords: ['PixiJS', 'pixi.js', 'webGL', 'webGPU', 'performance', '2d rendering', '2d webGL', 'javascript graphics', 'game development']
+---
+
+Get ready to push the boundaries of what's possible on the web! PixiJS v8 has landed, and it's a game-changer. Celebrating a decade of driving innovation, we've supercharged PixiJS with the latest technological advancements, making it faster, more robust, and ridiculously powerful. From the seamless integration of WebGPU to leveraging modern JavaScript for smoother development, PixiJS v8 is all about empowering you to create jaw-dropping web experiences with ease. It's not just an update; it's the future of 2D web graphics, today. Dive in and let PixiJS v8 elevate your projects to unseen heights. Let's make the web a more beautiful place, one pixi(el) at a time.
+
+<!--truncated-->
+
+## 🚀 Revolutionizing Web Graphics: Welcome to PixiJS v8
+
+![PixiJS logo](pixi.svg)
+
+It's hard to believe that PixiJS has been part of the open-source community for a whopping ten years. In that time, the digital landscape has evolved tremendously, and so has PixiJS. We've seen significant updates, like the transition to TypeScript, and we've overhauled major parts of the engine, such as asset loading and WebGL integration.
+
+Now, we're thrilled to unveil PixiJS v8, arguably our most substantial update ever. This release is not just a reflection on the shortcomings of v7, which has served us well, but an acknowledgment that there's always room for improvement. Over time, we've all encountered aspects of our code we wished we could refine. Often, the best solutions and insights emerge only after we've stepped back from the problem, allowing us to see the bigger picture.
+
+With PixiJS v8, our aim was to revisit and enhance the foundation of PixiJS, streamlining its core rather than just adding layers of code.
+
+Our vision for v8 was clear:
+- **Longevity:** We designed v8 to stand the test of time, anticipating it will remain relevant and robust for another decade.
+- **Innovation with WebGPU:** Embracing the latest in rendering technology, we've seamlessly integrated WebGPU, not as an add-on to our existing WebGL renderer but as a core paradigm, ensuring PixiJS remains at the cutting edge as WebGL phases out.
+- **Leveraging Modern JavaScript:** The advancements in JavaScript have significantly simplified development. We've utilized features like object destructuring and options to make v8 cleaner and more powerful.
+- **Correcting Past Oversights:** Every project has its lessons. With v8, we've addressed and rearchitected certain aspects of PixiJS, reducing complexity and enhancing functionality, particularly in areas we felt were overengineered in the past (looking at you, textures!).
+- **Boosting Performance:** PixiJS is already renowned for its speed. With v8, we've unlocked even greater performance, making it faster across the board compared to v7.
+
+We're incredibly proud of PixiJS v8 and eager to share the improvements and new features with you. While there are some breaking API changes, we've provided a migration guide and ensured compatibility with v7 wherever possible. Get ready to experience the next level of 2D rendering with PixiJS v8!
+
+---
+
+## 🔗 Quick links
+- The new Docs for v8 can be found here [LINK TO DOCS]
+- [Migration](https://pixijs.com/guides/migrations/v8)
+- [Examples](https://pixijs.com/examples)
+- [Open Games](https://github.com/pixijs/open-games)
+
+---
+
+## 🎁 Whats New?
+
+So many new things - more than we can easily cover in one post! Here's some head lines, but check out the links above for a more in depth details on the changes!
+#### 📦 New Package Structure
+
+No more "lerna." PixiJS is now just one package with one import root: `import {stuff} from ‘pixi.js’`. This change means we now have much better tree shaking during app compilation, reducing bundle size if not imported.
+
+Old:
+
+```ts
+import { Sprite } from "@pixi/sprite";
+import { Graphic } from "@pixi/graphics";
+```
+
+New:
+
+```ts
+import { Sprite, Graphic } from "pixi.js";
+```
+
+### ✨ We *promise* the Renderer will work
+
+When initializing a renderer, this process is now asynchronous. This serves two purposes: firstly, identifying and loading the necessary renderer code to minimize what is loaded for your users. We only load the one backend that your user is using. There's no point in loading all the WebGL stuff if they are using WebGPU!
+
+Secondly, the initialization of WebGPU itself is an asynchronous process, so we need to have a promise in there somewhere :)
+
+```ts
+import { Application, autoDetectRenderer } from "pixi.js";
+
+const app = new Application();
+
+(async () => {
+  await app.init({
+    // application options
+  });
+
+  // or
+  const renderer = await autoDetectRenderer({}); // WebGL or WebGPU
+
+  // do pixi things
+})();
+```
+
+#### 🖥️ WebGPU Renderer
+
+![PixiJS + webGPU = love](image-1.png)
+
+The obvious one! We have a WebGPU backend to render things. It's worth noting that WebGPU is not inherently faster in all use cases than WebGL (nor is it slower). This is because we are generally more CPU-bound in PixiJS than GPU-bound. However, if you find that your scene has lots of batch breaks (e.g., filters, masks, blend modes), you may find WebGPU will perform faster - especially from the GPU side. WebGPU is still new, and I predict it will get faster with time, just as WebGL did! It's a great starting point!
+
+#### 📈 New Performance Bar
+
+![bunnies](image.png)
+
+The performance of v8 is faster for **both** renderers. This means by using v8 and the WebGL renderer, all the speed improvements apply! This is mainly as we have taken great care to make a more reactive render loop that only updates what it needs to. Check out the numbers here:
+
+- **CPU** = time spent by the CPU rendering a single frame
+- **GPU** = time spent by the GPU rendering a single frame
+
+| Bunny Situation | V7 CPU  | V8 CPU |CPU Dif | V7 GPU | V8 GPU | GPU dif |
+|-----------------|------------|------------|--------------------|------------|------------|--------------------|
+| 100k sprites all moving | ~50ms | ~15ms | <div style={{backgroundColor:'lightgreen', color:'black'}}>233%</div> | ~9ms | ~2ms | <div style={{backgroundColor:'lightgreen', color:'black'}}>350%</div> |
+| 100k sprites not moving | ~21ms | ~0.12ms | <div style={{backgroundColor:'lightgreen', color:'black'}}>17417%</div> | ~9ms | ~0.5ms | <div style={{backgroundColor:'lightgreen', color:'black'}}>1700%</div> |
+| 100k sprites (changing scene structure) | ~50ms | ~24ms | <div style={{backgroundColor:'lightgreen', color:'black'}}>108%</div> | ~9ms | ~2ms | <div style={{backgroundColor:'lightgreen', color:'black'}}>350%</div> |
+
+These benchmark numbers are based on the Bunnymark test that you can try yourself!
+
+- [v7 Bunnymark](https://goodboydigital.github.io/pixi-bunnymark/dist/?version=v7&count=100000&renderer=webgpu)
+- [v8 Bunnymark - WebGPU](https://goodboydigital.github.io/pixi-bunnymark/dist/?version=v8&count=100000&renderer=webgpu)
+- [v8 Bunnymark - WebGL](https://goodboydigital.github.io/pixi-bunnymark/dist/?version=v8&count=100000&renderer=webgl)
+- [Repo](https://github.com/GoodBoyDigital/pixi-bunnymark)
+
+#### 🌟 Scene Upgrades
+
+![PixiJS logo](blend-modes.png)
+
+- We have introduced the concept of render groups, allowing containers to have their transform applied by the GPU. This means we can have a true 2D hardware-accelerated camera. Perfect for when you have a large static world that you want to pan and zoom around in! (much like in 3D - you move the Camera around the world, not the world around the camera). This can give really great speed boosts!
+
+```
+const container = new Container({
+  isRenderGroup:true // this containers transform is now handled on the GPU!
+}) 
+```
+
+- Another cool new change is that now blend modes and tints are inherited, much like transforms and alpha. This means you can now easily tint a container, and all its children will have the tint applied - same for blend modes! its as easy as 
+
+```
+// will make all the children tinted red!
+container.tint = 'red'
+// will make all the children have the add blend mode
+container.blendMode = 'add'
+``` 
+
+Rendering to a texture with antialiasing is now super easy; all you have to do is set the new antialiasing property to true when creating a render texture (or applying a filter) just as you do when creating your renderer! Easy peasy :D
+
+```
+const texture = RenderTexture.create({
+    width:100,
+    height:100,
+    antialias:true // easy as that!
+})
+```
+
+- We have also added support for a wide range of Photoshop-like filters, This allows you to take your rendering to the next level! We have including all the classics:
+  - ColorBlend, ColorBurnBlend, ColorDodgeBlend, DarkenBlend, DifferenceBlend, DivideBlend, ExclusionBlend, HardLightBlend, HardMixBlend, LightenBlend, LinearBurnBlend, LinearDodgeBlend, LinearLightBlend, LuminosityBlend, NegationBlend, OverlayBlend, PinLightBlend, SaturationBlend, SoftLightBlend, SubtractBlend, VividLightBlend.
+ - Its worth noting that they are essentially filters under the hood - so you know.. don't over use them or things might slow down! 
+
+```ts
+import `pixi.js/advanced-blend-modes` // make sure to include them in you lib! (or cherry pick one!)
+
+myContainer.blendMode = 'color-burn` // easy!
+```
+
+#### 🎨 Graphics Upgrades
+
+![alt text](image-4.png)
+
+- The Graphics API has undergone changes to become more intuitive and user-friendly, closely resembling the HTML Canvas 2D context API. For instance, drawing and filling a rectangle is simplified as follows:
+
+  ```ts
+  graphics
+      .rect(50, 50, 100, 100)
+      .fill('blue');
+  ```
+
+- A `GraphicsContext` has been introduced, powering all graphics operations. Similar to how one texture can be used across many sprites, a single GraphicsContext can now be utilized by multiple Graphics objects, enhancing efficiency and flexibility.
+
+- Support for SVG drawing has been added. For example:
+
+  ```ts
+  graphics.svg('M 100 350 q 150 -300 300 0'); 
+  ```
+
+- Gradient fill support has been introduced, currently limited to linear gradients, allowing for more visually engaging designs.
+
+- The new `GraphicsPath` class enables the drawing and sharing of shapes. This feature is particularly useful as it allows for the creation of paths that can then be transformed into Mesh geometry using the `buildGeometryFromPath` function, opening up new possibilities for intricate and detailed graphic designs.
+
+```
+
+const path = 
+
+```
+
+For more information on these graphics upgrades and guidance on how to adapt to the enhanced Graphics API, please refer to the migration guide, or why not jump in and play with some examples!.
+
+60% faster??
+< todo - BENCHMARK>
+
+#### 📝 Text Upgrades
+
+Text has been upgraded to allow for better performance and usability! We have also integrated HTMLText into v8 as standard.
+
+BitmapFonts can now be generated on the fly or installed upfront as you prefer. They dynamically add characters as the font's glyphs are required, saving on memory. The layout of bitmap text is almost identical to the layout of the default text now, making it easier to switch between the two depending on your needs.
+
+```typescript
+
+const myText = new BitmapText({
+  text: 'hello im a bitmap font!',
+  // font will be dynamically created!
+  style:{ 
+    fontFamily: 'Outfit', 
+    fontSize: 12,
+    fill: 'red',
+  }
+})
+```
+Text fills and strokes now conform to the same fills and strokes as graphics. This means Gradients, textures, and all the fun ways you can fill and stroke graphics can now be applied to Text!
+
+
+## 🤝 What now? Get involved!
+
+As PixiJS v8 takes its first steps into the world, we're eager to see it grow with your feedback and contributions. Now we know things won't be perfect, but we're committed to quick responses on [GitHub](https://github.com/pixijs/pixijs) and [Discord](https://discord.gg/nrnDP9wtyX) to any issues that arise, valuing your input to make PixiJS even better.
+
+A heartfelt thanks to our early adopters (everyone in [here](https://discord.com/channels/734147990985375826/1143191340230914068)) for testing the limits of v8, to our dedicated contributors and team for their hard work. Your efforts and insights are invaluable to us. We could not have gotten here without you!
+
+A final big shout-out to PlayCo for their support in making this release a reality!
+
+Let's continue to innovate and push the boundaries of web graphics together. Your engagement is key to PixiJS's evolution, and we're excited to see where we can go with your help.
+
+## 📲 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.