matrix-engine
Version:
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
1,160 lines (1,116 loc) • 1.52 MB
JavaScript
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
"use strict";
var matrixEngine = _interopRequireWildcard(require("./index.js"));
var _basic_timeline = require("./apps/basic_timeline.js");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
// CHANGE HERE IF YOU WANNA USE app-build.hmtl
// import {runThis} from './apps/destruct_cube.js';
var world;
var App = matrixEngine.App;
window.addEventListener('load', function (e) {
if ('serviceWorker' in navigator) {
// navigator.serviceWorker.register('worker.js'); DISABLED
} else {
console.warn('Matrix Engine: No webWorkers for locahost OR No support for web workers in this browser.');
}
App.ready = true;
matrixEngine.Engine.initApp(webGLStart);
});
window.webGLStart = () => {
window.App = App;
world = matrixEngine.matrixWorld.defineworld(canvas);
world.callReDraw();
(0, _basic_timeline.runThis)(world);
};
window.matrixEngine = matrixEngine;
var App = matrixEngine.App;
},{"./apps/basic_timeline.js":3,"./index.js":5}],2:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.bvhAnimations = void 0;
/** Auto generated file */
var bvhAnimations = exports.bvhAnimations = ['./res/bvh/Female1_A01_Stand.bvh', './res/bvh/Female1_A02_Sway.bvh', './res/bvh/Female1_A02_SwayT2.bvh', './res/bvh/Female1_A03_Swing.bvh', './res/bvh/Female1_A03_SwingT2.bvh', './res/bvh/Female1_A04_Look.bvh', './res/bvh/Female1_A05_PickUpBox.bvh', './res/bvh/Female1_A06_LiftBox.bvh', './res/bvh/Female1_A06_LiftBoxT2.bvh', './res/bvh/Female1_A07_Crouch.bvh', './res/bvh/Female1_A08_CrouchToLie.bvh', './res/bvh/Female1_A09_LieT2.bvh', './res/bvh/Female1_A10_LieToCrouch.bvh', './res/bvh/Female1_A11_CrawlForward.bvh', './res/bvh/Female1_A12_CrawlBackwards.bvh', './res/bvh/Female1_A13_Skipping.bvh', './res/bvh/Female1_A14_StandToSkip.bvh', './res/bvh/Female1_A15_SkipToStand.bvh', './res/bvh/Female1_B01_StandToWalk.bvh', './res/bvh/Female1_B02_WalkToStand.bvh', './res/bvh/Female1_B02_WalkToStandT2.bvh', './res/bvh/Female1_B03_Walk1.bvh', './res/bvh/Female1_B04_StandToWalkBack.bvh', './res/bvh/Female1_B05_WalkBackwards.bvh', './res/bvh/Female1_B06_WalkBackwardsToStand.bvh', './res/bvh/Female1_B07_WalkBackwardsTurnForwards.bvh', './res/bvh/Female1_B08_WalkBackwardsStopForwards.bvh', './res/bvh/Female1_B09_WalkTurnLeft90.bvh', './res/bvh/Female1_B10_WalkTurnLeft45.bvh', './res/bvh/Female1_B11_WalkTurnLeft135.bvh', './res/bvh/Female1_B12_WalkTurnRight90.bvh', './res/bvh/Female1_B13_WalkTurnRight45.bvh', './res/bvh/Female1_B14_WalkTurnRight135.bvh', './res/bvh/Female1_B15_WalkTurnAround180.bvh', './res/bvh/Female1_B16_WalkTurnChangeDirection.bvh', './res/bvh/Female1_B17_WalkToHopToWalk1.bvh', './res/bvh/Female1_B18_WalkToLeapToWalk.bvh', './res/bvh/Female1_B19_WalkToPickUpBox.bvh', './res/bvh/Female1_B20_WalkWithBox.bvh', './res/bvh/Female1_B21_PutDownBoxToWalk.bvh', './res/bvh/Female1_B21_S2_PutDownBoxToWalk.bvh', './res/bvh/Female1_B21_S3_PutDownBoxToWalk.bvh', './res/bvh/Female1_B22_SideStepLeft.bvh', './res/bvh/Female1_B23_SideStepRight.bvh', './res/bvh/Female1_B24_WalkToCrouch.bvh', './res/bvh/Female1_B25_CrouchToWalk.bvh', './res/bvh/Female1_B26_WalkToSkip.bvh', './res/bvh/Female1_B27_SkipToWalk1.bvh', './res/bvh/Female1_C02_RunToStand.bvh', './res/bvh/Female1_C03_Run.bvh', './res/bvh/Female1_C04_RunToWalk1.bvh', './res/bvh/Female1_C05_WalkToRun.bvh', './res/bvh/Female1_C06_StandToRunBackwards.bvh', './res/bvh/Female1_C07_RunBackwards.bvh', './res/bvh/Female1_C08_RunBackwardsToStand.bvh', './res/bvh/Female1_C09_RunBackwardsTurnRunForward.bvh', './res/bvh/Female1_C10_RunBackwardsStopRunForward.bvh', './res/bvh/Female1_C11_RunTurnLeft90.bvh', './res/bvh/Female1_C12_RunTurnLeft45.bvh', './res/bvh/Female1_C13_RunTurnLeft135.bvh', './res/bvh/Female1_C14_RunTurnRight90.bvh', './res/bvh/Female1_C15_RunTurnRight45.bvh', './res/bvh/Female1_C16_RunTurnRight135.bvh', './res/bvh/Female1_C17_RunTurnAround.bvh', './res/bvh/Female1_C18_RunChangeDirection.bvh', './res/bvh/Female1_C19_RunToHopToWalk.bvh', './res/bvh/Female1_C20_RunToJumpToWalk.bvh', './res/bvh/Female1_C21_RunToPickUpBox.bvh', './res/bvh/Female1_C21_S2_RunToPickUpBox.bvh', './res/bvh/Female1_C22_RunWithBox.bvh', './res/bvh/Female1_C23_PutDownBoxToRun.bvh', './res/bvh/Female1_C24_SideStepLeft.bvh', './res/bvh/Female1_C25_SideStepRight.bvh', './res/bvh/Female1_C26_RunToCrouch.bvh', './res/bvh/Female1_C27_CrouchToRun1.bvh', './res/bvh/Female1_D1_Urban.bvh', './res/bvh/Female1_D2_Wait.bvh', './res/bvh/Female1_D3_ConversationGestures.bvh', './res/bvh/Female1_D4_RandomStuff.bvh', './res/bvh/Female1_D5_RandomStuff2.bvh', './res/bvh/Female1_D6_CartWheel.bvh', './res/bvh/readme.txt'];
},{}],3:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.runThis = void 0;
var _manifest = _interopRequireDefault(require("../program/manifest"));
var _animationsList = require("./animations-list");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* @description Usage of world global timeline/animationline.
*/
var runThis = world => {
// Camera
_manifest.default.camera.SceneController = true;
// TEST ANIMATIONLINE
matrixEngine.matrixWorld.world.useAnimationLine({
sequenceSize: 200,
totalSequence: 10
});
// need to be removed from bvh-loader npm package!
var logHTML = document.createElement('div');
logHTML.id = 'log';
// logHTML.style.position = 'absolute';
document.body.appendChild(logHTML);
const createAnimation = index => {
const options = {
boneNameBasePrefix: 'firstAnim' + index,
world: world,
// [Required]
autoPlay: true,
// [Optimal]
showOnLoad: false,
// [Optimal] if autoPLay is true then showOnLoad is inactive.
type: 'ANIMATION',
// [Optimal] 'ANIMATION' | "TPOSE'
loop: 'playInverse',
// [Optimal] true | 'stopOnEnd' | 'playInverse' | 'stopAndReset'
globalOffset: [0, -220, -220],
// [Optimal]
skeletalBoneScale: 3,
// [Optimal]
/*skeletalBlend: { // [Optimal] remove arg for no blend
paramDest: 4,
paramSrc: 4
},*/
speed: 5,
boneTex: {
source: ["res/images/sky/blue.jpg"],
mix_operation: "multiply"
},
drawTypeBone: "triangle" // pyramid | triangle | cube | square | squareTex | cubeLightTex | sphereLightTex
};
// window.bvhAnimations = bvhAnimations;
// console.log(" @!!!!bvhAnimations[0] 2>>> ", bvhAnimations);
return new matrixEngine.MEBvhAnimation(_animationsList.bvhAnimations[index], options);
};
window.createAnimation = createAnimation;
canvas.addEventListener('mousedown', ev => {
matrixEngine.raycaster.checkingProcedure(ev);
});
addEventListener('ray.hit.event', function (e) {
console.info(e.detail.hitObject);
e.detail.hitObject.glBlend.blendParamSrc = matrixEngine.utility.ENUMERATORS.glBlend.param[2];
e.detail.hitObject.glBlend.blendParamDest = matrixEngine.utility.ENUMERATORS.glBlend.param[7];
});
console.log("<GLOBALS>");
let character1 = createAnimation(1);
window.character1 = character1;
window.App = _manifest.default;
window.matrixEngine = matrixEngine;
console.log(character1 + "<");
matrixEngine.matrixWorld.world.addCommandAtSeqIndex(function () {
console.log("WHAT EVER HERE 5");
}, 5);
matrixEngine.matrixWorld.world.addCommandAtSeqIndex(function () {
console.log("WHAT EVER HERE 10 ");
}, 10);
matrixEngine.matrixWorld.world.addSubCommand(function () {
console.log("do it for only 100 frame on 3 seq FRAMEID!");
}, 100, 3);
};
exports.runThis = runThis;
},{"../program/manifest":45,"./animations-list":2}],4:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
/**
* @description
* ClientConfig is config file for client part of networking.
*/
class ClientConfig {
// Not implemented yet
// Free to define what ever -> injectCanvas
recordCanvasOption = {
injectCanvas: () => document.getElementsByTagName("canvas")[0],
frameRequestRate: 30,
videoDuration: 20,
outputFilename: "record-gameplay.mp4",
mineType: "video/mp4",
resolutions: '800x600'
};
/**
* @description
* Default setup is `dev`.
* recommendent to use for local propose LAN ip
* like : 192.168.0.XXX if you wanna run ant test app with server.
*/
domain = "maximumroulette.com";
// domain = "localhost";
/**
* @description Important note for this property: if you
* disable (false) you can't use Account system or any other
* network. Use 'false' if you wanna make single player game.
* In other way keep it 'true'.
*
* @note [OLD]
*/
showBroadcasterOnInt = false;
/**
* networkDeepLogs control of dev logs for webRTC context only.
* @note [OLD]
*/
networkDeepLogs = false;
/**
* masterServerKey is channel access id used to connect
* multimedia server channel/multiRTC3
*/
masterServerKey = "maximumroulette.matrix-engine";
/**
* @description
* runBroadcasterOnInt load broadcaster
*
* * @note [OLD]
*
*/
runBroadcasterOnInt = false;
broadcastAutoConnect = false;
/**
* @description
* broadcasterPort Port used to connect multimedia server MultiRTC3.
* I will use it for explicit video chat multiplatform support.
* Default value is 999
*
* @note [OLD]
*
*/
broadcasterPort = 999;
/**
* @description
* broadcaster rtc session init values.
* Change it for production regime
*
* @note [OLD]
*/
broadcasterSessionDefaults = {
sessionAudio: true,
sessionVideo: false,
sessionData: true,
enableFileSharing: true
};
/**
* @description
* Optimal for dev stage.
* read more about webRtc protocols.
* Recommended: coturn open source project.
*
* @note [OLD]
* When you run your OV there is coturn already fixed.
*/
stunList = ["stun:stun.l.google.com:19302", "stun:stun1.l.google.com:19302", "stun:stun.l.google.com:19302?transport=udp"];
/**
* New networking platform
* Based on kurento/Ov media server
*/
networking2 = {
active: true,
domain: 'maximumroulette.com',
port: 2020
};
/**
* @description
* constructor will save interest data for game platform
* For now it is just name of the game. I use it in
* pre gameplay UI game selector.
*/
constructor() {}
getRecordCanvasOptions() {
return this.recordCanvasOption;
}
getRunBroadcasterOnInt() {
return this.runBroadcasterOnInt;
}
didAppUseBroadcast() {
return this.appUseBroadcaster;
}
getStunList() {
return this.stunList;
}
getBroadcastSockRoute() {
return this.getProtocolFromAddressBar() + this.getDomain() + ":" + this.broadcasterPort + "/";
}
getDomain() {
// localhost vs prodc domain not works CORS not equal!
if (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1") {
return window.location.hostname;
}
return this.domain;
}
getBroadcastAutoConnect() {
return this.broadcastAutoConnect;
}
getShowBroadcasterOnInt() {
return this.showBroadcasterOnInt;
}
getBroadcasterPort() {
return this.broadcasterPort;
}
getBroadcasterSessionDefaults() {
return this.broadcasterSessionDefaults;
}
getProtocolFromAddressBar() {
return location.protocol === "https:" ? "https://" : "http://";
}
setNetworkDeepLog(newState) {
this.networkDeepLogs = newState;
}
getNetworkDeepLog() {
return this.networkDeepLogs;
}
// Used for both net variant
getMasterServerKey() {
return this.masterServerKey;
}
}
var _default = exports.default = ClientConfig;
},{}],5:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "App", {
enumerable: true,
get: function () {
return _manifest.default;
}
});
exports.Events = exports.Engine = void 0;
Object.defineProperty(exports, "MEBvhAnimation", {
enumerable: true,
get: function () {
return _matrixBvh.default;
}
});
Object.defineProperty(exports, "defineShader", {
enumerable: true,
get: function () {
return _buildinMyShaders.defineShader;
}
});
Object.defineProperty(exports, "freeShadersToy", {
enumerable: true,
get: function () {
return _buildinShaders.freeShadersToy;
}
});
exports.matrixWorld = exports.matrixRender = exports.matrixGeometry = void 0;
Object.defineProperty(exports, "meMapLoader", {
enumerable: true,
get: function () {
return _mapLoader.meMapLoader;
}
});
exports.objLoader = void 0;
Object.defineProperty(exports, "operation", {
enumerable: true,
get: function () {
return _matrixBuffers.default;
}
});
exports.raycaster = void 0;
Object.defineProperty(exports, "standardMEShaderDrawer", {
enumerable: true,
get: function () {
return _buildinShaders.standardMEShaderDrawer;
}
});
Object.defineProperty(exports, "texTools", {
enumerable: true,
get: function () {
return _matrixTextures.default;
}
});
Object.defineProperty(exports, "toyShaderHeader", {
enumerable: true,
get: function () {
return _buildinShaders.toyShaderHeader;
}
});
exports.utility = void 0;
var _manifest = _interopRequireDefault(require("./program/manifest"));
var matrixWorld = _interopRequireWildcard(require("./lib/matrix-world"));
exports.matrixWorld = matrixWorld;
var matrixGeometry = _interopRequireWildcard(require("./lib/matrix-geometry"));
exports.matrixGeometry = matrixGeometry;
var matrixRender = _interopRequireWildcard(require("./lib/matrix-render"));
exports.matrixRender = matrixRender;
var Engine = _interopRequireWildcard(require("./lib/engine"));
exports.Engine = Engine;
var Events = _interopRequireWildcard(require("./lib/events"));
exports.Events = Events;
var objLoader = _interopRequireWildcard(require("./lib/loader-obj"));
exports.objLoader = objLoader;
var _matrixBuffers = _interopRequireDefault(require("./lib/matrix-buffers"));
var _matrixTextures = _interopRequireDefault(require("./lib/matrix-textures"));
var utility = _interopRequireWildcard(require("./lib/utility"));
exports.utility = utility;
var raycaster = _interopRequireWildcard(require("./lib/raycast"));
exports.raycaster = raycaster;
var _matrixBvh = _interopRequireDefault(require("./lib/matrix-bvh"));
var _buildinShaders = require("./lib/optimizer/buildin-shaders");
var _buildinMyShaders = require("./lib/optimizer/buildin-my-shaders");
var _mapLoader = require("./lib/map-loader");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
},{"./lib/engine":6,"./lib/events":7,"./lib/loader-obj":8,"./lib/map-loader":9,"./lib/matrix-buffers":10,"./lib/matrix-bvh":11,"./lib/matrix-geometry":13,"./lib/matrix-render":16,"./lib/matrix-textures":21,"./lib/matrix-world":22,"./lib/optimizer/buildin-my-shaders":24,"./lib/optimizer/buildin-shaders":25,"./lib/raycast":28,"./lib/utility":34,"./program/manifest":45}],6:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ACCESS_CAMERA = ACCESS_CAMERA;
exports.DOM_VT = DOM_VT;
exports.RegenerateShader = exports.RegenerateCustomShader = exports.RegenerateCubeMapShader = void 0;
exports.SET_STREAM = SET_STREAM;
exports.VIDEO_TEXTURE = VIDEO_TEXTURE;
exports.VT = VT;
exports.Vjs3 = Vjs3;
exports.activateNet2 = exports.activateNet = void 0;
exports.anyCanvas = anyCanvas;
exports.defineWebGLWorld = defineWebGLWorld;
exports.degToRad = degToRad;
exports.drawCanvas = drawCanvas;
exports.ht = void 0;
exports.initApp = initApp;
exports.initShaders = initShaders;
exports.initiateFPS = initiateFPS;
exports.isReady = isReady;
exports.lastTime = void 0;
exports.loadHtmlPowerAsset = loadHtmlPowerAsset;
exports.loadShaders = loadShaders;
exports.load_shaders = load_shaders;
exports.looper = void 0;
exports.modifyLooper = modifyLooper;
exports.net = void 0;
exports.onExit = onExit;
exports.resizeView = resizeView;
exports.totalTime = void 0;
exports.updateFPS = updateFPS;
exports.webcamError = exports.wd = exports.updateTime = exports.updateFrames = void 0;
var _net = require("./net");
var _events = require("./events");
var _manifest = _interopRequireDefault(require("../program/manifest"));
var _utility = require("./utility");
var _webglUtils = require("./webgl-utils");
var _matrixRender = require("./matrix-render");
var _matrixWorld = require("./matrix-world");
var _matrixShaders = require("./matrix-shaders3");
var _matrixShaders2 = require("./matrix-shaders1");
var _clientConfig = _interopRequireDefault(require("../client-config"));
var _sounds = require("./sounds");
var _app = require("../networking2/app");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
if (typeof _utility.QueryString.offScreen !== 'undefined' && (_manifest.default.offScreenCanvas == true || _utility.QueryString.offScreen == 'true')) {
_manifest.default.offScreenCanvas = true;
console.log('[matrix-engine] offScreenCanvas activated =>', _manifest.default.offScreenCanvas);
_utility.scriptManager.LOAD('./hacker-timer/hack-timer.js');
} else {
_manifest.default.offScreenCanvas = false;
}
var wd = exports.wd = 0,
ht = exports.ht = 0,
lastTime = exports.lastTime = 0,
totalTime = exports.totalTime = 0,
updateTime = exports.updateTime = 0,
updateFrames = exports.updateFrames = 0;
let net = exports.net = null;
let looper = exports.looper = 0;
function modifyLooper(value) {
exports.looper = looper = value;
}
function resizeView() {
exports.wd = wd = document.body.clientWidth - 4;
if (document.body.clientHeight > document.documentElement.clientHeight) {
exports.ht = ht = document.body.clientHeight - 10;
} else {
exports.ht = ht = document.documentElement.clientHeight - 4;
}
}
let activateNet = CustomConfig => {
if (typeof _manifest.default.net !== 'undefined' && _manifest.default.net === true) {
if (typeof CustomConfig !== 'undefined') {
var t = new CustomConfig();
} else {
var t = new _clientConfig.default();
}
exports.net = net = new _net.Broadcaster(t);
_manifest.default.network = net;
console.info('Networking is active.', net);
}
};
exports.activateNet = activateNet;
let activateNet2 = (CustomConfig, sessionOption) => {
if (typeof _manifest.default.net !== 'undefined' && _manifest.default.net === true) {
if (typeof CustomConfig !== 'undefined') {
var t = new CustomConfig();
} else {
var t = new _clientConfig.default();
}
// -----------------------
// Make run
// -----------------------
if (typeof sessionOption === 'undefined') {
var sessionOption = {};
sessionOption.sessionName = 'matrix-engine-random';
sessionOption.resolution = '160x240';
}
exports.net = net = new _app.MatrixStream({
domain: t.networking2.domain,
port: t.networking2.port,
sessionName: sessionOption.sessionName,
resolution: sessionOption.resolution
});
addEventListener(`onTitle`, e => {
document.title = e.detail;
});
// remove at the end
window.matrixStream = net;
console.info(`%c Networking2 params: ${t.networking2}`, _matrixWorld.CS3);
}
};
exports.activateNet2 = activateNet2;
function initApp(callback) {
resizeView();
drawCanvas();
_manifest.default.canvas = document.getElementById('canvas');
if (_manifest.default.events == true) {
_manifest.default.events = new _events.EVENTS((0, _utility.E)('canvas'));
}
if (_manifest.default.sounds == true) {
_manifest.default.sounds = new _sounds.MatrixSounds();
}
if (typeof callback !== 'undefined') {
window.webGLStartCallBack = callback;
callback();
}
}
function isReady() {
if (0 == world) {
return false;
} else {
return true;
}
}
async function load_shaders(href) {
new Promise((resolve, reject) => {
function handler() {
if (this.status == 200 && this.responseText != null) {
document.getElementById('shaders').innerHTML = this.responseText;
resolve();
} else {
reject();
console.warn('Something went wrong on shaders load procces! => ', href);
}
}
var xmlhttp = new XMLHttpRequest();
xmlhttp.onload = handler;
xmlhttp.open('GET', href, true);
xmlhttp.send();
});
}
function loadHtmlPowerAsset(href, callback) {
function handler() {
if (this.status == 200 && this.responseText != null) {
document.getElementById('media-holder').innerHTML = this.responseText;
if (typeof callback !== 'undefined') {
callback();
}
} else {
// console.log("something went wrong on shaders load procces!");
}
}
var xmlhttp = new XMLHttpRequest();
xmlhttp.onload = handler;
xmlhttp.open('GET', href, true);
xmlhttp.send();
}
/**
* @description
* WebGL start
* Base environment property for totality of WEBGL.
*/
function defineWebGLWorld(cavnas) {
var world = new Object();
try {
var gl = _webglUtils.WebGLUtils.setupWebGL(canvas);
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
world.gl = gl;
const available_extensions = gl.getSupportedExtensions();
const test_depth_texture = gl.getExtension('WEBGL_depth_texture');
if (!test_depth_texture) {
console.info(`%cNo support for WEBGL_depth_texture!`, _matrixWorld.CS4);
}
console.info(`%cAvailable_extensions: ${available_extensions}`, _matrixWorld.CS4);
console.info(`%cMAX ELEMENT INDEX : ${gl.getParameter(gl.MAX_ELEMENT_INDEX)}`, _matrixWorld.CS4);
console.info(`%cMAX VERTICES : ${gl.getParameter(gl.MAX_ELEMENTS_VERTICES)}`, _matrixWorld.CS4);
console.info(`%cMAX INDICES : ${gl.getParameter(gl.MAX_ELEMENTS_INDICES)}`, _matrixWorld.CS4);
console.info(`%cApp.limitations: ${_manifest.default.limitations}`, _matrixWorld.CS4);
const extTFAnisotropic = gl.getExtension('EXT_texture_filter_anisotropic') || gl.getExtension('MOZ_EXT_texture_filter_anisotropic') || gl.getExtension('WEBKIT_EXT_texture_filter_anisotropic');
if (extTFAnisotropic) {
const max = gl.getParameter(extTFAnisotropic.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
world.MAX_TEXTURE_MAX_ANISOTROPY_EXT = max;
// gl.texParameterf(gl.TEXTURE_2D, extTFAnisotropic.TEXTURE_MAX_ANISOTROPY_EXT, world.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
world.extTFAnisotropic = extTFAnisotropic;
}
} catch (e) {
console.error("Exception in WEBGL base pocket: " + e);
}
/* Destructor */
world.destroy = function () {
delete this.gl;
delete this;
};
return world;
}
function updateFPS(elements) {
var now = new Date().getTime();
var delta = now - lastTime;
exports.lastTime = lastTime = now;
exports.totalTime = totalTime = totalTime + delta;
exports.updateTime = updateTime = updateTime + delta;
(0, _matrixWorld.modifyFrames)(_matrixWorld.frames + 1);
exports.updateFrames = updateFrames = updateFrames + 1;
if (1000 < updateTime) {
document.getElementById('fps').innerHTML = `FPS AVG:` + Math.floor(1000 * _matrixWorld.frames / totalTime / elements) + ` CUR:` + Math.floor(1000 * updateFrames / updateTime / elements);
exports.updateTime = updateTime = 0;
exports.updateFrames = updateFrames = 0;
}
}
function drawCanvas() {
var canvas = document.createElement('canvas');
canvas.id = 'canvas';
if (_manifest.default.resize.canvas == 'full-screen') {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
} else {
canvas.width = window.innerHeight * _manifest.default.resize.aspectRatio;
canvas.height = window.innerHeight;
_events.SYS.DEBUG.LOG('SYS: aspect ration resize is active. ');
}
document.body.append(canvas);
}
// Degree to Radian converter
function degToRad(degrees) {
return degrees * Math.PI / 180;
}
;
// One time initiation of FPS to store initial time
function initiateFPS() {
exports.lastTime = lastTime = new Date().getTime();
}
// Help the browser Garbage collect
window.onbeforeunload = onExit;
// Provides cancelRequestAnimFrame in a cross browser way.
window.cancelRequestAnimFrame = function () {
return window.cancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelRequestAnimationFrame || window.oCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame || function (callback) {
window.clearTimeout(callback);
};
}();
// Dispose off the dangling objects
function onExit() {
exports.looper = looper = 0;
while (looper <= _matrixWorld.objListToDispose.length - 1) {
_matrixWorld.objListToDispose[looper].destroy();
exports.looper = looper = looper + 1;
}
_matrixWorld.objListToDispose.length = 0;
}
_manifest.default.operation.destroyWorld = function () {
// console.log("Destroy at iteration:" + reDrawID);
cancelRequestAnimFrame(_matrixRender.reDrawID);
delete this.pMatrix;
delete this.mvMatrixStack;
exports.looper = looper = 0;
while (looper <= this.contentList.length - 1) {
// console.log("Destroying: " + this.contentList[looper].type);
delete this.contentList[looper].type;
delete this.contentList[looper].size;
delete this.contentList[looper].sides;
/* Dispose the shaders */
if (this.contentList[looper].shaderProgram.fragmentShader) {
this.GL.gl.deleteShader(this.contentList[looper].shaderProgram.fragmentShader);
delete this.contentList[looper].shaderProgram.fragmentShader;
}
if (this.contentList[looper].shaderProgram.vertexShader) {
this.GL.gl.deleteShader(this.contentList[looper].shaderProgram.vertexShader);
delete this.contentList[looper].shaderProgram.vertexShader;
}
/* Dispose the texture */
if (this.contentList[looper].texture) {
try {
this.GL.gl.deleteTexture(this.contentList[looper].texture);
} catch (e) {
console.warn('Problem in destroying function : This is e log : ' + e);
}
delete this.contentList[looper].texture;
}
/* Dispose the program */
if (this.contentList[looper].shaderProgram) {
this.GL.gl.deleteProgram(this.contentList[looper].shaderProgram);
delete this.contentList[looper].shaderProgram;
}
/* Empty the buffers */
if (this.contentList[looper].vertexPositionBuffer) {
this.GL.gl.deleteBuffer(this.contentList[looper].vertexPositionBuffer);
delete this.contentList[looper].vertexPositionBuffer;
}
if (this.contentList[looper].vertexTexCoordBuffer) {
this.GL.gl.deleteBuffer(this.contentList[looper].vertexTexCoordBuffer);
delete this.contentList[looper].vertexTexCoordBuffer;
}
if (this.contentList[looper].vertexColorBuffer) {
this.GL.gl.deleteBuffer(this.contentList[looper].vertexColorBuffer);
delete this.contentList[looper].vertexColorBuffer;
}
if (this.contentList[looper].vertexIndexBuffer) {
this.GL.gl.deleteBuffer(this.contentList[looper].vertexIndexBuffer);
delete this.contentList[looper].vertexIndexBuffer;
}
delete this.contentList[looper].rotation;
delete this.contentList[looper].color;
delete this.contentList[looper].mvMatrix;
exports.looper = looper = looper + 1;
}
this.contentList.length = 0;
this.GL.destroy();
delete this;
};
function loadShaders(gl, id) {
// console.log("Creating Shader:" + id);
var shaderScript = document.getElementById(id);
var shader;
var str = '';
if (shaderScript) {
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
}
if (shaderScript.type == 'x-shader/x-fragment') {
// console.log("Creating fragment shader");
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == 'x-shader/x-vertex') {
// console.log("Creating vertex shader");
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return 0;
}
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
return shader;
} else {
console.warn('Shader Program compile failed:' + gl.getShaderInfoLog(shader));
console.warn('Shader Program name :' + id);
return 0;
}
} else {
console.warn('Shader Program creation failed', gl.getShaderInfoLog(shader));
return 0;
}
}
function initShaders(gl, fragment, vertex) {
// console.log("Initialize Shader");
var fragmentShader = this.getShader(gl, fragment);
var vertexShader = this.getShader(gl, vertex);
if (0 == fragmentShader || 0 == vertexShader) {
console.warn('Failed to Load shader');
return 0;
} else {
var shaderProgram = gl.createProgram();
// console.log("Creating Shader fragment");
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
if (gl.getAttribLocation(shaderProgram, 'aVertexColor') >= 0) {
shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, 'aVertexColor');
gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
}
if (gl.getAttribLocation(shaderProgram, 'aTextureCoord') >= 0) {
shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, 'aTextureCoord');
gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, 'uSampler');
}
if (gl.getAttribLocation(shaderProgram, 'aVertexNormal') >= 0) {
shaderProgram.vertexNormalAttribute = gl.getAttribLocation(shaderProgram, 'aVertexNormal');
gl.enableVertexAttribArray(shaderProgram.vertexNormalAttribute);
}
if (null !== gl.getUniformLocation(shaderProgram, 'uNMatrix')) {
shaderProgram.nMatrixUniform = gl.getUniformLocation(shaderProgram, 'uNMatrix');
}
// For 2d sprite test - not in use for now!
if (null !== gl.getUniformLocation(shaderProgram, 'layer')) {
shaderProgram.layerLocation = gl.getUniformLocation(shaderProgram, 'layer');
}
// Test
if (null !== gl.getUniformLocation(shaderProgram, 'numberOfsamplers')) {
shaderProgram.numberOfsamplers = gl.getUniformLocation(shaderProgram, 'numberOfsamplers');
}
// Test
if (null !== gl.getUniformLocation(shaderProgram, 'TimeFor')) {
shaderProgram.uniformTime = gl.getUniformLocation(shaderProgram, 'TimeFor');
}
// Multi samplers for textutes
if (null !== gl.getUniformLocation(shaderProgram, 'uSampler')) {
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, 'uSampler');
}
if (null !== gl.getUniformLocation(shaderProgram, 'uSampler1')) {
shaderProgram.samplerUniform1 = gl.getUniformLocation(shaderProgram, 'uSampler1');
}
if (null !== gl.getUniformLocation(shaderProgram, 'uSampler2')) {
shaderProgram.samplerUniform2 = gl.getUniformLocation(shaderProgram, 'uSampler2');
}
if (null !== gl.getUniformLocation(shaderProgram, 'uSampler3')) {
shaderProgram.samplerUniform3 = gl.getUniformLocation(shaderProgram, 'uSampler3');
}
if (null !== gl.getUniformLocation(shaderProgram, 'uSampler4')) {
shaderProgram.samplerUniform4 = gl.getUniformLocation(shaderProgram, 'uSampler4');
}
if (null !== gl.getUniformLocation(shaderProgram, 'uSampler5')) {
shaderProgram.samplerUniform5 = gl.getUniformLocation(shaderProgram, 'uSampler5');
}
if (null !== gl.getUniformLocation(shaderProgram, 'uSampler6')) {
shaderProgram.samplerUniform6 = gl.getUniformLocation(shaderProgram, 'uSampler6');
}
if (null !== gl.getUniformLocation(shaderProgram, 'uSampler7')) {
shaderProgram.samplerUniform7 = gl.getUniformLocation(shaderProgram, 'uSampler7');
} // maybe to the 16 ?
if (null !== gl.getUniformLocation(shaderProgram, 'uUseLighting')) {
shaderProgram.useLightingUniform = gl.getUniformLocation(shaderProgram, 'uUseLighting');
}
if (null !== gl.getUniformLocation(shaderProgram, 'uAmbientColor')) {
shaderProgram.ambientColorUniform = gl.getUniformLocation(shaderProgram, 'uAmbientColor');
}
if (null !== gl.getUniformLocation(shaderProgram, 'uLightingDirection')) {
shaderProgram.lightingDirectionUniform = gl.getUniformLocation(shaderProgram, 'uLightingDirection');
}
if (null !== gl.getUniformLocation(shaderProgram, 'uDirectionalColor')) {
shaderProgram.directionalColorUniform = gl.getUniformLocation(shaderProgram, 'uDirectionalColor');
}
if (null !== gl.getUniformLocation(shaderProgram, 'u_reverseLightDirection')) {
shaderProgram.u_reverseLightDirection = gl.getUniformLocation(shaderProgram, 'u_reverseLightDirection');
}
// Local SpotLight
if (null !== gl.getUniformLocation(shaderProgram, 'u_shininess')) {
shaderProgram.shininessLocation = gl.getUniformLocation(shaderProgram, 'u_shininess');
}
if (null !== gl.getUniformLocation(shaderProgram, 'u_lightDirection')) {
shaderProgram.lightDirectionLocation = gl.getUniformLocation(shaderProgram, 'u_lightDirection');
}
if (null !== gl.getUniformLocation(shaderProgram, 'u_innerLimit')) {
shaderProgram.innerLimitLocation = gl.getUniformLocation(shaderProgram, 'u_innerLimit');
}
if (null !== gl.getUniformLocation(shaderProgram, 'u_outerLimit')) {
shaderProgram.outerLimitLocation = gl.getUniformLocation(shaderProgram, 'u_outerLimit');
}
if (null !== gl.getUniformLocation(shaderProgram, 'u_lightWorldPosition')) {
shaderProgram.lightWorldPositionLocation = gl.getUniformLocation(shaderProgram, 'u_lightWorldPosition');
}
// test
if (null !== gl.getUniformLocation(shaderProgram, 'u_textureMatrix')) {
shaderProgram.u_textureMatrix = gl.getUniformLocation(shaderProgram, 'u_textureMatrix');
}
if (null !== gl.getUniformLocation(shaderProgram, 'u_projectedTexture')) {
shaderProgram.u_projectedTexture = gl.getUniformLocation(shaderProgram, 'u_projectedTexture');
}
if (null !== gl.getUniformLocation(shaderProgram, 'u_bias')) {
shaderProgram.u_bias = gl.getUniformLocation(shaderProgram, 'u_bias');
}
// 1.8.4 cubeMap
if (null !== gl.getUniformLocation(shaderProgram, 'u_texture')) {
shaderProgram.uCubeMapSampler = gl.getUniformLocation(shaderProgram, 'u_texture');
}
// [1.8.8] global positon light test
if (null !== gl.getUniformLocation(shaderProgram, 'specularColor')) {
shaderProgram.specularColor = gl.getUniformLocation(shaderProgram, 'specularColor');
}
if (null !== gl.getUniformLocation(shaderProgram, 'uLightPosition')) {
shaderProgram.uLightPosition = gl.getUniformLocation(shaderProgram, 'uLightPosition');
}
// [1.8.9] Lens effect
if (null !== gl.getUniformLocation(shaderProgram, 'uResolution')) {
shaderProgram.uResolution = gl.getUniformLocation(shaderProgram, 'uResolution');
}
if (null !== gl.getUniformLocation(shaderProgram, 'uControl')) {
shaderProgram.uControl = gl.getUniformLocation(shaderProgram, 'uControl');
}
if (null !== gl.getUniformLocation(shaderProgram, 'iResolution')) {
// toy adaptatino iResolution indicator
shaderProgram.positionAttributeLocation = gl.getAttribLocation(shaderProgram, "a_position");
shaderProgram.resolutionLocation = gl.getUniformLocation(shaderProgram, "iResolution");
shaderProgram.mouseLocation = gl.getUniformLocation(shaderProgram, "iMouse");
shaderProgram.timeLocation = gl.getUniformLocation(shaderProgram, "iTime");
} else {
// console.log('adaptation initshaders for toyshaders. UNDEFINED')
}
// matrixSkyRad
if (null !== gl.getUniformLocation(shaderProgram, 'matrixSkyRad')) {
shaderProgram.matrixSkyRad = gl.getUniformLocation(shaderProgram, "matrixSkyRad");
}
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, 'uPMatrix');
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, 'uMVMatrix');
/* For destroying properly */
shaderProgram.fragmentShader = fragmentShader;
shaderProgram.vertexShader = vertexShader;
return shaderProgram;
} else {
console.warn('Returning Shader fragment failed! \n ', gl.getProgramInfoLog(shaderProgram));
return 0;
}
}
}
// END OF SHADERS
// MATRIX OPETARION
_manifest.default.operation.PUSH_MATRIX = function (mvMatrix, mvMatrixStack) {
var copy = mat4.create();
mat4.copy(mvMatrix, copy);
mvMatrixStack.push(copy);
};
_manifest.default.operation.POP_MATRIX = function (mvMatrix, mvMatrixStack) {
if (mvMatrixStack.length == 0) {
throw 'Invalid popMatrix!';
}
mvMatrix = mvMatrixStack.pop();
};
_manifest.default.operation.SET_MATRIX_UNIFORMS = function (object, pMatrix) {
this.GL.gl.uniformMatrix4fv(object.shaderProgram.pMatrixUniform, false, pMatrix);
this.GL.gl.uniformMatrix4fv(object.shaderProgram.mvMatrixUniform, false, object.mvMatrix);
};
var RegenerateShader = function (id_elem, numOfSamplerInUse, mixOperand, lightType) {
var e = document.getElementById(id_elem);
if (mixOperand == 'multiply') {
mixOperand = 0;
} else if (mixOperand == 'divide') {
mixOperand = 1;
}
if (_manifest.default.openglesShaderVersion == 1.3) {
// console.log('RegenerateShader 300 => ', lightType)
e.innerHTML = (0, _matrixShaders.generateShaderSrc3)(numOfSamplerInUse, mixOperand, lightType);
} else {
// console.warn('RegenerateShader 2 => ', lightType)
e.innerHTML = (0, _matrixShaders2.generateShaderSrc)(numOfSamplerInUse, mixOperand, lightType);
}
};
exports.RegenerateShader = RegenerateShader;
var RegenerateCubeMapShader = function (id_elem, numOfSamplerInUse, mixOperand, lightType) {
var e = document.getElementById(id_elem);
if (mixOperand == 'multiply') {
mixOperand = 0;
} else if (mixOperand == 'divide') {
mixOperand = 1;
}
if (_manifest.default.openglesShaderVersion == 1.3) {
e.innerHTML = (0, _matrixShaders.generateCubeMapShaderSrc3)(numOfSamplerInUse, mixOperand, lightType);
} else {
e.innerHTML = (0, _matrixShaders2.generateCubeMapShaderSrc1)(numOfSamplerInUse, mixOperand);
}
};
exports.RegenerateCubeMapShader = RegenerateCubeMapShader;
var RegenerateCustomShader = function (id_elem, numOfSamplerInUse, mixOperand, code_) {
var e = document.getElementById(id_elem);
if (mixOperand == 'multiply') {
mixOperand = 0;
} else if (mixOperand == 'divide') {
mixOperand = 1;
}
e.innerHTML = (0, _matrixShaders.generateCustomShaderSrc)(numOfSamplerInUse, mixOperand, code_);
};
// Streams stuff
exports.RegenerateCustomShader = RegenerateCustomShader;
var webcamError = function (e) {
alert('Webcam error!' + e);
};
exports.webcamError = webcamError;
function SET_STREAM(video) {
let v;
if ((0, _utility.isMobile)() == true) {
v = true; // {deviceId: {exact: videoSrc}, facingMode: 'user'}
} else {
v = true;
}
navigator.mediaDevices.getUserMedia({
audio: false,
video: v
}).then(stream => {
try {
video.srcObject = stream;
console.log('[me][new-gen-device]', stream);
} catch (error) {
video.src = window.URL.createObjectURL(stream);
console.log('[me][old-gen-device]', stream);
}
navigator.mediaDevices.enumerateDevices().then(devices => {
devices.forEach(device => {
if (_manifest.default.printDevicesInfo == true) console.log('device.label :', device.label);
});
});
}).catch(error => {
console.log('Error :', error);
});
// var videoSrc = null;
// function getDevices(deviceInfos) {
// for(var i = 0;i !== deviceInfos.length;++i) {
// var deviceInfo = deviceInfos[i];
// if(deviceInfo.kind === 'videoinput') {
// videoSrc = deviceInfo.deviceId;
// break;
// }
// }
// }
}
function ACCESS_CAMERA(htmlElement) {
var ROOT = this;
console.log('ACCESS_CAMERA');
ROOT.video = document.getElementById(htmlElement);
SET_STREAM(ROOT.video);
var DIV_CONTENT_STREAMS = document.getElementById('HOLDER_STREAMS');
ROOT.videoImage = document.createElement('canvas');
ROOT.videoImage.id = htmlElement + 'IMAGE_';
ROOT.videoImage.setAttribute('width', '512px');
ROOT.videoImage.setAttribute('height', '512px');
DIV_CONTENT_STREAMS.appendChild(ROOT.videoImage);
ROOT.videoImageContext = ROOT.videoImage.getContext('2d');
ROOT.videoImageContext.fillStyle = '#0000FF';
ROOT.videoImageContext.fillRect(0, 0, ROOT.videoImage.width, ROOT.videoImage.height);
ROOT.texture = _manifest.default.tools.loadVideoTexture('glVideoTexture', ROOT.videoImage);
ROOT.UPDATE = function () {
if (ROOT.video.readyState === ROOT.video.HAVE_ENOUGH_DATA) {
ROOT.videoImageContext.drawImage(ROOT.video, 0, 0, ROOT.videoImage.width, ROOT.videoImage.height);
ROOT.videoImageContext.font = '30px Georgia';
ROOT.videoImageContext.fillStyle = 'black';
ROOT.videoImageContext.fillText(' Visual-JS game engine -webGL 2 part', 0, 85);
ROOT.videoImageContext.fillText('Video texture example ', 20, 50);
}
};
// console.log("Video 3d canvas texture created.");
_manifest.default.updateBeforeDraw.push(ROOT);
// Dispose for this needed!
}
function VIDEO_TEXTURE(p) {
var ROOT = this,
DIV_CONTENT_STREAMS = document.getElementById('HOLDER_STREAMS');
ROOT.video = document.getElementById('webcam_beta');
ROOT.video.READY = function (e) {
ROOT.videoImage = document.createElement('canvas');
ROOT.videoImage.id = 'webcam_beta' + 'IMAGE_';
ROOT.videoImage.setAttribute('width', '512px');
ROOT.videoImage.setAttribute('height', '512px');
DIV_CONTENT_STREAMS.appendChild(ROOT.videoImage);
ROOT.videoImageContext = ROOT.videoImage.getContext('2d');
ROOT.videoImageContext.fillStyle = '#00003F';
ROOT.videoImageContext.fillRect(0, 0, ROOT.videoImage.width, ROOT.videoImage.height);
ROOT.texture = _manifest.default.tools.loadVideoTexture('glVideoTexture', ROOT.videoImage);
_manifest.default.updateBeforeDraw.push(ROOT);
// console.info("Video 2dcanvas texture created.");
};
ROOT.video.addEventListener('loadeddata', ROOT.video.READY, false);
ROOT.video.src = 'res/videos/' + p;
ROOT.UPDATE = function () {
if (ROOT.video.readyState === ROOT.video.HAVE_ENOUGH_DATA) {
ROOT.videoImageContext.drawImage(ROOT.video, 0, 0, ROOT.videoImage.width, ROOT.videoImage.height);
ROOT.videoImageContext.font = '30px Georgia';
ROOT.videoImageContext.fillStyle = 'black';
ROOT.videoImageContext.fillText(' Visual-JS game engine -webGL 2 part', 0, 85);
ROOT.videoImageContext.fillText('Video texture example ', 20, 50);
}
};
}
function VT(p, name, options) {
if (typeof name === 'undefined') name = 'vtex' + (0, _utility.randomIntFromTo)(1, 999999);
if (typeof options === 'undefined') {
options = {
mixWithCanvas2d: false
};
}
function fixAutoPlay() {
console.log("Autoplay fixing...? ", ROOT.video);
window.addEventListener('click', FirstClickAutoPlay, {
passive: false
});
}
function FirstClickAutoPlay() {
var t = ROOT.video.play();
t.then(() => {
console.info("Autoplay fixed.");
window.removeEventListener('click', FirstClickAutoPlay);
}).catch(() => {
console.warn("Autoplay error.");
});
}
var ROOT = this,
DIV_CONTENT_STREAMS = document.getElementById('HOLDER_STREAMS');
ROOT.video = document.createElement('video');
DIV_CONTENT_STREAMS.appendChild(ROOT.video);
// ROOT.name = 'vtex-' + name;
ROOT.video.READY = function (e) {
ROOT.videoImage = document.createElement('canvas');
ROOT.videoImage.id = 'vtex-' + name;
ROOT.videoImage.setAttribute('width', '512px');
ROOT.videoImage.setAttribute('height', '512px');
ROOT.video.mute = true;
ROOT.video.autoplay = true;
ROOT.video.loop = true;
DIV_CONTENT_STREAMS.appendChild(ROOT.videoImage);
ROOT.options = options;
if (options.mixWithCanvas2d == true) {
ROOT.videoImageContext = ROOT.videoImage.getContext('2d');
ROOT.videoImageContext.fillStyle = '#00003F';
ROOT.videoImageContext.fillRect(0, 0, ROOT.videoImage.width, ROOT.videoImage.height);
ROOT.texture = _manifest.default.tools.loadVideoTexture('glVideoTexture' + name, ROOT.videoImage);
} else {
ROOT.texture = _manifest.default.tools.loadVideoTexture('glVideoTexture' + name, ROOT.video);
}
try {
var testAutoplay = ROOT.video.play();
testAutoplay.catch(() => {
fixAutoPlay();
});
} catch (err) {}
_manifest.default.updateBeforeDraw.push(ROOT);
console.info("Video 2dcanvas texture created.", ROOT.video);
};
ROOT.video.addEventListener('loadeddata', ROOT.video.READY, false);
ROOT.video.src = p;
ROOT.video.id = name;
ROOT.video.load();
ROOT.UPDATE = function () {
if (ROOT.options.mixWithCanvas2d == false) return;
if (ROOT.video.readyState === ROOT.video.HAVE_ENOUGH_DATA) {
ROOT.videoImageContext.drawImage(ROOT.video, 0, 0, ROOT.videoImage.width, ROOT.videoImage.height);
ROOT.videoImageContext.font = '30px Georgia';
ROOT.videoImageContext.fillStyle = 'black';
ROOT.videoImageContext.fillText('Matrix-Engine [1.8.10] ', 0, 85);
ROOT.videoImageContext.fillText('Video texture', 20, 50);
}
};
}
function Vjs3(path_, nameOfCanvas) {
var ROOT = this;
ROOT.iframe = document.createElement('iframe');
ROOT.iframe.id = nameOfCanvas;
// ROOT.iframe.setAttribute('style', 'width:512px;height:512px');
ROOT.iframe.setAttribute('width', '512');
ROOT.iframe.setAttribute('height', '512');
var DIV_CONTENT_STREAMS = document.getElementById('HOLDER_STREAMS');
ROOT.iframe.data = path_;
ROOT.iframe.src = path_;
DIV_CONTENT_STREAMS.appendChild(ROOT.iframe);
document.getElementById(ROOT.iframe.id).onload = function (event) {
ROOT.videoImage = ROOT.iframe.contentDocument.getElementById(nameOfCanvas);
ROOT.canvasTexture = ROOT.videoImage.getContext('2d');
_manifest.default.scene.outsideB