hrajem si ve 3d

by Petr Haluza

HTML

<baf>Klik!</baf>
<canvas></canvas>
<div id="fps">
</div>

CSS

html, body {overflow: hidden;	/*touch-action: none;*/	position: absolute;	margin: 0;	padding: 0;	width: 100%;	height: 100%;	background: #000; font-family:arial}
canvas {position: absolute;	width: 100%; 	height: 100%;	user-select: none;	background: #000;	cursor: pointer;}
baf { position:absolute; z-index:2; padding:.5em 2em; margin:2em; backdrop-filter: blur(5px); border-radius:.25em; border:4px solid #ffffff33; color:white}

#fps { position:absolute; z-index:2; padding:.5em 2em; margin:8em 0 0 2em ; backdrop-filter: blur(5px); border-radius:.25em; border:4px solid #ffffff33; color:white}

JavaScript

const times = [];
const fpsElem = document.getElementById("fps");
let fps;

function refreshLoop() {
  window.requestAnimationFrame(() => {
    const now = performance.now();
    while (times.length > 0 && times[0] <= now - 1000) {
      times.shift();
    }
    times.push(now);
    fps = times.length;
		fpsElem.innerHTML = fps + " fps";
    refreshLoop();
  });
}

refreshLoop();


console.clear();

const webGL = (transforms, setup) => {
	const canvas = document.querySelector("canvas");
	const gl = canvas.getContext("webgl", { alpha: false });
	if (!gl) return false;
	gl.enable(gl.DEPTH_TEST);
	gl.enable(gl.CULL_FACE);

	const resize = () => {
		canvas.width = canvas.offsetWidth;
		canvas.height = canvas.offsetHeight;
		gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
		camera.projection(fov);
	};

	window.addEventListener("resize", () => {
		mustResize = true;
	});

	const clearScreen = () => {
		if (mustResize) resize();
		gl.clearColor(0.8, 0.9, 1, 1);
		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
	};

	const u3 = (program, name) => {
		const loc = gl.getUniformLocation(program, name);
		return {
			set (v) {
				gl.uniform3f(loc, v[0], v[1], v[2]);
			}
		}
	};

	const computeNormals = (v) => {
		const n = [];
		for (let i = 0; i < v.length; i += 9) {
			const p1x = v[i + 3] - v[i];
			const p1y = v[i + 4] - v[i + 1];
			const p1z = v[i + 5] - v[i + 2];
			const p2x = v[i + 6] - v[i];
			const p2y = v[i + 7] - v[i + 1];
			const p2z = v[i + 8] - v[i + 2];
			const p3x = p1y * p2z - p1z * p2y;
			const p3y = -(p1x * p2z - p1z * p2x);
			const p3z = p1x * p2y - p1y * p2x;
			const mag = Math.sqrt(p3x * p3x + p3y * p3y + p3z * p3z);
			if (mag === 0) {
				n.push(0, 0, 0, 0, 0, 0, 0, 0, 0);
			} else {
				n.push(p3x / mag, p3y / mag, p3z / mag);
				n.push(p3x / mag, p3y / mag, p3z / mag);
				n.push(p3x / mag, p3y / mag, p3z / mag);
			}
		}
		return n;
	};

	const Camera = () => {
		const camProj = gl.getUniformLocation(program,...