Небольшие примеры на WebGL

import { context, device, initWebGPUContext } from "./webgpu-context.js";
 
async function init() {
    await initWebGPUContext("renderCanvas");
 
    const commandEncoder = device.createCommandEncoder();
    const textureView = context.getCurrentTexture().createView();
 
    const renderPassDescriptor = {
        colorAttachments: [{
            view: textureView,
            clearValue: { r: 0.92, g: 0.92, b: 0.9, a: 1.0 },
            loadOp: "clear",
            storeOp: "store",
        }]
    };
 
    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    passEncoder.end();
 
    device.queue.submit([commandEncoder.finish()]);
}
 
init();

export let device = null;
export let context = null;
 
export async function initWebGPUContext(canvasName) {
    const canvas = document.getElementById(canvasName);
    if (canvas === null) {
        console.log(`Failed to get a canvas element with the name "${canvasName}"`);
        return false;
    }
 
    if (!navigator.gpu) {
        console.log("WebGPU is not supported in this browser");
        return false;
    }
 
    const adapter = await navigator.gpu.requestAdapter();
    device = await adapter.requestDevice();
 
    context = canvas.getContext("webgpu");
    const format = navigator.gpu.getPreferredCanvasFormat();
 
    context.configure({
        device: device,
        format: format,
        // Equivalent to { alpha: false, premultipliedAlpha: false } in WebGL:
        alphaMode: 'opaque'
    });
 
    return true;
}

import { mat4, vec3 } from "gl-matrix";
import * as Matter from "matter-js";
import { loadAssets } from "./loaders";
import Locations from "./Locations";
import ObjectForGraphics from "./ObjectForGraphics";
import { createShaderProgram } from "./shaderProgram";
import { initVertexBuffers } from "./vertexBuffers";
import { createTexture } from "./textures";
import ObjectForPhysics from "./ObjectForPhysics";
 
let gl: WebGLRenderingContext;
let program: WebGLProgram;
const viewMatrix = mat4.create();
const projectionMatrix = mat4.create();
const viewProjMatrix = mat4.create();
let currentTime: number, lastTime: number, deltaTime: number;
let letter_c: ObjectForGraphics;
let letter_y: ObjectForGraphics;
let letter_b: ObjectForGraphics;
let letter_e: ObjectForGraphics;
let letter_r1: ObjectForGraphics;
let letter_f: ObjectForGraphics;
let letter_o: ObjectForGraphics;
let letter_r2: ObjectForGraphics;
let letter_u: ObjectForGraphics;
let letter_m: ObjectForGraphics;
let ground1: ObjectForGraphics;
let ground2: ObjectForGraphics;
let ground3: ObjectForGraphics;
let ground4: ObjectForGraphics;
const worldHeight = 50;
 
const textFiles: { name: string, path: string, content: string }[] = [];
const models: { name: string, path: string, content: Document }[] = [];
const images: { name: string, path: string, content: HTMLImageElement }[] = [];
 
function init(): void
{
    const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
    gl = canvas.getContext("webgl");
 
    gl.clearColor(0.15, 0.15, 0.15, 1.0);
    gl.enable(gl.DEPTH_TEST);
 
    const vertShaderSrc = textFiles.filter(asset => { return asset.name === "vertShaderSrc" })[0].content;
    const fragShaderSrc = textFiles.filter(asset => { return asset.name === "fragShaderSrc" })[0].content;
    program = createShaderProgram(gl, vertShaderSrc, fragShaderSrc);
 
    const locations = new Locations();
    locations.aPositionLocation = gl.getAttribLocation(program, "aPosition");
    locations.aTextureCoordLocation = gl.getAttribLocation(program, "aTexCoord");
    locations.uMvpMatrixLocation = gl.getUniformLocation(program, "uMvpMatrix");
 
    const letterImage = images.filter(asset => { return asset.name == "lettersTexture" })[0].content;
    const letterTexture = createTexture(gl, letterImage);
 
    const size = 2;
    const y1 = 10;
    const y2 = 5;
 
    const engine = Matter.Engine.create();
 
    const groundFriction = 0.5;
    const groundRestitution = 0.8;
 
    const ground1Body = Matter.Bodies.rectangle(-14, 0, 20, 2,
        { isStatic: true, angle: -20 * Math.PI / 180 });
    ground1Body.friction = groundFriction;
    ground1Body.restitution = groundRestitution;
 
    const ground2Body = Matter.Bodies.rectangle(14, 0, 20, 2,
        { isStatic: true, angle: 20 * Math.PI / 180 });
    ground2Body.friction = groundFriction;
    ground2Body.restitution = groundRestitution;
 
    const ground3Body = Matter.Bodies.rectangle(-8, -10, 20, 2,
        { isStatic: true, angle: -20 * Math.PI / 180 });
    ground3Body.friction = groundFriction;
    ground3Body.restitution = groundRestitution;
 
    const ground4Body = Matter.Bodies.rectangle(8, -10, 20, 2,
        { isStatic: true, angle: 20 * Math.PI / 180 });
    ground4Body.friction = groundFriction;
    ground4Body.restitution = groundRestitution;
 
    const letterFriction = 0.5;
    const letterRestitution = 0.8;
 
    engine.world.gravity.y = -0.2;
 
    const cBody = Matter.Bodies.circle(-10, y1, size);
    cBody.friction = letterFriction;
    cBody.restitution = letterRestitution;
 
    const yBody = Matter.Bodies.circle(-5, y1, size);
    yBody.friction = letterFriction;
    yBody.restitution = letterRestitution;
 
    const bBody = Matter.Bodies.circle(0, y1, size);
    yBody.friction = letterFriction;
    yBody.restitution = letterRestitution;
 
    const eBody = Matter.Bodies.circle(5, y1, size);
    eBody.friction = letterFriction;
    eBody.restitution = letterRestitution;
 
    const r1Body = Matter.Bodies.circle(10, y1, size);
    r1Body.friction = letterFriction;
    r1Body.restitution = letterRestitution;
 
    const fBody = Matter.Bodies.circle(-10, y2, size);
    fBody.friction = letterFriction;
    fBody.restitution = letterRestitution;
 
    const oBody = Matter.Bodies.circle(-5, y2, size);
    oBody.friction = letterFriction;
    oBody.restitution = letterRestitution;
 
    const r2Body = Matter.Bodies.circle(0, y2, size);
    r2Body.friction = letterFriction;
    r2Body.restitution = letterRestitution;
 
    const uBody = Matter.Bodies.circle(5, y2, size);
    uBody.friction = letterFriction;
    uBody.restitution = letterRestitution;
 
    const mBody = Matter.Bodies.circle(10, y2, size);
    mBody.friction = letterFriction;
    mBody.restitution = letterRestitution;
 
    Matter.World.add(engine.world, [ground1Body, ground2Body, ground3Body, ground4Body,
        cBody, yBody, bBody, eBody, r1Body, fBody, oBody, r2Body, uBody, mBody]);
 
    let letterXML = models.filter(asset => { return asset.name === "letter_c" })[0].content;
    let letterVertexBuffers = initVertexBuffers(gl, letterXML);
    letter_c = new ObjectForPhysics(cBody, letterVertexBuffers, locations, letterTexture);
 
    letterXML = models.filter(asset => { return asset.name === "letter_y" })[0].content;
    letterVertexBuffers = initVertexBuffers(gl, letterXML);
    letter_y = new ObjectForPhysics(yBody, letterVertexBuffers, locations, letterTexture);
 
    letterXML = models.filter(asset => { return asset.name === "letter_b" })[0].content;
    letterVertexBuffers = initVertexBuffers(gl, letterXML);
    letter_b = new ObjectForPhysics(bBody, letterVertexBuffers, locations, letterTexture);
 
    letterXML = models.filter(asset => { return asset.name === "letter_e" })[0].content;
    letterVertexBuffers = initVertexBuffers(gl, letterXML);
    letter_e = new ObjectForPhysics(eBody, letterVertexBuffers, locations, letterTexture);
 
    letterXML = models.filter(asset => { return asset.name === "letter_r1" })[0].content;
    letterVertexBuffers = initVertexBuffers(gl, letterXML);
    letter_r1 = new ObjectForPhysics(r1Body, letterVertexBuffers, locations, letterTexture);
 
    letterXML = models.filter(asset => { return asset.name === "letter_f" })[0].content;
    letterVertexBuffers = initVertexBuffers(gl, letterXML);
    letter_f = new ObjectForPhysics(fBody, letterVertexBuffers, locations, letterTexture);
 
    letterXML = models.filter(asset => { return asset.name === "letter_o" })[0].content;
    letterVertexBuffers = initVertexBuffers(gl, letterXML);
    letter_o = new ObjectForPhysics(oBody, letterVertexBuffers, locations, letterTexture);
 
    letterXML = models.filter(asset => { return asset.name === "letter_r2" })[0].content;
    letterVertexBuffers = initVertexBuffers(gl, letterXML);
    letter_r2 = new ObjectForPhysics(r2Body, letterVertexBuffers, locations, letterTexture);
 
    letterXML = models.filter(asset => { return asset.name === "letter_u" })[0].content;
    letterVertexBuffers = initVertexBuffers(gl, letterXML);
    letter_u = new ObjectForPhysics(uBody, letterVertexBuffers, locations, letterTexture);
 
    letterXML = models.filter(asset => { return asset.name === "letter_m" })[0].content;
    letterVertexBuffers = initVertexBuffers(gl, letterXML);
    letter_m = new ObjectForPhysics(mBody, letterVertexBuffers, locations, letterTexture);
 
    // letter_c.position = [-10, y1, 0];
    letter_c.scale = [size, size, 1];
    // letter_y.position = [-5, y1, 0];
    letter_y.scale = [size, size, 1];
    // letter_b.position = [0, y1, 0];
    letter_b.scale = [size, size, 1];
    // letter_e.position = [5, y1, 0];
    letter_e.scale = [size, size, 1];
    // letter_r1.position = [10, y1, 0];
    letter_r1.scale = [size, size, 1];
    // letter_f.position = [-10, y2, 0];
    letter_f.scale = [size, size, 1];
    // letter_o.position = [-5, y2, 0];
    letter_o.scale = [size, size, 1];
    // letter_r2.position = [0, y2, 0];
    letter_r2.scale = [size, size, 1];
    // letter_u.position = [5, y2, 0];
    letter_u.scale = [size, size, 1];
    // letter_m.position = [10, y2, 0];
    letter_m.scale = [size, size, 1];
 
    const groundXML = models.filter(asset => { return asset.name === "ground" })[0].content;
    const groundVertexBuffers = initVertexBuffers(gl, groundXML);
 
    ground1 = new ObjectForPhysics(ground1Body, groundVertexBuffers, locations, letterTexture);
    // ground1.position = [-12, 0, 0];
    ground1.scale = [10, 2, 1];
    // ground1.angle = -20;
 
    ground2 = new ObjectForPhysics(ground2Body, groundVertexBuffers, locations, letterTexture);
    // ground2.position = [12, 0, 0];
    ground2.scale = [10, 2, 1];
    // ground2.angle = 20 * Math.PI / 180;
 
    ground3 = new ObjectForPhysics(ground3Body, groundVertexBuffers, locations, letterTexture);
    // ground3.position = [-8, -10, 0];
    ground3.scale = [10, 2, 1];
    // ground3.angle = -20 * Math.PI / 180;
 
    ground4 = new ObjectForPhysics(ground4Body, groundVertexBuffers, locations, letterTexture);
    // ground4.position = [8, -10, 0];
    ground4.scale = [10, 2, 1];
    // ground4.angle = 20 * Math.PI / 180;
 
    mat4.lookAt(
        viewProjMatrix,
        vec3.fromValues(0, 0, 100),
        vec3.fromValues(0, 0, 0),
        vec3.fromValues(0, 1, 0));
 
    let firstClick = true;
 
    canvas.onclick = (event) =>
    {
        if (firstClick && event.button == 0)
        {
            Matter.Engine.run(engine);
            firstClick = false;
        }
    };
 
    window.onresize = () =>
    {
        const w = (gl.canvas as HTMLCanvasElement).clientWidth;
        const h = (gl.canvas as HTMLCanvasElement).clientHeight;
        gl.canvas.width = w;
        gl.canvas.height = h;
        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
        const aspect = w / h;
        const worldWidth = aspect * worldHeight;
        mat4.ortho(projectionMatrix,
            -worldWidth / 2, worldWidth / 2,
            -worldHeight / 2, worldHeight / 2, 50, -50);
        lastTime = Date.now();
        draw();
    };
    window.onresize(null);
}
 
function draw(): void
{
    gl.clear(gl.COLOR_BUFFER_BIT);
    mat4.mul(viewProjMatrix, projectionMatrix, viewMatrix);
 
    currentTime = Date.now();
    deltaTime = (currentTime - lastTime) / 1000;
    lastTime = currentTime;
 
    letter_c.draw(gl, program, viewProjMatrix);
    letter_y.draw(gl, program, viewProjMatrix);
    letter_b.draw(gl, program, viewProjMatrix);
    letter_e.draw(gl, program, viewProjMatrix);
    letter_r1.draw(gl, program, viewProjMatrix);
    letter_f.draw(gl, program, viewProjMatrix);
    letter_o.draw(gl, program, viewProjMatrix);
    letter_r2.draw(gl, program, viewProjMatrix);
    letter_u.draw(gl, program, viewProjMatrix);
    letter_m.draw(gl, program, viewProjMatrix);
 
    ground1.draw(gl, program, viewProjMatrix);
    ground2.draw(gl, program, viewProjMatrix);
    ground3.draw(gl, program, viewProjMatrix);
    ground4.draw(gl, program, viewProjMatrix);
 
    requestAnimationFrame(() => draw());
}
 
function main(): void
{
    textFiles.push({ name: "vertShaderSrc", path: "assets/shaders/texturedShader.vert", content: "" });
    textFiles.push({ name: "fragShaderSrc", path: "assets/shaders/texturedShader.frag", content: "" });
    images.push({ name: "lettersTexture", path: "assets/models/letters.png", content: null });
    models.push({ name: "letter_c", path: "assets/models/letter_c.dae", content: null });
    models.push({ name: "letter_y", path: "assets/models/letter_y.dae", content: null });
    models.push({ name: "letter_b", path: "assets/models/letter_b.dae", content: null });
    models.push({ name: "letter_e", path: "assets/models/letter_e.dae", content: null });
    models.push({ name: "letter_r1", path: "assets/models/letter_r1.dae", content: null });
    models.push({ name: "letter_f", path: "assets/models/letter_f.dae", content: null });
    models.push({ name: "letter_o", path: "assets/models/letter_o.dae", content: null });
    models.push({ name: "letter_r2", path: "assets/models/letter_r2.dae", content: null });
    models.push({ name: "letter_u", path: "assets/models/letter_u.dae", content: null });
    models.push({ name: "letter_m", path: "assets/models/letter_m.dae", content: null });
    models.push({ name: "ground", path: "assets/models/ground.dae", content: null });
 
    loadAssets(textFiles, models, images, () =>
    {
        init();
    });
}
 
// Debug
main();
 
// Release
// window.onload = () => main();

export function loadAssets(
    textFiles: { name: string, path: string, content: string }[],
    models: { name: string, path: string, content: Document }[],
    images: { name: string, path: string, content: HTMLImageElement }[],
    finishedCallback: () => void)
{
    let amountToLoad = textFiles.length + models.length + images.length;
 
    for (let i = 0; i < textFiles.length; i++)
    {
        loadFile(textFiles[i].path, true,
            (src) => { textFiles[i].content = src as string; areLoaded(); });
    }
 
    for (let i = 0; i < models.length; i++)
    {
        loadFile(models[i].path, false,
            (src) => { models[i].content = src as Document; areLoaded(); });
    }
 
    for (let i = 0; i < images.length; i++)
    {
        loadImage(images[i].path,
            (image) => { images[i].content = image; areLoaded(); });
    }
 
    function areLoaded()
    {
        amountToLoad--;
        if (amountToLoad === 0)
        {
            finishedCallback();
        }
    }
}
 
export function loadImage(path, callback: (img: HTMLImageElement) => void)
{
    const image = new Image();
    image.onload = () => { callback(image) };
    image.src = path;
}
 
export function loadFile(path: string, isTextFile: boolean, callback: (content: string | Document) => void)
{
    const xhr = new XMLHttpRequest();
 
    xhr.onreadystatechange = () =>
    {
        if (xhr.readyState === 4 && xhr.status !== 404)
        {
            if (isTextFile)
            {
                callback(xhr.responseText);
            }
            else
            {
                callback(xhr.responseXML);
            }
        }
    };
 
    xhr.open("GET", path, true);
    xhr.send();
}

export default class Locations
{
    public aPositionLocation: number;
    public aTextureCoordLocation: number;
    public uMvpMatrixLocation: WebGLUniformLocation;
}

import { mat4, vec3 } from "gl-matrix";
import Locations from "./Locations";
import VertexBuffersCollection from "./VertexBuffersCollection";
 
export default class ObjectForGraphics
{
    public position = [0, 0, 0];
    public angle = 0;
    public scale = [1, 1, 1];
 
    private mvpMatrix = mat4.create();
    private modelMatrix = mat4.create();
 
    private vertexPosBuffer: WebGLBuffer;
    private textureCoordBuffer: WebGLBuffer;
    private amountOfVertices: number;
    private texture: WebGLTexture;
 
    public aPositionLocation: number;
    public aTextureCoordLocation: number;
 
    public uMvpMatrixLocation: WebGLUniformLocation;
 
    constructor(vertexBuffers: VertexBuffersCollection, locations: Locations, texture: WebGLTexture)
    {
        this.vertexPosBuffer = vertexBuffers.vertexPosBuffer;
        this.textureCoordBuffer = vertexBuffers.textureCoordBuffer;
        this.amountOfVertices = vertexBuffers.amountOfVertices;
 
        this.aPositionLocation = locations.aPositionLocation;
        this.aTextureCoordLocation = locations.aTextureCoordLocation;
        this.uMvpMatrixLocation = locations.uMvpMatrixLocation;
 
        this.texture = texture;
    }
 
    public draw(gl: WebGLRenderingContext, program: WebGLProgram, viewProjMatrix: mat4): void
    {
        gl.useProgram(program);
 
        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPosBuffer);
        gl.vertexAttribPointer(this.aPositionLocation, 3, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(this.aPositionLocation);
 
        gl.bindBuffer(gl.ARRAY_BUFFER, this.textureCoordBuffer);
        gl.vertexAttribPointer(this.aTextureCoordLocation, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(this.aTextureCoordLocation);
 
        gl.bindTexture(gl.TEXTURE_2D, this.texture);
 
        mat4.fromTranslation(this.modelMatrix, vec3.fromValues(this.position[0], this.position[1], this.position[2]));
        mat4.rotate(this.modelMatrix, this.modelMatrix, this.angle, [0, 0, 1]);
        mat4.scale(this.modelMatrix, this.modelMatrix, vec3.fromValues(this.scale[0], this.scale[1], this.scale[2]));
 
        mat4.mul(this.mvpMatrix, viewProjMatrix, this.modelMatrix);
        gl.uniformMatrix4fv(this.uMvpMatrixLocation, false, this.mvpMatrix);
        gl.drawArrays(gl.TRIANGLES, 0, this.amountOfVertices);
    }
}

import { mat4 } from "gl-matrix";
import * as Matter from "matter-js";
import Locations from "./Locations";
import ObjectForGraphics from "./ObjectForGraphics";
import VertexBuffersCollection from "./VertexBuffersCollection";
 
export default class ObjectForPhysics extends ObjectForGraphics
{
    private _body: Matter.Body
 
    public constructor(body: Matter.Body, vertexBuffers: VertexBuffersCollection, locations: Locations, texture: WebGLTexture)
    {
        super(vertexBuffers, locations, texture);
        this._body = body;
    }
 
    public draw(gl: WebGLRenderingContext, program: WebGLProgram, viewProjMatrix: mat4): void
    {
        this.position[0] = this._body.position.x;
        this.position[1] = this._body.position.y;
        this.angle = this._body.angle;
 
        super.draw(gl, program, viewProjMatrix);
    }
}

requirejs.config({
    baseUrl: "js",
    paths: {
        "gl-matrix": "https://cdn.jsdelivr.net/npm/gl-matrix@3.3.0/gl-matrix-min",
        "matter-js": "https://cdn.jsdelivr.net/npm/matter-js@0.14.2/build/matter.min"
    }
});
 
requirejs(["main"], () => { });

export function createShaderProgram(
    gl: WebGLRenderingContext, vertShaderSrc: string, fragShaderSrc: string): WebGLProgram
{
    let ok: boolean;
 
    const vShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vShader, vertShaderSrc);
    gl.compileShader(vShader);
    ok = gl.getShaderParameter(vShader, gl.COMPILE_STATUS) as boolean;
    if (!ok)
    {
        console.log("Failed to compile the vertex shader:");
        console.log(vertShaderSrc);
    }
 
    const fShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fShader, fragShaderSrc);
    gl.compileShader(fShader);
    ok = gl.getShaderParameter(fShader, gl.COMPILE_STATUS);
    if (!ok)
    {
        console.log("Failed to compile the fragment shader:");
        console.log(fragShaderSrc);
    }
 
    const program = gl.createProgram();
    gl.attachShader(program, vShader);
    gl.attachShader(program, fShader);
    gl.linkProgram(program);
 
    return program;
}

export function createTexture (gl: WebGLRenderingContext, image: HTMLImageElement): WebGLTexture
{
    const texture = gl.createTexture();
 
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
 
    return texture;
}

import VertexBuffersCollection from "./VertexBuffersCollection";
 
export function initVertexBuffers(gl: WebGLRenderingContext, xmlModel: Document) : VertexBuffersCollection
{
    let dataIndexArrray, dataVertPosArray, dataNormalArray, dataTexCoordArray;
    let amountOfAttributes;
    
    const meshChildren = xmlModel.getElementsByTagName("mesh")[0].children;
    for (let i = 0; i < meshChildren.length; i++)
    {
        // console.log(meshChildren[i].getElementsByTagName("float_array")[0].getAttribute("id"));
        const id = meshChildren[i].getAttribute("id");
        if (id !== null && id.match(/-mesh-positions/)) // id.endsWith("-mesh-positions") - lib: es2015
        {
            dataVertPosArray = meshChildren[i].getElementsByTagName("float_array")[0]
                .childNodes[0].nodeValue.trim().split(" ").map(value => { return parseFloat(value); });
        }
        else if (id !== null && id.match(/-mesh-normals/))
        {
            dataNormalArray = meshChildren[i].getElementsByTagName("float_array")[0]
                .childNodes[0].nodeValue.trim().split(" ").map(value => { return parseFloat(value); });
        }
        else if (id !== null && id.match(/-mesh-map-0/))
        {
            dataTexCoordArray = meshChildren[i].getElementsByTagName("float_array")[0]
                .childNodes[0].nodeValue.trim().split(" ").map(value => { return parseFloat(value); });
        }
        else if (meshChildren[i].tagName == "triangles" || meshChildren[i].tagName == "polylist")
        {
            amountOfAttributes = meshChildren[i].getElementsByTagName("input").length;
 
            dataIndexArrray = meshChildren[i].getElementsByTagName("p")[0]
                .childNodes[0].nodeValue.trim().split(" ").map(value => { return parseInt(value); });
        }
    }
 
    // console.log("amountOfAttributes = " + amountOfAttributes);
    // console.log("dataIndexArrray = " + dataIndexArrray);
    // console.log("dataVertPosArray = " + dataVertPosArray);
    // console.log("dataNormalArray = " + dataNormalArray);
    // console.log("dataTexCoordArray = " + dataTexCoordArray);
 
    const v: number[] = []
    const n: number[] = []
    const t: number[] = [];
    let vertPosIndex, normalIndex, texCoordIndex;
 
    for (let i = 0; i < dataIndexArrray.length; i += amountOfAttributes)
    {
        vertPosIndex = dataIndexArrray[i + 0];
 
        v.push(dataVertPosArray[vertPosIndex * 3 + 0]);
        v.push(dataVertPosArray[vertPosIndex * 3 + 1]);
        v.push(dataVertPosArray[vertPosIndex * 3 + 2]);
 
        normalIndex = dataIndexArrray[i + 1];
        n.push(dataNormalArray[normalIndex * 3 + 0]);
        n.push(dataNormalArray[normalIndex * 3 + 1]);
        n.push(dataNormalArray[normalIndex * 3 + 2]);
 
        texCoordIndex = dataIndexArrray[i + 2];
        t.push(dataTexCoordArray[texCoordIndex * 2 + 0]);
        t.push(dataTexCoordArray[texCoordIndex * 2 + 1]);
    }
 
    const vertPosBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertPosBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(v), gl.STATIC_DRAW);
 
    const normalBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(n), gl.STATIC_DRAW);
 
    const texCoordBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(t), gl.STATIC_DRAW);
 
    const vertexBuffers = new VertexBuffersCollection();
    vertexBuffers.vertexPosBuffer = vertPosBuffer;
    vertexBuffers.textureCoordBuffer = texCoordBuffer;
    vertexBuffers.amountOfVertices = v.length / 3;
 
    return vertexBuffers;
}

export default class VertexBuffersCollection
{
    public vertexPosBuffer: WebGLBuffer;
    public textureCoordBuffer: WebGLBuffer;
    public amountOfVertices: number;
}