Add gyro and webgl demo
This commit is contained in:
parent
611cee6f40
commit
1635eb9ede
43
cg/webgl/index.html
Normal file
43
cg/webgl/index.html
Normal file
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.view {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 1) {
|
||||
.view-canvas {
|
||||
width: 100vw;
|
||||
height: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-aspect-ratio: 1) {
|
||||
.view-canvas {
|
||||
width: 100vh;
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="view">
|
||||
<canvas id="canvas" class="view-canvas" width="64" height="64"></canvas>
|
||||
</div>
|
||||
<script src="./m4.js"></script>
|
||||
<script src="./webgl.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1467
cg/webgl/m4.js
Normal file
1467
cg/webgl/m4.js
Normal file
File diff suppressed because it is too large
Load Diff
323
cg/webgl/webgl.js
Normal file
323
cg/webgl/webgl.js
Normal file
@ -0,0 +1,323 @@
|
||||
"use strict";
|
||||
|
||||
const v3 = {
|
||||
add: function (v1, v2) {
|
||||
return [v1[0] + v2[0], v1[1] + v2[1], v1[2] + v2[2]];
|
||||
},
|
||||
normalize: function (v) {
|
||||
return v3.scale(v, 1 / v3.norm(v));
|
||||
},
|
||||
norm: function (v) {
|
||||
return Math.sqrt(Math.pow(v[0], 2) + Math.pow(v[1], 2) + Math.pow(v[2], 2));
|
||||
},
|
||||
scale: function (v, f) {
|
||||
return [v[0] * f, v[1] * f, v[2] * f];
|
||||
},
|
||||
};
|
||||
|
||||
function getGyroPermission(){
|
||||
if(!DeviceOrientationEvent.requestPermission){
|
||||
return Promise.resolve("granted")
|
||||
}
|
||||
else{
|
||||
return DeviceOrientationEvent.requestPermission()
|
||||
}
|
||||
}
|
||||
|
||||
function createShader(gl, type, source) {
|
||||
const shader = gl.createShader(type);
|
||||
gl.shaderSource(shader, source);
|
||||
gl.compileShader(shader);
|
||||
|
||||
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
||||
throw new Error(gl.getShaderInfoLog(shader));
|
||||
}
|
||||
|
||||
return shader;
|
||||
}
|
||||
|
||||
function createProgram(gl, shaders) {
|
||||
const program = gl.createProgram();
|
||||
for (const shader of shaders) {
|
||||
gl.attachShader(program, shader);
|
||||
}
|
||||
gl.linkProgram(program);
|
||||
|
||||
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
||||
throw new Error(gl.getProgramInfoLog(program));
|
||||
}
|
||||
|
||||
return program;
|
||||
}
|
||||
|
||||
function initIsocahedron(vertices, elements) {
|
||||
const t = 1 + Math.sqrt(5) / 2;
|
||||
|
||||
vertices.push(
|
||||
v3.normalize([-1, t, 0]),
|
||||
v3.normalize([1, t, 0]),
|
||||
v3.normalize([-1, -t, 0]),
|
||||
v3.normalize([1, -t, 0]),
|
||||
v3.normalize([0, -1, t]),
|
||||
v3.normalize([0, 1, t]),
|
||||
v3.normalize([0, -1, -t]),
|
||||
v3.normalize([0, 1, -t]),
|
||||
v3.normalize([t, 0, -1]),
|
||||
v3.normalize([t, 0, 1]),
|
||||
v3.normalize([-t, 0, -1]),
|
||||
v3.normalize([-t, 0, 1]),
|
||||
);
|
||||
|
||||
elements.push(
|
||||
0, 11, 5,
|
||||
0, 5, 1,
|
||||
0, 1, 7,
|
||||
0, 7, 10,
|
||||
0, 10, 11,
|
||||
1, 5, 9,
|
||||
5, 11, 4,
|
||||
11, 10, 2,
|
||||
10, 7, 6,
|
||||
7, 1, 8,
|
||||
3, 9, 4,
|
||||
3, 4, 2,
|
||||
3, 2, 6,
|
||||
3, 6, 8,
|
||||
3, 8, 9,
|
||||
4, 9, 5,
|
||||
2, 4, 11,
|
||||
6, 2, 10,
|
||||
8, 6, 7,
|
||||
9, 8, 1,
|
||||
);
|
||||
}
|
||||
|
||||
function getMidpoint(vertices, midpoints, i0, i1) {
|
||||
const k = `${i0}_${i1}`;
|
||||
if (midpoints.has(k)) {
|
||||
return vertices[midpoints[k]];
|
||||
}
|
||||
|
||||
const p0 = vertices[i0];
|
||||
const p1 = vertices[i1];
|
||||
|
||||
const midpoint = v3.normalize(v3.scale(v3.add(p0, p1), 0.5));
|
||||
const midpointIndex = vertices.length;
|
||||
midpoints.set(k, midpointIndex);
|
||||
vertices.push(midpoint);
|
||||
return midpointIndex;
|
||||
}
|
||||
|
||||
function subdivideIsocahedron(vertices, elements, midpoints) {
|
||||
const newElements = [];
|
||||
for (let i = 0; i < elements.length; i += 3) {
|
||||
const p0 = elements[i];
|
||||
const p1 = elements[i + 1];
|
||||
const p2 = elements[i + 2];
|
||||
const m0 = getMidpoint(vertices, midpoints, p0, p1);
|
||||
const m1 = getMidpoint(vertices, midpoints, p1, p2);
|
||||
const m2 = getMidpoint(vertices, midpoints, p2, p0);
|
||||
|
||||
newElements.push(
|
||||
m0, m1, m2,
|
||||
p0, m0, m2,
|
||||
p1, m1, m0,
|
||||
p2, m2, m1
|
||||
);
|
||||
}
|
||||
return newElements;
|
||||
}
|
||||
|
||||
function generateIsocahedron() {
|
||||
const r = 1;
|
||||
const n = 3;
|
||||
const tau = 2 * Math.PI;
|
||||
|
||||
const vertices = [];
|
||||
const normals = [];
|
||||
let elements = [];
|
||||
|
||||
initIsocahedron(vertices, elements);
|
||||
const midpoints = new Map();
|
||||
for (let i = 0; i < 1; i++) {
|
||||
elements = subdivideIsocahedron(vertices, elements, midpoints);
|
||||
}
|
||||
|
||||
return {
|
||||
vertices: [].concat(...vertices),
|
||||
// as we want to approximate a unit sphere, all the vertices are unit vectors
|
||||
normals: [].concat(...vertices),
|
||||
elements
|
||||
};
|
||||
}
|
||||
|
||||
const canvas = document.querySelector("#canvas");
|
||||
const gl = canvas.getContext("webgl");
|
||||
|
||||
const vertexShader = createShader(gl, gl.VERTEX_SHADER, `
|
||||
attribute vec4 a_position;
|
||||
attribute vec3 a_normal;
|
||||
|
||||
uniform mat4 u_matrix;
|
||||
uniform mat4 u_world;
|
||||
uniform mat4 u_worldIT;
|
||||
uniform vec3 u_light;
|
||||
uniform vec3 u_camera;
|
||||
|
||||
varying vec3 v_normal;
|
||||
varying vec3 v_surfaceToLight;
|
||||
varying vec3 v_surfaceToView;
|
||||
varying vec3 v_pos;
|
||||
|
||||
void main() {
|
||||
gl_Position = u_matrix * a_position;
|
||||
v_pos = a_position.rgb;
|
||||
v_pos.r = abs(v_pos.r);
|
||||
v_pos.g = abs(v_pos.g);
|
||||
v_pos.b = abs(v_pos.b);
|
||||
|
||||
v_normal = mat3(u_worldIT) * a_normal;
|
||||
|
||||
vec3 surfaceWorldPos = (u_world * a_position).xyz;
|
||||
v_surfaceToLight = u_light - surfaceWorldPos;
|
||||
|
||||
v_surfaceToView = u_camera - surfaceWorldPos;
|
||||
}
|
||||
`);
|
||||
|
||||
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, `
|
||||
precision highp float;
|
||||
|
||||
varying vec3 v_normal;
|
||||
varying vec3 v_surfaceToLight;
|
||||
varying vec3 v_surfaceToView;
|
||||
varying vec3 v_pos;
|
||||
|
||||
void main() {
|
||||
vec3 halfVector = normalize(normalize(v_surfaceToLight) + normalize(v_surfaceToView));
|
||||
|
||||
float ka = 0.3;
|
||||
float kd = 0.8;
|
||||
float ks = 0.6;
|
||||
float gamma = 100.0;
|
||||
|
||||
gl_FragColor = vec4(v_pos, 1.0);
|
||||
gl_FragColor.rgb *= ka + (kd * dot(normalize(v_normal), normalize(v_surfaceToLight)));
|
||||
gl_FragColor.rgb += ks * pow(max(0.0, dot(normalize(v_normal), halfVector)), gamma);
|
||||
}
|
||||
`);
|
||||
|
||||
const program = createProgram(gl, [vertexShader, fragmentShader]);
|
||||
|
||||
const {vertices, normals, elements} = generateIsocahedron();
|
||||
|
||||
const positionBuffer = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
|
||||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
|
||||
|
||||
const normalBuffer = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normals), gl.STATIC_DRAW);
|
||||
|
||||
const elementBuffer = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementBuffer);
|
||||
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(elements), gl.STATIC_DRAW);
|
||||
|
||||
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
|
||||
|
||||
gl.enable(gl.DEPTH_TEST);
|
||||
gl.enable(gl.CULL_FACE);
|
||||
|
||||
const positionAttribLocation = gl.getAttribLocation(program, "a_position");
|
||||
const normalAttribLocation = gl.getAttribLocation(program, "a_normal");
|
||||
|
||||
const matrixLocation = gl.getUniformLocation(program, "u_matrix");
|
||||
const worldMatrixLocation = gl.getUniformLocation(program, "u_world");
|
||||
const worldITMatrixLocation = gl.getUniformLocation(program, "u_worldIT");
|
||||
const lightVecLocation = gl.getUniformLocation(program, "u_light");
|
||||
const cameraVecLocation = gl.getUniformLocation(program, "u_camera");
|
||||
|
||||
const aspectRatio = gl.canvas.width / gl.canvas.height;
|
||||
const zNear = 1;
|
||||
const zFar = 2000;
|
||||
|
||||
const rotation = [0, 0, 0];
|
||||
|
||||
gl.useProgram(program);
|
||||
|
||||
gl.enableVertexAttribArray(positionAttribLocation);
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
|
||||
gl.vertexAttribPointer(
|
||||
positionAttribLocation,
|
||||
3, // element size
|
||||
gl.FLOAT,
|
||||
false, // normalize
|
||||
0, // stride
|
||||
0 // offset
|
||||
);
|
||||
|
||||
gl.enableVertexAttribArray(normalAttribLocation);
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
|
||||
gl.vertexAttribPointer(normalAttribLocation, 3, gl.FLOAT, false, 0, 0);
|
||||
|
||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementBuffer);
|
||||
|
||||
function drawScene () {
|
||||
window.requestAnimationFrame(drawScene);
|
||||
|
||||
const t = performance.now() / 1000;
|
||||
|
||||
const lightPos = [10, 10, 30];
|
||||
const projectionMatrix = m4.perspective(Math.PI / 180 * 60, aspectRatio, zNear, zFar);
|
||||
const cameraPos = [0, 0, 30];
|
||||
const target = [0, 0, 0];
|
||||
const up = [0, 1, 0];
|
||||
const cameraMatrix = m4.lookAt(cameraPos, target, up);
|
||||
const viewMatrix = m4.inverse(cameraMatrix);
|
||||
let worldMatrix = m4.identity();
|
||||
worldMatrix = m4.xRotate(worldMatrix, rotation[0]);
|
||||
worldMatrix = m4.yRotate(worldMatrix, rotation[1]);
|
||||
worldMatrix = m4.zRotate(worldMatrix, rotation[2]);
|
||||
worldMatrix = m4.scale(worldMatrix, 12, 12, 12);
|
||||
|
||||
const worldITMatrix = m4.transpose(m4.inverse(worldMatrix));
|
||||
const viewProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);
|
||||
const worldViewProjectionMatrix = m4.multiply(viewProjectionMatrix, worldMatrix);
|
||||
|
||||
/*
|
||||
let matrix = projectionMatrix;
|
||||
matrix = m4.translate(matrix, 0, 0, -30);
|
||||
matrix = m4.xRotate(matrix, rotation[0]);
|
||||
matrix = m4.yRotate(matrix, rotation[1]);
|
||||
matrix = m4.zRotate(matrix, rotation[2]);
|
||||
matrix = m4.scale(matrix, 10, 10, 10);
|
||||
*/
|
||||
gl.uniformMatrix4fv(matrixLocation, false, worldViewProjectionMatrix);
|
||||
gl.uniformMatrix4fv(worldMatrixLocation, false, worldMatrix);
|
||||
gl.uniformMatrix4fv(worldITMatrixLocation, false, worldITMatrix);
|
||||
gl.uniform3fv(lightVecLocation, lightPos);
|
||||
gl.uniform3fv(cameraVecLocation, cameraPos);
|
||||
|
||||
gl.clearColor(0, 0, 0, 1);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
|
||||
gl.drawElements(
|
||||
gl.TRIANGLES,
|
||||
elements.length, // count
|
||||
gl.UNSIGNED_SHORT,
|
||||
0, // offset
|
||||
);
|
||||
}
|
||||
|
||||
drawScene();
|
||||
|
||||
canvas.addEventListener("click", e => {
|
||||
getGyroPermission()
|
||||
.then(response => {
|
||||
window.addEventListener("deviceorientation", e => {
|
||||
rotation[0] = 2 * (-e.beta / 180 * Math.PI);
|
||||
rotation[1] = 2 * (-e.gamma / 180 * Math.PI);
|
||||
rotation[2] = 2 * (-e.alpha / 180 * Math.PI + Math.PI / 2);
|
||||
});
|
||||
});
|
||||
});
|
||||
BIN
gyro/AufnahmeLIna.mp3
Normal file
BIN
gyro/AufnahmeLIna.mp3
Normal file
Binary file not shown.
130
gyro/Untitled-1.html
Normal file
130
gyro/Untitled-1.html
Normal file
@ -0,0 +1,130 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<h1>colles gyro dingens</h1>
|
||||
|
||||
<marquee>ich bin der Davidmann2</marquee>
|
||||
|
||||
<fieldset>
|
||||
<legend>
|
||||
status
|
||||
</legend>
|
||||
<strong id="status">
|
||||
loading
|
||||
</strong>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>
|
||||
gyro
|
||||
</legend>
|
||||
<strong id="gyro">
|
||||
loading
|
||||
</strong>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>
|
||||
gyro
|
||||
</legend>
|
||||
<strong id="gyro2">
|
||||
loading
|
||||
</strong>
|
||||
</fieldset>
|
||||
|
||||
<script>
|
||||
function loadAudioFile(fileName){
|
||||
return (
|
||||
fetch(fileName)
|
||||
.then(response=>{
|
||||
return(response.arrayBuffer())
|
||||
})
|
||||
.then(arrayBuffer=>{
|
||||
return(ctx.decodeAudioData(arrayBuffer))
|
||||
})
|
||||
.then(audioBuffer=>{
|
||||
loaded++
|
||||
document.getElementById("status").innerHTML = "loaded " + loaded + "/" + fileNames.length
|
||||
return(audioBuffer)
|
||||
})
|
||||
)
|
||||
}
|
||||
const fileNames = ["AufnahmeLIna.mp3", "blatters.mp3"]
|
||||
let buffers = null
|
||||
let loaded = 0
|
||||
Promise.all(fileNames.map(loadAudioFile))
|
||||
.then(audioBuffers=>{
|
||||
document.getElementById("status").innerHTML = "Done loading"
|
||||
buffers = audioBuffers
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
let samples = null
|
||||
const ctx = new AudioContext()
|
||||
function playStuff(){
|
||||
console.log("imStuff")
|
||||
if(samples == null){
|
||||
samples = []
|
||||
for(const buffer of buffers){
|
||||
const sample = ctx.createBufferSource()
|
||||
sample.buffer = buffer
|
||||
|
||||
const gain = ctx.createGain()
|
||||
|
||||
sample.connect(gain)
|
||||
gain.connect(ctx.destination)
|
||||
|
||||
sample.start()
|
||||
samples.push({sample:sample, gainNode:gain})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function stopStuff(){
|
||||
for(sample of samples){
|
||||
sample.sample.stop()
|
||||
}
|
||||
samples = null
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function getGyroPermission(){
|
||||
if(!DeviceOrientationEvent.requestPermission){
|
||||
return Promise.resolve("granted")
|
||||
}
|
||||
else{
|
||||
return DeviceOrientationEvent.requestPermission()
|
||||
}
|
||||
}
|
||||
function initGyro(){
|
||||
//alert(DeviceOrientationEvent.requestPermission())
|
||||
getGyroPermission().then(response => {
|
||||
window.addEventListener("deviceorientation", e => {
|
||||
document.querySelector("#gyro").innerHTML = e.alpha / 360
|
||||
document.querySelector("#gyro2").innerHTML = (e.beta + 180) / 360
|
||||
if(samples != null){
|
||||
samples[0].gainNode.gain.value = e.alpha / 360
|
||||
samples[1].gainNode.gain.value = (e.beta + 180) / 360
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick="playStuff()">PLAY</button>
|
||||
|
||||
<button onclick="stopStuff()">STOP</button>
|
||||
|
||||
<button onclick="initGyro()">START GYRO</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
gyro/blatters.mp3
Normal file
BIN
gyro/blatters.mp3
Normal file
Binary file not shown.
26
gyro/index.html
Normal file
26
gyro/index.html
Normal file
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<h1>Is it working?</h1>
|
||||
<button id="perm">click me for permissions</button>
|
||||
<div style="color: red" id="disp">lalala</div>
|
||||
<script>
|
||||
document.querySelector("#perm").addEventListener("click", e => {
|
||||
const ac = new AudioContext();
|
||||
const osc = ac.createOscillator();
|
||||
|
||||
osc.type = "square";
|
||||
osc.frequency.setValueAtTime(440, ac.currentTime);
|
||||
osc.connect(ac.destination);
|
||||
osc.start();
|
||||
|
||||
DeviceMotionEvent.requestPermission().then(response => {
|
||||
window.addEventListener("devicemotion", e => {
|
||||
document.querySelector("#disp").innerHTML = Math.round(e.acceleration.x);
|
||||
osc.frequency.setValueAtTime(440 * Math.pow(2, e.acceleration.x / 10), ac.currentTime);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user