matrix-engine/lib/matrix-geometry.js

basic_timeline improved, VT func setup vide html element id with name arg.- DISABLE RAYCAST DEBUG TEST [2.3.3] Fix for GUI win desktop [2.3.0] DestrucMesh solution & loading convex objs for physics BASIC, SpriteAnimation CPU/texture solution added, Improv

"use strict";

import App from "../program/manifest";
import {OSCILLATOR, SWITCHER} from "./utility";
import {net} from "./engine";

/**
 * @description
 * Networking is deep integrated in me engine.
 * You can change network driver but this code still works (net interface).
 * Reccommended Net2 new version based on kurento/openvidu server.
 * @author Nikola Lukic
 * @date oct 2024
 */

export class Scale {
	constructor() {
		this.x = 1;
		this.y = 1;
		this.z = 1;
	}

	LinearScale(scale_) {
		this.x = scale_;
		this.y = scale_;
		this.z = scale_;
	}
}

export class Point {
	constructor(x, y, z) {
		if(typeof z == "undefined") {z = 0;}
		this.x = x;
		this.y = y;
		this.z = z;
		this.scale = new Scale();
	}

	get X() {
		return parseFloat(this.x * this.scale.x);
	}
	get Y() {
		return parseFloat(this.y * this.scale.y);
	}
	get Z() {
		return parseFloat(this.z * this.scale.z);
	}
}

export class RotationVector {
	constructor(x, y, z, rotx, roty, rotz) {
		if(typeof x == "undefined") {x = 0}
		if(typeof y == "undefined") {y = 0}
		if(typeof z == "undefined") {z = 0}
		if(typeof rotx == "undefined") {rotx = 0}
		if(typeof roty == "undefined") {roty = 0}
		if(typeof rotz == "undefined") {rotz = 0}

		this.nameUniq = null;
		this.netObjId = null;

		this.x = x;
		this.y = y;
		this.z = z;

		this.rotx = rotx;
		this.roty = roty;
		this.rotz = rotz;

		/**
		 * Active rotation without writing code from
		 * top level. Just sutup values > 0
		 */
		this.rotationSpeed = {
			emit: false,
			x: 0,
			y: 0,
			z: 0
		};

		this.angle = 0;
		this.axis = {x: 0, y: 0, z: 0};

		// this.adapt_quaternion = () => {
		//   this.getRotDirX = () => {
		//     return this.RotationVector;
		//   }

		//   this.getRotDirY = () => {
		//     return this.RotationVector;
		//   }

		//   this.getRotDirZ = () => {
		//     return this.RotationVector;
		//   }
		// }
		return this;
	}

	get rotSpeedX() {
		return this.rotationSpeed.x;
	}

	get rotSpeedY() {
		return this.rotationSpeed.y;
	}

	get rotSpeedZ() {
		return this.rotationSpeed.z;
	}

	get X() {
		return this.x;
	}
	get Y() {
		return this.y;
	}
	get Z() {
		return this.z;
	}

	get RotationVector() {
		return [this.x, this.y, this.z];
	}

	SetDirection(x_, y_, z_) {
		this.x = x_;
		this.y = y_;
		this.z = z_;
		return [this.x, this.y, this.z];
	}

	getDirection() {
		return [this.x, this.y, this.z];
	}

	getDirectionX() {
		return [this.x, 0, 0];
	}

	getDirectionY() {
		return [0, this.y, 0];
	}

	getDirectionZ() {
		return [0, 0, this.z];
	}

	getRotDirX() {
		return [1, 0, 0];
	}

	getRotDirY() {
		return [0, 1, 0];
	}

	getRotDirZ() {
		return [0, 0, 1];
	}

	SetDirectionX() {
		this.x = 1;
		this.y = 0;
		this.z = 0;
	}

	SetDirectionY() {
		this.x = 0;
		this.y = 1;
		this.z = 0;
	}

	SetDirectionZ() {
		this.x = 0;
		this.y = 0;
		this.z = 1;
	}

	SetDirectionXY() {
		this.x = 1;
		this.y = 1;
		this.z = 0;
	}

	SetDirectionXZ() {
		this.x = 1;
		this.y = 0;
		this.z = 1;
	}

	SetDirectionYZ() {
		this.x = 0;
		this.y = 1;
		this.z = 1;
	}

	rotateX(x, em) {
		this.rotx = x;
		if(typeof em == 'undefined' && App.scene[this.nameUniq] && App.scene[this.nameUniq].net.enable == true) net.connection.send({
			netRot: {x: this.rotx},
			netObjId: this.netObjId,
		});
	}

	rotateY(y, em) {
		this.roty = y;
		if(typeof em == 'undefined' && App.scene[this.nameUniq] && App.scene[this.nameUniq].net.enable == true) net.connection.send({
			netRot: {y: this.roty},
			netObjId: this.netObjId,
		});
	}

	rotateZ(z, em) {
		this.rotz = z;
		if(typeof em == 'undefined' && App.scene[this.nameUniq] && App.scene[this.nameUniq].net.enable == true) net.connection.send({
			netRot: {z: this.rotz},
			netObjId: this.netObjId,
		});
	}

	get rx() {
		return this.rotx;
	}

	get ry() {
		return this.roty;
	}

	get rz() {
		return this.rotz;
	}
}

/**
 * @description Base class
 * Powered for multiplayer feature:
 * - position ref to x,y,z
 * New case if you wanna send for some other object from uniq local
 * See example from FPShooter. Explanation : In MultiPlayer mode 
 * local player dont have animation character only gun classic for FPShooters.
 * We project position values on remote computer for our character by different nameUniq (netObjId).
 * Setup of `nameUniq` props done in initial/loading stage.
 */
export class Position {
	constructor(x, y, z) {
		this.nameUniq = null;
		this.netObjId = null;
		if(typeof x == 'undefined') {
			x = 0;
		}
		if(typeof y == 'undefined') {
			y = 0;
		}
		if(typeof z == 'undefined') {
			z = 0;
		}
		this.x = x;
		this.y = y;
		this.z = z;

		this.xNetOffset = 0;
		this.yNetOffset = 0;
		this.zNetOffset = 0;

		this.velY = 0;
		this.velX = 0;
		this.velZ = 0;
		this.inMove = false;
		this.targetX = x;
		this.targetY = y;
		this.targetZ = z;
		this.thrust = 0.01;

		this.phySleepOn2digits = false;

		return this;
	}

	setSpeed(n) {
		if(typeof n === 'number') {
			this.thrust = n;
		} else {
			SYS.DEBUG.WARNING('Description: arguments (w, h) must be type of number.');
		}
	}

	translateByX = function(x) {
		this.inMove = true;
		this.targetX = x;
	};

	translateByY(y) {
		this.inMove = true;
		this.targetY = y;
	}

	translateByZ(z) {
		this.inMove = true;
		this.targetZ = z;
	}

	translateByXY(x, y) {
		this.inMove = true;
		this.targetX = x;
		this.targetY = y;
	}

	translateByXZ(x, z) {
		this.inMove = true;
		this.targetX = x;
		this.targetZ = z;
	}

	translateByYZ(y, z) {
		this.inMove = true;
		this.targetY = y;
		this.targetZ = z;
	}

	onTargetPositionReach() {}

	update() {
		var tx = this.targetX - this.x,
			ty = this.targetY - this.y,
			tz = this.targetZ - this.z,
			dist = Math.sqrt(tx * tx + ty * ty + tz * tz);
		this.velX = (tx / dist) * this.thrust;
		this.velY = (ty / dist) * this.thrust;
		this.velZ = (tz / dist) * this.thrust;
		if(this.inMove == true) {
			if(dist > this.thrust) {
				this.x += this.velX;
				this.y += this.velY;
				this.z += this.velZ;

				if(App.scene[this.nameUniq].net.enable == true) net.connection.send({
					netPos: {x: (this.x + this.xNetOffset), y: (this.y + this.yNetOffset), z: (this.z + this.zNetOffset)},
					netObjId: this.netObjId,
				});

			} else {
				this.x = this.targetX;
				this.y = this.targetY;
				this.z = this.targetZ;
				this.inMove = false;
				this.onTargetPositionReach();

				if(App.scene[this.nameUniq].net.enable == true) net.connection.send({
					netPos: {x: this.x, y: this.y, z: this.z},
					netObjId: this.netObjId,
				});
			}
		}
	}

	get worldLocation() {
		return [this.x, this.y, this.z];
	}

	SetX(newx, em) {
		this.x = newx;
		this.targetX = newx;
		this.inMove = false;
		// console.log('test setX net.connection ', net)
		if(typeof em == 'undefined' && App.scene[this.nameUniq] && App.scene[this.nameUniq].net.enable == true) {
			net.connection.send({
				netPos: {x: (this.x + this.xNetOffset), y: (this.y + this.yNetOffset), z: (this.z + this.zNetOffset)},
				netObjId: this.netObjId,
			});
		}
	}

	SetY(newy, em) {
		this.y = newy;
		this.targetY = newy;
		this.inMove = false;
		if(typeof em == 'undefined' && App.scene[this.nameUniq] && App.scene[this.nameUniq].net.enable == true) net.connection.send({
			netPos: {x: (this.x + this.xNetOffset), y: (this.y + this.yNetOffset), z: (this.z + this.zNetOffset)},
			netObjId: this.netObjId,
		});
	}

	SetZ(newz, em) {
		this.z = newz;
		this.targetZ = newz;
		this.inMove = false;
		if(typeof em == 'undefined' && App.scene[this.nameUniq] && App.scene[this.nameUniq].net.enable == true) net.connection.send({
			netPos: {x: (this.x + this.xNetOffset), y: (this.y + this.yNetOffset), z: (this.z + this.zNetOffset)},
			netObjId: this.netObjId,
		});
	}

	setPosition(newx, newy, newz) {
		this.x = newx;
		this.y = newy;
		this.z = newz;
		this.targetX = newx;
		this.targetY = newy;
		this.targetZ = newz;
		this.inMove = false;
		if(typeof em == 'undefined' && App.scene[this.nameUniq] && App.scene[this.nameUniq].net.enable == true) net.connection.send({
			netPos: {x: (this.x + this.xNetOffset), y: (this.y + this.yNetOffset), z: (this.z + this.zNetOffset)},
			netObjId: this.netObjId,
		});
	}
}

export class TriangleVertex {
	constructor(root) {
		this.root = root;
		this.size = root.size;
		this.dynamicBuffer = App.dynamicBuffer;
		this.pointA = new Point(0.0, 1, 0.0);
		this.pointB = new Point(-1, -1, 0);
		this.pointC = new Point(1, -1, 0);
	}

	get vertices() {
		return new Float32Array([
			this.pointA.X,
			this.pointA.Y * this.root.size,
			this.pointA.Z,

			this.pointB.X * this.root.size,
			this.pointB.Y * this.root.size,
			this.pointB.Z,

			this.pointC.X * this.root.size,
			this.pointC.Y * this.root.size,
			this.pointC.Z
		]);
	}

	get indices() {
		return [0, 1, 2]
	}

	setScale(scale) {
		this.size = scale;

		if(typeof em == 'undefined' && App.scene[this.nameUniq] && App.scene[this.nameUniq].net.enable == true) net.connection.send({
			netScale: {scale: scale},
			netObjId: this.nameUniq,
		});

		if(this.dynamicBuffer == true) return;
		App.operation.triangle_buffer_procedure(this.root);
		return "update vertex array prototypical";
	}
}

export class SquareVertex {
	constructor(root) {
		this.root = root;
		this.size = root.size;
		this.pointA = new Point(1, 1, 0);
		this.pointB = new Point(-1, 1, 0);
		this.pointC = new Point(1, -1, 0);
		this.pointD = new Point(-1, -1, 0);

		this.basePoint = 1.0 * this.size;
		this.basePointNeg = -1.0 * this.size;

		this.dynamicBuffer = true;

		this.texCoordsPoints = {
			right_top: new Point(1.0, 1.0, 0),
			left_top: new Point(0.0, 1.0, 0),
			right_bottom: new Point(1.0, 0.0, 0),
			left_bottom: new Point(0.0, 0.0, 0)
		};

		this.colorData = {};
		this.colorData.parent = this.root;
		// default
		this.colorData.color = [new COLOR_ALPHA(1.0, 0.0, 0.0, 1.0), new COLOR_ALPHA(0.0, 1.0, 0.0, 1.0),
		new COLOR_ALPHA(0.5, 0.0, 1.0, 1.0), new COLOR_ALPHA(0.5, 0.5, 1.0, 1.0)];
	}

	get vertices() {
		return new Float32Array([
			this.pointA.X * this.size,
			this.pointA.Y * this.size,
			this.pointA.Z,

			this.pointB.X * this.size,
			this.pointB.Y * this.size,
			this.pointB.Z,

			this.pointC.X * this.size,
			this.pointC.Y * this.size,
			this.pointC.Z,

			this.pointD.X * this.size,
			this.pointD.Y * this.size,
			this.pointD.Z
		]);
	}

	get texCoords() {
		return new Float32Array([
			this.texCoordsPoints.right_top.X,
			this.texCoordsPoints.right_top.Y,
			this.texCoordsPoints.left_top.X,
			this.texCoordsPoints.left_top.Y,
			this.texCoordsPoints.right_bottom.X,
			this.texCoordsPoints.right_bottom.Y,
			this.texCoordsPoints.left_bottom.X,
			this.texCoordsPoints.left_bottom.Y
		]);
	}

	rawIndices = [0, 1, 2, 3, 2, 1];

	get indices() {
		return this.rawIndices;
	}

	// Setters
	setTexCoordScaleFactor(newScaleFactror, em) {
		this.texCoordsPoints.right_top.y = 1 + newScaleFactror;
		this.texCoordsPoints.right_top.x = 1 + newScaleFactror;
		this.texCoordsPoints.left_bottom.x = 0 - newScaleFactror;
		this.texCoordsPoints.left_bottom.y = 0 - newScaleFactror;
		this.texCoordsPoints.left_top.x = 0 - newScaleFactror;
		this.texCoordsPoints.left_top.y = 1 + newScaleFactror;
		this.texCoordsPoints.right_bottom.x = 1 + newScaleFactror;
		this.texCoordsPoints.right_bottom.y = 0 - newScaleFactror;

		if(typeof em == 'undefined' && App.scene[this.nameUniq] && App.scene[this.nameUniq].net.enable == true) net.connection.send({
			texScaleFactor: {newScaleFactror: newScaleFactror},
			netObjId: this.nameUniq,
		});
	}

	setTexCoordScaleXFactor(newScaleFactror, em) {
		this.texCoordsPoints.right_top.y = 1 + newScaleFactror;
		this.texCoordsPoints.left_bottom.y = 0 - newScaleFactror;
		this.texCoordsPoints.left_top.y = 1 + newScaleFactror;
		this.texCoordsPoints.right_bottom.y = 0 - newScaleFactror;
		// if( typeof em === 'undefined') net.connection.send({
		//   texScaleFactor: {newScaleFactror: newScaleFactror},
		//   netObjId: this.nameUniq,
		// });
	}

	setTexCoordScaleYFactor(newScaleFactror, em) {
		this.texCoordsPoints.right_top.x = 1 + newScaleFactror;
		this.texCoordsPoints.left_bottom.x = 0 - newScaleFactror;
		this.texCoordsPoints.left_top.x = 0 - newScaleFactror;
		this.texCoordsPoints.right_bottom.x = 1 + newScaleFactror;
		// if( typeof em === 'undefined') net.connection.send({
		//   texScaleFactor: {newScaleFactror: newScaleFactror},
		//   netObjId: this.nameUniq,
		// });
	}

	setScaleByX(scale, em) {
		this.pointA.x = scale;
		this.pointB.x = -scale;
		this.pointC.x = scale;
		this.pointD.x = -scale;

		if(App.scene[this.nameUniq] && typeof em === 'undefined'
			&& App.scene[this.nameUniq].net.enable == true) net.connection.send({
				netScale: {x: scale},
				netObjId: this.nameUniq,
			});

		if(this.dynamicBuffer == true) return;
		App.operation.square_buffer_procedure(this.root);
		return 'update vertex array prototypical';
	}

	setScaleByY(scale, em) {
		this.pointA.y = scale;
		this.pointB.y = scale;
		this.pointC.y = -scale;
		this.pointD.y = -scale;

		if(App.scene[this.nameUniq] && typeof em === 'undefined'
			&& App.scene[this.nameUniq].net.enable == true) net.connection.send({
				netScale: {y: scale},
				netObjId: this.nameUniq,
			});

		if(this.dynamicBuffer == true) return;
		App.operation.square_buffer_procedure(this.root);
		return 'update vertex array prototypical';
	}

	setScale(scale, em) {
		this.size = scale;

		if(typeof em === 'undefined' && App.scene[this.nameUniq]
			&& App.scene[this.nameUniq].net.enable == true) net.connection.send({
				netScale: {scale: scale},
				netObjId: this.nameUniq
			});

		if(this.dynamicBuffer == true) return;
		App.operation.square_buffer_procedure(this.root);
		return 'update vertex array prototypical';
	}

	get color() {
		var local = [];
		this.colorData.color.forEach((point) => {
			local.push(point.r);
			local.push(point.g);
			local.push(point.b);
			local.push(point.ALPHA());
		});
		return new Float32Array(local);
	}

	setColorSolid(red, green, blue, a) {
		if(typeof a === 'undefined') {
			var a = 1;
		}
		this.colorData.color.forEach((point, index, arr) => {
			arr[index].r = red;
			arr[index].g = green;
			arr[index].b = blue;
			arr[index].a = a;
		});
		App.operation.square_buffer_procedure(this.root);
	}

	setColorComponentRed(red) {
		this.colorData.color.forEach((point, index, arr) => {
			arr[index].r = red;
		});
		App.operation.square_buffer_procedure(this.root);
	}

	setColorComponentGreen(green) {
		this.colorData.color.forEach((point, index, arr) => {
			arr[index].g = green;
		});
		App.operation.square_buffer_procedure(this.root);
	}

	setColorComponentBlue(blue) {
		this.colorData.color.forEach((point, index, arr) => {
			arr[index].b = blue;
		});
		App.operation.square_buffer_procedure(this.root);
	}

}

export class CubeVertex {
	constructor(root) {
		this.root = root;
		this.size = root.size;
		this.basePoint = 1.0 * this.size;
		this.basePointNeg = -1.0 * this.size;
		this.dynamicBuffer = true;
		this.nameUniq = null;

		this.osciTest = new OSCILLATOR(0, 2, 0.002);

		this.texCoordsPoints = {
			front: {
				right_top: new Point(0.0, 0.0, 0),
				left_top: new Point(0.0, 1.0, 0),
				right_bottom: new Point(1.0, 1.0, 0),
				left_bottom: new Point(1.0, 0.0, 0)
			},
			back: {
				right_top: new Point(1.0, 1.0, 0),
				left_top: new Point(1.0, 0.0, 0),
				right_bottom: new Point(0.0, 0.0, 0),
				left_bottom: new Point(0.0, 1.0, 0)
			},
			top: {
				right_top: new Point(1.0, 0.0, 0),
				left_top: new Point(0.0, 0.0, 0),
				right_bottom: new Point(0.0, 1.0, 0),
				left_bottom: new Point(1.0, 1.0, 0)
			},
			bottom: {
				right_top: new Point(0.0, 0.0, 0),
				left_top: new Point(0.0, 1.0, 0),
				right_bottom: new Point(1.0, 1.0, 0),
				left_bottom: new Point(1.0, 0.0, 0)
			},
			right: {
				right_top: new Point(0.0, 0.0, 0),
				left_top: new Point(0.0, 1.0, 0),
				right_bottom: new Point(1.0, 1.0, 0),
				left_bottom: new Point(1.0, 0.0, 0)
			},
			left: {
				right_top: new Point(0.0, 0.0, 0),
				left_top: new Point(0.0, 1.0, 0),
				right_bottom: new Point(1.0, 1.0, 0),
				left_bottom: new Point(1.0, 0.0, 0)
			}
		};

		// for scale by ori
		this.Front = {
			pointA: new Point(0, 0, 0),
			pointB: new Point(0, 0, 0),
			pointC: new Point(0, 0, 0),
			pointD: new Point(0, 0, 0)
		};
		this.Back = {
			pointA: new Point(0, 0, 0),
			pointB: new Point(0, 0, 0),
			pointC: new Point(0, 0, 0),
			pointD: new Point(0, 0, 0)
		};
		this.Top = {
			pointA: new Point(0, 0, 0),
			pointB: new Point(0, 0, 0),
			pointC: new Point(0, 0, 0),
			pointD: new Point(0, 0, 0)
		};
		this.Bottom = {
			pointA: new Point(0, 0, 0),
			pointB: new Point(0, 0, 0),
			pointC: new Point(0, 0, 0),
			pointD: new Point(0, 0, 0)
		};
		this.Right = {
			pointA: new Point(0, 0, 0),
			pointB: new Point(0, 0, 0),
			pointC: new Point(0, 0, 0),
			pointD: new Point(0, 0, 0)
		};
		this.Left = {
			pointA: new Point(0, 0, 0),
			pointB: new Point(0, 0, 0),
			pointC: new Point(0, 0, 0),
			pointD: new Point(0, 0, 0)
		};

		this.colorData = {};
		this.colorData.parent = this.root;
		this.colorData.Front = {
			pointA: new COLOR_ALPHA(1.0, 0.0, 0.0, 1.0),
			pointB: new COLOR_ALPHA(0.0, 1.0, 0.0, 1.0),
			pointC: new COLOR_ALPHA(0.0, 0.0, 1.0, 1.0),
			pointD: new COLOR_ALPHA(0.0, 0.0, 1.0, 1.0)
		};
		this.colorData.Back = {
			pointA: new COLOR_ALPHA(1.0, 0.0, 0.0, 1.0),
			pointB: new COLOR_ALPHA(0.0, 1.0, 0.0, 1.0),
			pointC: new COLOR_ALPHA(0.0, 0.0, 1.0, 1.0),
			pointD: new COLOR_ALPHA(0.0, 0.0, 1.0, 1.0)
		};
		this.colorData.Top = {
			pointA: new COLOR_ALPHA(0.0, 1.0, 0.0, 1.0),
			pointB: new COLOR_ALPHA(0.0, 1.0, 0.0, 1.0),
			pointC: new COLOR_ALPHA(0.0, 0.0, 1.0, 1.0),
			pointD: new COLOR_ALPHA(0.0, 0.0, 1.0, 1.0)
		};
		this.colorData.Bottom = {
			pointA: new COLOR_ALPHA(0.0, 1.0, 0.0, 1.0),
			pointB: new COLOR_ALPHA(0.0, 0.0, 1.0, 1.0),
			pointC: new COLOR_ALPHA(0.0, 1.0, 0.0, 1.0),
			pointD: new COLOR_ALPHA(0.0, 0.0, 1.0, 1.0)
		};
		this.colorData.Right = {
			pointA: new COLOR_ALPHA(1.0, 0.0, 0.0, 1.0),
			pointB: new COLOR_ALPHA(0.0, 0.0, 1.0, 1.0),
			pointC: new COLOR_ALPHA(0.0, 1.0, 0.0, 1.0),
			pointD: new COLOR_ALPHA(0.0, 0.0, 1.0, 1.0)
		};
		this.colorData.Left = {
			pointA: new COLOR_ALPHA(1.0, 0.0, 0.0, 1.0),
			pointB: new COLOR_ALPHA(0.0, 0.0, 1.0, 1.0),
			pointC: new COLOR_ALPHA(0.0, 1.0, 0.0, 1.0),
			pointD: new COLOR_ALPHA(0.0, 0.0, 1.0, 1.0)
		};

		this.colorData.SetRedForAll = function(red_) {
			this.Front.pointA.r = red_;
			this.Front.pointB.r = red_;
			this.Front.pointC.r = red_;
			this.Front.pointD.r = red_;
			this.Right.pointA.r = red_;
			this.Right.pointB.r = red_;
			this.Right.pointC.r = red_;
			this.Right.pointD.r = red_;
			this.Back.pointA.r = red_;
			this.Back.pointB.r = red_;
			this.Back.pointC.r = red_;
			this.Back.pointD.r = red_;
			this.Left.pointA.r = red_;
			this.Left.pointB.r = red_;
			this.Left.pointC.r = red_;
			this.Left.pointD.r = red_;
			this.Bottom.pointA.r = red_;
			this.Bottom.pointB.r = red_;
			this.Bottom.pointC.r = red_;
			this.Bottom.pointD.r = red_;
			this.Top.pointA.r = red_;
			this.Top.pointB.r = red_;
			this.Top.pointC.r = red_;
			this.Top.pointD.r = red_;
			App.operation.cube_buffer_procedure(this.parent);
		};

		this.colorData.SetGreenForAll = function(color_) {
			this.Front.pointA.g = color_;
			this.Front.pointB.g = color_;
			this.Front.pointC.g = color_;
			this.Front.pointD.g = color_;
			this.Right.pointA.g = color_;
			this.Right.pointB.g = color_;
			this.Right.pointC.g = color_;
			this.Right.pointD.g = color_;
			this.Back.pointA.g = color_;
			this.Back.pointB.g = color_;
			this.Back.pointC.g = color_;
			this.Back.pointD.g = color_;
			this.Left.pointA.g = color_;
			this.Left.pointB.g = color_;
			this.Left.pointC.g = color_;
			this.Left.pointD.g = color_;
			this.Bottom.pointA.g = color_;
			this.Bottom.pointB.g = color_;
			this.Bottom.pointC.g = color_;
			this.Bottom.pointD.g = color_;
			this.Top.pointA.g = color_;
			this.Top.pointB.g = color_;
			this.Top.pointC.g = color_;
			this.Top.pointD.g = color_;
			App.operation.cube_buffer_procedure(this.parent);
		};

		this.colorData.SetBlueForAll = function(color_) {
			this.Front.pointA.b = color_;
			this.Front.pointB.b = color_;
			this.Front.pointC.b = color_;
			this.Front.pointD.b = color_;
			this.Right.pointA.b = color_;
			this.Right.pointB.b = color_;
			this.Right.pointC.b = color_;
			this.Right.pointD.b = color_;
			this.Back.pointA.b = color_;
			this.Back.pointB.b = color_;
			this.Back.pointC.b = color_;
			this.Back.pointD.b = color_;
			this.Left.pointA.b = color_;
			this.Left.pointB.b = color_;
			this.Left.pointC.b = color_;
			this.Left.pointD.b = color_;
			this.Bottom.pointA.b = color_;
			this.Bottom.pointB.b = color_;
			this.Bottom.pointC.b = color_;
			this.Bottom.pointD.b = color_;
			this.Top.pointA.b = color_;
			this.Top.pointB.b = color_;
			this.Top.pointC.b = color_;
			this.Top.pointD.b = color_;
			App.operation.cube_buffer_procedure(this.parent);
		};

		this.colorData.SetFrontSolidColor = function(red, green, blue, a) {
			if(typeof a === 'undefined') {var a = 1;}
			this.Front.pointA.r = red;
			this.Front.pointA.g = green;
			this.Front.pointA.b = blue;
			this.Front.pointA.a = a;
			this.Front.pointB.r = red;
			this.Front.pointB.g = green;
			this.Front.pointB.b = blue;
			this.Front.pointB.a = a;
			this.Front.pointC.r = red;
			this.Front.pointC.g = green;
			this.Front.pointC.b = blue;
			this.Front.pointC.a = a;
			this.Front.pointD.r = red;
			this.Front.pointD.g = green;
			this.Front.pointD.b = blue;
			this.Front.pointD.a = a;
			App.operation.cube_buffer_procedure(this.parent);
		};

		this.colorData.SetRightSolidColor = function(red, green, blue, a) {
			if(typeof a === 'undefined') {var a = 1;}
			this.Right.pointA.r = red;
			this.Right.pointA.g = green;
			this.Right.pointA.b = blue;
			this.Right.pointA.a = a;
			this.Right.pointB.r = red;
			this.Right.pointB.g = green;
			this.Right.pointB.b = blue;
			this.Right.pointB.a = a;
			this.Right.pointC.r = red;
			this.Right.pointC.g = green;
			this.Right.pointC.b = blue;
			this.Right.pointC.a = a;
			this.Right.pointD.r = red;
			this.Right.pointD.g = green;
			this.Right.pointD.b = blue;
			this.Right.pointD.a = a;
			App.operation.cube_buffer_procedure(this.parent);
		};

		this.colorData.SetBackSolidColor = function(red, green, blue, a) {
			if(typeof a === 'undefined') {var a = 1;}
			this.Back.pointA.r = red;
			this.Back.pointA.g = green;
			this.Back.pointA.b = blue;
			this.Back.pointA.a = a;
			this.Back.pointB.r = red;
			this.Back.pointB.g = green;
			this.Back.pointB.b = blue;
			this.Back.pointB.a = a;
			this.Back.pointC.r = red;
			this.Back.pointC.g = green;
			this.Back.pointC.b = blue;
			this.Back.pointC.a = a;
			this.Back.pointD.r = red;
			this.Back.pointD.g = green;
			this.Back.pointD.b = blue;
			this.Back.pointD.a = a;
			App.operation.cube_buffer_procedure(this.parent);
		};

		this.colorData.SetLeftSolidColor = function(red, green, blue, a) {
			if(typeof a === 'undefined') {var a = 1;}
			this.Left.pointA.r = red;
			this.Left.pointA.g = green;
			this.Left.pointA.b = blue;
			this.Left.pointA.a = a;
			this.Left.pointB.r = red;
			this.Left.pointB.g = green;
			this.Left.pointB.b = blue;
			this.Left.pointB.a = a;
			this.Left.pointC.r = red;
			this.Left.pointC.g = green;
			this.Left.pointC.b = blue;
			this.Left.pointC.a = a;
			this.Left.pointD.r = red;
			this.Left.pointD.g = green;
			this.Left.pointD.b = blue;
			this.Left.pointD.a = a;
			App.operation.cube_buffer_procedure(this.parent);
		};

		this.colorData.SetBottomSolidColor = function(red, green, blue, a) {
			if(typeof a === 'undefined') {var a = 1;}
			this.Bottom.pointA.r = red;
			this.Bottom.pointA.g = green;
			this.Bottom.pointA.b = blue;
			this.Bottom.pointA.a = a;
			this.Bottom.pointB.r = red;
			this.Bottom.pointB.g = green;
			this.Bottom.pointB.b = blue;
			this.Bottom.pointB.a = a;
			this.Bottom.pointC.r = red;
			this.Bottom.pointC.g = green;
			this.Bottom.pointC.b = blue;
			this.Bottom.pointC.a = a;
			this.Bottom.pointD.r = red;
			this.Bottom.pointD.g = green;
			this.Bottom.pointD.b = blue;
			this.Bottom.pointD.a = a;
			App.operation.cube_buffer_procedure(this.parent);
		};

		this.colorData.SetTopSolidColor = function(red, green, blue, a) {
			if(typeof a === 'undefined') {var a = 1;}
			this.Top.pointA.r = red;
			this.Top.pointA.g = green;
			this.Top.pointA.b = blue;
			this.Top.pointA.a = a;
			this.Top.pointB.r = red;
			this.Top.pointB.g = green;
			this.Top.pointB.b = blue;
			this.Top.pointB.a = a;
			this.Top.pointC.r = red;
			this.Top.pointC.g = green;
			this.Top.pointC.b = blue;
			this.Top.pointC.a = a;
			this.Top.pointD.r = red;
			this.Top.pointD.g = green;
			this.Top.pointD.b = blue;
			this.Top.pointD.a = a;
			App.operation.cube_buffer_procedure(this.parent);
		};

		this.colorData.SetSolidColor = function(red, green, blue, a) {
			this.SetBottomSolidColor(red, green, blue, a);
			this.SetLeftSolidColor(red, green, blue, a);
			this.SetBackSolidColor(red, green, blue, a);
			this.SetRightSolidColor(red, green, blue, a);
			this.SetFrontSolidColor(red, green, blue, a);
			this.SetTopSolidColor(red, green, blue, a);
		}
	}

	setScaleByX(scale, em) {
		// for scale
		this.Left.pointA.x = -scale;
		this.Left.pointB.x = -scale;
		this.Left.pointC.x = -scale;
		this.Left.pointD.x = -scale;
		this.Right.pointA.x = scale;
		this.Right.pointB.x = scale;
		this.Right.pointC.x = scale;
		this.Right.pointD.x = scale;
		this.Top.pointA.x = -scale;
		this.Top.pointB.x = -scale;
		this.Top.pointC.x = scale;
		this.Top.pointD.x = scale;
		this.Bottom.pointA.x = -scale;
		this.Bottom.pointB.x = scale;
		this.Bottom.pointC.x = scale;
		this.Bottom.pointD.x = -scale;
		this.Front.pointA.x = -scale;
		this.Front.pointB.x = scale;
		this.Front.pointC.x = scale;
		this.Front.pointD.x = -scale;
		this.Back.pointA.x = -scale;
		this.Back.pointB.x = -scale;
		this.Back.pointC.x = scale;
		this.Back.pointD.x = scale;

		if(typeof em == 'undefined' && App.scene[this.nameUniq] &&
			App.scene[this.nameUniq].net.enable == true) net.connection.send({
				netScale: {x: scale},
				netObjId: this.nameUniq,
			});

		if(this.dynamicBuffer == true) return;
		App.operation.cube_buffer_procedure(this.root);
		return "update vertex array prototypical";
	}

	setScaleByY(scale, em) {
		//for scale
		this.Left.pointA.y = -scale;
		this.Left.pointB.y = -scale;
		this.Left.pointC.y = scale;
		this.Left.pointD.y = scale;

		this.Right.pointA.y = -scale;
		this.Right.pointB.y = scale;
		this.Right.pointC.y = scale;
		this.Right.pointD.y = -scale;

		this.Top.pointA.y = scale;
		this.Top.pointB.y = scale;
		this.Top.pointC.y = scale;
		this.Top.pointD.y = scale;

		this.Bottom.pointA.y = -scale;
		this.Bottom.pointB.y = -scale;
		this.Bottom.pointC.y = -scale;
		this.Bottom.pointD.y = -scale;

		this.Front.pointA.y = -scale;
		this.Front.pointB.y = -scale;
		this.Front.pointC.y = scale;
		this.Front.pointD.y = scale;

		this.Back.pointA.y = -scale;
		this.Back.pointB.y = scale;
		this.Back.pointC.y = scale;
		this.Back.pointD.y = -scale;

		if(typeof em == 'undefined' && App.scene[this.nameUniq] &&
			App.scene[this.nameUniq].net.enable == true) net.connection.send({
				netScale: {y: scale},
				netObjId: this.nameUniq,
			});

		if(this.dynamicBuffer == true) return;
		App.operation.cube_buffer_procedure(this.root);
		return "update vertex array prototypical";
	}

	setScaleByZ(scale, em) {
		this.Left.pointA.z = -scale;
		this.Left.pointB.z = scale;
		this.Left.pointC.z = scale;
		this.Left.pointD.z = -scale;

		this.Right.pointA.z = -scale;
		this.Right.pointB.z = -scale;
		this.Right.pointC.z = scale;
		this.Right.pointD.z = scale;

		this.Top.pointA.z = -scale;
		this.Top.pointB.z = scale;
		this.Top.pointC.z = scale;
		this.Top.pointD.z = -scale;

		this.Bottom.pointA.z = -scale;
		this.Bottom.pointB.z = -scale;
		this.Bottom.pointC.z = scale;
		this.Bottom.pointD.z = scale;

		this.Front.pointA.z = scale;
		this.Front.pointB.z = scale;
		this.Front.pointC.z = scale;
		this.Front.pointD.z = scale;

		this.Back.pointA.z = -scale;
		this.Back.pointB.z = -scale;
		this.Back.pointC.z = -scale;
		this.Back.pointD.z = -scale;

		if(typeof em == 'undefined' && App.scene[this.nameUniq]
			&& App.scene[this.nameUniq].net.enable == true) net.connection.send({
				netScale: {z: scale},
				netObjId: this.nameUniq,
			});

		if(this.dynamicBuffer == true) return;
		App.operation.cube_buffer_procedure(this.root);
		return "update vertex array prototypical";
	}

	setScale(scale, em) {
		this.size = scale;
		this.basePoint = 1.0 * this.size;
		this.basePointNeg = -1.0 * this.size;

		if(typeof em === 'undefined' && App.scene[this.nameUniq] &&
			App.scene[this.nameUniq].net.enable == true) net.connection.send({
				netScale: {scale: scale},
				netObjId: this.nameUniq,
			});

		if(this.dynamicBuffer == true) return;
		App.operation.cube_buffer_procedure(this.root);
		return "update vertex array prototypical";
	}

	setTexCoordScaleFactor(newScaleFactror, em) {
		function calculate(checkValue) {
			if(checkValue <= 0) {
				return -1;
			} else {
				return 1;
			}
		}

		for(var key in this.texCoordsPoints) {
			this.texCoordsPoints[key].right_top.y =
				this.texCoordsPoints[key].right_top.y +
				newScaleFactror * calculate(this.texCoordsPoints[key].right_top.y);
			this.texCoordsPoints[key].right_top.x =
				this.texCoordsPoints[key].right_top.x +
				newScaleFactror * calculate(this.texCoordsPoints[key].right_top.x);
			this.texCoordsPoints[key].left_bottom.x =
				this.texCoordsPoints[key].left_bottom.x +
				newScaleFactror * calculate(this.texCoordsPoints[key].left_bottom.x);
			this.texCoordsPoints[key].left_bottom.y =
				this.texCoordsPoints[key].left_bottom.y +
				newScaleFactror * calculate(this.texCoordsPoints[key].left_bottom.y);
			this.texCoordsPoints[key].left_top.x =
				this.texCoordsPoints[key].left_top.x +
				newScaleFactror * calculate(this.texCoordsPoints[key].left_top.x);
			this.texCoordsPoints[key].left_top.y =
				this.texCoordsPoints[key].left_top.y +
				newScaleFactror * calculate(this.texCoordsPoints[key].left_top.y);
			this.texCoordsPoints[key].right_bottom.x =
				this.texCoordsPoints[key].right_bottom.x +
				newScaleFactror * calculate(this.texCoordsPoints[key].right_bottom.x);
			this.texCoordsPoints[key].right_bottom.y =
				this.texCoordsPoints[key].right_bottom.y +
				newScaleFactror * calculate(this.texCoordsPoints[key].right_bottom.y);
		}
		if(typeof em == 'undefined' && App.scene[this.nameUniq]
			&& App.scene[this.nameUniq].net.enable == true) net.connection.send({
				texScaleFactor: {newScaleFactror: newScaleFactror},
				netObjId: this.nameUniq,
			})
	}

	setTexCoordScaleYFactor(newScaleFactror, em) {
		function calculate(checkValue) {
			if(checkValue <= 0) {
				return -1;
			} else {
				return 1;
			}
		}

		for(var key in this.texCoordsPoints) {
			// this.texCoordsPoints[key].right_top.y =
			//   this.texCoordsPoints[key].right_top.y +
			//   newScaleFactror * calculate(this.texCoordsPoints[key].right_top.y);
			this.texCoordsPoints[key].right_top.x =
				this.texCoordsPoints[key].right_top.x +
				newScaleFactror * calculate(this.texCoordsPoints[key].right_top.x);
			this.texCoordsPoints[key].left_bottom.x =
				this.texCoordsPoints[key].left_bottom.x +
				newScaleFactror * calculate(this.texCoordsPoints[key].left_bottom.x);
			// this.texCoordsPoints[key].left_bottom.y =
			//   this.texCoordsPoints[key].left_bottom.y +
			//   newScaleFactror * calculate(this.texCoordsPoints[key].left_bottom.y);
			this.texCoordsPoints[key].left_top.x =
				this.texCoordsPoints[key].left_top.x +
				newScaleFactror * calculate(this.texCoordsPoints[key].left_top.x);
			// this.texCoordsPoints[key].left_top.y =
			//   this.texCoordsPoints[key].left_top.y +
			//   newScaleFactror * calculate(this.texCoordsPoints[key].left_top.y);
			this.texCoordsPoints[key].right_bottom.x =
				this.texCoordsPoints[key].right_bottom.x +
				newScaleFactror * calculate(this.texCoordsPoints[key].right_bottom.x);
			// this.texCoordsPoints[key].right_bottom.y =
			//   this.texCoordsPoints[key].right_bottom.y +
			//   newScaleFactror * calculate(this.texCoordsPoints[key].right_bottom.y);
		}

		// if( typeof em === 'undefined') net.connection.send({
		//   texScaleFactor: {newScaleFactror: newScaleFactror},
		//   netObjId: this.nameUniq,
		// });

	}

	setTexCoordScaleXFactor(newScaleFactror, em) {
		function calculate(checkValue) {
			if(checkValue <= 0) {
				return -1;
			} else {
				return 1;
			}
		}

		for(var key in this.texCoordsPoints) {
			this.texCoordsPoints[key].right_top.y =
				this.texCoordsPoints[key].right_top.y +
				newScaleFactror * calculate(this.texCoordsPoints[key].right_top.y);
			this.texCoordsPoints[key].left_bottom.y =
				this.texCoordsPoints[key].left_bottom.y +
				newScaleFactror * calculate(this.texCoordsPoints[key].left_bottom.y);
			this.texCoordsPoints[key].left_top.y =
				this.texCoordsPoints[key].left_top.y +
				newScaleFactror * calculate(this.texCoordsPoints[key].left_top.y);
			this.texCoordsPoints[key].right_bottom.y =
				this.texCoordsPoints[key].right_bottom.y +
				newScaleFactror * calculate(this.texCoordsPoints[key].right_bottom.y);
		}

		// if( typeof em === 'undefined') net.connection.send({
		//   texScaleFactor: {newScaleFactror: newScaleFactror},
		//   netObjId: this.nameUniq,
		// });

	}

	get vertices() {
		return new Float32Array([
			// Front face
			this.basePointNeg + this.Front.pointA.X,
			this.basePointNeg + this.Front.pointA.Y,
			this.basePoint + this.Front.pointA.Z,
			this.basePoint + this.Front.pointB.X,
			this.basePointNeg + this.Front.pointB.Y,
			this.basePoint + this.Front.pointB.Z,
			this.basePoint + this.Front.pointC.X,
			this.basePoint + this.Front.pointC.Y,
			this.basePoint + this.Front.pointC.Z,
			this.basePointNeg + this.Front.pointD.X,
			this.basePoint + this.Front.pointD.Y,
			this.basePoint + this.Front.pointD.Z,
			// Back face
			this.basePointNeg + this.Back.pointA.X,
			this.basePointNeg + this.Back.pointA.Y,
			this.basePointNeg + this.Back.pointA.Z,
			this.basePointNeg + this.Back.pointB.X,
			this.basePoint + this.Back.pointB.Y,
			this.basePointNeg + this.Back.pointB.Z,
			this.basePoint + this.Back.pointC.X,
			this.basePoint + this.Back.pointC.Y,
			this.basePointNeg + this.Back.pointC.Z,
			this.basePoint + this.Back.pointD.X,
			this.basePointNeg + this.Back.pointD.Y,
			this.basePointNeg + this.Back.pointD.Z,
			// Top face
			this.basePointNeg + this.Top.pointA.X,
			this.basePoint + this.Top.pointA.Y,
			this.basePointNeg + this.Top.pointA.Z,
			this.basePointNeg + this.Top.pointB.X,
			this.basePoint + this.Top.pointB.Y,
			this.basePoint + this.Top.pointB.Z,
			this.basePoint + this.Top.pointC.X,
			this.basePoint + this.Top.pointC.Y,
			this.basePoint + this.Top.pointC.Z,
			this.basePoint + this.Top.pointD.X,
			this.basePoint + this.Top.pointD.Y,
			this.basePointNeg + this.Top.pointD.Z,
			// Bottom face
			this.basePointNeg + this.Bottom.pointA.X,
			this.basePointNeg + this.Bottom.pointA.Y,
			this.basePointNeg + this.Bottom.pointA.Z,
			this.basePoint + this.Bottom.pointB.X,
			this.basePointNeg + this.Bottom.pointB.Y,
			this.basePointNeg + this.Bottom.pointB.Z,
			this.basePoint + this.Bottom.pointC.X,
			this.basePointNeg + this.Bottom.pointC.Y,
			this.basePoint + this.Bottom.pointC.Z,
			this.basePointNeg + this.Bottom.pointD.X,
			this.basePointNeg + this.Bottom.pointD.Y,
			this.basePoint + this.Bottom.pointD.Z,
			// Right face
			this.basePoint + this.Right.pointA.X,
			this.basePointNeg + this.Right.pointA.Y,
			this.basePointNeg + this.Right.pointA.Z,
			this.basePoint + this.Right.pointB.X,
			this.basePoint + this.Right.pointB.Y,
			this.basePointNeg + this.Right.pointB.Z,
			this.basePoint + this.Right.pointC.X,
			this.basePoint + this.Right.pointC.Y,
			this.basePoint + this.Right.pointC.Z,
			this.basePoint + this.Right.pointD.X,
			this.basePointNeg + this.Right.pointD.Y,
			this.basePoint + this.Right.pointD.Z,
			// Left face
			this.basePointNeg + this.Left.pointA.X,
			this.basePointNeg + this.Left.pointA.Y,
			this.basePointNeg + this.Left.pointA.Z,
			this.basePointNeg + this.Left.pointB.X,
			this.basePointNeg + this.Left.pointB.Y,
			this.basePoint + this.Left.pointB.Z,
			this.basePointNeg + this.Left.pointC.X,
			this.basePoint + this.Left.pointC.Y,
			this.basePoint + this.Left.pointC.Z,
			this.basePointNeg + this.Left.pointD.X,
			this.basePoint + this.Left.pointD.Y,
			this.basePointNeg + this.Left.pointD.Z
		]);
	}

	get texCoords() {
		return new Float32Array([
			// Front face
			this.texCoordsPoints.front.right_top.X,
			this.texCoordsPoints.front.right_top.Y,
			this.texCoordsPoints.front.left_top.X,
			this.texCoordsPoints.front.left_top.Y,
			this.texCoordsPoints.front.right_bottom.X,
			this.texCoordsPoints.front.right_bottom.Y,
			this.texCoordsPoints.front.left_bottom.X,
			this.texCoordsPoints.front.left_bottom.Y,
			// Back face
			this.texCoordsPoints.back.right_top.X,
			this.texCoordsPoints.back.right_top.Y,
			this.texCoordsPoints.back.left_top.X,
			this.texCoordsPoints.back.left_top.Y,
			this.texCoordsPoints.back.right_bottom.X,
			this.texCoordsPoints.back.right_bottom.Y,
			this.texCoordsPoints.back.left_bottom.X,
			this.texCoordsPoints.back.left_bottom.Y,
			// Top face
			this.texCoordsPoints.top.right_top.X,
			this.texCoordsPoints.top.right_top.Y,
			this.texCoordsPoints.top.left_top.X,
			this.texCoordsPoints.top.left_top.Y,
			this.texCoordsPoints.top.right_bottom.X,
			this.texCoordsPoints.top.right_bottom.Y,
			this.texCoordsPoints.top.left_bottom.X,
			this.texCoordsPoints.top.left_bottom.Y,
			// Bottom face
			this.texCoordsPoints.bottom.right_top.X,
			this.texCoordsPoints.bottom.right_top.Y,
			this.texCoordsPoints.bottom.left_top.X,
			this.texCoordsPoints.bottom.left_top.Y,
			this.texCoordsPoints.bottom.right_bottom.X,
			this.texCoordsPoints.bottom.right_bottom.Y,
			this.texCoordsPoints.bottom.left_bottom.X,
			this.texCoordsPoints.bottom.left_bottom.Y,
			// Right face
			this.texCoordsPoints.right.right_top.X,
			this.texCoordsPoints.right.right_top.Y,
			this.texCoordsPoints.right.left_top.X,
			this.texCoordsPoints.right.left_top.Y,
			this.texCoordsPoints.right.right_bottom.X,
			this.texCoordsPoints.right.right_bottom.Y,
			this.texCoordsPoints.right.left_bottom.X,
			this.texCoordsPoints.right.left_bottom.Y,
			// Left face
			this.texCoordsPoints.left.right_top.X,
			this.texCoordsPoints.left.right_top.Y,
			this.texCoordsPoints.left.left_top.X,
			this.texCoordsPoints.left.left_top.Y,
			this.texCoordsPoints.left.right_bottom.X,
			this.texCoordsPoints.left.right_bottom.Y,
			this.texCoordsPoints.left.left_bottom.X,
			this.texCoordsPoints.left.left_bottom.Y
		]);
	}

	get indices() {
		return [
			0, 1, 2, 0, 2, 3, // front
			4, 5, 6, 4, 6, 7, // back
			8, 9, 10, 8, 10, 11, // top
			12, 13, 14, 12, 14, 15, // bottom
			16, 17, 18, 16, 18, 19, // right
			20, 21, 22, 20, 22, 23 // left
		];
	}

	get color() {
		return new Float32Array([
			// Front face
			this.colorData.Front.pointA.r,
			this.colorData.Front.pointA.g,
			this.colorData.Front.pointA.b,
			this.colorData.Front.pointA.ALPHA(),
			this.colorData.Front.pointB.r,
			this.colorData.Front.pointB.g,
			this.colorData.Front.pointB.b,
			this.colorData.Front.pointB.ALPHA(),
			this.colorData.Front.pointC.r,
			this.colorData.Front.pointC.g,
			this.colorData.Front.pointC.b,
			this.colorData.Front.pointC.ALPHA(),
			this.colorData.Front.pointD.r,
			this.colorData.Front.pointD.g,
			this.colorData.Front.pointD.b,
			this.colorData.Front.pointD.ALPHA(),
			// Right face
			this.colorData.Right.pointA.r,
			this.colorData.Right.pointA.g,
			this.colorData.Right.pointA.b,
			this.colorData.Right.pointA.ALPHA(),
			this.colorData.Right.pointB.r,
			this.colorData.Right.pointB.g,
			this.colorData.Right.pointB.b,
			this.colorData.Right.pointB.ALPHA(),
			this.colorData.Right.pointC.r,
			this.colorData.Right.pointC.g,
			this.colorData.Right.pointC.b,
			this.colorData.Right.pointC.ALPHA(),
			this.colorData.Right.pointD.r,
			this.colorData.Right.pointD.g,
			this.colorData.Right.pointD.b,
			this.colorData.Right.pointD.ALPHA(),
			// Back face
			this.colorData.Back.pointA.r,
			this.colorData.Back.pointA.g,
			this.colorData.Back.pointA.b,
			this.colorData.Back.pointA.ALPHA(),
			this.colorData.Back.pointB.r,
			this.colorData.Back.pointB.g,
			this.colorData.Back.pointB.b,
			this.colorData.Back.pointB.ALPHA(),
			this.colorData.Back.pointC.r,
			this.colorData.Back.pointC.g,
			this.colorData.Back.pointC.b,
			this.colorData.Back.pointC.ALPHA(),
			this.colorData.Back.pointD.r,
			this.colorData.Back.pointD.g,
			this.colorData.Back.pointD.b,
			this.colorData.Back.pointD.ALPHA(),
			// Left face
			this.colorData.Left.pointA.r,
			this.colorData.Left.pointA.g,
			this.colorData.Left.pointA.b,
			this.colorData.Left.pointA.ALPHA(),
			this.colorData.Left.pointB.r,
			this.colorData.Left.pointB.g,
			this.colorData.Left.pointB.b,
			this.colorData.Left.pointB.ALPHA(),
			this.colorData.Left.pointC.r,
			this.colorData.Left.pointC.g,
			this.colorData.Left.pointC.b,
			this.colorData.Left.pointC.ALPHA(),
			this.colorData.Left.pointD.r,
			this.colorData.Left.pointD.g,
			this.colorData.Left.pointD.b,
			this.colorData.Left.pointD.ALPHA(),
			// Bottom left
			this.colorData.Bottom.pointA.r,
			this.colorData.Bottom.pointA.g,
			this.colorData.Bottom.pointA.b,
			this.colorData.Bottom.pointA.ALPHA(),
			this.colorData.Bottom.pointB.r,
			this.colorData.Bottom.pointB.g,
			this.colorData.Bottom.pointB.b,
			this.colorData.Bottom.pointB.ALPHA(),
			this.colorData.Bottom.pointC.r,
			this.colorData.Bottom.pointC.g,
			this.colorData.Bottom.pointC.b,
			this.colorData.Bottom.pointC.ALPHA(),
			this.colorData.Bottom.pointD.r,
			this.colorData.Bottom.pointD.g,
			this.colorData.Bottom.pointD.b,
			this.colorData.Bottom.pointD.ALPHA(),
			// Bottom right BottomRight
			this.colorData.Top.pointA.r,
			this.colorData.Top.pointA.g,
			this.colorData.Top.pointA.b,
			this.colorData.Top.pointA.ALPHA(),
			this.colorData.Top.pointB.r,
			this.colorData.Top.pointB.g,
			this.colorData.Top.pointB.b,
			this.colorData.Top.pointB.ALPHA(),
			this.colorData.Top.pointC.r,
			this.colorData.Top.pointC.g,
			this.colorData.Top.pointC.b,
			this.colorData.Top.pointC.ALPHA(),
			this.colorData.Top.pointD.r,
			this.colorData.Top.pointD.g,
			this.colorData.Top.pointD.b,
			this.colorData.Top.pointD.ALPHA()
		]);
	}
}

export class PiramideVertex {
	constructor(root) {
		this.root = root;
		this.size = root.size;

		this.dynamicBuffer = true;
		this.spitz = 0;
		this.basePoint = 1.0 * this.size;
		this.basePointNeg = -1.0 * this.size;

		this.colorData = {};
		this.colorData.parent = this.root;

		this.colorData.Front = {
			pointA: new COLOR_ALPHA(1.0, 0.0, 0.0, 1.0),
			pointB: new COLOR_ALPHA(0.0, 1.0, 0.0, 1.0),
			pointC: new COLOR_ALPHA(0.0, 0.0, 1.0, 1.0)
		};
		this.colorData.Back = {
			pointA: new COLOR_ALPHA(1.0, 0.0, 0.0, 1.0),
			pointB: new COLOR_ALPHA(0.0, 1.0, 0.0, 1.0),
			pointC: new COLOR_ALPHA(0.0, 0.0, 1.0, 1.0)
		};
		this.colorData.BottomRight = {
			pointA: new COLOR_ALPHA(0.0, 1.0, 0.0, 1.0),
			pointB: new COLOR_ALPHA(0.0, 1.0, 0.0, 1.0),
			pointC: new COLOR_ALPHA(0.0, 0.0, 1.0, 1.0)
		};
		this.colorData.Bottom = {
			pointA: new COLOR_ALPHA(0.0, 1.0, 0.0, 1.0),
			pointB: new COLOR_ALPHA(0.0, 0.0, 1.0, 1.0),
			pointC: new COLOR_ALPHA(0.0, 1.0, 0.0, 1.0)
		};
		this.colorData.Right = {
			pointA: new COLOR_ALPHA(1.0, 0.0, 0.0, 1.0),
			pointB: new COLOR_ALPHA(0.0, 0.0, 1.0, 1.0),
			pointC: new COLOR_ALPHA(0.0, 1.0, 0.0, 1.0)
		};
		this.colorData.Left = {
			pointA: new COLOR_ALPHA(1.0, 0.0, 0.0, 1.0),
			pointB: new COLOR_ALPHA(0.0, 0.0, 1.0, 1.0),
			pointC: new COLOR_ALPHA(0.0, 1.0, 0.0, 1.0)
		};

		this.colorData.SetRedForAll = function(red_) {
			// Front
			this.Front.pointA.r = red_;
			this.Front.pointB.r = red_;
			this.Front.pointC.r = red_;
			// Right
			this.Right.pointA.r = red_;
			this.Right.pointB.r = red_;
			this.Right.pointC.r = red_;
			// Back
			this.Back.pointA.r = red_;
			this.Back.pointB.r = red_;
			this.Back.pointC.r = red_;
			// Left
			this.Left.pointA.r = red_;
			this.Left.pointB.r = red_;
			this.Left.pointC.r = red_;
			// Bottom left
			this.Bottom.pointA.r = red_;
			this.Bottom.pointB.r = red_;
			this.Bottom.pointC.r = red_;
			// Bottom right
			this.BottomRight.pointA.r = red_;
			this.BottomRight.pointB.r = red_;
			this.BottomRight.pointC.r = red_;

			App.operation.piramide_buffer_procedure(this.parent);
		};

		this.colorData.SetGreenForAll = function(color_) {
			// Front face
			this.Front.pointA.g = color_;
			this.Front.pointB.g = color_;
			this.Front.pointC.g = color_;
			// Right face
			this.Right.pointA.g = color_;
			this.Right.pointB.g = color_;
			this.Right.pointC.g = color_;
			// Back face
			this.Back.pointA.g = color_;
			this.Back.pointB.g = color_;
			this.Back.pointC.g = color_;
			// Left face
			this.Left.pointA.g = color_;
			this.Left.pointB.g = color_;
			this.Left.pointC.g = color_;
			// Bottom left
			this.Bottom.pointA.g = color_;
			this.Bottom.pointB.g = color_;
			this.Bottom.pointC.g = color_;
			// Bottom right BottomRight
			this.BottomRight.pointA.g = color_;
			this.BottomRight.pointB.g = color_;
			this.BottomRight.pointC.g = color_;

			App.operation.piramide_buffer_procedure(this.parent);
		};

		this.colorData.SetBlueForAll = function(color_) {
			// Front face
			this.Front.pointA.b = color_;
			this.Front.pointB.b = color_;
			this.Front.pointC.b = color_;
			// Right face
			this.Right.pointA.b = color_;
			this.Right.pointB.b = color_;
			this.Right.pointC.b = color_;
			// Back face
			this.Back.pointA.b = color_;
			this.Back.pointB.b = color_;
			this.Back.pointC.b = color_;
			// Left face
			this.Left.pointA.b = color_;
			this.Left.pointB.b = color_;
			this.Left.pointC.b = color_;
			// Bottom left
			this.Bottom.pointA.b = color_;
			this.Bottom.pointB.b = color_;
			this.Bottom.pointC.b = color_;
			// Bottom right BottomRight
			this.BottomRight.pointA.b = color_;
			this.BottomRight.pointB.b = color_;
			this.BottomRight.pointC.b = color_;
			App.operation.piramide_buffer_procedure(this.parent);
		};
	}

	setScale(scale, em) {
		this.size = scale;

		this.basePoint = 1.0 * this.size;
		this.basePointNeg = -1.0 * this.size;

		if(typeof em === 'undefined' && App.scene[this.nameUniq] &&
			App.scene[this.nameUniq].net.enable == true) net.connection.send({
				netScale: {scale: scale},
				netObjId: this.nameUniq,
			});

		if(this.dynamicBuffer == true) return;
		App.operation.piramide_buffer_procedure(this.root);
		return "update vertex array prototypical";
	}

	setSpitz(newValueFloat, em) {
		this.spitz = newValueFloat;

		if(typeof em == 'undefined' && App.scene[this.nameUniq] &&
			App.scene[this.nameUniq].net.enable == true) net.connection.send({
				spitz: {newValueFloat: newValueFloat},
				netObjId: this.nameUniq,
			});

		if(this.dynamicBuffer == true) return;
		App.operation.piramide_buffer_procedure(this.root);
	}
	//from cube
	get verticesC() {
		return new Float32Array([
			// Front face
			-1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 0.0, 15.0, 0.0, 0.0, 15.0, 0.0,
			// Back face
			-1.0, -1.0, -1.0, 0.0, 15.0, 0.0, 0.0, 15.0, 0.0, 1.0, -1.0, -1.0,
			// Top face
			0.0, 15.0, 0.0, 0.0, 15.0, 0.0, 0.0, 15.0, 0.0, 0.0, 15.0, 0.0,
			// Bottom face
			-1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,
			// Right face
			1.0, -1.0, -1.0, 0.0, 15.0, 0.0, 0.0, 15.0, 0.0, 1.0, -1.0, 1.0,
			// Left face
			-1.0, -1.0, -1.0, -1.0, -1.0, 1.0, 0.0, 15.0, 0.0, 0.0, 15.0, 0.0
		]);
	}

	get normals() {
		// from cube
		return new Float32Array([
			// Front face
			0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,
			// Back face
			0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0,
			// Top face
			0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,
			// Bottom face
			0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,
			// Right