WIP
This commit is contained in:
parent
07b35b9667
commit
4c4afe3bdf
29 changed files with 595 additions and 139 deletions
|
|
@ -1 +1 @@
|
|||
[{"group":"","name":"fftSize","showName":"FFT-Size","options":[2048,4096,8192,16384,32768],"value":16384,"type":"select","tooltip":"How Many Items should the FFT Capture and Render","dataType":"int"},{"group":"rotation","name":["X","Y","Z"],"props":["x","y","z"],"type":"slider","max":360,"min":-360,"value":0,"dataType":"int"},{"group":"rotation","name":["X-Inc","Y-Inc","Z-Inc"],"props":["x-inc","y-inc","z-inc"],"type":"slider","max":1,"min":-1,"value":0,"stepSize":0.01,"dataType":"float"},{"group":"","name":"baseColor","showName":"Base Color","type":"color","value":"#0089ff","dataType":"rgb","tooltip":"Base Color!"},{"group":"","name":"gradientToColor","showName":"Second Color","type":"color","value":"#ff0000","dataType":"rgb","tooltip":"Second Color!"}]
|
||||
[{"group":"","name":"fftSize","showName":"FFT-Size","options":[2048,4096,8192,16384,32768],"value":16384,"type":"select","tooltip":"How Many Items should the FFT Capture and Render","dataType":"int"},{"group":"rotation","name":["X","Y","Z"],"props":["x","y","z"],"type":"slider","max":360,"min":-360,"value":0,"dataType":"int"},{"group":"rotation","name":["X-Inc","Y-Inc","Z-Inc"],"props":["x-inc","y-inc","z-inc"],"type":"slider","max":1,"min":-1,"value":0,"stepSize":0.01,"dataType":"float"},{"group":"translate","name":["X","Y","Z"],"props":["x","y","z"],"type":"slider","max":1,"min":-1,"value":0,"stepSize":0.01,"dataType":"float"},{"group":"","name":"fudgeFactor","showName":"Fudge Factor","type":"slider","value":1,"max":2,"min":0,"tooltip":"z to w Fudge","stepSize":0.1,"dataType":"float"},{"group":"","name":"baseColor","showName":"Base Color","type":"color","value":"#0089ff","dataType":"rgb","tooltip":"Base Color!"},{"group":"","name":"gradientToColor","showName":"Second Color","type":"color","value":"#ff0000","dataType":"rgb","tooltip":"Second Color!"}]
|
||||
|
|
@ -479,6 +479,15 @@ class TDUtils {
|
|||
return dst;
|
||||
}
|
||||
|
||||
static projection(width, height, depth) {
|
||||
return [
|
||||
2 / width, 0, 0, 0,
|
||||
0, -2 / height, 0, 0,
|
||||
0, 0, 2 / depth, 0,
|
||||
-1, 1, 0, 1,
|
||||
];
|
||||
}
|
||||
|
||||
static inverse(m, dst) {
|
||||
dst = dst || new Float32Array(16);
|
||||
let m00 = m[0],
|
||||
|
|
@ -567,42 +576,13 @@ class TDUtils {
|
|||
|
||||
static aspectView(aspect) {
|
||||
return [
|
||||
1 * aspect, 0, 0, 0,
|
||||
1 / aspect, 0, 0, 0,
|
||||
0, 1, 0, 0,
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1
|
||||
]
|
||||
}
|
||||
|
||||
static getMatrix(fov, aspect, near, far, camAngle, radius) {
|
||||
let lMat = this.lastMatrix,
|
||||
u = TDUtils;
|
||||
if (!u.isSame('fov', fov)
|
||||
|| !u.isSame('aspect', aspect)
|
||||
|| !u.isSame('near', near)
|
||||
|| !u.isSame('far', far)
|
||||
|| !u.isSame('cam', camAngle)
|
||||
|| !u.isSame('radius', radius)
|
||||
) {
|
||||
let matrix = TDUtils.perspective(TDUtils.degToRad(fov), aspect, near, far),
|
||||
cameraMatrix = TDUtils.yRotation(TDUtils.degToRad(camAngle));
|
||||
cameraMatrix = TDUtils.translate(cameraMatrix, 0, 0, radius * 1.5);
|
||||
let viewMatrix = TDUtils.inverse(cameraMatrix);
|
||||
matrix = TDUtils.multiply(matrix, viewMatrix)
|
||||
lMat.m = matrix;
|
||||
}
|
||||
return lMat.m;
|
||||
}
|
||||
|
||||
static isSame(key, value) {
|
||||
let lMat = this.lastMatrix;
|
||||
if (lMat[key] !== value) {
|
||||
lMat[key] = value;
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
static updateRotate(rotation, def) {
|
||||
let value = vConf.get(rotation, def) + vConf.get(rotation + '-inc', 0)
|
||||
if (value > 360) {
|
||||
|
|
@ -612,6 +592,149 @@ class TDUtils {
|
|||
}
|
||||
vConf.set(rotation, value);
|
||||
}
|
||||
|
||||
static makeZToWMatrix(fudgeFactor) {
|
||||
return [
|
||||
1, 0, 0, 0,
|
||||
0, 1, 0, 0,
|
||||
0, 0, 1, fudgeFactor,
|
||||
0, 0, 0, 1,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
class GLHelper {
|
||||
constructor(program) {
|
||||
this.matrix = new Float32Array(16);
|
||||
this.program = program;
|
||||
}
|
||||
|
||||
static uniform4fv(program, name, data) {
|
||||
let uniform = gl.getUniformLocation(program, name);
|
||||
gl.uniform4fv(uniform, data);
|
||||
}
|
||||
|
||||
static uniform3fv(program, name, data) {
|
||||
let uniform = gl.getUniformLocation(program, name);
|
||||
gl.uniform3fv(uniform, data);
|
||||
}
|
||||
|
||||
static uniform1f(program, name, data) {
|
||||
let uniform = gl.getUniformLocation(program, name);
|
||||
gl.uniform1f(uniform, data);
|
||||
}
|
||||
|
||||
rotateX(deg) {
|
||||
this.matrix = TDUtils.multiply(this.matrix, TDUtils.xRotation(deg));
|
||||
}
|
||||
|
||||
rotateY(deg) {
|
||||
this.matrix = TDUtils.multiply(this.matrix, TDUtils.yRotation(deg));
|
||||
}
|
||||
|
||||
rotateZ(deg) {
|
||||
this.matrix = TDUtils.multiply(this.matrix, TDUtils.zRotation(deg));
|
||||
}
|
||||
|
||||
scale(scaling) {
|
||||
this.matrix = TDUtils.multiply(this.matrix, TDUtils.scale(scaling[0], scaling[1], scaling[2]))
|
||||
}
|
||||
|
||||
project(depth) {
|
||||
depth = depth || (c.width > c.height) ? c.width : c.height;
|
||||
this.matrix = TDUtils.projection(c.width, c.height, depth)
|
||||
}
|
||||
|
||||
translate(t) {
|
||||
this.matrix = TDUtils.translate(this.matrix, t[0] || 0, t[1] || 0, t[2] || 0);
|
||||
}
|
||||
|
||||
addFudgeFactor(fudgeFactor) {
|
||||
this.matrix = TDUtils.multiply(TDUtils.makeZToWMatrix(fudgeFactor), this.matrix);
|
||||
}
|
||||
|
||||
applyMatrix() {
|
||||
let matrix = gl.getUniformLocation(this.program, "u_matrix");
|
||||
gl.uniformMatrix4fv(matrix, false, this.matrix);
|
||||
}
|
||||
}
|
||||
class Camera {
|
||||
constructor() {
|
||||
this.mouse;
|
||||
this.rotation = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
this.lastMouse;
|
||||
this.mousePressed = false;
|
||||
this.translate = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
z: 0
|
||||
}
|
||||
}
|
||||
|
||||
async init() {
|
||||
this.mouse = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
window.addEventListener('mousedown', this.mouseDown.bind(this));
|
||||
window.addEventListener('mouseup', this.mouseUp.bind(this));
|
||||
window.addEventListener('mousemove', this.mouseMove.bind(this), {passive: true});
|
||||
eventHandler.addEvent('keys-ArrowUp, keys-ArrowDown, keys-ArrowLeft, keys-ArrowRight, keys-KeyQ, keys-KeyE', this.keyPressed.bind(this));
|
||||
}
|
||||
|
||||
mouseDown() {
|
||||
this.mousePressed = true;
|
||||
this.lastMouse = null;
|
||||
}
|
||||
|
||||
mouseUp() {
|
||||
this.mousePressed = false;
|
||||
this.lastMouse = null;
|
||||
}
|
||||
|
||||
mouseMove(event) {
|
||||
if (!this.mousePressed || gui.modal.open) {
|
||||
return;
|
||||
}
|
||||
if (this.lastMouse) {
|
||||
let mouse = this.mouse,
|
||||
rotate = this.rotation;
|
||||
mouse.x += (this.lastMouse.x - event.clientX) * 0.2;
|
||||
mouse.y += (this.lastMouse.y - event.clientY) * 0.2;
|
||||
rotate.x = VTUtils.map(mouse.x, -c.width, c.width, 180, -180, false);
|
||||
rotate.y = VTUtils.map(mouse.y, -c.height, c.height, 180, -180, false);
|
||||
}
|
||||
this.lastMouse = {
|
||||
x: event.clientX,
|
||||
y: event.clientY
|
||||
}
|
||||
}
|
||||
|
||||
keyPressed(data) {
|
||||
switch (data) {
|
||||
case 'keys-ArrowUp':
|
||||
this.translate.z += 10;
|
||||
break;
|
||||
case 'keys-ArrowDown':
|
||||
this.translate.z -= 10;
|
||||
break;
|
||||
case 'keys-ArrowLeft':
|
||||
this.translate.x -= 10;
|
||||
break;
|
||||
case 'keys-ArrowRight':
|
||||
this.translate.x += 10;
|
||||
break;
|
||||
case 'keys-KeyQ':
|
||||
this.translate.y += 10;
|
||||
break;
|
||||
case 'keys-KeyE':
|
||||
this.translate.y -= 10;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
class Template {
|
||||
constructor() {
|
||||
|
|
@ -621,9 +744,7 @@ class Template {
|
|||
async loadTemplate(name) {
|
||||
let self = this;
|
||||
if (!this.tpl[name]) {
|
||||
await fetch(templateDir + name + ".tpl").then((r) => r.text()).then(c => {
|
||||
self.tpl[name] = c;
|
||||
})
|
||||
self.tpl[name] = await FetchHandler.loadFile(templateDir + name + '.tpl', false)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -651,16 +772,10 @@ class Template {
|
|||
}
|
||||
return d;
|
||||
}
|
||||
|
||||
parseFromAPI(url, name, cb) {
|
||||
fetch(url).then((r) => r.json()).then(d => {
|
||||
cb(this.parseTemplate(name, d))
|
||||
}).catch(console.error)
|
||||
}
|
||||
}
|
||||
|
||||
const templateEx = /\$(.*?)\$/gm;
|
||||
const templateDir = "out/tpl/"
|
||||
const templateDir = "/out/tpl/"
|
||||
class ShaderHandler {
|
||||
constructor(gl) {
|
||||
this.gl = gl;
|
||||
|
|
@ -682,8 +797,8 @@ class ShaderHandler {
|
|||
async load(name, url, type) {
|
||||
let realName = name + "_" + type;
|
||||
if (!this.shaders[realName]) {
|
||||
let data = await fetch(url);
|
||||
let shader = this.createShader(await data.text(), type);
|
||||
let data = await FetchHandler.loadFile(url, false);
|
||||
let shader = this.createShader(data, type);
|
||||
if (shader) {
|
||||
this.shaders[realName] = shader;
|
||||
}
|
||||
|
|
@ -733,8 +848,7 @@ class ShaderHandler {
|
|||
gl.attachShader(pro, this.getShader(shaders[i], gl.FRAGMENT_SHADER));
|
||||
}
|
||||
gl.linkProgram(pro);
|
||||
var success = gl.getProgramParameter(pro, gl.LINK_STATUS);
|
||||
if (success) {
|
||||
if (gl.getProgramParameter(pro, gl.LINK_STATUS)) {
|
||||
this.programs[name] = pro;
|
||||
return pro;
|
||||
}
|
||||
|
|
@ -883,6 +997,42 @@ class AudioPlayerFile {
|
|||
return template.parseTemplate('audio-information', tag);
|
||||
}
|
||||
}
|
||||
class FetchHandler {
|
||||
static files = {};
|
||||
|
||||
static async loadFiles(array, isJSON) {
|
||||
let content = [];
|
||||
for (let i = 0; i < array; i++) {
|
||||
content.push(await FetchHandler.loadFile(array[i], isJSON));
|
||||
}
|
||||
return content;
|
||||
}
|
||||
|
||||
static async loadFile(filename, isJSON) {
|
||||
filename += '?v=' + version;
|
||||
let files = FetchHandler.files;
|
||||
if (files[filename]) {
|
||||
return files[filename];
|
||||
}
|
||||
let data = await FetchHandler.tryFromCache(filename);
|
||||
if (isJSON) {
|
||||
data = JSON.parse(data);
|
||||
}
|
||||
files[filename] = data;
|
||||
return data;
|
||||
}
|
||||
|
||||
static async tryFromCache(filename) {
|
||||
if (caches) {
|
||||
let cache = await caches.open('vis3d-pwa-1');
|
||||
let data = await cache.match(filename);
|
||||
if (!data) {
|
||||
data = await fetch(filename);
|
||||
}
|
||||
return await data.text();
|
||||
}
|
||||
}
|
||||
}
|
||||
class PlayerConfigHandler {
|
||||
async init() {
|
||||
await template.loadArray([
|
||||
|
|
@ -984,7 +1134,7 @@ class VisualConfig {
|
|||
let tem = VisualConfig.visualTemplates;
|
||||
if (!tem[name]) {
|
||||
//load config and save it
|
||||
tem[name] = await fetch('/out/gui/' + name + ".json").then((res) => res.json());
|
||||
tem[name] = await FetchHandler.loadFile('/out/gui/' + name + ".json", true);
|
||||
}
|
||||
return tem[name];
|
||||
}
|
||||
|
|
@ -1020,6 +1170,16 @@ class Player {
|
|||
window.dispatchEvent(new CustomEvent('playSong'));
|
||||
}
|
||||
|
||||
stop() {
|
||||
if (!audioHandler.lastSong) {
|
||||
return;
|
||||
}
|
||||
let audioFile = audioHandler.audioFile;
|
||||
audioFile.pause();
|
||||
audioFile.currentTime = 0;
|
||||
window.dispatchEvent(new CustomEvent('playSong'));
|
||||
}
|
||||
|
||||
playByID(number) {
|
||||
this.playlist.index = number;
|
||||
let next = this.playlist.getCurrent();
|
||||
|
|
@ -1378,6 +1538,7 @@ class Modal {
|
|||
let self = this;
|
||||
self.currentModal = '';
|
||||
self.modal = $('#modal');
|
||||
self.open = false;
|
||||
self.parent = self.modal.parentNode;
|
||||
self.modal.addDelegatedEventListener('click', 'header .close', this.closeModal.bind(this));
|
||||
}
|
||||
|
|
@ -1411,6 +1572,7 @@ class Modal {
|
|||
|
||||
closeModal() {
|
||||
this.parent.addClass("hide")
|
||||
this.open = false;
|
||||
}
|
||||
|
||||
isCurrent(title) {
|
||||
|
|
@ -1419,6 +1581,7 @@ class Modal {
|
|||
|
||||
showModal() {
|
||||
this.parent.removeClass("hide")
|
||||
this.open = true;
|
||||
}
|
||||
}
|
||||
class Visual {
|
||||
|
|
@ -1843,13 +2006,15 @@ class Wave2D extends Visual {
|
|||
|
||||
updateData() {
|
||||
let data = audioHandler.getFloatArray();
|
||||
let add = 2 / data.length,
|
||||
x = -1;
|
||||
let add = c.width / data.length,
|
||||
x = 0,
|
||||
y = c.height / 2,
|
||||
goTrough = y / 2;
|
||||
let outerLoop = 0;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
//first
|
||||
this.data[outerLoop] = x;
|
||||
this.data[outerLoop + 1] = data[i];
|
||||
this.data[outerLoop + 1] = y + (data[i] * goTrough);
|
||||
this.data[outerLoop + 2] = data[i];
|
||||
outerLoop += 3;
|
||||
x += add;
|
||||
|
|
@ -1872,17 +2037,18 @@ class Wave2D extends Visual {
|
|||
}
|
||||
|
||||
rotate(program) {
|
||||
let matrix = [
|
||||
1, 0, 0, 0,
|
||||
0, 0.6, 0, 0,
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1
|
||||
]
|
||||
matrix = TDUtils.multiply(matrix, TDUtils.xRotation(vConf.get("rotation-x", 0)));
|
||||
matrix = TDUtils.multiply(matrix, TDUtils.yRotation(vConf.get("rotation-y", 0)));
|
||||
matrix = TDUtils.multiply(matrix, TDUtils.zRotation(vConf.get("rotation-z", 0)));
|
||||
let rotate = gl.getUniformLocation(program, "u_matrix");
|
||||
gl.uniformMatrix4fv(rotate, false, matrix);
|
||||
let glHelper = new GLHelper(program);
|
||||
glHelper.project();
|
||||
glHelper.addFudgeFactor(vConf.get("fudgeFactor", 1));
|
||||
glHelper.translate([
|
||||
camera.translate.x,
|
||||
camera.translate.y,
|
||||
camera.translate.z
|
||||
]);
|
||||
glHelper.rotateX(camera.mouse.x);
|
||||
glHelper.rotateY(camera.mouse.y);
|
||||
glHelper.rotateZ(vConf.get("rotation-z", 0));
|
||||
glHelper.applyMatrix();
|
||||
}
|
||||
|
||||
setup() {
|
||||
|
|
@ -1896,9 +2062,8 @@ class Wave2D extends Visual {
|
|||
|
||||
prepare(program) {
|
||||
this.position = gl.getAttribLocation(program, "a_position");
|
||||
this.color = gl.getUniformLocation(program, "u_color");
|
||||
let lightPos = gl.getUniformLocation(program, "u_lightPos");
|
||||
gl.uniform3fv(lightPos, vConf.get("light", [0, 5, -56]));
|
||||
//GLHelper.uniform1f(program, "u_fudgeFactor", vConf.get("fudgeFactor", 1));
|
||||
GLHelper.uniform3fv(program, "u_lightPos", vConf.get("light", [0, 5, -56]));
|
||||
}
|
||||
|
||||
afterDraw() {
|
||||
|
|
@ -2186,7 +2351,8 @@ class KeyHandler {
|
|||
media.setActionHandler('play', player.playStop.bind(player));
|
||||
media.setActionHandler('pause', player.playStop.bind(player));
|
||||
media.setActionHandler('previoustrack', player.prevSong.bind(player));
|
||||
media.setActionHandler('nexttrack', player.prevSong.bind(player));
|
||||
media.setActionHandler('nexttrack', player.nextSong.bind(player));
|
||||
media.setActionHandler('stop', player.stop.bind(player));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2224,7 +2390,8 @@ class KeyHandler {
|
|||
|
||||
if (eventHandler.handleEvent({
|
||||
data: {
|
||||
cmd: name
|
||||
cmd: name,
|
||||
data: name
|
||||
}
|
||||
})) {
|
||||
event.preventDefault();
|
||||
|
|
@ -2267,9 +2434,11 @@ const shaderHandler = new ShaderHandler(null),
|
|||
startup = new Startup(),
|
||||
eventHandler = new EventHandler(),
|
||||
playerConf = new PlayerConfigHandler(),
|
||||
keyHandler = new KeyHandler();
|
||||
keyHandler = new KeyHandler(),
|
||||
version = 1,
|
||||
camera = new Camera();
|
||||
|
||||
let c, gl, cInfo, ctx;
|
||||
let c, gl, cInfo, ctx, sw;
|
||||
|
||||
worker.addEventListener('message', e => {
|
||||
if (e.data.status === 'startup') {
|
||||
|
|
@ -2286,6 +2455,9 @@ window.addEventListener('startupFin', e => {
|
|||
})
|
||||
|
||||
async function startUP() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
sw = await navigator.serviceWorker.register('/sw.js');
|
||||
}
|
||||
pConf.loadConfigByName('default');
|
||||
c = $('#c'),
|
||||
gl = c.getContext("webgl2"),
|
||||
|
|
@ -2296,10 +2468,11 @@ async function startUP() {
|
|||
return false;
|
||||
}
|
||||
shaderHandler.setGL(gl)
|
||||
await shaderHandler.loadArray(["wave", "sphere", "water", "wave2d"], 'shaders/');
|
||||
await shaderHandler.loadArray(["wave", "sphere", "water", "wave2d"], '/shaders/');
|
||||
await NotificationHandler.instance.init();
|
||||
await audioHandler.init();
|
||||
await player.init();
|
||||
await camera.init();
|
||||
await visual.init();
|
||||
await gui.init();
|
||||
await imageUploader.init();
|
||||
|
|
|
|||
2
out/js/scripts.min.js
vendored
2
out/js/scripts.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue