UNPKG

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,426 lines (1,127 loc) 1.37 MB
(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"; 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'. */ showBroadcasterOnInt = true; /** * networkDeepLogs control of dev logs for webRTC context only. */ networkDeepLogs = false; /** * masterServerKey is channel access id used to connect * multimedia server channel/multiRTC3 */ masterServerKey = "maximumroulette.matrix-engine"; /** * @description * runBroadcasterOnInt load broadcaster */ runBroadcasterOnInt = true; broadcastAutoConnect = true; /** * @description * broadcasterPort Port used to connect multimedia server MultiRTC3. * I will use it for explicit video chat multiplatform support. * Default value is 999 */ broadcasterPort = 999; /** * @description * broadcaster rtc session init values. * Change it for production regime */ broadcasterSessionDefaults = { sessionAudio: true, sessionVideo: false, sessionData: true, enableFileSharing: true }; /** * @description * Optimal for dev stage. * read more about webRtc protocols. * Recommended: coturn open source project. */ stunList = ["stun:stun.l.google.com:19302", "stun:stun1.l.google.com:19302", "stun:stun.l.google.com:19302?transport=udp"]; /** * @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; } getMasterServerKey() { return this.masterServerKey; } } var _default = ClientConfig; exports.default = _default; },{}],2:[function(require,module,exports){ "use strict"; var matrixEngine = _interopRequireWildcard(require("../index.js")); var _manifest = _interopRequireDefault(require("../program/manifest.js")); var _engine = require("../lib/engine.js"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } let Vjs3 = matrixEngine.Engine.Vjs3; var world; window.addEventListener('load', function (e) { if ('serviceWorker' in navigator) {// navigator.serviceWorker.register('worker.js'); } else { console.warn('Matrix Engine: No support for web workers in this browser.'); } _manifest.default.ready = true; matrixEngine.Engine.initApp(webGLStart); }); var runThis = world => { let ENUMERATORS = matrixEngine.utility.ENUMERATORS; let E = matrixEngine.utility.E; var tex = { source: ["res/images/complex_texture_1/diffuse.webp"], mix_operation: "multiply" }; world.Add("cubeLightTex", 12, "outsideBox", tex); _manifest.default.scene.outsideBox.position.y = 0; _manifest.default.scene.outsideBox.position.z = -55; _manifest.default.scene.outsideBox.rotation.rotationSpeed.x = 20; _manifest.default.scene.outsideBox.rotation.rotationSpeed.y = 5; // App.scene.outsideBox.rotValue = 90; _manifest.default.scene.outsideBox.LightsData.ambientLight.set(1, 1, 1); // App.scene.outsideBox.glBlend.blendEnabled = true; _manifest.default.scene.outsideBox.glBlend.blendParamSrc = ENUMERATORS.glBlend.param[4]; _manifest.default.scene.outsideBox.glBlend.blendParamDest = ENUMERATORS.glBlend.param[4]; _manifest.default.scene.outsideBox.rotation.SetDirection(1, 1, 0.5); _manifest.default.scene.outsideBox.rotation.rotz = -90; ///////////////////////////////////////// // CANVAS2D_SURFACE - IS TEXTURE EDITOR ///////////////////////////////////////// // E("HOLDER_STREAMS").style.display = "block"; setTimeout(function () { _manifest.default.scene.outsideBox.streamTextures = new _engine.anyCanvas("2DTextureEditor/templates/slot/", "HELLO_WORLD"); _manifest.default.scene.outsideBox.streamTextures.showTextureEditor(); setTimeout(function () { E("HOLDER_STREAMS").style.display = "none"; }, 10000); }, 500); }; window.webGLStart = () => { // dev window.App = _manifest.default; world = matrixEngine.matrixWorld.defineworld(canvas); world.callReDraw(); runThis(world); }; window.matrixEngine = matrixEngine; },{"../index.js":3,"../lib/engine.js":4,"../program/manifest.js":38}],3:[function(require,module,exports){ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "App", { enumerable: true, get: function () { return _manifest.default; } }); Object.defineProperty(exports, "operation", { enumerable: true, get: function () { return _matrixBuffers.default; } }); Object.defineProperty(exports, "texTools", { enumerable: true, get: function () { return _matrixTextures.default; } }); Object.defineProperty(exports, "MEBvhAnimation", { enumerable: true, get: function () { return _matrixBvh.default; } }); exports.raycaster = exports.utility = exports.objLoader = exports.Events = exports.Engine = exports.matrixRender = exports.matrixGeometry = exports.matrixWorld = 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")); function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } },{"./lib/engine":4,"./lib/events":5,"./lib/loader-obj":6,"./lib/matrix-buffers":7,"./lib/matrix-bvh":8,"./lib/matrix-geometry":10,"./lib/matrix-render":13,"./lib/matrix-textures":18,"./lib/matrix-world":19,"./lib/raycast":23,"./lib/utility":29,"./program/manifest":38}],4:[function(require,module,exports){ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.modifyLooper = modifyLooper; exports.resizeView = resizeView; exports.initApp = initApp; exports.isReady = isReady; exports.load_shaders = load_shaders; exports.loadHtmlPowerAsset = loadHtmlPowerAsset; exports.defineWebGLWorld = defineWebGLWorld; exports.updateFPS = updateFPS; exports.drawCanvas = drawCanvas; exports.degToRad = degToRad; exports.initiateFPS = initiateFPS; exports.onExit = onExit; exports.loadShaders = loadShaders; exports.initShaders = initShaders; exports.SET_STREAM = SET_STREAM; exports.ACCESS_CAMERA = ACCESS_CAMERA; exports.VIDEO_TEXTURE = VIDEO_TEXTURE; exports.VT = VT; exports.Vjs3 = Vjs3; exports.anyCanvas = anyCanvas; exports.DOM_VT = DOM_VT; exports.webcamError = exports.RegenerateCustomShader = exports.RegenerateCubeMapShader = exports.RegenerateShader = exports.activateNet = exports.looper = exports.net = exports.updateFrames = exports.updateTime = exports.totalTime = exports.lastTime = exports.ht = exports.wd = 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"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } if (_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 = 0, ht = 0, lastTime = 0, totalTime = 0, updateTime = 0, updateFrames = 0; exports.updateFrames = updateFrames; exports.updateTime = updateTime; exports.totalTime = totalTime; exports.lastTime = lastTime; exports.ht = ht; exports.wd = wd; let net = null; exports.net = net; let looper = 0; exports.looper = looper; 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; function initApp(callback) { resizeView(); drawCanvas(); window.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.warn('No support for WEBGL_depth_texture [opengles1.1] !', ext); } // console.info("WEBGL base pocket: SUCCESS , Lets see list of ext : ", available_extensions); 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) { // console.log(" Update FPS"); var now = new Date().getTime(); var delta = now - lastTime; exports.lastTime = lastTime = now; exports.totalTime = totalTime = totalTime + delta; exports.updateTime = updateTime = updateTime + delta; // eslint-disable-next-line no-global-assign (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() { // console.log("Init the canvas..."); var canvas = document.createElement('canvas'); canvas.id = 'canvas'; if (_manifest.default.resize.canvas == 'full-screen') { canvas.width = window.innerWidth; canvas.height = window.innerHeight; // SYS.DEBUG.LOG('SYS: fullscreen diametric resize is active. '); } 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(" Get the Shader"); // 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)) { // console.log("Shader Program compile success"); 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'); 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)) { // console.log("Returning Shader fragment successfully"); 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'); } // 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'); } 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) { var videoSrc = null; navigator.mediaDevices.enumerateDevices().then(getDevices).then(getStream).catch(() => { alert('ERR MEDIA'); }); function getDevices(deviceInfos) { for (var i = 0; i !== deviceInfos.length; ++i) { var deviceInfo = deviceInfos[i]; if (deviceInfo.kind === 'videoinput') { videoSrc = deviceInfo.deviceId; break; } } } function getStream() { if (navigator.getUserMedia) { navigator.getUserMedia({ audio: true, video: { deviceId: { exact: videoSrc }, facingMode: 'user' } }, function (stream) { try { console.log('stream1', stream); video.srcObject = stream; console.log('stream2', stream); } catch (error) { video.src = window.URL.createObjectURL(stream); } }, webcamError); } else if (navigator.webkitGetUserMedia) { navigator.webkitGetUserMedia({ audio: true, video: true }, function (stream) { try { video.srcObject = stream; } catch (error) { video.src = window.URL.createObjectURL(stream); } }, webcamError); } else { alert('webcam broken.'); } } } function ACCESS_CAMERA(htmlElement) { var ROOT = this; console.log('?????????????????????????'); 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.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.outsideBox.streamTextures.iframe.contentWindow.runTextureEditor(nameOfCanvas); // E('HOLDER_STREAMS').style.display = 'block'; ROOT.texture = _manifest.default.tools.loadVideoTexture('glVideoTexture', ROOT.videoImage); }; ROOT.showTextureEditor = function () { var T = (0, _utility.E)('HOLDER_STREAMS').style; T.display = 'block'; T.left = '0'; }; } function anyCanvas(path_, nameOfCanvas) { var ROOT = this; ROOT.iframe = document.createElement('object'); ROOT.iframe.id = 'canvas2dTextureSurface' + document.getElementsByTagName('object').length; // 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'); DIV_CONTENT_STREAMS.appendChild(ROOT.iframe); document.getElementById(ROOT.iframe.id).onload = event => { ROOT.videoImage = ROOT.iframe.contentDocument.getElementById(nameOfCanvas); if (typeof ROOT.iframe.contentWindow.runTextureEditor !== 'undefined') { _manifest.default.scene.outsideBox.streamTextures.iframe.contentWindow.runTextureEditor(nameOfCanvas); } ROOT.canvasTexture = ROOT.videoImage.getContext('2d'); // App.scene.outsideBox.streamTextures.iframe.contentWindow.runTextureEditor(nameOfCanvas); // E('HOLDER_STREAMS').style.display = 'block'; ROOT.texture = _manifest.default.tools.loadVideoTexture('glVideoTexture', ROOT.videoImage); }; ROOT.showTextureEditor = function () { var T = (0, _utility.E)('HOLDER_STREAMS').style; // fix for ios defoult screen (0, _utility.E)('webcam_beta').style.display = 'none'; T.display = 'block'; T.left = '0'; }; ROOT.iframe.data = path_; } function DOM_VT(video, 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; ROOT.video = video; let 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; var DIV_CONTENT_STREAMS = document.getElementById('HOLDER_STREAMS'); 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); }; READY(); ROOT.video.addEventListener('loadeddata', ROOT.video.READY, false); 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); } }; return { video: video }; } },{"../client-config":1,"../program/manifest":38,"./events":5,"./matrix-render":13,"./matrix-shaders1":14,"./matrix-shaders3":15,"./matrix-world":19,"./net":20,"./sounds":28,"./utility":29,"./webgl-utils":30}],5:[function(require,module,exports){ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.EVENTS = EVENTS; exports.defineKeyBoardObject = defineKeyBoardObject; exports.keyboardPress = exports.camera = exports.SYS = void 0; var _manifest = _interopRequireDefault(require("../program/manifest")); var _matrixWorld = require("./matrix-world"); var _utility = require("./utility"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var SYS = {}; exports.SYS = SYS; SYS.MOUSE = { x: 0, y: 0, LAST_POSITION: { x: 0, y: 0 }, PRESS: false, BUTTON_PRESSED: '', ON_LEFT_BTN_PRESSED: function () {}, ON_RIGHT_BTN_PRESSED: function () {}, ON_MID_BTN_PRESSED: function () {}, MOUSE_MOVING: false }; SYS.DEBUG = new _utility.LOG(); // from 1.9.44 _manifest.default.sys = SYS; function EVENTS(canvas) { var ROOT_EVENTS = this; // Mobile device if ((0, _utility.isMobile)() == true) { canvas.addEventListener('touchstart', function (e) { e.preventDefault(); var touchList = e.changedTouches; SYS.MOUSE.PRESS = true; SYS.MOUSE.x = touchList[0].pageX; SYS.MOUSE.y = touchList[0].pageY; ROOT_EVENTS.CALCULATE_TOUCH_OR_CLICK(); ROOT_EVENTS.CALCULATE_TOUCH_DOWN_OR_MOUSE_DOWN(e, SYS.MOUSE); ROOT_EVENTS.multiTouch(e, touchList); }, { passive: false }); canvas.addEventListener('touchend', function (e) { e.preventDefault(); var touchList = e.changedTouches; SYS.MOUSE.PRESS = false; SYS.MOUSE.x = touchList[0].pageX; SYS.MOUSE.y = touchList[0].pageY; ROOT_EVENTS.CALCULATE_TOUCH_UP_OR_MOUSE_UP(); }, { passive: false }); canvas.addEventListener('touchcancel', function (e) { e.preventDefault(); var touchList = e.changedTouches; SYS.MOUSE.PRESS = false; SYS.MOUSE.x = touchList[0].pageX; SYS.MOUSE.y = touchList[0].pageY; ROOT_EVENTS.CALCULATE_TOUCH_UP_OR_MOUSE_UP(); }, { passive: false }); canvas.addEventListener('touchmove', function (e) { e.preventDefault(); var touchList = e.changedTouches; //SYS.MOUSE.MOUSE_MOVING = true; //SYS.MOUSE.PRESS = true; SYS.MOUSE.x = touchList[0].pageX; SYS.MOUSE.y = touchList[0].pageY; ROOT_EVENTS.CALCULATE_TOUCH_MOVE_OR_MOUSE_MOVE({ x: touchList[0].pageX, y: touchList[0].pageY }); }, { passive: false }); } else { //D esktop device canvas.addEventListener('click', function (e) { //SYS.MOUSE.PRESS = true; SYS.MOUSE.x = e.layerX; SYS.MOUSE.y = e.layerY; ROOT_EVENTS.CALCULATE_TOUCH_OR_CLICK(); SYS.DEBUG.LOG('SYS : CLICK EVENT ' + canvas); }, { passive: true }); canvas.addEventListener('mouseup', function (e) { SYS.MOUSE.PRESS = false; SYS.MOUSE.BUTTON_PRESSED = null; SYS.MOUSE.x = e.layerX; SYS.MOUSE.y = e.layerY;