Pixi.js: iOS上的Pixi JS Renderer Drawingbuffer问题

创建于 2017-06-16  ·  10评论  ·  资料来源: pixijs/pixi.js

嗨,您好!
在台式机上运行良好的Pixie代码在移动设备上的表现似乎很奇怪。
我是pixie.js的菜鸟,所以我很有可能在这里做错了事。

当我在移动设备上使用绘图代码时,画布似乎刷新异常。
我不是重画整个笔画,而是维护DrawingBuffer并向其中添加新的精灵。

无论我是否将“ legacy:”(遗产:)设置为false或true(如下所示),它都会给我相同的结果。

谢谢参观!

pixierenderer


initializePixieCanvas() {
    console.log("init canvas")
    const cArea = this.canvasContainer;
    const width  = 1000;
    const height = 1000;
    this.stage = new PIXI.Container();
    this.renderer = new PIXI.WebGLRenderer(
      width,
      height,
      {
          antialias: false,
          transparent: true,
          resolution: 2,
          clearBeforeRender: false,
          preserveDrawingBuffer: true,
          premultipliedAlpha: false,
          forceFXAA: true,
          legacy: true
      }
    );

    cArea.appendChild(this.renderer.view);

    this.renderer.view.style.position = "absolute";
    this.renderer.view.style.top = "0";
    this.renderer.view.style.left = "0";
    this.renderer.view.style.pointerEvents = "none";
    this.renderer.view.style.zIndex = "99";

    const cnvs = this.renderer.view;
    const scaleForHighResDisplay = true;
    if (scaleForHighResDisplay) {
        cnvs.width = width * 2;
        cnvs.height = height * 2;
        cnvs.style.width = width + 'px';
        cnvs.style.height = height + 'px';
    }

    this.pointer = new PIXI.Sprite(PIXI.Texture.fromCanvas(this.brushElement));
    this.pointer.texture.destroy();
    this.pointer.texture = PIXI.Texture.fromCanvas(this.brushElement);
    this.pointer.anchor.x = 0.5;
    this.pointer.anchor.y = 0.5;

    this.renderer.clear();

    this.stage.addChild(this.pointer);
}
Stale 💾 v4.x (Legacy) 🤔 Question

最有用的评论

因此,好消息是,启用抗锯齿可修复此伪像。 但是显然打开抗锯齿仍然会对性能产生重大影响。 绕开/修复此错误的任何帮助均深表感谢。 谢谢!

所有10条评论

您应该为这些高级功能编写本机应用程序。

网路应用程式速度惊人,而且速度如此之快-除了绘图缓冲区喜欢反覆旧资料以外,当然...

因此,好消息是,启用抗锯齿可修复此伪像。 但是显然打开抗锯齿仍然会对性能产生重大影响。 绕开/修复此错误的任何帮助均深表感谢。 谢谢!

你好! 看来这可能是一个精度问题,您是否尝试过将着色器的精度设置为highP?

我可以确认它启用了抗锯齿功能。

@GoodBoyDigital :尝试设置“ highP”,不幸的是没有效果

还有其他想法如何在不影响抗锯齿性能的情况下解决此问题?

@floepi

如果不需要该背景,可以尝试更改透明度。

{ transparent: 'notMultiplied'}

要么

{ transparent: false}

不幸的是,我们都需要这两个,因为这是一个透明的油漆层。
我们应该看看是否可以调试启用抗锯齿后为什么不会发生这种情况...

您要调试移动浏览器吗?

由于此问题最近没有活动,因此已被自动标记为陈旧。 如果没有进一步的活动,它将关闭。 感谢您的贡献。

该线程已被自动锁定,因为它关闭后没有任何近期活动。 请为相关错误打开新一期。

此页面是否有帮助?
0 / 5 - 0 等级