- added VTepL => is not WIP but works better then Template.js and will replace 90% of all templates with one do the for feature

- fixed loading songs
- cleanup utils
- added some helper class
- cleanup preparing of WEBGL2
- added 3D wave
- added light-support
- added configs
- added gui-events for playing, shuffling and playlist

.gitignore

@@ -1,2 +1,3 @@
 /webGLTest.iml
 /.idea/
+/build/node_modules/

build/gulpfile.js

@@ -0,0 +1,23 @@
+const gulp = require('gulp'),
+    spriteBuild = require('./task/spriteBuilder').buildIconSprites,
+    scss = require('./task/scss').buildCSS,
+    js = require('./task/js').build,
+    gui = require('./task/jsonMinifier').build,
+    worker = require('./task/worker').build;
+
+gulp.task('scss', scss);
+gulp.task('js', js);
+gulp.task('sprite', spriteBuild);
+gulp.task('gui', gui);
+gulp.task('workerJS', worker);
+
+gulp.task('watchMe', () => {
+    gulp.watch('./../raw/javascript/**/*.js', gulp.series('js'));
+    gulp.watch('./../raw/worker/**/*.js', gulp.series('workerJS'));
+    gulp.watch('./../raw/scss/**/*.scss', gulp.series('scss'));
+    gulp.watch('./../raw/gui/**/*.json', gulp.series('gui'));
+});
+
+gulp.task('default', gulp.parallel('js', 'scss', 'sprite', 'gui', 'workerJS'));
+
+gulp.task('watch', gulp.parallel('js', 'scss', 'sprite', 'gui', 'workerJS', 'watchMe'));

build/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "vtwebbuild",
+  "version": "1.0.0",
+  "description": "Buildprocess for VTWeb like babble, sass and other things",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/versustune/vtweb.git"
+  },
+  "author": "Maurice Grönwoldt",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://gitlab.com/versustune/vtweb/issues"
+  },
+  "homepage": "https://gitlab.com/versustune/vtweb#readme",
+  "dependencies": {
+    "@fortawesome/fontawesome-pro": "^5.5.0",
+    "@fortawesome/pro-light-svg-icons": "^5.5.0",
+    "@fortawesome/pro-regular-svg-icons": "^5.5.0",
+    "@fortawesome/pro-solid-svg-icons": "^5.5.0",
+    "fontawesome-svg-sprite-generator": "^1.0.0",
+    "gulp": "^4.0.0",
+    "gulp-clean-css": "^4.0.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-rename": "^1.4.0",
+    "gulp-sass": "^4.0.2",
+    "gulp-terser": "^1.1.7",
+    "merge-stream": "^1.0.1",
+    "node-fs-extra": "^0.8.2",
+    "require-dir": "^1.0.0",
+    "svg-sprite": "^1.4.0"
+  }
+}

build/task/js.js

@@ -0,0 +1,51 @@
+const terser = require('gulp-terser'),
+    concat = require('gulp-concat'),
+    rename = require('gulp-rename'),
+    gulp = require('gulp');
+
+const basePath = __dirname + '/../../raw/javascript/';
+const visualPath = basePath + 'visuals/';
+const visuals = [
+    visualPath + 'sphere.js',
+    visualPath + 'wave.js',
+    visualPath + 'wave2d.js',
+    visualPath + 'water.js',
+    //visualPath + 'experimental.js',
+]
+const config = {
+    src: [
+        basePath + 'utils.js',
+        basePath + 'gl/glUtils.js',
+        basePath + 'gl/Camera.js',
+        basePath + 'template.js',
+        basePath + 'gl/handler.js',
+        basePath + 'audio.js',
+        basePath + 'FileHandler.js',
+        basePath + 'FetchHandler.js',
+        basePath + 'playerConfigHandler.js',
+        basePath + 'player.js',
+        basePath + 'gui.js',
+        basePath + 'visual.js',
+        basePath + 'imageUploader.js',
+        basePath + 'notification.js',
+        basePath + 'config.js',
+        ...visuals,
+        basePath + 'eventHandler.js',
+        basePath + 'select.js',
+        basePath + 'keys.js',
+        basePath + 'startup.js',
+        basePath + 'app.js'
+    ],
+    dest: __dirname + '/../../out/js'
+};
+
+function build() {
+    return gulp.src(config.src)
+        .pipe(concat('scripts.js'))
+        .pipe(gulp.dest(config.dest))
+        .pipe(rename('scripts.min.js'))
+        .pipe(terser().on('error', console.error))
+        .pipe(gulp.dest(config.dest));
+}
+
+module.exports.build = build;

build/task/jsonMinifier.js

@@ -0,0 +1,26 @@
+const gulp = require('gulp'),
+    fs = require('fs')
+
+
+const basePath = __dirname + '/../../raw/gui/';
+
+const config = {
+    src: basePath + '*.json',
+    dest: __dirname + '/../../out/gui/'
+}
+
+function build() {
+    fs.readdirSync(basePath).forEach(file => {
+        try {
+            if (fs.lstatSync(basePath + file).isDirectory())
+                return
+            let content = fs.readFileSync(basePath + file).toString()
+            fs.writeFileSync(config.dest + file, JSON.stringify(JSON.parse(content)))
+        } catch (e) {
+            console.error(e)
+        }
+    })
+    return gulp.src(config.src)
+}
+
+module.exports.build = build;

build/task/scss.js

@@ -0,0 +1,17 @@
+const sass = require('gulp-sass'),
+    clean = require('gulp-clean-css'),
+    gulp = require('gulp');
+
+const config = {
+    src: __dirname + '/../../raw/scss/**/*.scss',
+    dest: __dirname + '/../../out/theme'
+};
+
+function buildCSS() {
+    return gulp.src(config.src)
+        .pipe(sass().on('error', sass.logError))
+        .pipe(clean())
+        .pipe(gulp.dest(config.dest));
+}
+
+module.exports.buildCSS = buildCSS;

build/task/spriteBuilder.js

@@ -0,0 +1,106 @@
+const faSvgSprite = require('fontawesome-svg-sprite-generator'),
+    SVGSpriter = require('svg-sprite'),
+    path = require('path'),
+    fs = require('fs'),
+    fal = require('@fortawesome/pro-light-svg-icons'),
+    far = require('@fortawesome/pro-regular-svg-icons'),
+    fas = require('@fortawesome/pro-solid-svg-icons'),
+    fsextra = require('node-fs-extra'),
+    gulp = require('gulp');
+
+let toMergeData = [];
+
+function buildIconSprites() {
+    let config = {
+        src: __dirname + '/../../raw/icons',
+        dest: __dirname + '/../../out/icon-sprite.svg',
+        spriter: {
+            shape: {
+                id: {
+                    generator: function (name) {
+                        return "vt-" + name.replace('.svg', '');
+                    }
+                }
+            },
+            "svg": {
+                "xmlDeclaration": false,
+                "doctypeDeclaration": false
+            },
+            "mode": {
+                "symbol": true
+            }
+        }
+    };
+
+    let icons = {
+        fa: [
+            fal.faPlay,
+            fal.faPause,
+            fal.faCaretRight,
+            fal.faCaretLeft,
+            fal.faRandom,
+            fal.faCogs,
+            fal.faFolderUpload,
+            fal.faListMusic,
+            fal.faFileImage,
+            fal.faQuestionCircle,
+        ],
+        vt: []
+    };
+
+    builder.init(config, icons);
+    builder.generateFontAwesome();
+    builder.generateFromIcons();
+    return gulp.src(config.src);
+}
+
+let builder = {
+    init: function (config, icons) {
+        this.config = config;
+        this.icons = icons;
+    },
+
+    generateFontAwesome: function () {
+        let sprite = faSvgSprite.generate(this.icons.fa, {license: '', xmlDeclaration: false});
+        toMergeData.push(sprite.svg);
+    },
+
+    generateFromIcons: function () {
+        builder.merge();
+    },
+
+    merge: function () {
+        if (toMergeData.length === 0) {
+            return;
+        }
+        let data = '<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg">';
+        for (let item of toMergeData) {
+            data += item.replace('</svg>', '').replace(/(<svg)([^<]*|[^>]*)/g, '');
+        }
+        data += '</svg>';
+
+        let dirname = path.dirname(builder.config.dest);
+        if (!fs.existsSync(dirname)) {
+            fsextra.mkdirpSync(dirname);
+        }
+        fs.writeFileSync(builder.config.dest, data);
+    },
+
+    readFiles: function (dir, spriter, icons) {
+        let files = fs.readdirSync(dir);
+        for (let file of files) {
+            let split = file.split('.');
+            let suffix = split[split.length - 1];
+            if (suffix === 'svg' && icons.indexOf('vt-' + split[0]) !== -1) {
+                let filePath = path.resolve(dir, file);
+                spriter.add(
+                    filePath,
+                    file,
+                    fs.readFileSync(filePath, {encoding: 'utf-8'})
+                );
+            }
+        }
+    }
+};
+
+module.exports.buildIconSprites = buildIconSprites;

build/task/worker.js

@@ -0,0 +1,26 @@
+const terser = require('gulp-terser'),
+    concat = require('gulp-concat'),
+    rename = require('gulp-rename'),
+    gulp = require('gulp');
+
+const basePath = __dirname + '/../../raw/worker/';
+const config = {
+    src: [
+        basePath + 'eventHandler.js',
+        basePath + 'database.js',
+        basePath + 'id3.js',
+        basePath + 'app.js',
+    ],
+    dest: __dirname + '/../../out/js'
+};
+
+function build() {
+    return gulp.src(config.src)
+        .pipe(concat('worker.js'))
+        .pipe(gulp.dest(config.dest))
+        .pipe(rename('worker.min.js'))
+        .pipe(terser())
+        .pipe(gulp.dest(config.dest));
+}
+
+module.exports.build = build;

favicon/safari-pinned-tab.svg

@@ -0,0 +1 @@
+<svg version="1" xmlns="http://www.w3.org/2000/svg" width="893.333" height="893.333" viewBox="0 0 670.000000 670.000000"><path d="M48 256.8c0 .4 10.7 23.9 23.9 52.2 13.1 28.3 25.5 55.1 27.5 59.5l3.7 7.9 5.8-12.7 5.9-12.7L93 303.7l-21.9-47.2-11.5-.3c-6.4-.1-11.6.1-11.6.6zM178.2 262.2c-4.6 10-42.4 91.1-53.8 115.5L114 399.8l5.7 12.4c3.1 6.7 5.8 12.5 5.9 12.7.2.2 1.6-2.3 3.1-5.5 1.4-3.2 18.8-40.6 38.6-82.9 19.7-42.4 36.1-77.8 36.4-78.8.5-1.5-.5-1.7-11.1-1.7H181l-2.8 6.2zM255 257.9c-8.2 2.6-11.8 4.8-18.3 10.9-10.9 10.4-15.2 21.4-14.5 37.1.3 8.6.7 10.5 4.1 17.4 6.5 13.7 18.8 23.5 33.5 26.6 2.9.6 9.5 1.1 14.6 1.1 11.4 0 17.1 1.8 22.6 7.2 5.7 5.4 8 10.8 8 18.8 0 11.1-5.4 19.5-15.5 24.1-3.6 1.7-7.2 1.9-35.7 1.9H222v22h31.3c24.9 0 32.5-.3 37.2-1.5 23.9-6.3 39.7-30 35.7-53.8-2.7-15.8-11.6-27.9-25.6-34.7-9-4.4-16.6-6-29.6-6-9.7 0-14.5-1.7-19.8-7.1-5.8-5.7-7.7-10.4-7.6-18.9 0-9 2.2-14 8.5-19.3 7.4-6.4 9.6-6.7 44.1-6.7H327v-21l-33.2.1c-29.1 0-34 .2-38.8 1.8zM360 266.5V277h113v-21H360v10.5zM495 266.5V277h62.5l5.8-9.9c3.1-5.4 5.7-10.1 5.7-10.5 0-.3-16.6-.6-37-.6h-37v10.5zM575.1 286.3c-9.6 16.6-31.4 54.2-48.3 83.5-16.9 29.4-30.8 53.8-30.8 54.3s24.3.8 60.8.7l60.7-.3v-21l-42.2-.3c-23.3-.1-42.3-.6-42.3-1s.6-1.6 1.4-2.7c.7-1.1 8.7-14.8 17.6-30.5 9-15.7 26.7-46.5 39.5-68.5s23.7-41 24.4-42.3l1.2-2.2h-12.3l-12.3.1-17.4 30.2zM407 361v64h21V297h-21v64z"/></svg>

index.html

@@ -2,33 +2,109 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>WEBGL Test</title>
-    <link rel="stylesheet" href="style.css">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="description" content="WebAudio Player created by VersusTuneZ"/>
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
+    <link rel="manifest" href="/manifest.json">
+    <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#3949ab">
+    <meta name="theme-color" content="#3949ab">
+    <title>VIS3D</title>
+    <link rel="stylesheet" href="out/theme/style.css">
 </head>
 <body>
-<canvas id="c" width="1900" height="1000"></canvas>
-<div class="off-can closed">
-    <group id="rotate">
-        <group-label>Rotation</group-label>
-    </group>
-    <group id="translate">
-        <group-label>Transform</group-label>
-    </group>
-    <group id="color">
-        <group-label>Color</group-label>
-    </group>
-    <group id="world">
-        <group-label>World</group-label>
-    </group>
-    <group id="draw">
-        <group-label>Draw</group-label>
-    </group>
+<div class="loading-screen">
+    <loader></loader>
+    <loader class="delay"></loader>
+    <span>Loading</span>
 </div>
-<div class="settings-icon">&#9776;</div>
-<script src="js/utils.js" defer></script>
-<script src="js/handler.js"></script>
-<script src="js/index.js"></script>
-<script src="js/sphere.js"></script>
-<script src="js/gui.js"></script>
+<div class="menus">
+    <div class="top-menu-left">
+        <div class="settings-icon menu-icon">
+            <svg role="img" class="icon">
+                <use href="out/icon-sprite.svg#fal-fa-cogs"></use>
+            </svg>
+        </div>
+        <div class="upload-image menu-icon">
+            <svg role="img" class="icon">
+                <use href="out/icon-sprite.svg#fal-fa-file-image"></use>
+            </svg>
+        </div>
+        <div class="upload menu-icon">
+            <label for="upload-dir">
+                <svg role="img" class="icon">
+                    <use href="out/icon-sprite.svg#fal-fa-folder-upload"></use>
+                </svg>
+            </label>
+            <input type="file" multiple directory webkitdirectory accept="audio/*" id="upload-dir">
+        </div>
+        <div class="playlist menu-icon">
+            <svg role="img" class="icon">
+                <use href="out/icon-sprite.svg#fal-fa-list-music"></use>
+            </svg>
+        </div>
+        <div class="help menu-icon">
+            <svg role="img" class="icon">
+                <use href="out/icon-sprite.svg#fal-fa-question-circle"></use>
+            </svg>
+        </div>
+    </div>
+    <div class="controls">
+        <button id="previous">
+            <svg role="img" class="icon">
+                <use href="out/icon-sprite.svg#fal-fa-caret-left"></use>
+            </svg>
+        </button>
+        <button id="play">
+            <svg role="img" data-name="pause" class="pause icon hide">
+                <use href="out/icon-sprite.svg#fal-fa-pause"></use>
+            </svg>
+            <svg role="img" data-name="play" class="icon">
+                <use href="out/icon-sprite.svg#fal-fa-play"></use>
+            </svg>
+        </button>
+        <button id="next">
+            <svg role="img" class="icon">
+                <use href="out/icon-sprite.svg#fal-fa-caret-right"></use>
+            </svg>
+        </button>
+        <button id="shuffle">
+            <svg role="img" class="icon">
+                <use href="out/icon-sprite.svg#fal-fa-random"></use>
+            </svg>
+        </button>
+    </div>
+</div>
+<canvas id="c"></canvas>
+<canvas id="cInfo"></canvas>
+<div class="grey-screen hide">
+    <div id="modal">
+        <header>
+            <span class="headline">Playlist</span>
+            <span class="close">X</span>
+        </header>
+        <modal-content>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+            clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+            consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+            sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+            sea takimata sanctus est Lorem ipsum dolor sit amet.
+        </modal-content>
+        <modal-footer>
+            <div class="inner">
+
+            </div>
+        </modal-footer>
+    </div>
+</div>
+<div class="notification">
+
+</div>
+<script src="out/js/scripts.min.js?v=1"></script>
 </body>
 </html>

js/handler.js

@@ -80,4 +80,13 @@ class Shaders {
     getProgram(name) {
         return this.programs[name];
     }
+
+    async loadArray(list, path) {
+        let self = this;
+        for (const e of list) {
+            await self.loadShader(e, path)
+        }
+        await self.createProgramForEach(list)
+        return true;
+    }
 }

js/index.js

@@ -1,22 +1,35 @@
-let shaderHandler, gl, c, actx, analyser, peak;
-let positionData = [];
-let positionSize = 8192 * 2 * 2;
+let shaderHandler, gl, c, actx, analyser, peak, isInit = false;
 
-function createAudioContextStream(stream) {
+function createAudioContextStream(audio) {
     let AudioContext = window.AudioContext || window.webkitAudioContext;
     if (actx) {
         actx.close();
     }
     actx = new AudioContext();
     analyser = actx.createAnalyser();
+    let MEDIA_ELEMENT_NODES = new WeakMap();
     let Source;
 
     analyser.fftSize = 4096;
     analyser.maxDecibels = 0;
     analyser.smoothingTimeConstant = .4;
-    Source = actx.createMediaStreamSource(stream);
+    if (audio) {
+        if (MEDIA_ELEMENT_NODES.has(audio)) {
+            Source = MEDIA_ELEMENT_NODES.get(audio);
+        } else {
+            Source = actx.createMediaElementSource(audio);
+            MEDIA_ELEMENT_NODES.set(audio, Source);
+        }
 
         Source.connect(analyser);
+        analyser.connect(actx.destination);
+        audio.oncanplay = () => {
+            actx.resume();
+        };
+        audio.onended = function () {
+            actx.pause();
+        };
+    }
     return null;
 }
 
@@ -28,26 +41,38 @@ async function init() {
         return false;
     }
     shaderHandler = new Shaders(gl);
-    await shaderHandler.loadShader("test", "shaders/");
+    await shaderHandler.loadShader("wave", "shaders/");
 
     //sphere shader
     await shaderHandler.loadShader("sphere", "shaders/", gl.VERTEX_SHADER);
-    return shaderHandler.createProgramForEach(["test", "sphere"]);
+    return shaderHandler.createProgramForEach(["wave", "sphere"]);
 }
 
-(function () {
-    navigator.mediaDevices.getUserMedia({audio: true, video: false})
-        .then(createAudioContextStream).then(e => {
+function createView() {
+    if (!isInit) {
+        createAudioContextStream(audioFile);
+        init().then(b => {
+            if (b) {
+                loadConfig();
+                draw();
+            }
+        })
+        isInit = true;
+    }
+}
+
+function initGUI() {
     generateRotationSliders();
     generateColorSliders();
     generateWorldSliders();
     generateDrawSliders();
     generateTranslateSliders();
-        init().then(b => {
-            if (b) {
-                sphereObject.drawMode = gl.POINTS;
-                draw();
 }
-        })
-    });
-})();
+
+(function () {
+    if (document.readyState === "complete" || document.readyState === "interactive") {
+        initGUI()
+    } else {
+        document.addEventListener('DOMContentLoaded', initGUI);
+    }
+})()