如何将 WebGL 集成到使用 canvas 和 2D context.drawImage 的现有游戏中？

Question

I have a game which uses context.drawImage() to draw spritesheets of the game objects into a hidden canvas which is then copied over to another canvas(viewport). The current renderer has a camera which copies a portion of the canvas to the view. Each gameobject is added to a layer in the renderer and sorted by some value x each frame before rendering. Layers are drawn in a specific order and objects in the layers aswell.

So I have following structure:

//Renderer object
var layers = [[object,object,object,object],//objects sorted according to when they should be rendered
              [object,object,object,object],
              [object,object,object]];

//Simplified one frame render function
for(var i = 0; i < layers.length;i++){
    for(var j = 0; j < layers[i].length;j++){
        this.drawImage(layers[i][j]);
    }
}

...
//DrawImage function
this.drawImage = function(object){
    if(typeof object.currentAnimation !== "undefined"){//draw animation
        var tileId = object.currentAnimation.tileIds[object.currentAnimation.currentTile];
        var amountOfBlocksInARow = object.currentAnimation.tilesheet.width/object.currentAnimation.tileSize;
            
        var sourceX = Math.floor(tileId % amountOfBlocksInARow) *object.currentAnimation.tileSize;
        var sourceY = Math.floor(tileId / amountOfBlocksInARow) *object.currentAnimation.tileSize;
        this.canvasContext.drawImage(object.currentAnimation.tilesheet, sourceX, sourceY, object.currentAnimation.tileSize, object.currentAnimation.tileSize, object.x, object.y,object.width,object.height);
        object.currentAnimation.nextFrame();
    }else{//if theres no animation just an image then draw with object properties}

}

...
//Rest of the render function
//snap camera to its target then copy the camera to the view
this.cameraSnapToTarget();
this.viewportContext.drawImage(this.canvas, this.camera.x, this.camera.y, this.camera.width, this.camera.height, 0, 0, this.viewportCanvas.width, this.viewportCanvas.height);

And this html: <canvas id="hiddenCanvas"></canvas> <canvas id="viewportCanvas"></canvas>

I was wondering if there was a way to implement the WebGL into this so I wouldn't have to change the structure. Currently I have tried to initialize webgl, make some buffers and shaders, but I can't seem to draw anything with it. I followed https://webglfundamentals.org/webgl/lessons/webgl-2d-drawimage.html this and don't know how to set up the buffers and shaders to benefit from the original code. Do I have to change this structure or can it be implemented in this?

Thank you in advance for any help!

Answer 1

There was a few things I needed to add for my code for this to work First I needed to make textures of the spritesheets I use for the gameobjects:

//I load all my images into an array I can search from
var imageArray = [];//global variables
var textures = [];//global variables
//and use it after defining onload like this:
imageArray.push(img);

After images have all loaded I initialize the textures for the webgl:

for(var i = 0; i < imageArray.length; i++){
    initializeTexture(imageArray[i]);
}

function initializeTexture(img){//these images are already loaded into the dom
   var tex = renderer.viewportContext.createTexture();
   renderer.viewportContext.bindTexture(renderer.viewportContext.TEXTURE_2D, tex);
            
   renderer.viewportContext.texParameteri(renderer.viewportContext.TEXTURE_2D, renderer.viewportContext.TEXTURE_WRAP_S, renderer.viewportContext.CLAMP_TO_EDGE);
   renderer.viewportContext.texParameteri(renderer.viewportContext.TEXTURE_2D, renderer.viewportContext.TEXTURE_WRAP_T, renderer.viewportContext.CLAMP_TO_EDGE);
   renderer.viewportContext.texParameteri(renderer.viewportContext.TEXTURE_2D, renderer.viewportContext.TEXTURE_MIN_FILTER, renderer.viewportContext.LINEAR);
        
   var texture = {
       width: img.width,   
       height: img.height,
       texture: tex,
                    
   };
   renderer.viewportContext.bindTexture(renderer.viewportContext.TEXTURE_2D, tex);
   renderer.viewportContext.texImage2D(renderer.viewportContext.TEXTURE_2D, 0, renderer.viewportContext.RGBA, renderer.viewportContext.RGBA, renderer.viewportContext.UNSIGNED_BYTE, img);
   textures.push(texture);//array containing one of each spritesheet texture
}

Then I have Animation object which I use to assign spritesheets to gameobjects:

function Animation(spritesheet,tileSize,tileIds,name = "",playOnce = false){
    this.name = name;
    this.spritesheet = spritesheet;
    this.tileSize = tileSize;
    this.tileIds = tileIds;
    this.speed = 1;
    this.currentTile = 0;
    this.playOnce = playOnce;
    this.texture;
    
    this.state = "stopped";
    
    this.setAnimationSpeed = function(speed){
        this.speed = speed;
    }
    
    this.setTextureFromImage = function(img){
        this.texture = textures[imageArray.indexOf(img)];//find the spritesheet from array of images which is indexed same as textures array texture[i] = imageArray[i] etc. 
    }
    
    this.setName = function(name){
        this.name = name;
    }
    
    this.setLoop = function (loop){
        this.loop = loop;
    }
    
    this.setSpritesheet = function (spritesheet){
        this.spritesheet = spritesheet;
    }
    
    this.setState = function(state){
        this.state = state;
    }
    
    this.getState = function(){
        return this.state;
    }
    
    this.play = function(){
        this.state = "playing";
    }
    
    this.stop = function(){
        this.state = "stopped";
    }
    
    this.nextFrame = function(){
        if(this.state == "playing"){
            if(typeof this.tileIds[this.currentTile+1] !== "undefined"){
                this.currentTile++;
            }else{
                if(this.playOnce)
                    this.setState("played");
                else
                    this.currentTile = 0;
            }
        }
    }
    this.setTextureFromImage(this.spritesheet);
}

As optimization I could use the index of imageArray and get the texture from the original texture array when rendering. I use the Animation object in all gameobjects like this:

this.animations = [
    new Animation(this.spritesheet,32,[0,1],"walkDown"),//walkdown
    new Animation(this.spritesheet,32,[2,3],"walkRight"),//walkright
    new Animation(this.spritesheet,32,[4,5],"walkLeft"),//walkleft
    new Animation(this.spritesheet,32,[6,7],"walkUp"),//walkup
]

Finally I can render them with:

//Renderer
this.viewportContext = this.viewportCanvas.getContext("webgl",{ alpha: false ,premultipliedAlpha: false});
    
    
this.render = function(){//render one frame
    this.sortLayers();//can do sorting here
    this.viewportContext.viewport(0,0,this.viewportContext.canvas.width, 
    this.viewportContext.canvas.height);
    this.viewportContext.clear(this.viewportContext.COLOR_BUFFER_BIT);//clear buffers before rendering
    for(var i = 0; i < this.layerArray.length;i++){
        if(this.layerArray[i].constructor === Array){
            for(var j = 0; j < this.layerArray[i].length;j++){
                var object = this.layerArray[i][j];
                if(typeof object.currentAnimation !== "undefined"){
                    var tileId = object.currentAnimation.tileIds[object.currentAnimation.currentTile];
                    var amountOfBlocksInARow = object.currentAnimation.spritesheet.width/object.currentAnimation.tileSize;
                    var sourceX = Math.floor(tileId % amountOfBlocksInARow) *object.currentAnimation.tileSize;
                    var sourceY = Math.floor(tileId / amountOfBlocksInARow) *object.currentAnimation.tileSize;
                    this.drawImage(object.currentAnimation.texture.texture,
                        object.currentAnimation.texture.width,
                        object.currentAnimation.texture.height, 
                        sourceX, sourceY, 
                        object.currentAnimation.tileSize, 
                        object.currentAnimation.tileSize, 
                        object.x,object.y,
                        object.width,object.height);
                    }
                }
            }
        }
    }
}

this.drawImage = function(tex, texWidth, texHeight,srcX, srcY, srcWidth, srcHeight,dstX, dstY, dstWidth, dstHeight){
    if (dstX === undefined) {
        dstX = srcX;
        srcX = 0;
    }
    if (dstY === undefined) {
        dstY = srcY;
        srcY = 0;
    }
    if (srcWidth === undefined) {
        srcWidth = texWidth;
    }
    if (srcHeight === undefined) {
        srcHeight = texHeight;
    }
    if (dstWidth === undefined) {
        dstWidth = srcWidth;
        srcWidth = texWidth;
    }
    if (dstHeight === undefined) {
        dstHeight = srcHeight;
        srcHeight = texHeight;
    }
    
    this.viewportContext.enable(this.viewportContext.BLEND);
    this.viewportContext.blendFunc(this.viewportContext.SRC_ALPHA, this.viewportContext.ONE_MINUS_SRC_ALPHA);
    this.viewportContext.bindTexture(this.viewportContext.TEXTURE_2D, tex);
    
    this.viewportContext.useProgram(program);
    
    this.viewportContext.bindBuffer(this.viewportContext.ARRAY_BUFFER,positionBuffer);
    this.viewportContext.enableVertexAttribArray(positionAttributeLocation);
    this.viewportContext.vertexAttribPointer(positionAttributeLocation, 2, this.viewportContext.FLOAT, false, 0, 0);
    this.viewportContext.bindBuffer(this.viewportContext.ARRAY_BUFFER, textureCoordinateBuffer);
    this.viewportContext.enableVertexAttribArray(textureCoordinateLocation);
    this.viewportContext.vertexAttribPointer(textureCoordinateLocation, 2, this.viewportContext.FLOAT, false, 0, 0);
    
    this.matrix = m4.orthographic(0, this.viewportContext.canvas.width, this.viewportContext.canvas.height, 0, -1, 1);
    
    this.matrix = m4.translate(this.matrix,dstX,dstY,0);
    
    this.matrix = m4.scale(this.matrix, dstWidth, dstHeight, 1);
    
    this.viewportContext.uniformMatrix4fv(matrixLocation,false,this.matrix);
    
    var textureMatrix = m4.scaling(1/ texWidth, 1/texHeight, 1);
    //scaling
    
    textureMatrix = m4.translate(textureMatrix, srcX, srcY, 0);
    textureMatrix = m4.scale(textureMatrix, srcWidth, srcHeight, 1);
    
    this.viewportContext.uniformMatrix4fv(textureMatrixLocation, false, textureMatrix);
    
    this.viewportContext.drawArrays(this.viewportContext.TRIANGLES, 0, 6);
}