WebGL 2 Development with PicoGL.js, Part 5: A Particle System


This post is part of the series WebGL 2 Development with PicoGL.js.

We’ve now covered all the basic drawing tools of PicoGL.js. We’ll finish off the series by using those tools to implement a simple particle system that does a gravitational simulation on the GPU using transform feedback. Our simulation will consist a large number of particles attracted to three centers of gravity. We’ll be updating our particles using the equation for gravitational accelerationg = GM/r2, where M is the mass of one of our gravitational centers, r is the distance between it and a given particle, and G is the gravitational constant.

Continue reading WebGL 2 Development with PicoGL.js, Part 5: A Particle System

WebGL 2 Development with PicoGL.js, Part 4: Transform Feedback


This post is part of the series WebGL 2 Development with PicoGL.js.

In part 3, we learned how to use uniform buffers and instanced drawing to make our rendering more efficient. Transform feedback is another WebGL 2 feature that targets performance and can significantly improve the performance of animations. In WebGL 1, you would normally have to update object transforms on the CPU, which meant iterating over them serially. With transform feedback, we can capture vertex shader outputs from one frame into a buffer and use them as inputs for the next frame. This allows us to move our animation updates to the GPU, taking advantage of its massive parallelism.

Continue reading WebGL 2 Development with PicoGL.js, Part 4: Transform Feedback

WebGL 2 Development with PicoGL.js, Part 3: Uniform Buffers and Instanced Drawing


This post is part of the series WebGL 2 Development with PicoGL.js.

In the last lesson, we rounded out our core rendering toolkit with textures and framebuffers. In this lesson, we’ll look at some new WebGL 2 features that don’t introduce new functionality, but let us draw the things we can already draw much more efficiently. We’ll start with uniform buffers, which allows us to load all our uniforms into a block of memory that stays on the GPU, rather than updating them individually on each draw call. Then we’ll take a look at instanced drawing, which allows us to draw multiple copies of an object in a single draw call.

Continue reading WebGL 2 Development with PicoGL.js, Part 3: Uniform Buffers and Instanced Drawing

WebGL 2 Development with PicoGL.js, Part 2: Textures and Framebuffers


This post is part of the series WebGL 2 Development with PicoGL.js.

In Part 1, we learned the basics of drawing with PicoGL.js:

  • We created an app.
  • We wrote some shaders in GLSL ES 3.00, and compiled them into a program.
  • We created vertex buffers to store geometry data and combined them into a vertex array.
  • We combined our program and vertex array into a draw call, which we used to draw.

In this lesson, we’re going to add two important tools to our drawing toolkit: textures and framebuffers.

Continue reading WebGL 2 Development with PicoGL.js, Part 2: Textures and Framebuffers

WebGL 2 Development with PicoGL.js, Part 1: The Triangle


This post is part of the series WebGL 2 Development with PicoGL.js.

Welcome to our first lesson! As with any graphics tutorial, the first thing we need to do is get a triangle on the screen.


First a bit of set up. To get started we’ll need the following:

  • A text editor.
  • A recent version of Chrome or Firefox.
  • The SpectorJS browser plugin for debugging. SpectorJS is an extremely powerful debugger that allows you to see all WebGL calls and all GL state that went into a given frame. For usage details, check out this tutorial.
  • PicoGL.js (minified source).
  • glMatrix (minified source). We’ll use this for the math in later parts of the series.
  • A simple HTTP server. Some easy options are:
    • Run python -m http.server if you have python 3 installed.
    • Run python -m SimpleHTTPServer if you have python 2 installed.
    • Use nano-server if you have node.js installed.

Throw the two libraries into a directory on your machine, and create an HTML file named part1.html. Run your server and navigate to the correct URL to view the page (default is localhost:8000/part1.html for SimpleHTTPServer, localhost:5000/part1.html for nano-server). It’ll just be a blank page, but we’ll fix that shortly.

Continue reading WebGL 2 Development with PicoGL.js, Part 1: The Triangle

WebGL 2 Development with PicoGL.js


WebGL 2 is a substantial update to the WebGL API that requires a deeper understanding of the graphics pipeline than was necessary for WebGL 1. Many of the new features require manually ensuring that handles and memory are correctly laid out so that the pipeline can use them efficiently, but this setup can fail in subtle ways that can be difficult to debug.

PicoGL.js is a small WebGL 2 library with the modest goal of simplifying usage of new features without obscuring the functioning of the GL. The constructs one works with are the constructs of the GL: vertex array objects, vertex buffer objects, programs, transform feedbacks. PicoGL.js simply provides a more convenient API for interacting with those constructs, manages GL state, and also provides workarounds for some known bugs in WebGL 2 implementations.

This tutorial series will provide an introduction to WebGL 2 development though PicoGL.js. Readers are expected to have some familiarity with WebGL 1 or another 3D graphics API. While I will try to fully describe the concepts that will be discussed, this series will be challenging for those with no graphics background. I’d recommend the Udacity Interactive 3D Graphics course or WebGL 2 Fundamentals for total beginners

This page will act as a table of contents that will be updated as the series progresses.


Not Ninjas, Just Programmers

  var ninja = {
    sneakAround: function() {...},
    strikeFromShadows: function() {...},
    writeStableWebApp: function() {...}

Terms like JavaScript ninja or JavaScript wizard tend to make me uneasy. They suggest a set of priorities in programming that I would argue are counterproductive. To begin discussing why, let’s refer to some definitions:

  • ninja [nin-juh], noun: a member of a feudal Japanese society of mercenary agents, highly trained in martial arts and stealth (ninjutsu) who were hired for covert purposes ranging from espionage to sabotage and assassination.
  • wizard [wiz-erd], noun: a person who practices magic; magician or sorcerer.

I wouldn’t consider any of the qualities implied here as important, or even attractive, in software development. Why would anyone want code to be stealthy? Or covert? Or magic? Glorifying these qualities betrays an attitude that shifts focus away from the software we build to the cleverness of the code that’s used to build it. Exploiting syntactic idiosyncrasies in novel ways or displaying one’s knowledge of the esoteric details of a language takes priority over creating robust, maintainable applications. It’s programming as performance, rather than programming as craft.

Continue reading Not Ninjas, Just Programmers

From Web to WebGL: A Guide for Web Developers Entering the Third Dimension

WebGL is an interesting technology in that its community has brought together developers from highly disparate backgrounds. On the one hand, there are 3D graphics programmers who know the GPU architecture, the math, the algorithms, and who previously wrote their software in close-to-the-metal languages like C or C++, generally with OpenGL or D3D as the graphics API. For them, the path to WebGL involves learning the idiosyncrasies and limitations of JavaScript, as well as the best practices of working with the Web as a platform. On the other hand, there are those, like me, with a background in web development who want to use WebGL to build their sites or web applications. I should be clear here that I’m not referring to web developers who just want to get a bit of 3D into their web sites, as can be done with the myriad libraries and frameworks currently available. Rather, I’m referring to those who want to understand and use WebGL at a deep level. This, I would argue, is a far more difficult path than that taken by the graphics programmers and involves developing an understanding of the following three major areas involved in WebGL programming:

  • The WebGL API: The programming model and how it models the GPU
  • 3D Mathematics: Primarily linear algebra and 3D geometry
  • 3D Algorithms: The various techniques used to produce images and optimize their rendering

Continue reading From Web to WebGL: A Guide for Web Developers Entering the Third Dimension

Constructors Are Bad For JavaScript

JavaScript is a language that has always been at odds with itself. It derives its core strength from a simple, flexible object model that allows code reuse through direct object-to-object prototypal inheritance, and a powerful execution model based on functions that are simply executable objects. Unfortunately, there are many aspects of the language that obscure this powerful core. It is well-known that JavaScript originally wanted to look like other popular languages built on fundamentally different philosophies, and this trend in its history has lead to constructs in the language that actively work against its natural flow.

Continue reading Constructors Are Bad For JavaScript

Intimate Distance: The Photography of Thien V

Originally posted at howlarts.net.

panda (520x347)

“I’m in the business of translating what cannot be translated: being and its silence.” – Charles Simic

The Student Strike inspired an effervescence of creative works and artistic expression. The ubiquitous nature of the music, the posters, the interventions, the literature suggests that the arts played a central role in galvanizing the movement. But what exactly is the relationship between art and the politics of the moment? It’s easy to say that art is important to politics or to society in general, but how often do we actually explore what that means? Is the role of art to offer abstracted symbols of the movement, such as the carré rouge or the casseroles, around which to rally? Or is its role rhetorical, to convince its audience of the validity of a particular position? Although these two artistic modalities are important parts of a social movement, I believe the role art has to play can potentially be much deeper. Alain Badiou has written that “Art is pedagogical because it produces truths and because education (save in its oppressive or perverted expressions) has never meant anything but this: to arrange the forms of knowledge in such a way that some truth may come to pierce a hole in them.” By this understanding, art is a naturally destabilising force, puncturing the status quo and established modes of thought, and allowing us to see the potential on the other side. And it is through this action, I believe, that art is inherently political, and that it is political in a way that only art can be.

Continue reading Intimate Distance: The Photography of Thien V