rfid

2025-09-27 14:35:25 +00:00 · 2023-04-17 18:10:38 +12:00
parent aeed45cc70
commit ff94cff820
15 changed files with 1493 additions and 41 deletions
--- a/test/index.html
+++ b/test/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WebGL Centered Square</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+        }
+        canvas {
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <script src="main.js"></script>
+</body>
+</html>
--- a/test/main.js
+++ b/test/main.js
@@ -0,0 +1,98 @@
+const canvas = document.getElementById('canvas');
+const gl = canvas.getContext('webgl');
+
+if (!gl) {
+    alert('WebGL is not supported in your browser.');
+}
+
+function resizeCanvas() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    gl.viewport(0, 0, canvas.width, canvas.height);
+}
+
+window.addEventListener('resize', resizeCanvas);
+resizeCanvas();
+
+const vertices = [
+    -0.5, -0.5,
+    0.5, -0.5,
+    0.5, 0.5,
+    -0.5, 0.5,
+];
+
+const vertexBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+
+const vertexShaderSource = `
+    attribute vec2 a_position;
+
+    uniform vec2 u_resolution;
+    uniform vec2 u_translation;
+    uniform vec2 u_scale;
+
+    void main() {
+        vec2 scaledPosition = a_position * u_scale;
+        vec2 position = scaledPosition + u_translation;
+
+        vec2 zeroToOne = position / u_resolution;
+        vec2 zeroToTwo = zeroToOne * 2.0;
+        vec2 clipSpace = zeroToTwo - 1.0;
+
+        gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
+    }
+`;
+
+const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(vertexShader, vertexShaderSource);
+gl.compileShader(vertexShader);
+
+const fragmentShaderSource = `
+    precision mediump float;
+
+    void main() {
+        gl_FragColor = vec4(1, 0, 0, 1);
+    }
+`;
+
+const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+gl.shaderSource(fragmentShader, fragmentShaderSource);
+gl.compileShader(fragmentShader);
+
+const program = gl.createProgram();
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+gl.linkProgram(program);
+gl.useProgram(program);
+
+const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
+gl.enableVertexAttribArray(positionAttributeLocation);
+gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
+
+const resolutionUniformLocation = gl.getUniformLocation(program, 'u_resolution');
+const translationUniformLocation = gl.getUniformLocation(program, 'u_translation');
+const scaleUniformLocation = gl.getUniformLocation(program, 'u_scale');
+
+function drawScene() {
+    gl.clearColor(0, 0, 0, 1);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    gl.uniform2f(resolutionUniformLocation, canvas.width, canvas.height);
+
+    const squareWidth = 50;
+    const squareHeight = 50;
+    const xCenter = (canvas.width - squareWidth) / 2;
+    const yCenter = (canvas.height - squareHeight) / 2;
+    gl.uniform2f(translationUniformLocation, xCenter, yCenter);
+
+    gl.uniform2f(scaleUniformLocation, squareWidth, squareHeight);
+
+    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
+
+    requestAnimationFrame(drawScene);
+}
+
+drawScene();
+