d13

[PIXI] WebGL antialiasing

Recommended Posts

Hello!

 

Setting `antialiasing` to `true` in the `WebGLRenderer` has no effect on graphics.

post-5513-0-45322600-1435280692.jpg

Does anyone know if this normal, and if there is anyway to switch on antialiasing for WebGL? 

Share this post


Link to post
Share on other sites

Yeah I've seen this discussed before, apparently the absence of anti-aliasing is due to the graphics shapes having to be drawn using the stencil buffer.

It would be great if there was a way to have anti-aliased graphics objects in webgl, but presumably this would mean using some other means than the stencil buffer to draw them.

I don't know enough about webgl to know how realistic an expectation this might be  :lol:

Share this post


Link to post
Share on other sites

I remember that .cacheAsBitmap used to help with aliased Graphics in PIXI v2. Using .generateTexture() will probably have the same effect, so you can try it in v3. For graphics, I'm currently drawing to a canvas and then creating a Texture from it. You can try this approach, if you don't need to change the Graphics each frame.

Share this post


Link to post
Share on other sites

It would be great if there was a way to have anti-aliased graphics objects in webgl,

Yes, it sure would!

In fact, I would say it's essential.

I love my Commodore VIC-20, but it's 2015 now!

 

I will look into those hacks you guys mentioned  - thanks so much!!

Share this post


Link to post
Share on other sites

Yes, it sure would!

In fact, I would say it's essential.

I love my Commodore VIC-20, but it's 2015 now!

 

I will look into those hacks you guys mentioned  - thanks so much!!

 

Unfortunately the stencil buffer doesn't do anti-aliasing. If you want it to be anti-aliased, then generate a texture from it.

Share this post


Link to post
Share on other sites

I was looking into this exact same topic. The generateTexture() worked for me. However, could Mat maybe explain why the cacheAsBitmap does not support antialiasing? Couldn't it use the generateTexture under the hood?

 

- Rick

Share this post


Link to post
Share on other sites

I was looking into this exact same topic. The generateTexture() worked for me. However, could Mat maybe explain why the cacheAsBitmap does not support antialiasing? Couldn't it use the generateTexture under the hood?

 

- Rick

Because generateTexture renders it to a canvas (which has antialiasing) and generates a texture from that. cacheAsBitmap instead uses normal rendering techniques to render to a renderbuffer and uses that.

Share this post


Link to post
Share on other sites

Sorry for bumping this thread, but felt unnecessary to create a new thread to a similar follow up question.

I have a Graphics with two child Graphics on it, and when I create a texture with generateTexture() on the parent Graphics, it does not include the two child Graphics, and my questions is if this is the intended behaviour, and if it is, how would I be able to generate a texture including all children to that Graphics.

 

Best regards,

Viktor

Share this post


Link to post
Share on other sites

I've been using sketch.js for my canvas projects. It is pretty good, but I thought I might be missing out by not using Pixi.js.
On my first attempt with graphics and bezier curves I bumped into this thread.
If all I need is to draw smooth curves that are updated on every frame, is there any point in using Pixi.js?

In other words, can canvas -> texture -> gpu -> screen perform better than canvas -> screen?

 

Share this post


Link to post
Share on other sites

Better use canvas2d. The only thing in pixi that have some kind of smooth curves is Adobe Animate export plugin which is in alpha stage, I think.

If you need to use smooth curves with a lot of PIXI sprites, you can wrap your curves canvas into PIXI.BaseTexture and update it regularly. Otherwise, canvas2d will perform better.

Share this post


Link to post
Share on other sites

Very similar WebGL renderer question: we have lots of circle graphics, converted to texture and generated lots of sprites from it. When scaled down they still look pixelated compating to canvas renderer. We did set antialias: true, roundPixels: true and are using resolution of 2. It helped a little, but we still need more of antialiasing (see pics). Does anybody have an idea of how to achieve something similar to canvas renderer? Thanks!

Canvas:

canvas_renderer.png

WebGL:

webGL-renderer.png

Share this post


Link to post
Share on other sites

Oh, that's .. a big problem. I cant even describe everything, its really huge, I can consult people all day about that and they wont understand it in the end.

General solution: generate several textures, of different sizes for the circle (different RESOLUTION field maybe). Change between them based on scale. Better to generate it somewhere else than webgl.

If you are using pixi-v5 and you know what webgl texImage2d and miplevel is, you can use https://pixijs.io/examples/?v=v5.0.0-rc.3#/textures/gradient-resource.js to generate circle for DIFFERENT LEVELS OF TEXTURE.

Colors can be achieved with tinting the sprites, not changing the texture.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.