Skip to main content

2 posts tagged with "3D"

View All Tags

PixiJS 更新 - v8.16.0

· 10 min read
Zyie
Zyie
PixiJS Admin

PixiJS v8.16.0 带来了两个主要功能：一个用于没有 WebGL/WebGPU 环境的实验性Canvas 渲染器，以及用于无需多个文本对象即可进行内联样式的标签文本。此版本还包括重大 SplitText 稳定性改进和广泛的引擎稳定性更新。

🌐 PixiJS v8.16.0 brings two headline features: an experimental Canvas renderer for environments without WebGL/WebGPU, and tagged text for inline styling without multiple text objects. This release also includes major SplitText stability improvements and broad engine stability updates.

画布渲染器（实验性）​

🌐 Canvas renderer (experimental)

PixiJS 在 v8 中重新引入了 Canvas 2D 渲染器。它生成的构建更小，在旧硬件上运行良好，并且可以在没有 GPU 上下文的环境中工作。如果设备不支持 WebGL 或 WebGPU，PixiJS 会自动回退到 Canvas。无需配置，你的应用将继续运行。

🌐 PixiJS welcomes back the Canvas 2D renderer in v8. It produces a smaller build, runs well on older hardware, and works in environments where a GPU context isn't available. If a device doesn't support WebGL or WebGPU, PixiJS falls back to Canvas automatically. No configuration needed, your app keeps running.

如果你想始终使用 Canvas 渲染器，请明确设置偏好：

🌐 If you want to always use the Canvas renderer, set the preference explicitly:

await app.init({
    preference: 'canvas',
});

这是一个早期的实验性版本。Canvas 渲染器并不支持 GPU 渲染器的所有功能，但它可以处理核心用例：精灵、图形、文本和基础滤镜。如果遇到问题，请 提交错误报告。

🌐 This is an early, experimental release. The Canvas renderer doesn't cover every feature the GPU renderers support, but it handles core use cases: sprites, graphics, text, and basic filters. If you run into issues, please file a bug.


感谢 @krzys 和 @Zyie 发货这一点。

🌐 Thanks to @krzys and @Zyie for shipping this.

标记文本​

🌐 Tagged text

对字符串的部分进行样式化曾经意味着将文本拆分到多个对象中并自行管理布局。带标签的文本消除了这种麻烦。在你的 TextStyle 上定义标签样式一次，然后在字符串中使用内联标签：

🌐 Styling parts of a string used to mean splitting text across multiple objects and managing layout yourself. Tagged text removes that friction. Define tag styles once on your TextStyle, then use inline tags in your string:

const text = new Text({
    text: '<bold>Important:</bold> This is <highlight>highlighted</highlight> text',
    style: {
        fontFamily: 'Arial',
        fontSize: 28,
        fill: 'white',
        tagStyles: {
            bold: { fontWeight: 'bold', fill: 'yellow' },
            highlight: { fill: 'cyan', fontSize: 32 },
        },
    },
});

标签可以嵌套，并且每个标签都继承自基础样式。这在今天可以与 Text 和 HTMLText 一起使用；BitmapText 支持即将推出。

🌐 Tags can be nested, and each tag inherits from the base style. This works with Text and HTMLText today; BitmapText support is coming soon.

SplitText 稳定性改进​

🌐 SplitText stability improvements

SplitText 在此版本中进行了重大改进。它现在更接近标准 Text 行为，并且可以处理更广泛的 TextStyle 配置。主要变化如下：

  • 字符定位在不同的字体大小、粗细和样式下更为准确。

  • SplitText.from 通过将源锚点映射到枢轴坐标来正确传递源锚点。

  • 当你调用 styleChanged() 时，样式更改会自动传播：

    splitText.style.fontSize = 32;
    splitText.styleChanged();

  • SplitBitmapText 现在默认使用 white 填充，与 BitmapText 的行为一致。如果你以前手动传递 fill: 'white'，可以将其移除。

与以前的版本相比，这些更改可能会导致位置略有偏移。如果升级后你的文本看起来不对，新的位置是更正确的。

🌐 These changes may cause slight positional shifts compared to previous versions. If your text looks off after upgrading, the new positions are more correct.

文本渲染修复​

🌐 Text rendering fixes

在此版本中解决了几个长期存在的文本问题：

🌐 Several long-standing text issues are resolved in this release:

  • HTMLText 自动换行：现在会遵守 breakWords，超过 wordWrapWidth 的单词不再被裁剪。
  • HTMLText alpha：填充和描边的 alpha 值现在可以正确渲染。
  • 文本对齐：align: 'right' 和 align: 'center' 产生正确的位置。
  • HTML文本测量：测量精度提高，减少了布局不一致性。

更多添加​

🌐 More additions

  • 立方体贴图：为环境贴图和天空盒风格渲染提供新的 CubeTexture 支持 (@GoodBoyDigital)。
  • 外部纹理支持：将你自己的 GPU 纹理引入 PixiJS，可用于与其他渲染器共享资源（@astralarya, @GoodBoyDigital）。
  • Mip 级别渲染：直接渲染纹理的特定 mip 级别 (@GoodBoyDigital)。
  • 渲染到数组层：在渲染时针对数组纹理的特定层（@GoodBoyDigital）。
  • 精灵图 parseSync：在纹理已加载时同步解析精灵图（@jimhigson）。
  • 改进的 Pool 类型：pool.get() 现在返回正确类型的实例（@unstoppablecarl）。

错误修复​

🌐 Bug fixes

除了以上的文本修复之外，此版本还解决了：

🌐 Beyond the text fixes above, this release addresses:

  • container.cullArea 现在在本地坐标空间中被正确解释，并在剔除检查之前转换到全局坐标（@jujurocket）。
  • graphics.texture(texture, 0x000000) 正确地应用了黑色色调，而不是将 0 视为“无色调”（@bigtimebuddy）。
  • WebGPU MSDF 着色器 使用 vColor 而不是 localUniforms.uColor，修复了 WebGPU 中位图字体的颜色（@Riphal）。
  • GlGeometrySystem 中VAO 缓存被保留，防止几何体损坏（@GoodBoyDigital）。
  • GC 系统 现在会将渲染组标记为脏，防止渲染状态过时 (@Zyie)。
  • WGSL 结构体反射 保留通用类型参数 (@stargazer-2697)。
  • 视频加载器 现在会捕获加载错误，而不是默默失败 (@stargazer-2697)。
  • 通过优化模块导入改进了树摇动（@Zyie）。
  • 自定义资源解析器 现在可以在解析器中重写 src (@GoodBoyDigital)。

你可以在 GitHub 上查看完整的更新日志。

🌐 You can view the full changelog on GitHub.

即将到来：3D，PixiJS 风格​

🌐 What's coming: 3D, the PixiJS way

虽然不属于此版本的一部分，但我们希望让你了解 PixiJS 的发展方向。我们正在积极将 3D 支持集成到引擎中，旨在与 2D 渲染器一起工作。

🌐 While not part of this release, we want to give you a look at where PixiJS is headed. We're actively building 3D support into the engine, designed to work alongside the 2D renderer.

交互体验越来越多地融合了二维和三维：二维界面覆盖在三维场景之上、三维元素嵌入二维世界以及大规模渲染大量简单三维对象。PixiJS 正在被扩展以直接处理这些情况，而无需使用单独的三维引擎或根本不同的工作流程。

🌐 Interactive experiences increasingly blend 2D and 3D: UI over 3D scenes, 3D elements embedded in 2D worlds, and large numbers of simple 3D objects rendered at scale. PixiJS is being extended to handle those cases directly, without requiring a separate 3D engine or a fundamentally different workflow.

这是最近一次内部测试，运行 200,000 个3D对象，带有阴影和动态光照，所有内容都由引擎自动批处理。无需手动管理绘制调用，也无需场景图的变通方法。你定义你的对象，PixiJS 处理剩下的部分：

🌐 Here's a recent internal test running 200,000 3D objects with shadows and dynamic lighting, all automatically batched by the engine. There's no manual draw-call management and no scene-graph workarounds. You define your objects, and PixiJS handles the rest:

使 PixiJS 在 2D 渲染中快速的相同批处理架构现在也被应用于 3D。材质、光照和阴影都通过相同的自动批处理管道流动，实现了在不牺牲简便性或性能的情况下处理大量对象。

🌐 The same batching architecture that makes PixiJS fast for 2D rendering is now being applied to 3D. Materials, lighting, and shadows all flow through the same automatic batching pipeline, enabling high object counts without sacrificing simplicity or performance.

我们的方法是有意持有观点。PixiJS并不是构建通用的3D引擎，而是专注于快速、可扩展的3D，并与2D紧密集成。

🌐 Our approach is to be intentionally opinionated. Rather than building a general-purpose 3D engine, PixiJS focuses on fast, scalable 3D that integrates tightly with 2D.

此版本中的立方体纹理、mip 级别渲染和数组层渲染是该 3D 管线的早期构建模块。

🌐 Cube textures, mip level rendering, and array layer rendering in this release are early building blocks for that 3D pipeline.

我们会在 Twitter/X 和 Bluesky 发布频繁的开发更新。如果你想实时看到这一进展，欢迎关注。

🌐 We're posting frequent development updates on Twitter/X and Bluesky. Follow along if you want to see this take shape in real time.

新贡献者​

🌐 New contributors

欢迎我们的最新贡献者：

🌐 Welcome to our newest contributors:

感谢你的贡献！

🌐 Thank you for your contributions!

获取最新的 PixiJS​

🌐 Get the latest PixiJS

通过 npm 安装：

🌐 Install via npm:

npm install pixi.js@8.16.0

或者通过 CDN 使用：

🌐 Or use via CDN:

开发版本：

生产构建：

文档: https://pixijs.download/v8.16.0/docs/index.html

收尾​

🌐 Wrapping up

这就是 v8.16.0 中的新内容。如果你在使用 Canvas 渲染器或标记文本时遇到问题，请报告它们，以便我们进行改进。

🌐 That covers what's new in v8.16.0. If you hit issues with the Canvas renderer or tagged text, please report them so we can iterate.

感谢所有为此版本贡献修复和功能的人。

🌐 Thanks to everyone who contributed fixes and features to this release.


创作愉快！

🌐 Happy creating!

PixiJS 团队

PixiJS 更新 - v8.13.0

· 6 min read
Zyie
Zyie
PixiJS Admin

此版本提供了若干新功能、性能改进，以及超过 20 个错误修复，以保持 PixiJS 的顺畅运行。

🌐 This release delivers several new features, performance improvements, and over 20 bug fixes to keep PixiJS running smoothly.

让我们来看一下这次版本中发生了哪些变化，并展望一下接下来的内容，同时分享一些令人兴奋的公告！

🌐 Let's take a look at what's changed in this release and look ahead to what's coming next, with some exciting announcements to share!

v8.13.0 新功能​

🌐 What's New in v8.13.0

本次发布的一些亮点包括：

🌐 Some highlights from this release include:

  • SVG 填充规则支持 - 引擎现在可以渲染 SVG 子路径填充规则，提高了与矢量资源的兼容性（感谢 @creativoma）。

  • 文本缓存 - 文本纹理缓存（在 8.10.0 中暂时移除）现已恢复。现在，只有当文本对象使用相同的 TextStyle 实例（而不仅仅是等效设置）时，纹理才会被共享。这使缓存更稳定、错误率更低，并且在渲染许多相同样式的文本元素时可以显著提升性能。

    const textStyle = new TextStyle({ fontSize: 24, fontFamily: 'Verdana', fill: 0xffffff });
    const COUNT = 25000;

    for (let i = 0; i < COUNT; i++) {
      const bunny = new Text({ text: 'hello', style: textStyle });
      bunny.x = (i % 100) * 105;
      bunny.y = Math.floor(i / 100) * 25;
      container.addChild(bunny);
    }

  • 文本测量的LRU缓存 - 重复的字符串现在通过LRU（最近最少使用）缓存重用先前的测量，从而减少重复工作并提高性能。

  • 弃用消息控制 - 现在你可以抑制弃用警告，或在不支持颜色的环境中移除其颜色格式（感谢 @mayakwd）。

    import { deprecation } from 'pixi.js';
    deprecation.quiet = true; // Suppresses warnings
    deprecation.noColor = true; // Removes color formatting

  • 20多个修复 - 对文本、渲染、交互等方面进行了改进。非常感谢所有提供修复和报告问题的朋友们！

你可以在 GitHub 上查看完整的发行说明。

🌐 You can see the full release notes on GitHub.

PixiJS 的下一步是什么​

🌐 What's Next for PixiJS

接下来，我们很高兴分享一些我们正在为未来版本开展的较大计划。

🌐 Next up, we're excited to share some of the bigger initiatives we're working on for future releases.

gl2D 文件格式​

🌐 gl2D File Format

我们目前正在开发一种名为 gl2D 的新二维场景开放格式。

🌐 We're currently working on a new open format for 2D scenes called gl2D.

gl2D 是一种基于 JSON 的场景描述格式，受 glTF 启发，但专为 2D 渲染设计。它提供了一种结构化的方法来描述：

🌐 gl2D is a JSON-based scene description format, inspired by glTF but designed specifically for 2D rendering. It provides a structured way to describe:

  • 场景 - 节点的集合（例如：菜单、游戏玩法、制作名单）。
  • 节点 - 容器、精灵、文本等。
  • 资源 - 纹理、精灵表、视频、字体、渐变等。

为什么选择 gl2D？​

🌐 Why gl2D?

目前，没有标准的方法来描述二维场景。每个引擎或工具都使用自己的格式，这意味着资源和布局无法轻松共享。这种碎片化导致了重复工作、手动转换以及有限的互操作性。

🌐 Right now, there's no standard way to describe a 2D scene. Every engine or tool uses its own format, which means assets and layouts can't be shared easily. This fragmentation leads to duplicated work, manual conversions, and limited interoperability.

gl2D 的设计旨在通过以下方式解决此问题：

🌐 gl2D is designed to address this by:

  • 提供一个共同的基础——这样2D场景可以在不同工具和引擎之间共享。
  • 减少重复 - 开发者和设计师无需在多个工具中重建相同的场景。
  • 高效的资源管理 - 诸如纹理、字体或渐变等资源只需定义一次，就可以在多个节点中重复使用，从而保持文件更小并提高渲染效率。
  • 以网页为先的设计 - gl2D 的设计考虑了互操作性，因此它不仅可以与 PixiJS 配合使用，还可以与 Phaser 等生态系统中的其他引擎协同工作。
  • 启用新的工作流程 - 从设计工具导出或在 Pixi 上构建编辑器变得更加简单。

示例​

🌐 Example

{
  "asset": {
    "version": "1.0",
    "generator": "PixiJS"
  },
  "scene": 0,
  "scenes": [
    {
      "name": "MainScene",
      "nodes": [0]
    }
  ],
  "nodes": [
    {
      "type": "container",
      "name": "Root",
      "children": [1],
      "translation": [100, 100]
    },
    {
      "type": "sprite",
      "name": "Hero",
      "texture": 0,
      "translation": [50, 0]
    }
  ],
  "resources": [
    { "type": "texture", "source": 0 },
    { "type": "image_source", "uri": "/textures/hero.png" }
  ],
  "extensionsUsed": []
}

Figma 插件集成​

🌐 Figma Plugin Integration

除了 gl2D，我们还在开发一个 Figma 插件，让你可以将设计直接同步到 PixiJS。

🌐 Alongside gl2D, we're building a Figma plugin that will let you sync designs directly into PixiJS.

这意味着：

🌐 This means:

  • 不再需要手动从设计文件重建布局。
  • 在 Figma 中创建的场景可以导出为 gl2D，并用最少的设置加载到 PixiJS 中。
  • 可以使用 Figma 的自动布局功能和 PixiJS 布局将场景创建为完全响应的布局，以适应不同的屏幕尺寸。
  • 设计师和开发者可以并行工作，在 Figma 中所做的更改可以直接流入你的 PixiJS 项目，无需额外步骤。

我们的目标是让设计与实现之间的交接无缝衔接，这样团队可以更多地专注于迭代，而不是转换。

🌐 Our aim is to make the handoff between design and implementation seamless, so teams can focus more on iteration and less on translation.

获取最新的 PixiJS​

🌐 Get the Latest PixiJS

通过 npm 安装：

🌐 Install via npm:

npm install pixi.js@8.13.0

或者通过 CDN 使用：

🌐 Or use via CDN:

开发版本：

生产构建：

文档: https://pixijs.download/v8.13.0/docs/index.html

总结​

🌐 Wrapping Up

这就结束了我们的八月更新。如果你有兴趣参与，我们一直在寻找对未解决问题提供帮助的人。

🌐 That wraps up our August update. If you're interested in contributing, we're always looking for help on open issues.

再次感谢所有为此次发布做出贡献的人！我们迫不及待想看看你们用 PixiJS 创造的作品。

🌐 Thanks again to everyone who contributed to this release! We can't wait to see what you create with PixiJS.


创作愉快！

🌐 Happy creating!

PixiJS 团队