From 3185f99c853c553acd2bde8da2cdfda942823aa4 Mon Sep 17 00:00:00 2001 From: Patricio Gonzalez Vivo Date: Sat, 29 Oct 2022 12:50:30 -0400 Subject: [PATCH] v0.1.8 - adding include --- dist/GlslCanvas.es.js | 42 +- dist/GlslCanvas.js | 151 +- dist/GlslCanvas.min.js | 3 +- dist/GlslCanvas.min.js.map | 2 +- index.html | 22 +- lib/GlslCanvas.js | 151 +- package-lock.json | 8059 +++++++++++++++++++++++++++++------- package.json | 18 +- src/GlslCanvas.js | 17 +- src/tools/common.js | 10 + yarn.lock | 4378 +++++++++++--------- 11 files changed, 9040 insertions(+), 3813 deletions(-) diff --git a/dist/GlslCanvas.es.js b/dist/GlslCanvas.es.js index 37ded4f..dd8ddd8 100644 --- a/dist/GlslCanvas.es.js +++ b/dist/GlslCanvas.es.js @@ -509,6 +509,13 @@ function isDiff(a, b) { return false; } +function getFile(url) { + var httpRequest = new XMLHttpRequest(); + httpRequest.open("GET", url, false); + httpRequest.send(); + if (httpRequest.status == 200) return httpRequest.responseText;else return ""; +} + function subscribeMixin$1(target) { var listeners = new Set(); @@ -750,6 +757,12 @@ var Texture = function () { if (isVideo) { element = document.createElement('video'); element.autoplay = true; + + element.muted = true; /* required for modern browsers to autoplay video */ + setTimeout(function () { + element.play(); /* doesn't block promise but needs a more elegant solution */ + }, 1); + options.filtering = 'nearest'; // element.preload = 'auto'; // element.style.display = 'none'; @@ -1135,6 +1148,7 @@ var GlslCanvas = function () { }, { key: 'load', value: function load(fragString, vertString) { + var _this2 = this; // Load vertex shader if there is one if (vertString) { @@ -1146,6 +1160,20 @@ var GlslCanvas = function () { this.fragmentString = fragString; } + var lines = this.fragmentString.split(/\r?\n/); + this.fragmentString = "#define PLATFORM_WEBGL\n"; + + lines.forEach(function (line, i) { + var line_trim = line.trim(); + if (line_trim.startsWith('#include \"lygia')) { + var include_url = line_trim.substring(15); + include_url = "https://lygia.xyz" + include_url.replace(/\'|\"|\;|\s/g, ''); + _this2.fragmentString += getFile(include_url) + '\n'; + } else { + _this2.fragmentString += line + '\n'; + } + }); + this.animated = false; this.nDelta = (this.fragmentString.match(/u_delta/g) || []).length; this.nTime = (this.fragmentString.match(/u_time/g) || []).length; @@ -1155,16 +1183,16 @@ var GlslCanvas = function () { var nTextures = this.fragmentString.search(/sampler2D/g); if (nTextures) { - var lines = this.fragmentString.split('\n'); - for (var i = 0; i < lines.length; i++) { - var match = lines[i].match(/uniform\s*sampler2D\s*([\w]*);\s*\/\/\s*([\w|\:\/\/|\.|\-|\_]*)/i); + var _lines = this.fragmentString.split('\n'); + for (var i = 0; i < _lines.length; i++) { + var match = _lines[i].match(/uniform\s*sampler2D\s*([\w]*);\s*\/\/\s*([\w|\:\/\/|\.|\-|\_]*)/i); if (match) { var ext = match[2].split('.').pop().toLowerCase(); if (match[1] && match[2] && (ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'ogv' || ext === 'webm' || ext === 'mp4')) { this.setUniform(match[1], match[2]); } } - var main = lines[i].match(/\s*void\s*main\s*/g); + var main = _lines[i].match(/\s*void\s*main\s*/g); if (main) { break; } @@ -1266,7 +1294,7 @@ var GlslCanvas = function () { }, { key: 'loadTexture', value: function loadTexture(name, urlElementOrData, options) { - var _this2 = this; + var _this3 = this; if (!options) { options = {}; @@ -1286,13 +1314,13 @@ var GlslCanvas = function () { if (this.textures[name]) { this.textures[name].load(options); this.textures[name].on('loaded', function (args) { - _this2.forceRender = true; + _this3.forceRender = true; }); } } else { this.textures[name] = new Texture(this.gl, name, options); this.textures[name].on('loaded', function (args) { - _this2.forceRender = true; + _this3.forceRender = true; }); } } diff --git a/dist/GlslCanvas.js b/dist/GlslCanvas.js index 63a3ec2..7003f3a 100644 --- a/dist/GlslCanvas.js +++ b/dist/GlslCanvas.js @@ -6,14 +6,6 @@ var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; - - - - -function createCommonjsModule(fn, module) { - return module = { exports: {} }, fn(module, module.exports), module.exports; -} - var win; if (typeof window !== "undefined") { @@ -33,6 +25,9 @@ var isFunction_1 = isFunction; var toString = Object.prototype.toString; function isFunction (fn) { + if (!fn) { + return false + } var string = toString.call(fn); return string === '[object Function]' || (typeof fn === 'function' && string !== '[object RegExp]') || @@ -44,67 +39,9 @@ function isFunction (fn) { fn === window.prompt)) } -var trim_1 = createCommonjsModule(function (module, exports) { -exports = module.exports = trim; - -function trim(str){ - return str.replace(/^\s*|\s*$/g, ''); -} - -exports.left = function(str){ - return str.replace(/^\s*/, ''); +var trim = function(string) { + return string.replace(/^\s+|\s+$/g, ''); }; - -exports.right = function(str){ - return str.replace(/\s*$/, ''); -}; -}); - -var forEach_1 = forEach; - -var toString$1 = Object.prototype.toString; -var hasOwnProperty = Object.prototype.hasOwnProperty; - -function forEach(list, iterator, context) { - if (!isFunction_1(iterator)) { - throw new TypeError('iterator must be a function') - } - - if (arguments.length < 3) { - context = this; - } - - if (toString$1.call(list) === '[object Array]') - forEachArray$1(list, iterator, context); - else if (typeof list === 'string') - forEachString(list, iterator, context); - else - forEachObject(list, iterator, context); -} - -function forEachArray$1(array, iterator, context) { - for (var i = 0, len = array.length; i < len; i++) { - if (hasOwnProperty.call(array, i)) { - iterator.call(context, array[i], i, array); - } - } -} - -function forEachString(string, iterator, context) { - for (var i = 0, len = string.length; i < len; i++) { - // no such thing as a sparse string. - iterator.call(context, string.charAt(i), i, string); - } -} - -function forEachObject(object, iterator, context) { - for (var k in object) { - if (hasOwnProperty.call(object, k)) { - iterator.call(context, object[k], k, object); - } - } -} - var isArray = function(arg) { return Object.prototype.toString.call(arg) === '[object Array]'; }; @@ -115,29 +52,29 @@ var parseHeaders = function (headers) { var result = {}; - forEach_1( - trim_1(headers).split('\n') - , function (row) { - var index = row.indexOf(':') - , key = trim_1(row.slice(0, index)).toLowerCase() - , value = trim_1(row.slice(index + 1)); - - if (typeof(result[key]) === 'undefined') { - result[key] = value; - } else if (isArray(result[key])) { - result[key].push(value); - } else { - result[key] = [ result[key], value ]; - } - } - ); + var headersArr = trim(headers).split('\n'); + + for (var i = 0; i < headersArr.length; i++) { + var row = headersArr[i]; + var index = row.indexOf(':') + , key = trim(row.slice(0, index)).toLowerCase() + , value = trim(row.slice(index + 1)); + + if (typeof(result[key]) === 'undefined') { + result[key] = value; + } else if (isArray(result[key])) { + result[key].push(value); + } else { + result[key] = [ result[key], value ]; + } + } return result }; var immutable = extend; -var hasOwnProperty$1 = Object.prototype.hasOwnProperty; +var hasOwnProperty = Object.prototype.hasOwnProperty; function extend() { var target = {}; @@ -146,7 +83,7 @@ function extend() { var source = arguments[i]; for (var key in source) { - if (hasOwnProperty$1.call(source, key)) { + if (hasOwnProperty.call(source, key)) { target[key] = source[key]; } } @@ -914,6 +851,13 @@ function isDiff(a, b) { return false; } +function getFile(url) { + var httpRequest = new XMLHttpRequest(); + httpRequest.open("GET", url, false); + httpRequest.send(); + if (httpRequest.status == 200) return httpRequest.responseText;else return ""; +} + function subscribeMixin$1(target) { var listeners = new Set(); @@ -1155,6 +1099,12 @@ var Texture = function () { if (isVideo) { element = document.createElement('video'); element.autoplay = true; + + element.muted = true; /* required for modern browsers to autoplay video */ + setTimeout(function () { + element.play(); /* doesn't block promise but needs a more elegant solution */ + }, 1); + options.filtering = 'nearest'; // element.preload = 'auto'; // element.style.display = 'none'; @@ -1540,6 +1490,7 @@ var GlslCanvas = function () { }, { key: 'load', value: function load(fragString, vertString) { + var _this2 = this; // Load vertex shader if there is one if (vertString) { @@ -1551,6 +1502,20 @@ var GlslCanvas = function () { this.fragmentString = fragString; } + var lines = this.fragmentString.split(/\r?\n/); + this.fragmentString = "#define PLATFORM_WEBGL\n"; + + lines.forEach(function (line, i) { + var line_trim = line.trim(); + if (line_trim.startsWith('#include \"lygia')) { + var include_url = line_trim.substring(15); + include_url = "https://lygia.xyz" + include_url.replace(/\'|\"|\;|\s/g, ''); + _this2.fragmentString += getFile(include_url) + '\n'; + } else { + _this2.fragmentString += line + '\n'; + } + }); + this.animated = false; this.nDelta = (this.fragmentString.match(/u_delta/g) || []).length; this.nTime = (this.fragmentString.match(/u_time/g) || []).length; @@ -1560,16 +1525,16 @@ var GlslCanvas = function () { var nTextures = this.fragmentString.search(/sampler2D/g); if (nTextures) { - var lines = this.fragmentString.split('\n'); - for (var i = 0; i < lines.length; i++) { - var match = lines[i].match(/uniform\s*sampler2D\s*([\w]*);\s*\/\/\s*([\w|\:\/\/|\.|\-|\_]*)/i); + var _lines = this.fragmentString.split('\n'); + for (var i = 0; i < _lines.length; i++) { + var match = _lines[i].match(/uniform\s*sampler2D\s*([\w]*);\s*\/\/\s*([\w|\:\/\/|\.|\-|\_]*)/i); if (match) { var ext = match[2].split('.').pop().toLowerCase(); if (match[1] && match[2] && (ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'ogv' || ext === 'webm' || ext === 'mp4')) { this.setUniform(match[1], match[2]); } } - var main = lines[i].match(/\s*void\s*main\s*/g); + var main = _lines[i].match(/\s*void\s*main\s*/g); if (main) { break; } @@ -1671,7 +1636,7 @@ var GlslCanvas = function () { }, { key: 'loadTexture', value: function loadTexture(name, urlElementOrData, options) { - var _this2 = this; + var _this3 = this; if (!options) { options = {}; @@ -1691,13 +1656,13 @@ var GlslCanvas = function () { if (this.textures[name]) { this.textures[name].load(options); this.textures[name].on('loaded', function (args) { - _this2.forceRender = true; + _this3.forceRender = true; }); } } else { this.textures[name] = new Texture(this.gl, name, options); this.textures[name].on('loaded', function (args) { - _this2.forceRender = true; + _this3.forceRender = true; }); } } diff --git a/dist/GlslCanvas.min.js b/dist/GlslCanvas.min.js index 37d7bc7..ad991f8 100644 --- a/dist/GlslCanvas.min.js +++ b/dist/GlslCanvas.min.js @@ -1 +1,2 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.GlslCanvas=t()}(this,function(){"use strict";function e(e,t,r){for(var i=0,n=e.length;i0&&(c=setTimeout(function(){if(!f){f=!0,h.abort("timeout");var e=new Error("XMLHttpRequest timeout");e.code="ETIMEDOUT",r(e)}},e.timeout)),h.setRequestHeader)for(l in m)m.hasOwnProperty(l)&&h.setRequestHeader(l,m[l]);else if(e.headers&&!i(e.headers))throw new Error("Headers cannot be set on an XDomainRequest object");return"responseType"in e&&(h.responseType=e.responseType),"beforeSend"in e&&"function"==typeof e.beforeSend&&e.beforeSend(h),h.send(v||null),h}function o(e){try{if("document"===e.responseType)return e.responseXML;var t=e.responseXML&&"parsererror"===e.responseXML.documentElement.nodeName;if(""===e.responseType&&!t)return e.responseXML}catch(e){}return null}function u(e){return'\n\n
\n
\n
'+e+"
\n
\n
\n"}function h(e,t,r){function i(t){var r=e.parentNode;r&&(r.innerHTML=u(t))}function n(e,t){"function"==typeof r?r(e):i(t)}if(!window.WebGLRenderingContext)return n(H,O),null;var a=l(e,t);return a?a.getExtension("OES_standard_derivatives"):n(j,G),a}function l(e,t){for(var r=["webgl","experimental-webgl"],i=null,n=0;n1&&void 0!==arguments[1]?arguments[1]:null,r=[];for(var i in e){var n=e[i],a=void 0;if(t&&(i=t+"."+i),"number"==typeof n)r.push({type:"float",method:"1f",name:i,value:n});else if(Array.isArray(n)){if("number"==typeof n[0])1===n.length?r.push({type:"float",method:"1f",name:i,value:n}):n.length>=2&&n.length<=4?r.push({type:"vec"+n.length,method:n.length+"fv",name:i,value:n}):n.length>4&&r.push({type:"float[]",method:"1fv",name:i+"[0]",value:n});else if("string"==typeof n[0])r.push({type:"sampler2D",method:"1i",name:i,value:n});else if(Array.isArray(n[0])&&"number"==typeof n[0][0]){if(n[0].length>=2&&n[0].length<=4)for(a=0;a0&&e.getBoundingClientRect().top<(window.innerHeight||document.documentElement.clientHeight)}function v(e){return 0==(e&e-1)}function m(){return/^((?!chrome|android).)*safari/i.test(navigator.userAgent)}function E(e,t){return!(!e||!t)&&e.toString()!==t.toString()}function T(e){var t=new Set;return Object.assign(e,{on:function(e,r){var i={};i[e]=r,t.add(i)},off:function(e,r){if(r){var i={};i[e]=r,t.delete(i)}else{var n=!0,a=!1,s=void 0;try{for(var o,u=t[Symbol.iterator]();!(n=(o=u.next()).done);n=!0){var h=o.value,l=!0,f=!1,c=void 0;try{for(var d,g=Object.keys(h)[Symbol.iterator]();!(l=(d=g.next()).done);l=!0)if(d.value===e)return void t.delete(h)}catch(e){f=!0,c=e}finally{try{!l&&g.return&&g.return()}finally{if(f)throw c}}}}catch(e){a=!0,s=e}finally{try{!n&&u.return&&u.return()}finally{if(a)throw s}}}},listSubscriptions:function(){var e=!0,r=!1,i=void 0;try{for(var n,a=t[Symbol.iterator]();!(e=(n=a.next()).done);e=!0){var s=n.value;console.log(s)}}catch(e){r=!0,i=e}finally{try{!e&&a.return&&a.return()}finally{if(r)throw i}}},subscribe:function(e){t.add(e)},unsubscribe:function(e){t.delete(e)},unsubscribeAll:function(){t.clear()},trigger:function(e){for(var r=arguments.length,i=Array(r>1?r-1:0),n=1;n0){window.glslCanvases=[];for(var t=0;t2&&void 0!==arguments[2]?arguments[2]:{};C(this,e),T(this),this.gl=t,this.texture=t.createTexture(),this.texture&&(this.valid=!0),this.bind(),this.name=r,this.source=null,this.sourceType=null,this.loading=null,this.setData(1,1,new Uint8Array([0,0,0,255]),{filtering:"linear"}),this.setFiltering(i.filtering),this.load(i)}return k(e,[{key:"destroy",value:function(){this.valid&&(this.gl.deleteTexture(this.texture),this.texture=null,delete this.data,this.data=null,this.valid=!1)}},{key:"bind",value:function(t){this.valid&&("number"==typeof t&&e.activeUnit!==t&&(this.gl.activeTexture(this.gl.TEXTURE0+t),e.activeUnit=t),e.activeTexture!==this.texture&&(this.gl.bindTexture(this.gl.TEXTURE_2D,this.texture),e.activeTexture=this.texture))}},{key:"load",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.loading=null,"string"==typeof e.url?void 0!==this.url&&e.url===this.url||this.setUrl(e.url,e):e.element?this.setElement(e.element,e):e.data&&e.width&&e.height&&this.setData(e.width,e.height,e.data,e)}},{key:"setUrl",value:function(e){var t=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(this.valid)return this.url=e,this.source=this.url,this.sourceType="url",this.loading=new Promise(function(i,n){var a=e.split(".").pop().toLowerCase(),s="ogv"===a||"webm"===a||"mp4"===a,o=void 0;s?((o=document.createElement("video")).autoplay=!0,r.filtering="nearest"):o=new Image,o.onload=function(){try{t.setElement(o,r)}catch(e){console.log("Texture '"+t.name+"': failed to load url: '"+t.source+"'",e,r)}i(t)},o.onerror=function(e){console.log("Texture '"+t.name+"': failed to load url: '"+t.source+"'",e,r),i(t)},m()&&"data:"===t.source.slice(0,5)||(o.crossOrigin="anonymous"),o.src=t.source,s&&t.setElement(o,r)}),this.loading}},{key:"setData",value:function(e,t,r){var i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};return this.width=e,this.height=t,this.source=r,this.sourceType="data",this.update(i),this.setFiltering(i),this.loading=Promise.resolve(this),this.loading}},{key:"setElement",value:function(e,t){var r=this,i=e;if("string"==typeof e&&(e=document.querySelector(e)),e instanceof HTMLCanvasElement||e instanceof HTMLImageElement||e instanceof HTMLVideoElement)this.source=e,this.sourceType="element",e instanceof HTMLVideoElement?(this.width=this.source.videoWidth,this.height=this.source.videoHeight,e.addEventListener("canplaythrough",function(){r.intervalID=setInterval(function(){r.update(t)},15)},!0),e.addEventListener("ended",function(){e.currentTime=0,e.play()},!0)):this.update(t),this.setFiltering(t);else{var n="the 'element' parameter (`element: "+JSON.stringify(i)+"`) must be a CSS ";n+="selector string, or a , or