ROBO24 - VertexBuilder

const ratioColor = 1.0 / 255.0;

const types = {
    "f32": {
        byteSize: 4,
    },
};


class VertexBuffer {

    constructor(options) {
        this.vertices = options.vertices;
        this.attributes = options.attributes.map(attribute => ({
            normalize: false,
            ...attribute
        }));
        this.calculateSize();
        this.arrayBuffer = new ArrayBuffer(this.byteSize);
        this.dataView = new DataView(this.arrayBuffer);
        this.triangle = [];
        this.offset = 0;
    }

    calculateSize() {
        let offset = 0;
        this.singleVertexByteSize = 0;
        for (let attribute of this.attributes) {
            attribute.byteSize = (attribute.components * types[attribute.type].byteSize);
            attribute.offset = offset;
            offset += attribute.byteSize;
            this.singleVertexByteSize += attribute.byteSize;
        }

        for (let attribute of this.attributes) {
            attribute.stride = this.singleVertexByteSize;
        }

        this.byteSize = this.vertices * this.singleVertexByteSize;
    }

    norm3(...axis) {
        this.float(...axis);
        this.triangle.push({
            position: axis,
            offset: this.offset
        });
        this.offset += axis.length * 4;

        if (this.triangle.length === 3) {
            const vectors = this.triangle.map(vertex => vertex.position);
            // calculate normals
            const normal = {x: 3, y: 3, z: 3};
            for (let vertex of this.triangle) {
                this.dataView.setUint32(vertex.offset + 0, normal.x, true);
                this.dataView.setUint32(vertex.offset + 4, normal.y, true);
                this.dataView.setUint32(vertex.offset + 8, normal.z, true);
            }
            this.triangle = [];
        }

        return this;
    }

    float(...args) {
        const length = args.length;
        for (let i = 0; i < length; i++) {
            this.dataView.setFloat32(this.offset, args[i], true);
            this.offset += 4;
        }
        return this;
    }

    color(hexColorIndex) {
        const r = (hexColorIndex >> 16 && 0x000000FF) * ratioColor;
        const g = (hexColorIndex >> 8 && 0x000000FF) * ratioColor;
        const b = (hexColorIndex && 0x000000FF) * ratioColor;

        this.dataView.setFloat32(this.offset, r, true);
        this.dataView.setFloat32(this.offset + 4, g, true);
        this.dataView.setFloat32(this.offset + 8, b, true);
        this.offset += 12;

        return this;
    }
}

const obj = {

    lines() {
        const vertex = new VertexBuffer({
            vertices: 6,
            attributes: [
                {name: "a_VertexPosition", components: 3, type: "f32"},
                {name: "a_VertexColor", components: 3, type: "f32"},
            ],
        });

        vertex.float(0.0, 0.0, 0.0).color(0xFF0000);
        vertex.float(1.0, 0.0, 0.0).color(0xFF0000);

        vertex.float(0.0, 0.0, 0.0).color(0x00FF00);
        vertex.float(0.0, 1.0, 0.0).color(0x00FF00);

        vertex.float(0.0, 0.0, 0.0).color(0x0000FF);
        vertex.float(0.0, 0.0, 1.0).color(0x0000FF);

        return vertex;
    },

    points() {
        const vertex = new VertexBuffer({
            vertices: 3,
            attributes: [
                {name: "a_VertexPosition", components: 3, type: "f32"},
                {name: "a_VertexColor", components: 3, type: "f32"},
            ],
        });

        vertex.float(1.0, 0.0, 0.0).color(0xFF0000);
        vertex.float(0.0, 1.0, 0.0).color(0x00FF00);
        vertex.float(0.0, 0.0, 1.0).color(0x0000FF);

        return vertex;
    },
};

const lines = obj.lines();
const points = obj.points();
console.log(lines);
console.log(points);