WEBGL-SPRITES.JS

This is a simplified version of my webgl sprite engine. My aim is to share a simple script that can be used to build something bigger. you can visit sprite.php to see the code on this page in action. You can also download WebGLSprites.zip.

DEMO.JS

var numberOfsprites = 1;
var spriteSpeed = 10;
var spriteAngularSpeed = 45;

function loaded()
{
    numberOfsprites--;
    
    if(numberOfsprites == 0) {
       loop();
    }
}

function loop(){
    
    canvas.clear();
     
	animation.render();
    
	requestAnimationFrame(loop);
}

function onKeyDown (event) {
    if(event.key == 'ArrowUp') {
        animation.dframe = 1;
        animation.dx = spriteSpeed * -Math.cos(animation.angle * Math.PI / 180);
        animation.dy = spriteSpeed * Math.sin(animation.angle * Math.PI / 180);
    }
    
    if(event.key == 'ArrowDown') {
        animation.dframe = -1;
        animation.dx = spriteSpeed * Math.cos(animation.angle * Math.PI / 180);
        animation.dy = spriteSpeed * -Math.sin(animation.angle * Math.PI / 180);
    }
    
    if(event.key == 'ArrowLeft') {
        animation.angle += spriteAngularSpeed;
    }
    
    if(event.key == 'ArrowRight') {
        animation.angle -= spriteAngularSpeed;
    }
}

function onKeyUp (event) {
    if(event.key == 'ArrowLeft' || event.key == 'ArrowRight' || event.key == 'ArrowUp' || event.key == 'ArrowDown') {
        animation.dx = 0;
        animation.dy = 0;
        animation.dframe = 0;
    }
}

const canvas = new Canvas("screen");

const vertexShader = `
attribute vec2 geometryCoord;
attribute vec2 textureCoord;

uniform vec2 screenSize;
uniform vec2 spriteLocation;
uniform vec2 spriteCenter;
uniform float objectAngle;

mat3 rotation = mat3
(
cos(objectAngle), -sin(objectAngle), 0,
sin(objectAngle), cos(objectAngle), 0,
0, 0, 1
);

mat3 scale = mat3
(
2.0 / screenSize.x, 0, 0,
0, -2.0 / screenSize.y, 0,
0, 0, 1
);

mat3 location = mat3
(
1.0, 0.0, 0.0,
0.0, 1.0, 0.0,
spriteLocation.x, spriteLocation.y, 1.0
);

mat3 center = mat3
(
1.0, 0.0, 0.0,
0.0, 1.0, 0.0,
-spriteCenter.x, -spriteCenter.y, 1.0
);

varying vec2 frameCoord;

void main(){
    mat3 tmp = location * rotation;
    tmp = scale * tmp;
    tmp = tmp * center;

    gl_Position = vec4(tmp * vec3(geometryCoord, 1), 1);

    frameCoord = textureCoord;
}`;

const fragmentShader = `
precision mediump float;
uniform sampler2D imageTexture;
varying vec2 frameCoord;

void main(){
    gl_FragColor = texture2D(imageTexture, frameCoord);
}`;

const shaders = new Shaders(canvas.gl, vertexShader, fragmentShader);

shaders.use();

var geometryCoord = canvas.gl.getAttribLocation(shaders.program, 'geometryCoord');
canvas.gl.enableVertexAttribArray(geometryCoord);
var textureCoord = canvas.gl.getAttribLocation(shaders.program, 'textureCoord');
canvas.gl.enableVertexAttribArray(textureCoord);

var screenSizePointer = canvas.gl.getUniformLocation(shaders.program, 'screenSize');
canvas.gl.uniform2fv(screenSizePointer, [canvas.width(), canvas.height()]);

var imageTexturePointer = canvas.gl.getUniformLocation(shaders.program, 'imageTexture');
var spriteCenterPointer = canvas.gl.getUniformLocation(shaders.program, 'spriteCenter');
var spriteLocationPointer = canvas.gl.getUniformLocation(shaders.program, 'spriteLocation');
var objectAnglePointer = canvas.gl.getUniformLocation(shaders.program, 'objectAngle');

canvas.clear();

const animation = new Sprite(canvas.gl, 'animation.php?folder=animation', 
                             geometryCoord, textureCoord, imageTexturePointer, spriteCenterPointer, spriteLocationPointer, objectAnglePointer, animationFrames);

window.addEventListener('keydown', onKeyDown, true);
window.addEventListener('keyup', onKeyUp, true);

WEBGL.JS

class Canvas
{
    constructor(id)
    {
        this.id = id;
        this.gl = document.getElementById(this.id).getContext('webgl');
         
        this.gl.canvas.width = this.gl.canvas.clientWidth;
        this.gl.canvas.height = this.gl.canvas.clientHeight;
        
        this.gl.viewport(0, 0, this.width(), this.height());
        this.gl.clearColor(0.9, 0.9, 1, 0.0);
    }
    
    clear()
    {
        this.gl.viewport(0, 0, this.width(), this.height());
        this.gl.clear(this.gl.COLOR_BUFFER_BIT);
        
        this.gl.enable(this.gl.BLEND);
        this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
    }
    
    width()
    {
        return(this.gl.canvas.width);
    }
    
    height()
    {
        return(this.gl.canvas.height);
    }
}

class Shaders
{
    constructor(gl, vertexSrc, fragmentSrc)
    {
        this.gl = gl;
        this.vertex = this.gl.createShader(this.gl.VERTEX_SHADER);
        this.gl.shaderSource(this.vertex, vertexSrc);
        this.gl.compileShader(this.vertex);
        
        if(!this.gl.getShaderParameter(this.vertex, this.gl.COMPILE_STATUS))
        {
            console.error(this.gl.getShaderInfoLog(this.vertex));
        }
        
        this.fragment = this.gl.createShader(this.gl.FRAGMENT_SHADER);
        this.gl.shaderSource(this.fragment, fragmentSrc);
        this.gl.compileShader(this.fragment);
        
        if(!this.gl.getShaderParameter(this.fragment, this.gl.COMPILE_STATUS))
        {
            console.error(this.gl.getShaderInfoLog(this.fragment));
        }
        
        if(this.vertex && this.fragment)
        {
            this.program = this.gl.createProgram();
        }
    }
    
    use()
    {
        this.gl.attachShader(this.program, this.vertex);
        this.gl.attachShader(this.program, this.fragment);
        
        this.gl.linkProgram(this.program);
        
        this.gl.useProgram(this.program);
    }
    
    drop()
    {
        this.gl.detachShader(this.program, this.vertex);
        this.gl.detachShader(this.program, this.fragment);
        
        this.gl.useProgram(null);
    }
}

class Sprite
{
    constructor(gl, src, geometryCoord, textureCoord, imageTexturePointer, spriteCenterPointer, spriteLocationPointer, objectAnglePointer, imageFrames)
    {
        this.gl = gl;
        this.imageFrames = imageFrames;
        
        this.x = 0, this.y = 0, this.dx = 0, this.dy = 0;
        this.frame = 0, this.dframe = 0, this.angle = 0;
        
        this.texture = this.gl.createTexture();
        this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
        this.gl.uniform1i(this.imageTexturePointer, 0);
        
        this.image = new Image();
        this.image.sprite = this;
        
        this.image.onload = function()
        {
            this.sprite.load();
        }
        
        this.geometryCoord = geometryCoord;
        this.textureCoord = textureCoord;
        this.imageTexturePointer = imageTexturePointer;
        this.spriteCenterPointer = spriteCenterPointer;
        this.spriteLocationPointer = spriteLocationPointer;
        this.objectAnglePointer = objectAnglePointer;
        
        this.image.src = src;
    }
    
    load()
    {
        this.texture = this.gl.createTexture();
        this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
        this.gl.uniform1i(this.imageTexturePointer, 0);
         
        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
		this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
		this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
		this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
		this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, this.image);
		this.gl.bindTexture(this.gl.TEXTURE_2D, null);
        
        this.textureBuffer = this.gl.createBuffer();
        
        this.geometryBuffer = this.gl.createBuffer();
		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.geometryBuffer);
		this.gl.bufferData(this.gl.ARRAY_BUFFER, this.rectangularArray(0, 0, this.image.width / this.imageFrames, this.image.height), this.gl.STATIC_DRAW);
        
        loaded();
    }
    
    render()
    {
        this.gl.activeTexture(this.gl.TEXTURE0);
        this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
        this.gl.uniform1i(this.imageTexturePointer, 0);
        
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.textureBuffer);
        this.gl.bufferData(this.gl.ARRAY_BUFFER, this.rectangularArray(this.frame / this.imageFrames, 0, 1 / this.imageFrames, 1), this.gl.STATIC_DRAW);
        
        this.gl.enableVertexAttribArray(this.textureCoord);
        this.gl.vertexAttribPointer(this.textureCoord, 2, this.gl.FLOAT, false, 0, 0);
        
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.geometryBuffer);
        this.gl.vertexAttribPointer(this.geometryCoord, 2, this.gl.FLOAT, false, 0, 0);
        this.gl.enableVertexAttribArray(this.geometryCoord);
        
        this.gl.enableVertexAttribArray(this.geometryCoord);
        this.gl.enableVertexAttribArray(this.textureCoord);
        
        this.gl.uniform2fv(this.spriteCenterPointer, [(this.image.width / this.imageFrames) / 2, this.image.height / 2]);
        
        this.gl.uniform2fv(this.spriteLocationPointer, [this.x, this.y]);
         
        this.gl.uniform1f(this.objectAnglePointer, this.angle * (Math.PI / 180));
        
        this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 6);
        
        this.x += this.dx;
        this.y += this.dy;
        
        this.frame += this.dframe;
        
        if(this.frame > this.imageFrames - 1)
        {
            this.frame = 0;
        }
        
        if(this.frame < 0)
        {
            this.frame = this.imageFrames - 1;
        }
    }
    
    rectangularArray(x, y, width , height)
    {
        return new Float32Array([
            x, y,           x + width, y,   x, y + height,
            x, y + height,  x + width, y,   x + width, y + height
        ]);
    }
}

WEBGL-SPRITES.JS

DEMO.JS

WEBGL.JS

SPRITES.PHP

ANIMATION.PHP

FRAMES.PHP