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

omino pixel blog

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

webgl 4 — sprites

WebGL.

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.

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

Comments are closed.
/\/\/\/\/\/\/\

Deprecated: Function the_block_template_skip_link is deprecated since version 6.4.0! Use wp_enqueue_block_template_skip_link() instead. in /home/polyomino/omino.com/pixelblog/wp-includes/functions.php on line 6114

0.0160s
(c) 2003-2023 omino.com / contact poly@omino.com