Ming Iu

  • Content Count

  • Joined

  • Last visited

About Ming Iu

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. So, you had no luck in getting the lines in the Candle Chart to look better by aligning each line separately to the pixel boundaries (+/- half a pixel)? Anti-aliasing is a property of the WebGL canvas, so I don't think you can change it per display object. You might be able to render a display object to a separate canvas or render target using a different anti-aliasing setting, and then render that separate canvas to the main canvas as a sprite.
  2. Ming Iu

    How to improve sharpness of PIXI.Graphics

    I think you've correctly diagnosed the problem with lines in WebGL. When you use anti-aliasing, each pixel is made up of many point samples, so lines will usually be blurry because some of the samples will end up on the line and some of them will not be on the line. Without anti-aliasing, lines end up looking aliased with a staircase effect. With anti-aliasing on, you can try to nudge lines less than one pixel to the side so that sampling pattern for a pixel falls entirely over the line. I've never had much luck with stuff like that myself, but someone with more patience might be able to figure it out. With anti-aliasing off, you can write special line-drawing code for anti-aliasing the sides of lines, but I don't think that's implemented in Pixi.js. Or, maybe, you can create multiple canvases layered on top of each other: one with anti-aliasing and one without.
  3. You could also create the gradient as a separate object, and then you can mask it out with a polygon. Here's an example. In that example, I'm using a vector drawing for the gradient, but since gradients don't become blurry when resized, you could probably use a sprite for that as well. I'm not sure if masks have good performance, but if you just need a few of them, then it's probably fine.
  4. Ming Iu

    Accelerated Vector Graphics Plugin for Pixi.js

    Yeah, I always have a hard time using pure JavaScript for large scale projects. I became addicted to all the advanced browsing and refactoring tools of Smalltalk and Eclipse that I feel lost without them when doing JavaScript coding. Note to others: the plugin is written in JavaScript. I use GWT for other projects. Good advice! I wasn't too familiar with the Pixi architecture when I started, and what you say makes sense. I'll try to make those changes soon. Thanks! I'll pass on joining the PixiJS slack for now because I'm generally bad at following Slack/Twitter/FB/etc conversations, so I don't think I'll be of much value there.
  5. I've created a new plugin for Pixi.js for rendering vector art called the pixi-omber-gltf2-vector plugin. To use it, you first export your vector art as 3d meshes in glTF 2.0 format. The plugin can then quickly render those meshes on-screen using WebGL. It has a number of advantages: Vector art results in smaller file sizes for large assets that makes use of transparency. I hope to later add support Draco mesh compression, which should make vector art competitive even for smaller-sized art. You can render on high resolution displays with no loss of detail You don't need to deal with making sure art assets fit within a multiple of 2 texture size or anything. Make your art any size and scale it to what you need This isn't your parent's vector graphics either: It's optimized for rendering using modern 3d graphics hardware. Everything ends up as 3d meshes that can be blasted to the screen quickly You can make use of advanced gradient features that let you make better looking art with more natural shading. You aren't limited to flat shading or boring linear gradients. Let me know what you think!