pixijs / graphics-smooth Goto Github PK

Whether the circle can be rendered with shaders, which can ensure that the circle is more smooth
Examples are as follows
https://www.pixiplayground.com/#/edit/-9ozT4cSsTjuyGauUlTIf

Result with SmoothGraphics

Result with Graphics

If the radius of the rounded rectangle is very close to, equal or larger than the maximum possible radius (min(width, height) / 2), there appear gaps in the outline:

new PIXI.smooth.SmoothGraphics()
    .beginFill(0xff0000, 1.0)
    .lineStyle(3, 0x000000)
    .drawRoundedRect(100, 120, 100, 200, 50)
    .endFill()
    .beginFill(0x00ff00, 1.0)
    .lineStyle(3, 0x000000)
    .drawRoundedRect(250, 100, 100, 100, 50)
    .endFill()
    .beginFill(0xffff00, 1.0)
    .lineStyle(3, 0x000000)
    .drawRoundedRect(250, 250, 150, 100, 50)
    .endFill();

use method<SmoothGraphics.bezierCurveTo> get error ,

[.WebGL-00007230029B8E00] GL_INVALID_OPERATION: Internal error: 0x00000502: Vertex buffer is not big enough for the draw call.
index.html:1 WebGL: too many errors, no more errors will be reported to the console for this context.

So first, off this plugin is game changing. To me this is something that could compete with D3 in a way, I think.

Here are some pics of a quick script I did to test it out for my use case. I don't have to tell you what this would of looked like without this. It's just what I need. Except for 1 thing. I don't need to remind you what that looks like without this plugin.

However, you'll notices that the lines that break in-between the amplitudes that "arc" are at an angle and it would be great if those could curve. will BiezerTo and QuadracticTo also work here?

I want to test this in my one html file (testing for solution) and I am not seeing how I could get this via a CDN or refer to it directly. Can we set it another way than requiring it in?

Hi will this work for version 8?

Thank the authors found that a library is very useful for me, my side is engaged in PCB industry, need to use this library drawing can improve the efficiency of drawing (especially line cap smoother) memory space occupied less than PIXIJS, don't know how to solve a problem, existing graphics zoom, don't change color, if there is a feasible solution

When the image scale is reduced by 20 times, the green RGB(0,255,0)
changes to the dark green RGB(0,76,0).
How to achieve image zoom after the color does not change

Draw arcs, arcs are not smooth, please confirm whether you can support arcs to be more smooth

PIXI. Smooth. SmoothGraphics and PIXI. Graphics difference contrast

It is not known if the library continues to iterate

It happens whatever the complexity of the polygon
Here the code

const g2 = c.addChild(new PIXI.Graphics());
    g2.lineStyle({
      width: 8,
      color: 0xFF0000,
      alignment: 0,
      join: PIXI.LINE_JOIN.ROUND
    }).beginFill(0x0000FF, 1.0).drawShape(this.los).endFill();

Screenshot

run:
yarn i
yarn build

node_modules/@pixi/core/index.d.ts:25:24 - error TS2307: Cannot find module '@pixi/runner' or its corresponding type declarations.

25 import { Runner } from '@pixi/runner';
~~~~~~~~~~~~~~

node_modules/@pixi/utils/index.d.ts:4:26 - error TS2307: Cannot find module '@pixi/settings' or its corresponding type declarations.

4 import { isMobile } from '@pixi/settings';
~~~~~~~~~~~~~~~~

Found 2 errors.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "types" exited with 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

and running pnpm ,and same result.

Hi, first of all, a big thanks for this library.
I am currently trying to make a clone of AutoCAD WebApp.
To do that, I have to use the Smooth Graphics plugins to get no scaling lines.
I'm pixi-viewport to move and zoom my view.
But I'm getting performance issue when I want to see my whole plan. (only this case because I used "cullable=true" in my graphics)
I got something like 20k Graphics on this plan, but I can get more.
Is there a way to increase Smooth Graphics performance, or maybe It's just my structure who's the problem ?

My actual app un-zoomed :

Performance problem screen using chrome tools :

I'm using Containers to handle blocks (ex: a car or a chair) and doing a transform on it to place it :

          const shapesBlock: Graphics[] = drawData(layer, shapesOfReferences, 0, true)
          let transform: PIXI.Transform = new PIXI.Transform()
          const mInsert = transform.localTransform.translate(0, 0)
          const yScale = d.Scale.Y || 1
          const xScale = d.Scale.X || 1
          let x = d.Position.X
          const y = maxY - d.Position.Y
          mInsert.scale(xScale, yScale)
          transform.localTransform.a = d.Matrix[0]
          transform.localTransform.b = -d.Matrix[4]
          transform.localTransform.c = -d.Matrix[1]
          transform.localTransform.d = d.Matrix[5]
          mInsert.translate(x, y)
          if (d.Normal && d.Normal.Z < 0) {
            mInsert.scale(-1, 1)
          }

          const blockContainer = new PIXI.Container()
          shapesBlock.forEach((shape) => {
            blockContainer.addChild(shape)
          })

          blockContainer.transform = transform
          
          shapesArray.push(blockContainer)

In my app, every shapes or blocks are handle in a specific container as a layer.
So It's like layer 1 : Container => shapes + containers(who contains shape)

Please let me know if you need additionnal info. I feel really stuck. I'm a student in internship and no one used Pixi before in my company...
Would love your help

I am trying to draw a circle with a border using the following piece of code.

const graphics = new PIXI.smooth.SmoothGraphics();

graphics.clear();

graphics.lineStyle({
                width: 4,
                color: 0xeeeeee,
                alignment: 0,
                join: PIXI.LINE_JOIN.MITER,         
                cap: PIXI.LINE_CAP.SQUARE,
            });

graphics.beginFill(0x00DFAC);
graphics.drawCircle(280, 150, 100);
graphics.endFill();

app.stage.addChild(graphics);

and it draws it fine for the most part, but there is a small amount of bleed from underneath the linestyle.

The process as far as I can tell is that is created like shown above, set to a render texture and then added to the scene

I have a code pen, allowing for both normal and render texture use, but it doesn't replicate the issue for either, have you got an idea as to what this could be and/or have you seen this issue before?

Unfortunately I can't share the rest of the code because it is company property

At this moment it's impossible to use SmoothGraphics object as mask (actually you can, but smoothing doesn't work). Are there any plans to make it possible?

Ofc, it can be achived by using sprite cache, but is's workaround. I'm interested in "native" support.

P.S.: Thanks for great lib tho.

Issue Details

• Windows
• Chrome 96.0.4664.45
• pixi/graphics-smooth: 0.0.17
• PIXI canvas using WebGL2 renderer

Hello Ivan, thanks for creating this awesome extension. I am experiencing a memory leak using 0.0.17 which I believe traces back to SmoothGraphicsGeometry. I am currently testing with SmoothGraphics as a drop-in replacement using:

PIXI.LegacyGraphics = PIXI.Graphics;
PIXI.Graphics = PIXI.smooth.SmoothGraphics;

When using SmoothGraphics I observe a steady increase in heap size as graphics objects are created. If I revert back to using the standard PIXI.Graphics the observed memory leak goes away.

I captured a short allocation timeline (including stack traces) using the Chrome dev tools profiler and have uploaded here: https://drive.google.com/file/d/1fRjh5yYY2sNlP89No7nvEXlgfM6-IyL2/view?usp=sharing

An example allocation from the timeline is depicted below:

I don't know if there is additional information that I can provide to you that would help you reproduce or diagnose the issue - please let me know. Thanks!

When I use it, devtool throws an error on the console, at which point any action on pixi is invalid, and when I close devtool, everything works fine, which makes debugging difficult.
The devtool version: 0.9.6

Since PIXI v7.2 a warning will show:

PixiJS Deprecation Warning: utils.premultiplyTint has moved to Color.toPremultiplied
Deprecated since v7.2.0

Which is caused by this part:

Hey, thanks for this project. Just wanted to share a potential issue:

I upgraded to [email protected] (to prep for 7 and offer canvas fallback support) and was getting errors out of the graphics-smooth lib when trying to build (this is a TS project):

node_modules/@pixi/graphics-smooth/index.d.ts:225:22 - error TS2415: Class 'SmoothGraphics' incorrectly extends base class 'Container<DisplayObject>'.
  Property '_renderCanvas' is protected in type 'SmoothGraphics' but public in type 'Container<DisplayObject>'.

225 export declare class SmoothGraphics extends Container {

This is from @pixi/graphics-smooth/index.d.ts

I experimented with many different versions to come to the conclusion I think it's an actual issue. Changing _renderCanvas to public, or simply removing any access modifiers fixed this issue.

Is there a plan to support Pixi 7?

It's a random behavior. That don't happen every times.

The lines are drawed with this parameter :
static losLineStyle = { width: 10, color: 0xff0000, alignment: 0.5 };

The shape init :
this.losGraphics.lineStyle(this.lineStyle).beginFill(0xFFFFFF, 1.0).drawPolygon(this.los).endFill();

with alignment 0.5 :

with alignment 0:

Dear authors, I was trying to make a canvas tool like Figma, but I have a problem. I tried Google but it didn't work out. Just like the image presentation, I used the graphics-smooth dotted line capability because this fits my needs very well.

My pseudocode juet like is:

 g.lineStyle( { shader: new DashLineShader({ dash: config.dash_distance_width, gap: config.dash_distance_gap }) });

@ivanpopelyshev

However, as I moved around the canvas I found some performance issues and I would like to get some advice and help, thanks

Here access to the demo
https://codesandbox.io/s/smoothgraphics-rounded-rect-o3qfi?file=/src/index.js

After using Graphic to draw graphics, you can directly use graphic.pluginname to change the color without redrawing.
With SmoothGraphics, you can't change the color directly

Here is an example:
The red rectangle can be changed to the green rectangle by directly changing pluginName, but this function is disabled after SmoothGraphics is used
https://codepen.io/pcbren1987/pen/MWGvNJP

Here the code used:

    // Draw the blurred texture with BLUE fill and RED border
    const g2 = c.addChild(new PIXI.Graphics());
    g2.lineStyle({
      width: 8,
      color: 0xFF0000,
      alignment: 0,
      join: PIXI.LINE_JOIN.ROUND
    }).beginFill(0x0000FF, 1.0).drawShape(this.los).endFill();

Draw a circle, the circle is not smooth, please confirm whether the circle can be more smooth
The picture has been enlarged 10 times

code is

        ins.clear();
        for (let i = 0; i < path.length; i += 4) {
            ins.lineStyle({
                width,
                color,
                cap: PIXI.LINE_CAP.ROUND,
                join: PIXI.LINE_JOIN.ROUND,
            });
            ins.moveTo(path[i - 2] || 0, path[i - 1] || 0);
            ins.quadraticCurveTo(path[i], path[i + 1], path[i + 2], path[i + 3]);
        }

There are some transparent points in lines drawed by quadraticCurveTo.

I am wondering if it is possible to better achieve biezing by adding tension so I can decrease the amount in general. Right now with this way I don't have a way to control it. That is something I need to work out. Any suggestions would be great nevertheless.

A question I have about the "animation" is that it kind of goes from point to appearing point. Not really a crawl animation that is from 1 point to 1 point. I think that would look better. Is there a way to do that? I realize that if I probably do that it would decrease performance significantly.

The other question I have is about the fps control. If I have data points coming in at, let's say 100 data points a second, so like every 20 - 40 ms what happens with the data that is "lagging" behind the FPS control? Just wondering that.

I've included the pen to illustrate the point(s) :)O get it?
CodePen

https://codepen.io/xtianus/pen/OJweLGG

DashLineShader
If alignment is set to 0; Then the width will be calculated across the entire container width, which is not expected. Is there a way to avoid this problem? Although the border is inside, the entire square still has an invisible border like width=4 on the outside, although it is not visible.

graphics.lineStyle({ width: 4, color, cap: PIXI.LINE_CAP.ROUND, join: PIXI.LINE_JOIN.ROUND, alignment: 0, }) 
const pointCollect = [ [0, 0], [200, 0], [200, 200], [0, 200], ].flat(); 
graphics.drawPolygon(...pointCollect);

I am working with @pixi/graphics-smooth, and I found it doesn't support batch rendering, It will cause my application very slow when the stage has a lot of smooth graphics elements. I have read the README.md and learn about that you are working on it, so I want to when will support this feature?

I've updated from pixi 7.2.4 to pixi 7.3.1, I'm using the graphics smooth library to create dynamic sprites and I've encountered the type error:

Type error: Argument of type 'SmoothGraphics' is not assignable to parameter of type 'IRenderableObject'

Code:

const g = new SmoothGraphics()
const texture = this.app.renderer.generateTexture(g, { ... }) //error here in the g

Is this a mistake on my end or a type mismatch between the two libraries?

Downgrading pixi back to 7.2.4 fixes the issue. Just to note, this is not a runtime error, everything works fine, only typescript complains

The graph is scaled and the actual graph width remains the same

According to the middle mouse button scroll to zoom, use the PIXI. Graphics PIXI. Smooth. SmoothGraphics effect is not the same,
See links for examples
https://codepen.io/pcbren1987/pen/vYjZmgV

Setting graphic.interactive = true, gives errors

use **SmoothGraphics.bezierCurveTo ** get error.

[.WebGL-00007230029B8E00] GL_INVALID_OPERATION: Internal error: 0x00000502: Vertex buffer is not big enough for the draw call.