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

WIP

Browse source
This commit is contained in:
Maurice Grönwoldt 2020-08-08 21:58:15 +02:00
commit 4c4afe3bdf
29 changed files with 595 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

78
raw/javascript/gl/Camera.js Normal file
View file

@ -0,0 +1,78 @@
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;
}
}
}

105
raw/javascript/gl/glUtils.js
View file

@ -210,6 +210,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],
@ -298,42 +307,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) {
@ -343,4 +323,69 @@ 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);
}
}

7
raw/javascript/gl/handler.js
View file

@ -19,8 +19,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;
}
@ -70,8 +70,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;
}