new Chad()

A Blog About Code

WebGL Renderer for Tiled Maps

TL;DR: I made a WebGL renderer for Tiled Editor maps called gl-tiled.

Introduction

I was looking for a good way to render tile maps created with the Tiled Editor and couldn’t find a WebGL renderer that really fit my needs so I decided to write one. I call the resulting library gl-tiled.

Read more

Fae and ECS

TL;DR: I made an ecs library that focuses on assemblages (composed entities), and treats components as JS Mixins.

Why build Fae?

Recently I’ve been working on building Fae, a modular 2D renderer. My main driving force for building the project was exploring the question “If I was building Pixi.js, from scratch, today; what would I do?”

Read more

Why I'm leaving Pixi.js

3 Years Running

I’ve been working on Pixi.js, a JavaScript 2D renderer, for over 3 years now. In that time I’ve worked a lot of my free time to help build it into the most popular and widely used 2D web renderer.

Over that time I’ve worked with a lot of people. Helped a lot of people ship their project, won awards, sometimes even managing the project solo so Matt could grow his business GoodBoyDigital. I’ve strived to impress a high bar of quality for the code base, and make sure that I read every single one of the 1,758 issues and 980 pull requests. I started every morning by browsing the issue list and forums, commenting and answering every question I can and even fixing bugs when I had the time in between my day job.

Every. Single. Day. Until today.

Read more

Deferred Lighting with Pixi.js

Introduction

You can find the pixi-lights plugin on github.

Some of you may be aware that I recently did an experiment with Pixi.js to see if I could write efficient normal-mapped lighting. Well I had no idea where to start, how to do lighting, or what the best way to do it would be. So, I did a bunch of research on how drawing normal-mapped lighting works, and came up with a way to get it drawing correctly using this tutorial (thanks Matt DesLauriers):

https://github.com/mattdesl/lwjgl-basics/wiki/ShaderLesson6#IlluminationModel

It was pretty dirty. Basically I wrote a filter that did N-lighting that was forward-rendered. For those who don’t know, the normal renderer in Pixi.js is a forward-renderer. That means it iterates “forward” through the scene list and draws each object entirely as it goes along. Anyway, the idea behind the filter I wrote was that by adding this filter to a container it would add lighting to that container. Problem was that since it was forward rendered each light had to be shaded for each object in the container. In the few projects I wanted to use the effect in, it wasn’t performant enough for the amount of lights I wanted to have. So I started looking for a better way.

Read more