Управление героем стрелками в 3D, вид от 3-го лица, на WebGL

class DebugDrawer
{
    constructor(edge)
    {
        this.edge = edge;
        this.projViewMatrix = null;
 
        this.heap = null;
        this.debugDrawer = new Ammo.DebugDrawer();
        this.debugDrawer.drawLine = ((from, to, color) => { this.drawLine(from, to, color) }).bind(this);
        this.debugDrawer.setDebugMode = () => { };
 
        this.debugMode = 1; // 0 - 0ff, 1 - on
        this.debugDrawer.getDebugMode = () => { return this.debugMode; };
        this.debugDrawer.setDebugMode(1);
 
        this.debugDrawer.drawContactPoint = (pointOnB, normalOnB, distance, lifeTime, color) => { };
        this.debugDrawer.reportErrorWarning = (warningString) => { };
        this.debugDrawer.draw3dText = (location, textString) => { };
 
        world.setDebugDrawer(this.debugDrawer);
 
        this.fromX = 0;
        this.fromY = 0;
        this.fromZ = 0;
        this.toX = 0;
        this.toY = 0;
        this.toZ = 0;
        this.centerX = 0;
        this.centerY = 0;
        this.centerZ = 0;
 
        this.length = 0;
        this.vec = glMatrix.vec3.create();
        this.x = 0;
        this.y = 0;
        this.z = 0;
        this.unitX = glMatrix.vec3.fromValues(1, 0, 0);
    }
 
    drawLine(from, to, color)
    {
        this.heap = Ammo.HEAPF32;
 
        this.fromX = this.heap[(parseInt(from) + 0) / 4];
        this.fromY = this.heap[(parseInt(from) + 4) / 4];
        this.fromZ = this.heap[(parseInt(from) + 8) / 4];
 
        this.toX = this.heap[(parseInt(to) + 0) / 4];
        this.toY = this.heap[(parseInt(to) + 4) / 4];
        this.toZ = this.heap[(parseInt(to) + 8) / 4];
 
        if (this.fromX > this.toX)
        {
            this.centerX = this.toX + Math.abs(this.fromX - this.toX) / 2;
        }
        else
        {
            this.centerX = this.fromX + Math.abs(this.toX - this.fromX) / 2;
        }
 
        if (this.fromY > this.toY)
        {
            this.centerY = this.toY + Math.abs(this.fromY - this.toY) / 2;
        }
        else
        {
            this.centerY = this.fromY + Math.abs(this.toY - this.fromY) / 2;
        }
 
        if (this.fromZ > this.toZ)
        {
            this.centerZ = this.toZ + Math.abs(this.fromZ - this.toZ) / 2;
        }
        else
        {
            this.centerZ = this.fromZ + Math.abs(this.toZ - this.fromZ) / 2;
        }
 
        this.vec[0] = this.toX - this.fromX;
        this.vec[1] = this.toY - this.fromY;
        this.vec[2] = this.toZ - this.fromZ;
        this.length = glMatrix.vec3.length(this.vec);
 
        glMatrix.vec3.normalize(this.vec, this.vec);
        glMatrix.quat.rotationTo(this.edge.rotation, this.unitX, this.vec);
 
        this.edge.scale = [this.length, 0.05, 0.05];
        this.edge.position = [this.centerX, this.centerY, this.centerZ];
        this.edge.draw(this.projViewMatrix);
    }
}

class Keyboard
{
    constructor()
    {
        this.keys = {};
        document.addEventListener("keydown", (event) => { this.onKeyChange(event, true) }, true);
        document.addEventListener("keyup", (event) => { this.onKeyChange(event, false) }, false);
    }
 
    pressed(key)
    {
        return this.keys[key];
    }
 
    onKeyChange(event, pressed)
    {
        this.keys[event.key] = pressed;
    }
}

let defaultProgram, edgeProgram;
let player, floor, edge, cube;
let debugDrawer, keyboard;
let debugMode = true;
const angularSpeed = 200;
const linearSpeed = 200;
const dt = 0.015;
 
const forward = glMatrix.vec3.fromValues(0, 0, 1);
const zUnit = glMatrix.vec3.fromValues(0, 0, 1);
const playerRotation = glMatrix.quat.create();
glMatrix.quat.rotationTo(playerRotation, zUnit, forward);
const direction = glMatrix.vec3.fromValues(forward[0], forward[1], forward[2]);
let dirAngle = 0;
 
const projMatrix = glMatrix.mat4.create();
const viewMatrix = glMatrix.mat4.create();
const projViewMatrix = glMatrix.mat4.create();
 
initVertexBuffers(["assets/player.dae", "assets/floor.dae", "assets/cube.dae"],
    (vertPosVBOs, normalVBOs, texCoordVBOs, amounts) =>
    {
        defaultProgram = createProgram("defaultVertexShader", "defaultFragmentShader");
        edgeProgram = createProgram("edgeVertexShader", "edgeFragmentShader");
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
 
        Ammo().then(() =>
        {
            const collisionConfiguration = new Ammo.btDefaultCollisionConfiguration();
            const dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration);
            const overlappingPairCache = new Ammo.btDbvtBroadphase();
            const solver = new Ammo.btSequentialImpulseConstraintSolver();
 
            world = new Ammo.btDiscreteDynamicsWorld(dispatcher, overlappingPairCache, solver, collisionConfiguration);
            world.setGravity(new Ammo.btVector3(0, -9.81, 0));
 
            const playerImage = document.getElementById("playerImage");
            const playerTexture = gl.createTexture();
            gl.bindTexture(gl.TEXTURE_2D, playerTexture);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, playerImage);
            const playserSize = 0.5;
            const playerShape = new Ammo.btSphereShape(playserSize);
            player = new ObjectForPhysics(defaultProgram, [0, 3, 2], playerRotation, amounts[0],
                vertPosVBOs[0], normalVBOs[0], texCoordVBOs[0], playerTexture, playerShape, 50);
            player.scale = [playserSize, playserSize, playserSize];
            player.body.setAngularFactor(0, 1, 0);
            player.body.setDamping(0.9, 0.99);
 
            const floorImage = document.getElementById("floorImage");
            const floorTexture = gl.createTexture();
            gl.bindTexture(gl.TEXTURE_2D, floorTexture);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, floorImage);
            const floorSize = [10, 1, 10];
            const floorShape = new Ammo.btBoxShape(
                new Ammo.btVector3(floorSize[0] / 2, floorSize[1] / 2, floorSize[2] / 2));
            floor = new ObjectForPhysics(defaultProgram, [0, -2, 0], [0, 0, 0, 1], amounts[1],
                vertPosVBOs[1], normalVBOs[1], texCoordVBOs[1], floorTexture, floorShape, 0);
            floor.scale = [10, 5, 10];
 
            edge = new ObjectForEdge(edgeProgram, amounts[2], vertPosVBOs[2]);
            debugDrawer = new DebugDrawer(edge);
            debugDrawer.debugMode = 1;
 
            keyboard = new Keyboard();
 
            init();
        });
    });
 
function init()
{
    glMatrix.mat4.perspective(projMatrix, 55 * Math.PI / 180, 1, 0.1, 500);
    glMatrix.mat4.lookAt(viewMatrix, [0, 3, 10], [0, 0, 0], [0, 1, 0]);
 
    gl.useProgram(defaultProgram);
    const lightPosition = glMatrix.vec3.fromValues(2, 3, 5);
    const uLightPositionLocation = gl.getUniformLocation(defaultProgram, "uLightPosition");
    gl.uniform3fv(uLightPositionLocation, lightPosition);
 
    window.onresize = () =>
    {
        const w = canvas.clientWidth;
        const h = canvas.clientHeight;
        gl.canvas.width = w;
        gl.canvas.height = h;
        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
        glMatrix.mat4.perspective(projMatrix, 55 * Math.PI / 180, w / h, 0.1, 500);
        createPhysicsSimulation();
        draw();
    };
    window.onresize(null);
 
    document.onkeydown = (event) =>
    {
        if (event.repeat) return;
 
        if (event.key === "b")
        {
            debugMode = !debugMode;
            if (debugMode)
            {
                debugDrawer.debugMode = 1;
            }
            else
            {
                debugDrawer.debugMode = 0;
            }
        }
    }
}
 
function createPhysicsSimulation()
{
    setInterval(() =>
    {
        updatePhysics();
    }, 15);
}
 
function updatePhysics()
{
    if (keyboard.pressed("w"))
    {
        let vy = player.body.getLinearVelocity().y();
        const impulse = new Ammo.btVector3(direction[0] * linearSpeed * dt, vy, direction[2] * linearSpeed * dt);
        player.body.setLinearVelocity(impulse);
    }
    if (keyboard.pressed("s"))
    {
        const vy = player.body.getLinearVelocity().y();
        const impulse = new Ammo.btVector3(-direction[0] * linearSpeed * dt, vy, -direction[2] * linearSpeed * dt);
        player.body.setLinearVelocity(impulse);
    }
    if (keyboard.pressed("a"))
    {
        const impulse = new Ammo.btVector3(0, angularSpeed * dt, 0);
        player.body.setAngularVelocity(impulse);
    }
    if (keyboard.pressed("d"))
    {
        const impulse = new Ammo.btVector3(0, -angularSpeed * dt, 0);
        player.body.setAngularVelocity(impulse);
    }
 
    glMatrix.vec3.transformQuat(direction, forward, player.rotation);
    world.stepSimulation(dt, 8);
    player.update();
}
 
function draw()
{
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    glMatrix.mat4.mul(projViewMatrix, projMatrix, viewMatrix);
 
    player.draw(projViewMatrix);
    floor.draw(projViewMatrix);
 
    debugDrawer.projViewMatrix = projViewMatrix;
 
    if (debugMode)
    {
        world.debugDrawWorld();
    }
 
    requestAnimationFrame(draw);
}

class ObjectForEdge
{
    constructor(program, amountOfVertices, vertPosBuffer)
    {
        this.position = [0, 0, 0];
        this.rotation = glMatrix.quat.create();
        this.scale = [1, 1, 1];
 
        this.amountOfVertices = amountOfVertices;
        this.vertPosBuffer = vertPosBuffer;
 
        this.mvpMatrix = glMatrix.mat4.create();
        this.modelMatrix = glMatrix.mat4.create();
 
        gl.useProgram(program);
        this.uMvpMatrixLocation = gl.getUniformLocation(program, "uMvpMatrix");
        this.program = program;
    }
 
    bind()
    {
        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertPosBuffer);
        gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(0);
    }
 
    draw(projViewMatrix)
    {
        gl.useProgram(this.program);
 
        glMatrix.mat4.fromRotationTranslationScale(this.modelMatrix, this.rotation, this.position, this.scale);
        glMatrix.mat4.mul(this.mvpMatrix, projViewMatrix, this.modelMatrix);
        gl.uniformMatrix4fv(this.uMvpMatrixLocation, false, this.mvpMatrix);
 
        this.bind();
        gl.drawArrays(gl.TRIANGLES, 0, this.amountOfVertices);
    }
}

class ObjectForGraphics
{
    constructor(program, position, amountOfVertices, vertPosBuffer, normalBuffer, texCoordBuffer, texture)
    {
        this.position = position;
        this.rotation = glMatrix.quat.create();
        this.scale = [1, 1, 1];
 
        this.amountOfVertices = amountOfVertices;
        this.vertPosBuffer = vertPosBuffer;
        this.normalBuffer = normalBuffer;
        this.texCoordBuffer = texCoordBuffer;
        this.texture = texture;
 
        this.mvpMatrix = glMatrix.mat4.create();
        this.modelMatrix = glMatrix.mat4.create();
        this.normalMatrix = glMatrix.mat4.create();
 
        gl.useProgram(program);
        this.uMvpMatrixLocation = gl.getUniformLocation(program, "uMvpMatrix");
        this.uModelMatrixLocation = gl.getUniformLocation(program, "uModelMatrix");
        this.uNormalMatrixLocation = gl.getUniformLocation(program, "uNormalMatrix");
        this.program = program;
    }
 
    bind()
    {
        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertPosBuffer);
        gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(0);
 
        gl.bindBuffer(gl.ARRAY_BUFFER, this.normalBuffer);
        gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(1);
 
        gl.bindBuffer(gl.ARRAY_BUFFER, this.texCoordBuffer);
        gl.vertexAttribPointer(2, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(2);
 
        gl.bindTexture(gl.TEXTURE_2D, this.texture);
    }
 
    draw(projViewMatrix)
    {
        gl.useProgram(this.program);
 
        glMatrix.mat4.fromRotationTranslationScale(this.modelMatrix, this.rotation, this.position, this.scale);
        glMatrix.mat4.mul(this.mvpMatrix, projViewMatrix, this.modelMatrix);
        gl.uniformMatrix4fv(this.uMvpMatrixLocation, false, this.mvpMatrix);
        gl.uniformMatrix4fv(this.uModelMatrixLocation, false, this.modelMatrix);
 
        glMatrix.mat4.invert(this.normalMatrix, this.modelMatrix);
        glMatrix.mat4.transpose(this.normalMatrix, this.normalMatrix);
        gl.uniformMatrix4fv(this.uNormalMatrixLocation, false, this.normalMatrix);
 
        this.bind();
        gl.drawArrays(gl.TRIANGLES, 0, this.amountOfVertices);
    }
}

class ObjectForPhysics extends ObjectForGraphics
{
    constructor(program, position, rotation, amountOfVertices, vertPosBuffer, normalBuffer, texCoordBuffer, texture, shape, mass)
    {
        super(program, position, amountOfVertices, vertPosBuffer, normalBuffer, texCoordBuffer, texture);
 
        this.tempMotionState = null;
        this.tempTransform = new Ammo.btTransform();
        this.tempRotation = null;
        const initialPosition = new Ammo.btVector3(position[0], position[1], position[2]);
        const initialRotation = new Ammo.btQuaternion(rotation[0], rotation[1], rotation[2], rotation[3]);
        const transform = new Ammo.btTransform();
        transform.setIdentity();
        transform.setOrigin(initialPosition);
        transform.setRotation(initialRotation);
        const motionState = new Ammo.btDefaultMotionState(transform);
 
        const localInertia = new Ammo.btVector3(0, 0, 0);
        if (mass !== 0)
        {
            shape.calculateLocalInertia(mass, localInertia);
        }
 
        const rbInfo = new Ammo.btRigidBodyConstructionInfo(mass, motionState, shape, localInertia);
        this.body = new Ammo.btRigidBody(rbInfo);
        this.body.setActivationState(4); // Disable deactivation
 
        // this.body.setFriction(1);
        // this.body.setRollingFriction(1);
 
        world.addRigidBody(this.body);
    }
 
    update()
    {
        this.tempMotionState = this.body.getMotionState();
        if (this.tempMotionState)
        {
            this.tempMotionState.getWorldTransform(this.tempTransform);
            this.position[0] = this.tempTransform.getOrigin().x();
            this.position[1] = this.tempTransform.getOrigin().y();
            this.position[2] = this.tempTransform.getOrigin().z();
            this.tempRotation = this.tempTransform.getRotation();
            this.rotation[0] = this.tempRotation.x();
            this.rotation[1] = this.tempRotation.y();
            this.rotation[2] = this.tempRotation.z();
            this.rotation[3] = this.tempRotation.w();
        }
    }
}

function createProgram(vertexShaderName, fragmentShaderName)
{
    // Get shader elements
    var vShaderElement = document.getElementById(vertexShaderName);
    var fShaderElement = document.getElementById(fragmentShaderName);
    
    if (vShaderElement == null)
    {
        console.log(`Failed to get an element with name "${vertexShaderName}"`);
        return null;
    }
 
    if (fShaderElement == null)
    {
        console.log(`Failed to get an element with name "${fragmentShaderName}"`);
        return null;
    }
 
    const vertShaderSource = vShaderElement.firstChild.textContent;
    const vShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vShader, vertShaderSource);
    gl.compileShader(vShader);
    let ok = gl.getShaderParameter(vShader, gl.COMPILE_STATUS);
    if (!ok)
    {
        console.log("vert: " + gl.getShaderInfoLog(vShader));
        return null;
    };
 
    const fragShaderSource = fShaderElement.firstChild.textContent;
    const fShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fShader, fragShaderSource);
    gl.compileShader(fShader);
    ok = gl.getShaderParameter(vShader, gl.COMPILE_STATUS);
    if (!ok)
    {
        console.log("frag: " + gl.getShaderInfoLog(fShader));
        return null;
    };
 
    const program = gl.createProgram();
    gl.attachShader(program, vShader);
    gl.attachShader(program, fShader);
    gl.bindAttribLocation(program, 0, "aPosition");
    gl.bindAttribLocation(program, 1, "aNormal");
    gl.bindAttribLocation(program, 2, "aTexCoord");
    gl.linkProgram(program);
    ok = gl.getProgramParameter(program, gl.LINK_STATUS);
    if (!ok)
    {
        console.log("link: " + gl.getProgramInfoLog(program));
        return null;
    };
    gl.useProgram(program);
 
    return program;
}

async function initVertexBuffers(modelPaths, callback)
{
    const vertPosBuffers = [];
    const normalBuffers = [];
    const texCoordBuffers = [];
    const amounts = [];
 
    for (let i = 0; i < modelPaths.length; ++i)
    {
        const contentResponse = await fetch(modelPaths[i]);
        const content = await contentResponse.text();
 
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(content, "text/xml");
 
        const expForIndexes = "//*[local-name() = 'p']/text()";
        let nodes = xmlDoc.evaluate(expForIndexes, xmlDoc, null, XPathResult.ANY_TYPE, null);
        let result = nodes.iterateNext();
        const order = result.textContent.trim().split(" ").map((value) => { return parseInt(value); });
        // console.log(order);
 
        const partOfPositionsId = "mesh-positions-array";
        const expForPositions = `//*[local-name() = 'float_array'][substring(@id, string-length(@id) -` +
            `string-length('${partOfPositionsId}') + 1) = '${partOfPositionsId}']`;
        nodes = xmlDoc.evaluate(expForPositions, xmlDoc, null, XPathResult.ANY_TYPE, null);
        result = nodes.iterateNext();
        const positions = result.textContent.trim().split(" ").map((value) => { return parseFloat(value); });
        // console.log(positions);
 
        const partOfNormalsId = "mesh-normals-array";
        const expForNormals = `//*[local-name() = 'float_array'][substring(@id, string-length(@id) -` +
            `string-length('${partOfNormalsId}') + 1) = '${partOfNormalsId}']`;
        nodes = xmlDoc.evaluate(expForNormals, xmlDoc, null, XPathResult.ANY_TYPE, null);
        result = nodes.iterateNext();
        const normals = result.textContent.trim().split(" ").map((value) => { return parseFloat(value); });
        // console.log(normals);
 
        const partOfTexCoordsId = "mesh-map-0-array";
        const expForTexCoords = `//*[local-name() = 'float_array'][substring(@id, string-length(@id) -` +
            `string-length('${partOfTexCoordsId}') + 1) = '${partOfTexCoordsId}']`;
        nodes = xmlDoc.evaluate(expForTexCoords, xmlDoc, null, XPathResult.ANY_TYPE, null);
        result = nodes.iterateNext();
        const texCoords = result.textContent.trim().split(" ").map((value) => { return parseFloat(value); });
        // console.log(texCoords);
 
        const correctionMatrix = glMatrix.mat4.create();
        glMatrix.mat4.fromXRotation(correctionMatrix, -Math.PI / 2);
 
        const vertPosResult = [];
        const normalsResult = [];
        const texCoordsResult = [];
 
        const amountOfTriangles = order.length / 9;
        for (let i = 0; i < amountOfTriangles; ++i)
        {
            for (let j = 0; j < 9; ++j)
            {
                if ((i * 9 + j) % 3 === 0)
                {
                    const vx = positions[order[i * 9 + j] * 3 + 0];
                    const vy = positions[order[i * 9 + j] * 3 + 1];
                    const vz = positions[order[i * 9 + j] * 3 + 2];
                    const oldPos = glMatrix.vec3.fromValues(vx, vy, vz);
                    const newPos = glMatrix.vec3.create();
                    glMatrix.vec3.transformMat4(newPos, oldPos, correctionMatrix);
                    vertPosResult.push(newPos[0]);
                    vertPosResult.push(newPos[1]);
                    vertPosResult.push(newPos[2]);
                }
                else if((i * 9 + j) % 3 === 1)
                {
                    const nx = normals[order[i * 9 + j] * 3 + 0];
                    const ny = normals[order[i * 9 + j] * 3 + 1];
                    const nz = normals[order[i * 9 + j] * 3 + 2];
                    const oldNormal = glMatrix.vec3.fromValues(nx, ny, nz);
                    const newNormal = glMatrix.vec3.create();
                    glMatrix.vec3.transformMat4(newNormal, oldNormal, correctionMatrix);
                    normalsResult.push(newNormal[0]);
                    normalsResult.push(newNormal[1]);
                    normalsResult.push(newNormal[2]);
                }
                else if((i * 9 + j) % 3 === 2)
                {
                    texCoordsResult.push(texCoords[order[i * 9 + j] * 2 + 0]);
                    texCoordsResult.push(texCoords[order[i * 9 + j] * 2 + 1]);
                }
            }
        }
        // console.log(vertPosResult);
        // console.log(texCoordsResult);
 
        const vertPosBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertPosBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertPosResult), gl.STATIC_DRAW);
 
        const normalBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normalsResult), gl.STATIC_DRAW);
 
        const texCoordBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texCoordsResult), gl.STATIC_DRAW);
 
        vertPosBuffers.push(vertPosBuffer);
        normalBuffers.push(normalBuffer);
        texCoordBuffers.push(texCoordBuffer);
        amounts.push(vertPosResult.length / 3);
    }
 
    callback(vertPosBuffers, normalBuffers, texCoordBuffers, amounts);
}

const canvas = document.getElementById("renderCanvas");
const gl = canvas.getContext("webgl");
gl.enable(gl.DEPTH_TEST);
gl.clearColor(0.5, 0.6, 0.8, 1.0);