PixiJS Filters

Filters allow you to apply post processing effect on objects. These allow you to apply many different pixel based effects similar to filters in tools like photoshop, such as blur. To apply filters to a display object we simply have to add it to the object’s filters property which is an array. This means we PixiJS Filters

PixiJS Graphics API

For dynamically drawing content PixiJS has a Graphics display object with a drawing API. This allows us to draw 2D graphics with commands similar to the 2D canvas API. The graphics object needs to be added to the stage like any display object. let graphic = new PIXI.Graphics(); stage.addChild(graphic); You can set the line style PixiJS Graphics API

PixiJS Sprites

Sprites are display objects that render a texture. They take a single texture as a parameter. Like all display objects they need to be added to our stage in order to render. let sprite = new PIXI.Sprite(texture); stage.addChild(sprite); Like all display objects in PixiJS you can update their position with their x and y properties. PixiJS Sprites

PixiJS Texture Loading

PixiJS stores all its textures inside a texture cache which can be accessed in PIXI.utils.TextureCache. To load textures into the cache you need to use a loader. This can be done by creating a new Loader instance or by utilizing a pre-made shared loader. let loader = new PIXI.Loader(); let loader = PIXI.Loader.shared; Now you PixiJS Texture Loading

PixiJS Renderer, Ticker & Stage

In the last post I showed you how to get up and running quickly in PixiJS. In this episode I want spend some time diving a bit deeper into the basics of PixiJS. To do this we have to look a bit at the history of PixiJS to understand where it’s been and where it’s PixiJS Renderer, Ticker & Stage

PixiJS Getting Started

To download the latest version of PixiJS you can check the releases tab of the github repository here. Because of browser security restrictions loading local assets directly will result in CORS errors. We’ll need to get around this in PixiJS because you can’t do much without loading textures. The easiest way to avoid this is PixiJS Getting Started

PixiJS Introduction

PixiJS is a 2D Graphics Rendering framework for the web.  It was created by Matt Groves to normalize the canvas and webgl APIs into a simple scene graph originally modeled loosely on the Flash API.  Its primary focus has always been on performance so that it is really fast.  Because of this it is primarily a webGL PixiJS Introduction

Fixed Canvas Backgrounds

I’ve talked a bit about separating our semantic and non-semantic content within websites. We can take our rich non-semantic content and throw it onto a canvas. This provides a number of benefits, cleaning up our markup, reducing DOM elements and optimizes performance. I’ve put together some examples of how this can be used in both Fixed Canvas Backgrounds

Three.js Getting Started

Let’s set up a basic scene in Three.js. The first thing you need to do is include the Three.js library. You can download it at threejs.org. You can also use the CDN url from cdnjs https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js. The Renderer The first thing we need to do is create a renderer. Because Three.js supports multiple renderers we Three.js Getting Started

Three.js Introduction

Three.js is an open source javascript library for drawing 3d graphics on the web. It was created by Ricardo Cabello (aka. Mr. doob). It grew out of the work he had done for Flash on the Papervision 3D library. Originally it was created as a renderer agnostic API with a 2D Canvas and SVG Renderer. Three.js Introduction