versustunez/audio-vis
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

- added imageUploader

Browse source 
- 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
This commit is contained in:
Maurice Grönwoldt 2020-08-05 11:24:59 +02:00
commit 9d5259767c
34 changed files with 1631 additions and 418 deletions
Download patch file Download diff file Expand all files Collapse all files

333
raw/javascript/gl/glUtils.js Normal file
View file

@ -0,0 +1,333 @@
// most of the functions are from https://webglfundamentals.org/webgl/resources/m4.js! but i doesnt want to use them all and make some adjustment to them!
class TDUtils {
static multiply(a, b) {
let b00 = b[0];
let b01 = b[1];
let b02 = b[2];
let b03 = b[3];
let b10 = b[4];
let b11 = b[5];
let b12 = b[6];
let b13 = b[7];
let b20 = b[8];
let b21 = b[9];
let b22 = b[10];
let b23 = b[11];
let b30 = b[12];
let b31 = b[13];
let b32 = b[14];
let b33 = b[15];
let a00 = a[0];
let a01 = a[1];
let a02 = a[2];
let a03 = a[3];
let a10 = a[4];
let a11 = a[5];
let a12 = a[6];
let a13 = a[7];
let a20 = a[8];
let a21 = a[9];
let a22 = a[10];
let a23 = a[11];
let a30 = a[12];
let a31 = a[13];
let a32 = a[14];
let a33 = a[15];
return [
b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30,
b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31,
b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32,
b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33,
b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30,
b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31,
b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32,
b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33,
b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30,
b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31,
b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32,
b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33,
b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30,
b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31,
b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32,
b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33
];
}
static translate(m, tx, ty, tz, dst) {
dst = dst || new Float32Array(16);
let m00 = m[0],
m01 = m[1],
m02 = m[2],
m03 = m[3],
m10 = m[4],
m11 = m[5],
m12 = m[6],
m13 = m[7],
m20 = m[8],
m21 = m[9],
m22 = m[10],
m23 = m[11],
m30 = m[12],
m31 = m[13],
m32 = m[14],
m33 = m[15];
dst[0] = m00;
dst[1] = m01;
dst[2] = m02;
dst[3] = m03;
dst[4] = m10;
dst[5] = m11;
dst[6] = m12;
dst[7] = m13;
dst[8] = m20;
dst[9] = m21;
dst[10] = m22;
dst[11] = m23;
dst[12] = m00 * tx + m10 * ty + m20 * tz + m30;
dst[13] = m01 * tx + m11 * ty + m21 * tz + m31;
dst[14] = m02 * tx + m12 * ty + m22 * tz + m32;
dst[15] = m03 * tx + m13 * ty + m23 * tz + m33;
return dst;
}
static xRotation(angleInRadians) {
let c = Math.cos(angleInRadians);
let s = Math.sin(angleInRadians);
return [
1, 0, 0, 0,
0, c, s, 0,
0, -s, c, 0,
0, 0, 0, 1,
];
}
static yRotation(angleInRadians) {
let c = Math.cos(angleInRadians);
let s = Math.sin(angleInRadians);
return [
c, 0, -s, 0,
0, 1, 0, 0,
s, 0, c, 0,
0, 0, 0, 1,
];
}
static zRotation(angleInRadians) {
let c = Math.cos(angleInRadians);
let s = Math.sin(angleInRadians);
return [
c, s, 0, 0,
-s, c, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
];
}
static degToRad(d) {
return d * Math.PI / 180;
}
static scale(sx, sy, sz, dst) {
dst = dst || new Float32Array(16);
dst[0] = sx;
dst[5] = sy;
dst[10] = sz;
return dst;
}
static lookAt(cameraPosition, target, up, dst) {
dst = dst || new Float32Array(16);
let zAxis = TDUtils.normalize(
TDUtils.subtractVectors(cameraPosition, target));
let xAxis = TDUtils.normalize(TDUtils.cross(up, zAxis));
let yAxis = TDUtils.normalize(TDUtils.cross(zAxis, xAxis));
dst[0] = xAxis[0];
dst[1] = xAxis[1];
dst[2] = xAxis[2];
dst[4] = yAxis[0];
dst[5] = yAxis[1];
dst[6] = yAxis[2];
dst[8] = zAxis[0];
dst[9] = zAxis[1];
dst[10] = zAxis[2];
dst[12] = cameraPosition[0];
dst[13] = cameraPosition[1];
dst[14] = cameraPosition[2];
dst[15] = 1;
return dst;
}
static cross(a, b, dst) {
dst = dst || new Float32Array(3);
dst[0] = a[1] * b[2] - a[2] * b[1];
dst[1] = a[2] * b[0] - a[0] * b[2];
dst[2] = a[0] * b[1] - a[1] * b[0];
return dst;
}
static normalize(v, dst) {
dst = dst || new Float32Array(3);
let length = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
if (length > 0.00001) {
dst[0] = v[0] / length;
dst[1] = v[1] / length;
dst[2] = v[2] / length;
}
return dst;
}
static subtractVectors(a, b, dst) {
dst = dst || new Float32Array(3);
dst[0] = a[0] - b[0];
dst[1] = a[1] - b[1];
dst[2] = a[2] - b[2];
return dst;
}
static perspective(fieldOfViewInRadians, aspect, near, far, dst) {
dst = dst || new Float32Array(16);
let f = Math.tan(Math.PI * 0.5 - 0.5 * fieldOfViewInRadians),
rangeInv = 1.0 / (near - far);
dst[0] = f / aspect;
dst[5] = f;
dst[10] = (near + far) * rangeInv;
dst[11] = -1;
dst[14] = near * far * rangeInv * 2;
return dst;
}
static inverse(m, dst) {
dst = dst || new Float32Array(16);
let m00 = m[0],
m01 = m[1],
m02 = m[2],
m03 = m[3],
m10 = m[4],
m11 = m[5],
m12 = m[6],
m13 = m[7],
m20 = m[8],
m21 = m[9],
m22 = m[10],
m23 = m[11],
m30 = m[12],
m31 = m[13],
m32 = m[14],
m33 = m[15],
tmp_0 = m22 * m33,
tmp_1 = m32 * m23,
tmp_2 = m12 * m33,
tmp_3 = m32 * m13,
tmp_4 = m12 * m23,
tmp_5 = m22 * m13,
tmp_6 = m02 * m33,
tmp_7 = m32 * m03,
tmp_8 = m02 * m23,
tmp_9 = m22 * m03,
tmp_10 = m02 * m13,
tmp_11 = m12 * m03,
tmp_12 = m20 * m31,
tmp_13 = m30 * m21,
tmp_14 = m10 * m31,
tmp_15 = m30 * m11,
tmp_16 = m10 * m21,
tmp_17 = m20 * m11,
tmp_18 = m00 * m31,
tmp_19 = m30 * m01,
tmp_20 = m00 * m21,
tmp_21 = m20 * m01,
tmp_22 = m00 * m11,
tmp_23 = m10 * m01,
t0 = (tmp_0 * m11 + tmp_3 * m21 + tmp_4 * m31) -
(tmp_1 * m11 + tmp_2 * m21 + tmp_5 * m31),
t1 = (tmp_1 * m01 + tmp_6 * m21 + tmp_9 * m31) -
(tmp_0 * m01 + tmp_7 * m21 + tmp_8 * m31),
t2 = (tmp_2 * m01 + tmp_7 * m11 + tmp_10 * m31) -
(tmp_3 * m01 + tmp_6 * m11 + tmp_11 * m31),
t3 = (tmp_5 * m01 + tmp_8 * m11 + tmp_11 * m21) -
(tmp_4 * m01 + tmp_9 * m11 + tmp_10 * m21),
d = 1.0 / (m00 * t0 + m10 * t1 + m20 * t2 + m30 * t3);
dst[0] = d * t0;
dst[1] = d * t1;
dst[2] = d * t2;
dst[3] = d * t3;
dst[4] = d * ((tmp_1 * m10 + tmp_2 * m20 + tmp_5 * m30) -
(tmp_0 * m10 + tmp_3 * m20 + tmp_4 * m30));
dst[5] = d * ((tmp_0 * m00 + tmp_7 * m20 + tmp_8 * m30) -
(tmp_1 * m00 + tmp_6 * m20 + tmp_9 * m30));
dst[6] = d * ((tmp_3 * m00 + tmp_6 * m10 + tmp_11 * m30) -
(tmp_2 * m00 + tmp_7 * m10 + tmp_10 * m30));
dst[7] = d * ((tmp_4 * m00 + tmp_9 * m10 + tmp_10 * m20) -
(tmp_5 * m00 + tmp_8 * m10 + tmp_11 * m20));
dst[8] = d * ((tmp_12 * m13 + tmp_15 * m23 + tmp_16 * m33) -
(tmp_13 * m13 + tmp_14 * m23 + tmp_17 * m33));
dst[9] = d * ((tmp_13 * m03 + tmp_18 * m23 + tmp_21 * m33) -
(tmp_12 * m03 + tmp_19 * m23 + tmp_20 * m33));
dst[10] = d * ((tmp_14 * m03 + tmp_19 * m13 + tmp_22 * m33) -
(tmp_15 * m03 + tmp_18 * m13 + tmp_23 * m33));
dst[11] = d * ((tmp_17 * m03 + tmp_20 * m13 + tmp_23 * m23) -
(tmp_16 * m03 + tmp_21 * m13 + tmp_22 * m23));
dst[12] = d * ((tmp_14 * m22 + tmp_17 * m32 + tmp_13 * m12) -
(tmp_16 * m32 + tmp_12 * m12 + tmp_15 * m22));
dst[13] = d * ((tmp_20 * m32 + tmp_12 * m02 + tmp_19 * m22) -
(tmp_18 * m22 + tmp_21 * m32 + tmp_13 * m02));
dst[14] = d * ((tmp_18 * m12 + tmp_23 * m32 + tmp_15 * m02) -
(tmp_22 * m32 + tmp_14 * m02 + tmp_19 * m12));
dst[15] = d * ((tmp_22 * m22 + tmp_16 * m02 + tmp_21 * m12) -
(tmp_20 * m12 + tmp_23 * m22 + tmp_17 * m02));
return dst;
}
static aspectView(aspect) {
return [
1 * aspect, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
]
}
static lastMatrix = {m: null};
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;
}
}

101
raw/javascript/gl/handler.js Normal file
View file

@ -0,0 +1,101 @@
class ShaderHandler {
constructor(gl) {
this.gl = gl;
this.shaderNames = [];
this.shaders = {};
this.programs = {};
}
setGL(gl) {
this.gl = gl;
}
async loadShader(name, path) {
this.shaderNames.push(name);
await this.load(name, path + name + ".vert", this.gl.VERTEX_SHADER);
await this.load(name, path + name + ".frag", this.gl.FRAGMENT_SHADER);
}
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);
if (shader) {
this.shaders[realName] = shader;
}
}
return !!this.shaders[realName];
}
getShader(name, type) {
let realName = name + "_" + type;
return this.shaders[realName];
}
getAllShaders() {
return this.shaderNames;
}
async createProgramForEach(arr) {
arr = arr || this.shaderNames;
for (let i = 0; i < arr.length; i++) {
let shader = arr[i];
let v = await shaderHandler.createProgram(shader, [shader])
if (!v) {
return false;
}
}
return true;
}
createShader(source, type) {
let gl = this.gl;
let shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
return shader;
}
console.error(gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
createProgram(name, shaders) {
let gl = this.gl;
let pro = gl.createProgram();
for (let i = 0; i < shaders.length; i++) {
gl.attachShader(pro, this.getShader(shaders[i], gl.VERTEX_SHADER));
gl.attachShader(pro, this.getShader(shaders[i], gl.FRAGMENT_SHADER));
}
gl.linkProgram(pro);
var success = gl.getProgramParameter(pro, gl.LINK_STATUS);
if (success) {
this.programs[name] = pro;
return pro;
}
console.log(gl.getProgramInfoLog(pro));
gl.deleteProgram(pro);
return null;
}
getProgram(name) {
return this.programs[name];
}
use(name) {
let pro = this.programs[name];
this.gl.useProgram(pro);
return pro;
}
async loadArray(list, path) {
let self = this;
for (const e of list) {
await self.loadShader(e, path)
}
await self.createProgramForEach(list)
}
}