From eba98770cdd761e0961586a8a1317369c2f399cc Mon Sep 17 00:00:00 2001 From: William Stallwood Date: Fri, 28 Jun 2019 19:14:46 -0400 Subject: [PATCH 01/12] ugh --- data/random.glsl | 9 +++++++++ dist/GlslCanvas.es.js | 2 +- dist/GlslCanvas.js | 27 ++++++++++++++++++++++++--- index.html | 8 +++++++- 4 files changed, 41 insertions(+), 5 deletions(-) create mode 100644 data/random.glsl diff --git a/data/random.glsl b/data/random.glsl new file mode 100644 index 0000000..62895ec --- /dev/null +++ b/data/random.glsl @@ -0,0 +1,9 @@ +float random(vec2 st){ return fract( sin( dot(st,vec2(3.678,678.90)) )*678910.0 ); } +float random (in float x) { return fract(sin(x)*43758.5453123); } + +vec2 random2(vec2 st) +{ + st = vec2( dot(st,vec2(127.1,311.7)), + dot(st,vec2(269.5,183.3)) ); + return -1.0 + 2.0*fract(sin(st)*43758.5453123); +} \ No newline at end of file diff --git a/dist/GlslCanvas.es.js b/dist/GlslCanvas.es.js index 4043d02..38eab61 100644 --- a/dist/GlslCanvas.es.js +++ b/dist/GlslCanvas.es.js @@ -305,7 +305,7 @@ function create3DContext(canvas, optAttribs) { */ function createShader(main, source, type, offset) { var gl = main.gl; - + var shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); diff --git a/dist/GlslCanvas.js b/dist/GlslCanvas.js index 9cd18ee..66c2d96 100644 --- a/dist/GlslCanvas.js +++ b/dist/GlslCanvas.js @@ -7,9 +7,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; } @@ -705,6 +702,27 @@ function create3DContext(canvas, optAttribs) { return context; } + + // this.nDelta = (this.fragmentString.match(/u_delta/g) || []).length; + // var nTextures = this.fragmentString.search(/sampler2D/g); + // var match = lines[i].match(/uniform\s*sampler2D\s*([\w]*);\s*\/\/\s*([\w|\:\/\/|\.|\-|\_]*)/i); + // var main = lines[i].match(/\s*void\s*main\s*/g); + +function stripIncludes( source ) +{ + let exp = /#include\s([\w].*)/ig; + console.log('strip source',source); + let file = source.match(/(?=#include).*/ig); + // file = file[0].match(/([\s]*.\s)/ig); + // /?<=WORD)(?s)(.*$) + // /(\?<=#include)\s.*/ig // NOPE + // (?<=WORD).*$ + // (?<=sentence).* + console.log("file:",file); + source = source.replace(exp,""); + console.log('output',source); + return source; +} /* * Create a Vertex of a specific type (gl.VERTEX_SHADER/) */ @@ -1447,6 +1465,9 @@ var GlslCanvas = function () { }); } + // Need to strip unifoms here + this.fragmentString = stripIncludes( this.fragmentString ); + this.load(); if (!this.program) { diff --git a/index.html b/index.html index 48a55da..4517a97 100644 --- a/index.html +++ b/index.html @@ -56,12 +56,15 @@ + Date: Tue, 2 Jul 2019 12:01:10 -0400 Subject: [PATCH 03/12] ready to load files --- dist/GlslCanvas.es.js | 96 +++++++++++++++++++++++++++++++-- dist/GlslCanvas.js | 120 +++++++++++++++++++++++++++++++++--------- lib/GlslCanvas.js | 94 ++++++++++++++++++++++++++++++++- src/GlslCanvas.js | 4 ++ src/gl/Includes.js | 58 ++++++++++++++++++++ 5 files changed, 341 insertions(+), 31 deletions(-) create mode 100644 src/gl/Includes.js diff --git a/dist/GlslCanvas.es.js b/dist/GlslCanvas.es.js index 38eab61..0a444b3 100644 --- a/dist/GlslCanvas.es.js +++ b/dist/GlslCanvas.es.js @@ -305,7 +305,7 @@ function create3DContext(canvas, optAttribs) { */ function createShader(main, source, type, offset) { var gl = main.gl; - + var shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); @@ -645,8 +645,6 @@ function subscribeMixin$1(target) { } // Texture management -// GL texture wrapper object for keeping track of a global set of textures, keyed by a unique user-defined name - var Texture = function () { function Texture(gl, name) { var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; @@ -941,6 +939,9 @@ var Texture = function () { return Texture; }(); +// Report max texture size for a GL context + + Texture.getMaxTextureSize = function (gl) { return gl.getParameter(gl.MAX_TEXTURE_SIZE); }; @@ -948,6 +949,92 @@ Texture.getMaxTextureSize = function (gl) { // Global set of textures, by name Texture.activeUnit = -1; +var Includes = function () { + function Includes() { + classCallCheck(this, Includes); + + this.files = {}; + } + + createClass(Includes, [{ + key: 'stripIncludes', + value: function stripIncludes(source) { + var exp = /#include\s([\w].*)/ig; + var file = source.match(/(?=#include).*/ig); + + var m; + do { + m = exp.exec(source); + if (m) { + if (this.isFileNew(m[1]) == false) { + this.files[m[1]] = 'data'; + this.loadFile(m[1]); + } + + console.log(this.files); + } + } while (m); + + source = source.replace(exp, ""); + return source; + } + }, { + key: 'loadFile', + value: function loadFile(src) { + var p = new Promise(function (resolve, reject) { + var element = document.createElement('script'); + element.async = true; + element.type = "text/javascript"; + + var parent = 'body'; + var attr = 'src'; + + // Important success and error for the promise + element.onload = function () { + console.log('loaded:', src);resolve(src); + }; + element.onerror = function () { + return reject(src); + }; + element[attr] = src; + document[parent].appendChild(element); + }); + } + }, { + key: 'isFileNew', + value: function isFileNew(src) { + var keys = Object.keys(this.files); + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; + + try { + for (var _iterator = keys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var key = _step.value; + + if (key === src) return true; + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return) { + _iterator.return(); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } + } + + return false; + } + }]); + return Includes; +}(); + /* The MIT License (MIT) @@ -1000,6 +1087,7 @@ var GlslCanvas = function () { this.uniforms = {}; this.vbo = {}; this.isValid = false; + this.includes = new Includes(); this.BUFFER_COUNT = 0; // this.TEXTURE_COUNT = 0; @@ -1042,6 +1130,8 @@ var GlslCanvas = function () { }); } + this.fragmentString = this.includes.stripIncludes(this.fragmentString); + this.load(); if (!this.program) { diff --git a/dist/GlslCanvas.js b/dist/GlslCanvas.js index 98c2992..ce62e2a 100644 --- a/dist/GlslCanvas.js +++ b/dist/GlslCanvas.js @@ -7,6 +7,9 @@ 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; } @@ -702,28 +705,6 @@ function create3DContext(canvas, optAttribs) { return context; } - - // this.nDelta = (this.fragmentString.match(/u_delta/g) || []).length; - // var nTextures = this.fragmentString.search(/sampler2D/g); - // var match = lines[i].match(/uniform\s*sampler2D\s*([\w]*);\s*\/\/\s*([\w|\:\/\/|\.|\-|\_]*)/i); - // var main = lines[i].match(/\s*void\s*main\s*/g); - -function stripIncludes( source ) -{ - let exp = /#include\s([\w].*)/ig; - let file = source.match(/(?=#include).*/ig); - - var m; - do { - m = exp.exec(source); - if (m) { - console.log(m[1], m[2]); - } - } while (m); - - source = source.replace(exp,""); - return source; -} /* * Create a Vertex of a specific type (gl.VERTEX_SHADER/) */ @@ -1069,8 +1050,6 @@ function subscribeMixin$1(target) { } // Texture management -// GL texture wrapper object for keeping track of a global set of textures, keyed by a unique user-defined name - var Texture = function () { function Texture(gl, name) { var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; @@ -1365,6 +1344,9 @@ var Texture = function () { return Texture; }(); +// Report max texture size for a GL context + + Texture.getMaxTextureSize = function (gl) { return gl.getParameter(gl.MAX_TEXTURE_SIZE); }; @@ -1372,6 +1354,92 @@ Texture.getMaxTextureSize = function (gl) { // Global set of textures, by name Texture.activeUnit = -1; +var Includes = function () { + function Includes() { + classCallCheck(this, Includes); + + this.files = {}; + } + + createClass(Includes, [{ + key: 'stripIncludes', + value: function stripIncludes(source) { + var exp = /#include\s([\w].*)/ig; + var file = source.match(/(?=#include).*/ig); + + var m; + do { + m = exp.exec(source); + if (m) { + if (this.isFileNew(m[1]) == false) { + this.files[m[1]] = 'data'; + this.loadFile(m[1]); + } + + console.log(this.files); + } + } while (m); + + source = source.replace(exp, ""); + return source; + } + }, { + key: 'loadFile', + value: function loadFile(src) { + var p = new Promise(function (resolve, reject) { + var element = document.createElement('script'); + element.async = true; + element.type = "text/javascript"; + + var parent = 'body'; + var attr = 'src'; + + // Important success and error for the promise + element.onload = function () { + console.log('loaded:', src);resolve(src); + }; + element.onerror = function () { + return reject(src); + }; + element[attr] = src; + document[parent].appendChild(element); + }); + } + }, { + key: 'isFileNew', + value: function isFileNew(src) { + var keys = Object.keys(this.files); + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; + + try { + for (var _iterator = keys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var key = _step.value; + + if (key === src) return true; + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return) { + _iterator.return(); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } + } + + return false; + } + }]); + return Includes; +}(); + /* The MIT License (MIT) @@ -1424,6 +1492,7 @@ var GlslCanvas = function () { this.uniforms = {}; this.vbo = {}; this.isValid = false; + this.includes = new Includes(); this.BUFFER_COUNT = 0; // this.TEXTURE_COUNT = 0; @@ -1466,8 +1535,7 @@ var GlslCanvas = function () { }); } - // Need to strip unifoms here - this.fragmentString = stripIncludes( this.fragmentString ); + this.fragmentString = this.includes.stripIncludes(this.fragmentString); this.load(); diff --git a/lib/GlslCanvas.js b/lib/GlslCanvas.js index ead85df..c828116 100644 --- a/lib/GlslCanvas.js +++ b/lib/GlslCanvas.js @@ -1046,8 +1046,6 @@ function subscribeMixin$1(target) { } // Texture management -// GL texture wrapper object for keeping track of a global set of textures, keyed by a unique user-defined name - var Texture = function () { function Texture(gl, name) { var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; @@ -1342,6 +1340,9 @@ var Texture = function () { return Texture; }(); +// Report max texture size for a GL context + + Texture.getMaxTextureSize = function (gl) { return gl.getParameter(gl.MAX_TEXTURE_SIZE); }; @@ -1349,6 +1350,92 @@ Texture.getMaxTextureSize = function (gl) { // Global set of textures, by name Texture.activeUnit = -1; +var Includes = function () { + function Includes() { + classCallCheck(this, Includes); + + this.files = {}; + } + + createClass(Includes, [{ + key: 'stripIncludes', + value: function stripIncludes(source) { + var exp = /#include\s([\w].*)/ig; + var file = source.match(/(?=#include).*/ig); + + var m; + do { + m = exp.exec(source); + if (m) { + if (this.isFileNew(m[1]) == false) { + this.files[m[1]] = 'data'; + this.loadFile(m[1]); + } + + console.log(this.files); + } + } while (m); + + source = source.replace(exp, ""); + return source; + } + }, { + key: 'loadFile', + value: function loadFile(src) { + var p = new Promise(function (resolve, reject) { + var element = document.createElement('script'); + element.async = true; + element.type = "text/javascript"; + + var parent = 'body'; + var attr = 'src'; + + // Important success and error for the promise + element.onload = function () { + console.log('loaded:', src);resolve(src); + }; + element.onerror = function () { + return reject(src); + }; + element[attr] = src; + document[parent].appendChild(element); + }); + } + }, { + key: 'isFileNew', + value: function isFileNew(src) { + var keys = Object.keys(this.files); + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; + + try { + for (var _iterator = keys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var key = _step.value; + + if (key === src) return true; + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return) { + _iterator.return(); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } + } + + return false; + } + }]); + return Includes; +}(); + /* The MIT License (MIT) @@ -1401,6 +1488,7 @@ var GlslCanvas = function () { this.uniforms = {}; this.vbo = {}; this.isValid = false; + this.includes = new Includes(); this.BUFFER_COUNT = 0; // this.TEXTURE_COUNT = 0; @@ -1443,6 +1531,8 @@ var GlslCanvas = function () { }); } + this.fragmentString = this.includes.stripIncludes(this.fragmentString); + this.load(); if (!this.program) { diff --git a/src/GlslCanvas.js b/src/GlslCanvas.js index 382041d..e47f010 100644 --- a/src/GlslCanvas.js +++ b/src/GlslCanvas.js @@ -26,6 +26,7 @@ import { createProgram, createShader, parseUniforms, setupWebGL } from './gl/gl' import Texture from './gl/Texture'; import { isCanvasVisible, isDiff } from './tools/common'; import { subscribeMixin } from './tools/mixin'; +import Includes from './gl/Includes'; export default class GlslCanvas { constructor(canvas, contextOptions, options) { @@ -55,6 +56,7 @@ export default class GlslCanvas { this.uniforms = {}; this.vbo = {}; this.isValid = false; + this.includes = new Includes(); this.BUFFER_COUNT = 0; // this.TEXTURE_COUNT = 0; @@ -123,6 +125,8 @@ void main(){ }); } + this.fragmentString = this.includes.stripIncludes( this.fragmentString ); + this.load(); if (!this.program) { diff --git a/src/gl/Includes.js b/src/gl/Includes.js new file mode 100644 index 0000000..a2ff129 --- /dev/null +++ b/src/gl/Includes.js @@ -0,0 +1,58 @@ +export default class Includes { + constructor() + { + this.files = {}; + } + + stripIncludes( source ) + { + let exp = /#include\s([\w].*)/ig; + let file = source.match(/(?=#include).*/ig); + + var m; + do { + m = exp.exec(source); + if (m) { + if(this.isFileNew(m[1]) == false) + { + this.files[m[1]] = 'data'; + this.loadFile(m[1]); + } + + console.log(this.files); + } + } while (m); + + source = source.replace(exp,""); + return source; + } + + loadFile(src) + { + let p = new Promise(function(resolve, reject) { + var element = document.createElement('script'); + element.async = true; + element.type = "text/javascript"; + + var parent = 'body'; + var attr = 'src'; + + // Important success and error for the promise + element.onload = () => { console.log('loaded:',src); resolve(src) }; + element.onerror = () => reject(src); + element[attr] = src; + document[parent].appendChild(element); + }); + } + + + isFileNew(src) + { + const keys = Object.keys(this.files) + for (const key of keys) { + if(key === src) + return true; + } + return false; + } +} \ No newline at end of file From 46943e48df2f934d381ea7e0c09b0630f2415977 Mon Sep 17 00:00:00 2001 From: William Stallwood Date: Tue, 2 Jul 2019 18:11:29 -0400 Subject: [PATCH 04/12] temporary include injection hack --- dist/GlslCanvas.es.js | 70 ++++++++++++++++++++++++++++----------- dist/GlslCanvas.js | 77 ++++++++++++++++++++++++++++++------------- index.html | 4 +-- lib/GlslCanvas.js | 71 ++++++++++++++++++++++++++++----------- src/GlslCanvas.js | 16 +++++++-- src/gl/Includes.js | 48 ++++++++++++++++++--------- 6 files changed, 205 insertions(+), 81 deletions(-) diff --git a/dist/GlslCanvas.es.js b/dist/GlslCanvas.es.js index 0a444b3..18d3e20 100644 --- a/dist/GlslCanvas.es.js +++ b/dist/GlslCanvas.es.js @@ -1,4 +1,5 @@ import xhr from 'xhr'; +import 'constants'; var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; @@ -959,6 +960,8 @@ var Includes = function () { createClass(Includes, [{ key: 'stripIncludes', value: function stripIncludes(source) { + var _this = this; + var exp = /#include\s([\w].*)/ig; var file = source.match(/(?=#include).*/ig); @@ -967,37 +970,55 @@ var Includes = function () { m = exp.exec(source); if (m) { if (this.isFileNew(m[1]) == false) { - this.files[m[1]] = 'data'; - this.loadFile(m[1]); + (function () { + var src = m[1]; + _this.files[src] = ''; + _this.loadFile(src).then(function (data) { + return _this.includeFile(src, data); + }).catch(function (res) { + return console.log('include error:', src, ' ', res); + }); + })(); } - console.log(this.files); + // console.log(this.files); } } while (m); source = source.replace(exp, ""); return source; } + }, { + key: 'include', + value: function include(data) {} // going to over-ride this + + }, { + key: 'includeFile', + value: function includeFile(src, data) { + // console.log('put include file in our shader.',src,data); + this.files[src] = data; + this.include(data); + // console.log(this.files); + } }, { key: 'loadFile', value: function loadFile(src) { - var p = new Promise(function (resolve, reject) { - var element = document.createElement('script'); - element.async = true; - element.type = "text/javascript"; - - var parent = 'body'; - var attr = 'src'; - - // Important success and error for the promise - element.onload = function () { - console.log('loaded:', src);resolve(src); + return new Promise(function (resolve, reject) { + var client = new XMLHttpRequest(); + client.open('GET', src, true); + client.overrideMimeType("text/plain"); + client.setRequestHeader("Content-type", "text/html; charset=utf-8"); + client.onreadystatechange = function () { + + if (client.readyState == 4) { + if (client.status == 200 || client.responseText != '') // || client.status == 0 + resolve(client.responseText);else reject(client.type); + } }; - element.onerror = function () { - return reject(src); + client.onerror = function (ex) { + return reject(ex); }; - element[attr] = src; - document[parent].appendChild(element); + client.send(); }); } }, { @@ -1130,9 +1151,20 @@ var GlslCanvas = function () { }); } + // test injection for data includes this.fragmentString = this.includes.stripIncludes(this.fragmentString); + this.includes.include = function (data) { + // console.log('do it',data); + var source = _this.fragmentString; + var def = /\#ifdef(\s\S*)+\#endif/img; + var header = source.match(def); + source = source.replace(def, header + '\n\n' + data); + _this.fragmentString = source; + console.log(_this.fragmentString); + _this.load(_this.fragmentString, _this.vertexString); + }; - this.load(); + // this.load(); if (!this.program) { return; diff --git a/dist/GlslCanvas.js b/dist/GlslCanvas.js index ce62e2a..754dfd0 100644 --- a/dist/GlslCanvas.js +++ b/dist/GlslCanvas.js @@ -1,8 +1,8 @@ (function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : - typeof define === 'function' && define.amd ? define(factory) : - (global.GlslCanvas = factory()); -}(this, (function () { 'use strict'; + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('constants')) : + typeof define === 'function' && define.amd ? define(['constants'], factory) : + (global.GlslCanvas = factory(global.constants)); +}(this, (function (constants) { 'use strict'; var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; @@ -1364,6 +1364,8 @@ var Includes = function () { createClass(Includes, [{ key: 'stripIncludes', value: function stripIncludes(source) { + var _this = this; + var exp = /#include\s([\w].*)/ig; var file = source.match(/(?=#include).*/ig); @@ -1372,37 +1374,55 @@ var Includes = function () { m = exp.exec(source); if (m) { if (this.isFileNew(m[1]) == false) { - this.files[m[1]] = 'data'; - this.loadFile(m[1]); + (function () { + var src = m[1]; + _this.files[src] = ''; + _this.loadFile(src).then(function (data) { + return _this.includeFile(src, data); + }).catch(function (res) { + return console.log('include error:', src, ' ', res); + }); + })(); } - console.log(this.files); + // console.log(this.files); } } while (m); source = source.replace(exp, ""); return source; } + }, { + key: 'include', + value: function include(data) {} // going to over-ride this + + }, { + key: 'includeFile', + value: function includeFile(src, data) { + // console.log('put include file in our shader.',src,data); + this.files[src] = data; + this.include(data); + // console.log(this.files); + } }, { key: 'loadFile', value: function loadFile(src) { - var p = new Promise(function (resolve, reject) { - var element = document.createElement('script'); - element.async = true; - element.type = "text/javascript"; - - var parent = 'body'; - var attr = 'src'; - - // Important success and error for the promise - element.onload = function () { - console.log('loaded:', src);resolve(src); + return new Promise(function (resolve, reject) { + var client = new XMLHttpRequest(); + client.open('GET', src, true); + client.overrideMimeType("text/plain"); + client.setRequestHeader("Content-type", "text/html; charset=utf-8"); + client.onreadystatechange = function () { + + if (client.readyState == 4) { + if (client.status == 200 || client.responseText != '') // || client.status == 0 + resolve(client.responseText);else reject(client.type); + } }; - element.onerror = function () { - return reject(src); + client.onerror = function (ex) { + return reject(ex); }; - element[attr] = src; - document[parent].appendChild(element); + client.send(); }); } }, { @@ -1535,9 +1555,20 @@ var GlslCanvas = function () { }); } + // test injection for data includes this.fragmentString = this.includes.stripIncludes(this.fragmentString); + this.includes.include = function (data) { + // console.log('do it',data); + var source = _this.fragmentString; + var def = /\#ifdef(\s\S*)+\#endif/img; + var header = source.match(def); + source = source.replace(def, header + '\n\n' + data); + _this.fragmentString = source; + console.log(_this.fragmentString); + _this.load(_this.fragmentString, _this.vertexString); + }; - this.load(); + // this.load(); if (!this.program) { return; diff --git a/index.html b/index.html index b5d4624..bf63425 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ GlslCanvas - +