Jump to content

Accelerated Vector Graphics Plugin for Pixi.js


Ming Iu
 Share

Recommended Posts

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!

Link to comment
Share on other sites

I'M HAPPY TO SEE ANOTHER JAVA/GWT CODER HERE.

Using hitArea is kinda bad idea because it has special case for children. I advice you to override containsPoint instead.

Also its better to extend Container and copy a few things from Sprite.

You can ignore my comments and wait when i just make PR. Also I wrote it down to help you convert it to v5 when we release it.

UPD. I advertised your editor in PixiJS slack (want an invite?)  and in russian telegram html5 gamedev chat.

Link to comment
Share on other sites

5 hours ago, ivan.popelyshev said:

I'M HAPPY TO SEE ANOTHER JAVA/GWT CODER HERE.

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.

5 hours ago, ivan.popelyshev said:

Using hitArea is kinda bad idea because it has special case for children. I advice you to override containsPoint instead.

Also its better to extend Container and copy a few things from Sprite.

You can ignore my comments and wait when i just make PR. Also I wrote it down to help you convert it to v5 when we release it.

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.

5 hours ago, ivan.popelyshev said:

UPD. I advertised your editor in PixiJS slack (want an invite?)  and in russian telegram html5 gamedev chat.

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.

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...