WebGL2 Dual-viewport Camera & Projection Visualizer

Got it 👍Here’s a concise explanation (well under 5000 characters) that still covers everything important without going line-by-line. 📌 Overview This project is a WebGL2 dual-viewport renderer that displays: Left viewport: the main 3D object rendered from a controllable camera Right viewport: a second “observer” camera showing the main camera as a wireframe object the projection frustum (perspective or orthographic) It’s designed as an educational visualization for understanding camera matrices and projections. 📜 License (CC BY 4.0) The included Creative Commons Attribution 4.0 International license is used correctly. ✔ Allows reuse, modification, and redistribution✔ Requires author credit and license link✔ Suitable for GitHub, academic work, tutorials, and portfolios 🎨 Shaders Object shaders Vertex shader Receives position and color attributes Applies a combined projection × view × world matrix Passes color to fragment shader Fragment shader Outputs interpolated vertex color Camera/debug shaders Simple wireframe rendering Uses a uniform color (u_color) Used for camera cube and frustum visualization 📦 Geometry & VAOs setGeometry() uploads vertex positions setColors() uploads vertex colors object_f() creates a VAO for the main object object_camera_ctrl() creates a VAO + index buffer for: camera cube direction indicator All geometry is stored using WebGL2 VAOs, which is best practice. 🎥 Cameras & Matrices Main camera Controlled via lil-GUI Supports perspective and orthographic projection Observer camera Fixed position Renders the scene + camera visualization Matrices used: worldMatrix → object transforms viewMatrix → inverse of camera matrix projectionMatrix → perspective or orthographic Final transform: projection × view × world 🖼️ Dual Viewport Rendering Canvas is split horizontally gl.viewport and gl.scissor isolate each view Each viewport has its own camera and clear color Left: normal sceneRight: scene + camera + frustum 🎛️ UI (lil-GUI) The UI allows: Object translation, rotation, scaling Camera position control FOV, near/far planes Perspective ↔ orthographic switch Optional draggable GUI panel All UI changes trigger re-rendering.