WebGL sprite rendering



  • Hello!

    I’m posting this to bring awareness Gaëtan Renaudeau’s system for sprite rendering with WebGL.
    He had an insight into how to use a fragment shader to render sprites with extremely minimalist code:

    http://greweb.me/2013/02/glsl-js-a-javascript-glsl-library-dry-efficient/

    Essentially he created a thin wrapper library called GLSL.js which abstracts away all the messy parts of the WebGL API.
    It then exposes the fragment shader so you can code right on the GPU with pure GLSL.
    And it turns that the code you need to render basic shapes, text and images is no more complex than what you need to render them in canvas.

    Here’s a presentation he gave about it:

    WebGL Sprite Rendering

    I think it’s kind of genius, and not many people know about this.
    I would encourage anyone thinking of using a full-featured rendering framework like Pixi to first just take an afternoon and see if you can achieve what you need using these techniques.
    It’s extremely low-level, fast, and fun and there’s nothing like the thrill of writing straight on the GPU!

    … also, check out Gaëtan’s 1K Panzer Dragoon remake…

    http://greweb.me/2014/03/panzer-dragoon-1k

    … the source code is a thing of beauty.

    Happy coding everyone! :)

    • d13

  • LDG

    Welcome to the forum @d13!

    This is really interesting, especially because we recently decided not to integrate Pixi into our engine. We’re currently 100% Canvas but always on the lookout for better ways. Good stuff!


Log in to reply