picture home | art | events | music | rack extensions | downloads | pixel blog | qt_tools

omino pixel blog

pixels, motion, and scripting
david van brink // Fri 2013.10.11 15:04 // {webgl}

webgl 4 — sprites


It appears that gl.drawArray() is expensive! Didn’t gather numbers, but could see that more than a few started racking up the CPU load. Adopted a “sprite” approach, that lets the same geometry values get reused, and a texture is submitted to the vertex shader to offset them. Handy!

A bit of the vertex shader goes like so.

    attribute float sprite; // each vertex is anchored to an offset, represented by a pixel in the Sprite Control texture
    uniform sampler2D sprites; // 
        vec4 spritePos = texture2D(sprites, vec2(sprite, 0.5)); // texture is 512 by 1
	pos4.xyz += spritePos.xyz;
        // (and use spritePos.w for a yaw rotation.)

Here we see 511 sprites, all rendered with a single gl.drawArray() call.


click for

The motion comes by moving each sprite along a different 3d Lissajous path.

Comments are closed.

(c) 2003-2013 omino.com / contact poly@omino.com