A basic minecraft 3D eval. It should create a basic chunk with a greedy mesher, block placing and distroying and fps camera
Prompt
Project Prompt: WebGL2 Interactive Voxel Engine Objective: The goal is to develop a performant, interactive 3D voxel rendering engine, similar in style to Minecraft, that runs in a web browser. The entire application must be self-contained within a single HTML file and use the WebGL2 API for rendering. The primary technical challenge is to render each chunk of the world using only a single draw call to ensure high performance. Core Technical Requirements: Single File Deliverable: The entire project (HTML, CSS, and JavaScript) must be contained within a single .html file. Modern JavaScript: Use modern JavaScript (ES6+) for implementation. No External Libraries: You must not use any external 3D libraries (like Three.js, Babylon.js) or utility libraries (like gl-matrix). All WebGL2 calls, shader compilation, matrix math, and vector operations must be written from scratch. WebGL2 API: The project must explicitly use the WebGL2 rendering context. Key Feature Implementation: Chunk-Based World: The world must be structured into chunks of a fixed size (e.g., 16x16x16 blocks). Create a simple 3D array in memory to represent the block data for a single chunk. 0 should represent air, and 1 should represent a solid block. Generate some simple procedural terrain within the chunk for demonstration purposes (e.g., using sine waves to define height). Performant Rendering (Single Draw Call): The core rendering approach must be optimized to use one draw call per chunk. To achieve this, you must implement a Greedy Meshing algorithm. This algorithm will process the chunk's block data and generate a single, optimized mesh by merging the faces of adjacent, identical blocks into larger quadrilaterals. This mesh should be stored in a Vertex Buffer Object (VBO) on the GPU. First-Person Shooter (FPS) Camera: Implement a standard FPS-style camera. Movement: Use the W, A, S, and D keys for forward, left, backward, and right movement, relative to the camera's direction. Looking: Use the mouse for looking. The camera's pitch (up/down) and yaw (left/right) should be controlled by mouse movement. Pointer Lock: Implement the Pointer Lock API so that clicking on the canvas hides the cursor and provides unbounded mouse movement for a seamless control experience. The Escape key should release the pointer lock. Block Interaction: Raycasting: Implement a voxel raycasting algorithm (e.g., Amanatides & Woo's algorithm) to determine which block and which face the player is aiming at from the camera's position and direction. Destroying Blocks: A left-click should destroy the targeted block (set its data to 0). Placing Blocks: A right-click should place a new block on the face of the targeted block. Dynamic World Updates: When a block is created or destroyed, the chunk's mesh must be regenerated by re-running the greedy meshing algorithm. The updated vertex data must then be sent to the existing VBO on the GPU using gl.bufferData() or gl.bufferSubData(). The scene should update in real-time without needing a page refresh. User Experience (UX) Elements: Add a simple crosshair to the center of the screen to aid aiming. Display basic instructions on screen (e.g., "Click to Lock Mouse, WASD to Move..."), which can be hidden once pointer lock is active. Stretch Goals (Optional): Texturing: Instead of simple colors, implement texturing. This would involve creating a texture atlas and adding texture coordinates (UVs) to the vertex data. For a WebGL2 implementation, demonstrate the use of a 2D Texture Array for maximum efficiency. Multiple Block Types: Expand the block data to support more than one type of solid block, each with a different texture/color. Simple UI: Add a simple FPS counter or display the player's current coordinates on screen.
A system prompt was added to support web rendering