Introducing one of the richest and fastest SVG solutions built on WebGL

Image for post
Image for post
By Jooja — This file was derived from: Fonalgrafika virag minta hurok varras.jpg:, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=96183982

SVG is the de facto solution for storing vector content, and being able to use it in 2D WebGL content is quite useful. It’s the go-to solution for rendering that little icon you need from your design! Here, I introduce a new SVG library that brings support for a much wider feature set and is tuned for high performance rendering.

Introducing @pixi-essentials/svg

@pixi-essentials/svg provides a simple-to-use API for building a SVG scene in PixiJS:


Culling, and how you can implement it in ten lines of code!

If your WebGL application has a very large scene that is only partially visible at any instant, then you can immediately improve performance by culling display-objects that are not visible.

You’re reading a chapter of “Inside PixiJS: WebGL Renderer”.

Culling

In computer graphics, there are multiple meanings of “culling”. The term here is used to describe the process of evaluating whether an object is “visible” and should be rendered at all. This allows the renderer to skip objects that do not need to be drawn, and reduces the number of draw calls per tick. …


And how you can optimize your scene graph!

The projection-matrix allows you to define a transformation from your “world” onto a part of the “canvas”. Yes, your scene graph lives in its own “world”, and you can move where it is rendered on the canvas independent of whether objects in your world are moving.

The positions you set for your display-objects are, by default, respective to the canvas coordinates. In other words, the “world” and the “canvas” are identical. However, a more flexible model where the two are independent.

Imagine an infinite plane, with a point set the “origin” and a grid to measure objects in pixels. Your…


What does it offer?

I’m excited to rollup out webdoc 1.0.0-RC this week. It’s aim is to be the all-encompassing solution for documenting libraries built with languages targeting the web.

Image for post
Image for post
webdoc’s simple logo!

Why?

No matter how useful your software is, no one will check it out without compelling documentation. It doesn’t make sense for documentation to be a last-priority item. It doesn’t help either that JSDoc, ESDoc, documentation.js, YUIDoc all are not actively maintained.

Clearly, innovation has fell off a cliff in this space — it’s this void that webdoc aims to fill.

What does webdoc have to offer over its competitors?

  • It is much faster than…


Learn how to use the RollupJS and Lerna API!

Lerna is a great tool for keeping multiple packages in one repository.

However, it doesn’t provide a built-in solution for automating the build process. Here, I describe how you can create a build script that uses the RollupJS+Lerna API to:

  • Compile packages in order of dependency
  • Rebuild only packages that have changed
  • Bundle multiple packages into one “super-bundle” to be consumed by the users — so they don’t have to build your whole project.
Image for post
Image for post
Photo by Kevin Ku on Unsplash

Setup

Instead of exporting a hardcoded, static configuration object, your should generate one at runtime. The skeleton of the file would look like this:


Learn about the official PixiJS GUI library with its diverse set of open-source widgets and layouts! — https://pixijs.io/pixi-ui

PixiJS is a fast, lightweight 2D rendering engine for the web. It is the go-to solution for creating rich, interactive, and fast content without the headache of diving into the WebGL API. For a long time, however, it has been lacking a comprehensive solution for GUI widgets that handle the rendering and interaction for you and expose an event-based API.

Nicholai Mortenson built a library called pixi-ui that got official support from PixiJS. Most of its use was through forking it into…


They’re collectively called the mid-level API!

Image for post
Image for post

PixiJS released a mid-level API in version 5. It exists between the WebGL layer and the high-level display-objects API. This API let’s you build custom display-objects and work directly with the WebGL renderer.

It consists of the three systems I’ve highlighted in the title:

  • Geometry — This system manages attributes and vertex attribute objects (VAOs).
  • Shader — This system manages uniforms and WebGL programs.
  • State — This system allows you to atomically get and set all WebGL state variables — blend mode, culling, polygon offset, depth test, and winding.

This article is aimed at…


How does everything work?

Demo that uses PIXI.Ticker to manipulate a display-object’s rotation angle and scale w.r.t time!

A display-object is anything renderable in PixiJS. It must extend from , or preferably . These stub classes are a bit important to understand how the PixiJS UI is hierarchically organized and rendered.

DisplayObject

Image for post
Image for post

is the base class of all renderable items. It provides the basic structure for them and integrates with . I’ve listed important properties and methods below:

  • and : specifies the opacity of this object w.r.t to the parent. is the “multiplied”…


What’s hidden in this gem?

Image for post
Image for post

PixiJS has the concept of a “system-wide” renderer that fires every frame and makes the root display-object render itself. I cover these topics of the renderer here:

  • Inheritance tree of renderers in PixiJS
  • Systems architecture of the WebGL renderer
  • Batching rendering

The WebGL renderer lives in the package as the class, which inherits from the class. was formerly named in PixiJS v4, but was renamed since the canvas-renderer was shipped only in the legacy bundle.

AbstractRenderer


What makes it so performant?

Image for post
Image for post

Batch rendering is what makes PixiJS the fastest WebGL drawing engine. It works by drawing groups of objects using their merged geometry. This technique reduces the number of draw calls and uploads to the GPU. There are a few limitations that come with batch rendering:

  • Batched objects must have similar geometries, the same shaders, and the same number of textures.
  • To maintain the order in which objects are being rendered, batched objects must be flushed prematurely if a dissimilar object is encountered.
  • Geometries must be merged into one large buffer.

This article is aimed at…

Shukant Pal

Software Engineer at Teamflow

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store