Skip to content

Commit

Permalink
add additional info to the migration docs
Browse files Browse the repository at this point in the history
  • Loading branch information
GoodBoyDigital committed Mar 28, 2024
1 parent d15e0bf commit 8f4b0da
Showing 1 changed file with 164 additions and 1 deletion.
165 changes: 164 additions & 1 deletion docs/guides/migrations/v8.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,34 @@ PixiJS v8 introduces several exciting changes and improvements that dramatically

Before diving into the migration process, let's review the breaking changes introduced in PixiJS v8. Make sure to pay close attention to these changes as they may impact your existing codebase.

### Should I Upgrade?

Generally, the answer is yes! But currently, there may be reasons that suggest it's best not to upgrade just yet. Ask yourself the following questions:

- **Do I *need* the ParticleContainer?** We have removed this from v8 because, in most cases, a regular container is faster. However, this is not the case when the number of particles begins to exceed the 10,000s range. We do plan on creating a new particle container optimized for this high level of elements. Ideally, we would like to make it even faster and also less memory intensive. Creating 100,000 sprites consumes a lot of memory, and instead, creating a much lighter particle container + particle class would help here. If you need tens of thousands of particles right now and performance is key, then it's best to continue leveraging v7 until we release the new Particle Container.

- **Do you make use of custom batch renderers?**
The logic for batch rendering has been extensively reworked for speed! Custom batching can be achieved by creating your own batcher, but the ability to build one and slot it into the existing batching architecture has not been directly exposed just yet. If you are making extensive use of custom batchers, there is no high level analogous alternative in v8 just yet. You would need to go a layer deeper. Exposing the ability for custom batching is on our roadmap, and we hope that our new approach will be even easier to use. Watch this space for that update.

- **Does your project leverage existing Pixi libraries that have not yet been migrated to v8?**
We are working hard to migrate our key libraries to v8 but did not want this to be a blocker for those who are using pure Pixi. This means some libraries will not have a v8 counterpart just yet. It's best to hold off on migration if this is the case for you.

**Migrated**
- Filters
- Sound
- Gif
- Storybook
- UI
- - Open Games

**Migrating Right Now:**
- React
- Spine (esoteric version)

**To Be Migrated:**
- Pixi viewport
- Pixi layers (rather than migrating this, we will likely incorporate it directly into PixiJS v8 as a feature)

### **New Package Structure**

Since version 5, PixiJS has utilized individual sub-packages to organize its codebase into smaller units. However, this approach led to issues, such as conflicting installations of different PixiJS versions, causing complications with internal caches.
Expand Down Expand Up @@ -112,6 +140,46 @@ PixiJS will now need to be initialised asynchronously. With the introduction of

With this change it also means that the `ApplicationOptions` object can now be passed into the `init` function instead of the constructor.

### ** Texture adjustments **

Textures structures have been modified to simplify what was becoming quite a mess behind the scenes in v7.
Textures no longer know or manage loading of resources. This needs to be done upfront by you or the assets manager. Textures expect full loaded resources only. This makes things so much easier to manage as the validation of a texture can essentially be done at construction time and left at that!
BaseTexture no longer exists. In stead we now have a variety of TextureSources available. A texture source combines the settings of a texture with how to upload and use that texture. In v8 there are the following texture sources:

TextureSource - a vanilla texture that you can render too or upload however you wish. (used mainly by render textures)
ImageSource - a texture source that contains an image resource of some kind (eg ImageBitmap or html image)
CanvasSource - a canvas source that contains a canvas. Used mainly for rendering canvases or rendering to a canvas (webGPU)
VideoSource - a texture source that contains a video. Takes care of updating the texture eon the GPU to ensure that they stay in sync.
BufferSource - a texture source that contains a buffer. What ever you want really! make sure your buffer type and format are compatible!
CompressedSource - a texture source that handles compressed textures. Used by the GPU compressed texture formats.

Whilst the majority of the time `Assets` will return Textures you may want to make you own! More power to ya!

To create a texture source the signature differs from baseTexture. example:

```
const image = new Image();
image.onload = function(){
// create a texture source
const source = new ImageSource({
resource
});
// create a texture
const texture = new Texture({
source
});
}
image.src = 'myImage.png';
```



### **Graphics API Overhaul**

There are a few key changes to the Graphics API. In fact this is probably the most changed part of v8. We have added deprecations where possible but below is the rundown of changes:
Expand Down Expand Up @@ -251,6 +319,101 @@ const graphics2 = new Graphics()
const secondRect = new Graphics(context);
```

### Shader changes
As we now need to accommodate both WebGL and WebGPU shaders, the wey they are constructed has been tweaked to take this into account. The main differences you will notice (this is for shaders in general) is that Textures are no longer considered uniforms (as in they cannot be included in a uniform group). Instead we have the concept of resources. A resource can be a few things including:

- TextureSource - A source texture `myTexture.source`
- TextureStyle - A texture style `myTexture.style`
- UniformGroup - A collection of number based uniforms `myUniforms = new UniformGroup({})`
- BufferResource - A buffer that is treated as a uniform group (advanced)

creating a webgl only shader now looks like this:

**old**
```ts
const shader = PIXI.Shader.from(vertex, fragment, uniforms);
```
**new**

just WebGL
```ts
const shader = Shader.from({
gl: { vertex, fragment },
resources, // resource used from above including uniform groups
});
```
WebGL and WebGPU
```ts
const shader = Shader.from({
gl: { vertex, fragment },
gpu: {
vertex: {
entryPoint: 'mainVert',
source,
},
fragment: {
entryPoint: 'mainFrag',
source,
},
},
resources, // resource used from above including uniform groups
});

```

Uniforms are also constructed in a slightly different way. When creating them, you now provide the type of variable you want it to be.

**old**
```ts
const uniformGroup = new UniformGroup({
uTime:1,
});

uniformGroup.uniforms.uTime = 100;

```
**new**
```ts
const uniformGroup = new UniformGroup({
uTime:{value:1, type:'f32',
});

uniformGroup.uniforms.uTime = 100; // still accessed the same!
```
The best way to play and fully and get to know this new setup please check out the Mesh and Shader examples:
**old**: [v7 example](https://pixijs.com/8.x/examples/mesh-and-shaders/triangle-color)
**new**: [v8 example](https://pixijs.com/7.x/examples/mesh-and-shaders/triangle-color)
### Filters
Filters work almost exactly the same, unless you are constructing a custom one. If this is the case, the shader changes mentioned above need to taken into account.
**old**
```ts
const filter = new Filter(vertex, fragment, {
uTime: 0.0,
});
```
**new**
```ts
const filter = new Filter({
glProgram: GlProgram.from({
fragment,
vertex,
}),
resources: {
timeUniforms: {
uTime: { value: 0.0, type: 'f32' },
},
},
});
```
**old**: [v7 example](https://pixijs.com/8.x/examples/filters-advanced/custom)
**new**: [v8 example](https://pixijs.com/7.x/examples/filters-advanced/custom)
### Other Breaking Changes
Expand Down Expand Up @@ -559,7 +722,7 @@ Certain features from PixiJS v7 have been deprecated in v8. While they will stil
- `SCALE_MODES.LINEAR` -> `'linear'`,
- `WRAP_MODES` replaced with `WrapMode` strings
- `WRAP_MODES.CLAMP` -> `'clamp'`,
- `WRAP_MODES.CLAMP` -> `'clamp-to-edge'`,
- `WRAP_MODES.REPEAT` -> `'repeat'`,
- `WRAP_MODES.MIRRORED_REPEAT` -> `'mirror-repeat'`,
Expand Down

0 comments on commit 8f4b0da

Please sign in to comment.