make this code have better world generation and the file name be world.js and add a HTML linking to it. const CHUNK_SIZE = 16; const RENDER_DISTANCE = 2; const WORLD_HEIGHT = 64; class VoxelWorld { constructor() { this.chunks = {}; this.activeChunks = new Set(); } getChunkKey(cx, cz) { return ${cx},${cz}; } getVoxel(x, y, z) { const cx = Math.floor(x / CHUNK_SIZE); const cz = Math.floor(z / CHUNK_SIZE); const key = this.getChunkKey(cx, cz); if (!this.chunks[key] || y < 0 || y >= WORLD_HEIGHT) return 0; const lx = x - cx * CHUNK_SIZE; const lz = z - cz * CHUNK_SIZE; return this.chunks[key][lx + lz * CHUNK_SIZE + y * CHUNK_SIZE * CHUNK_SIZE]; } setVoxel(x, y, z, value) { const cx = Math.floor(x / CHUNK_SIZE); const cz = Math.floor(z / CHUNK_SIZE); const key = this.getChunkKey(cx, cz); if (y < 0 || y >= WORLD_HEIGHT) return; if (!this.chunks[key]) { this.chunks[key] = new Uint8Array(CHUNK_SIZE * CHUNK_SIZE * WORLD_HEIGHT); } const lx = x - cx * CHUNK_SIZE; const lz = z - cz * CHUNK_SIZE; this.chunks[key][lx + lz * CHUNK_SIZE + y * CHUNK_SIZE * CHUNK_SIZE] = value; } generateChunk(cx, cz) { const key = this.getChunkKey(cx, cz); if (this.chunks[key]) return; this.chunks[key] = new Uint8Array(CHUNK_SIZE * CHUNK_SIZE * WORLD_HEIGHT); // Generate heightmap for (let x = 0; x < CHUNK_SIZE; x++) { for (let z = 0; z < CHUNK_SIZE; z++) { const wx = x + cx * CHUNK_SIZE; const wz = z + cz * CHUNK_SIZE; const height = Math.floor( (Math.sin(wx * 0.1) * 10) + (Math.cos(wz * 0.1) * 10) + (Math.sin(wx * 0.05 + wz * 0.05) * 5) + (WORLD_HEIGHT / 2) ); // Generate layers for (let y = 0; y < height && y < WORLD_HEIGHT; y++) { let blockType = 0; if (y === height - 1) { blockType = 1; // Grass top } else if (y > height - 5) { blockType = 2; // Dirt } else { blockType = 3; // Stone } this.setVoxel(wx, y, wz, blockType); } } } } greedyMeshing(cx, cz) { const key = this.getChunkKey(cx, cz); const chunk = this.chunks[key]; if (!chunk) return null; const positions = []; const indices = []; const normals = []; const uvs = []; const colors = []; let index = 0; const isBlockSolid = (x, y, z) => { if (y < 0 || y >= WORLD_HEIGHT) return false; if (x >= 0 && x < CHUNK_SIZE && z >= 0 && z < CHUNK_SIZE) { return chunk[x + z * CHUNK_SIZE + y * CHUNK_SIZE * CHUNK_SIZE] !== 0; } return this.getVoxel( x + cx * CHUNK_SIZE, y, z + cz * CHUNK_SIZE ) !== 0; }; for (let y = 0; y < WORLD_HEIGHT; y++) { for (let z = 0; z < CHUNK_SIZE; z++) { for (let x = 0; x < CHUNK_SIZE; x++) { const blockType = chunk[x + z * CHUNK_SIZE + y * CHUNK_SIZE * CHUNK_SIZE]; if (blockType === 0) continue; const faces = [ { dir: [1, 0, 0], name: 'right' }, { dir: [-1, 0, 0], name: 'left' }, { dir: [0, 1, 0], name: 'top' }, { dir: [0, -1, 0], name: 'bottom' }, { dir: [0, 0, 1], name: 'front' }, { dir: [0, 0, -1], name: 'back' } ]; for (const face of faces) { const [dx, dy, dz] = face.dir; if (!isBlockSolid(x + dx, y + dy, z + dz)) { // Add front face const vertices = this.getFaceVertices(x, y, z, face.name); positions.push(...vertices); const normal = face.dir; for (let i = 0; i < 4; i++) { normals.push(...normal); } indices.push( index, index + 1, index + 2, index, index + 2, index + 3 ); index += 4; uvs.push(0, 0, 1, 0, 1, 1, 0, 1); const color = this.getBlockColor(blockType); for (let i = 0; i < 4; i++) { colors.push(...color); } // Add back face positions.push(...vertices); const reversedNormal = normal.map(v => -v); for (let i = 0; i < 4; i++) { normals.push(...reversedNormal); } indices.push( index, index + 2, index + 1, index, index + 3, index + 2 ); index += 4; uvs.push(0, 0, 1, 0, 1, 1, 0, 1); for (let i = 0; i < 4; i++) { colors.push(...color); } } } } } } return { positions, indices, normals, uvs, colors }; } getFaceVertices(x, y, z, face) { const vertices = []; const offsets = { right: [ [1,0,0], [1,1,0], [1,1,1], [1,0,1] ], left: [ [0,0,1], [0,1,1], [0,1,0], [0,0,0] ], top: [ [0,1,1], [1,1,1], [1,1,0], [0,1,0] ], bottom: [ [0,0,0], [1,0,0], [1,0,1], [0,0,1] ], front: [ [0,0,1], [0,1,1], [1,1,1], [1,0,1] ], back: [ [1,0,0], [1,1,0], [0,1,0], [0,0,0] ] }; for (const [dx, dy, dz] of offsets[face]) { vertices.push(x + dx, y + dy, z + dz); } return vertices; } getBlockColor(type) { const colors = { 1: [0.4, 0.8, 0.3], // Grass 2: [0.6, 0.5, 0.3], // Dirt 3: [0.5, 0.5, 0.5] // Stone }; return colors[type] || [1, 0, 1]; } } class Game { constructor() { this.canvas = document.getElementById("renderCanvas"); this.engine = new BABYLON.Engine(this.canvas, true); this.scene = new BABYLON.Scene(this.engine); // Create fly camera this.camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 10, 0), this.scene); this.camera.attachControl(this.canvas, true); this.camera.speed = 0.5; this.camera.angularSensibility = 2000; this.camera.keysUp = [87]; // W this.camera.keysDown = [83]; // S this.camera.keysLeft = [65]; // A this.camera.keysRight = [68]; // D this.camera.keysUpward = [32]; // Space this.camera.keysDownward = [16]; // Shift this.voxelWorld = new VoxelWorld(); this.chunkMeshes = {}; this.lastChunkPos = { x: Infinity, z: Infinity }; this.setupScene(); this.setupControls(); this.engine.runRenderLoop(() => { this.scene.render(); this.updateChunks(); }); window.addEventListener("resize", () => { this.engine.resize(); }); } setupScene() { // Create directional light for sun (primary shadow caster) this.sunLight = new BABYLON.DirectionalLight("sunLight", new BABYLON.Vector3(-1, -1, -0.5), this.scene); this.sunLight.intensity = 1.2; this.sunLight.diffuse = new BABYLON.Color3(1, 0.95, 0.9); this.sunLight.specular = new BABYLON.Color3(0.1, 0.1, 0.1); // Enable shadows this.sunLight.shadowEnabled = true; const shadowGenerator = new BABYLON.ShadowGenerator(2048, this.sunLight); shadowGenerator.useBlurExponentialShadowMap = true; shadowGenerator.blurKernel = 32; shadowGenerator.setDarkness(0.4); // Create ambient light this.ambientLight = new BABYLON.HemisphericLight("ambientLight", new BABYLON.Vector3(0, 1, 0), this.scene); this.ambientLight.intensity = 0.3; this.ambientLight.groundColor = new BABYLON.Color3(0.2, 0.2, 0.2); // Create skybox with texture this.skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size: 1000.0}, this.scene); this.skyboxMaterial = new BABYLON.StandardMaterial("skyBox", this.scene); this.skyboxMaterial.backFaceCulling = false; this.skyboxMaterial.disableLighting = true; // Create skybox texture const skyboxTexture = new BABYLON.Texture("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_1gVzucrHCvCiXxNTXa3f8d-27h1sjgpr5a9V4ciunA&s=10", this.scene); skyboxTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; this.skyboxMaterial.reflectionTexture = skyboxTexture; this.skyboxMaterial.reflectionTexture.level = 1; this.skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); this.skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); this.skybox.material = this.skyboxMaterial; this.skybox.infiniteDistance = true; this.skybox.renderingGroupId = 0; this.skybox.isPickable = false; // Add light attached to skybox (simulates sky light) this.skyLight = new BABYLON.HemisphericLight("skyLight", new BABYLON.Vector3(0, 1, 0), this.scene); this.skyLight.intensity = 0.5; this.skyLight.diffuse = new BABYLON.Color3(0.8, 0.9, 1); this.skyLight.specular = new BABYLON.Color3(0.1, 0.1, 0.1); // Set gravity to zero for flying this.scene.gravity = new BABYLON.Vector3(0, 0, 0); // Generate initial chunks this.updateChunks(true); } setupControls() { this.scene.onPointerDown = (evt) => { if (evt.button !== 0) return; const ray = this.scene.createPickingRay( this.scene.pointerX, this.scene.pointerY, BABYLON.Matrix.Identity(), this.camera ); const hit = this.scene.pickWithRay(ray); if (hit.pickedMesh && hit.pickedMesh.name !== "skyBox") { const voxelPos = hit.pickedPoint.add(hit.getNormal().scale(0.5)); const x = Math.floor(voxelPos.x); const y = Math.floor(voxelPos.y); const z = Math.floor(voxelPos.z); this.voxelWorld.setVoxel(x, y, z, 1); const cx = Math.floor(x / CHUNK_SIZE); const cz = Math.floor(z / CHUNK_SIZE); this.updateChunkMesh(cx, cz); } }; this.canvas.addEventListener("click", () => { this.canvas.requestPointerLock = this.canvas.requestPointerLock || this.canvas.mozRequestPointerLock || this.canvas.webkitRequestPointerLock; this.canvas.requestPointerLock(); }); } createChunkMesh(cx, cz) { const meshData = this.voxelWorld.greedyMeshing(cx, cz); if (!meshData || meshData.positions.length === 0) return; const chunkKey = this.voxelWorld.getChunkKey(cx, cz); const customMesh = new BABYLON.Mesh(chunkKey, this.scene); const vertexData = new BABYLON.VertexData(); vertexData.positions = meshData.positions; vertexData.indices = meshData.indices; vertexData.normals = meshData.normals; vertexData.uvs = meshData.uvs; vertexData.colors = meshData.colors; vertexData.applyToMesh(customMesh); const material = new BABYLON.StandardMaterial("voxelMaterial", this.scene); material.diffuseColor = new BABYLON.Color3(1, 1, 1); material.specularColor = new BABYLON.Color3(0.1, 0.1, 0.1); material.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2); material.vertexColors = true; material.backFaceCulling = false; customMesh.material = material; customMesh.position.x = cx * CHUNK_SIZE; customMesh.position.z = cz * CHUNK_SIZE; customMesh.renderingGroupId = 1; customMesh.receiveShadows = true; // Add mesh to shadow generator if (this.scene.lights[0].shadowGenerator) { this.scene.lights[0].shadowGenerator.addShadowCaster(customMesh); } this.chunkMeshes[chunkKey] = customMesh; } updateChunkMesh(cx, cz) { const chunkKey = this.voxelWorld.getChunkKey(cx, cz); if (this.chunkMeshes[chunkKey]) { this.chunkMeshes[chunkKey].dispose(); delete this.chunkMeshes[chunkKey]; } this.createChunkMesh(cx, cz); } updateChunks(forceUpdate = false) { const cameraPos = this.camera.position; const cx = Math.floor(cameraPos.x / CHUNK_SIZE); const cz = Math.floor(cameraPos.z / CHUNK_SIZE); if (!forceUpdate && this.lastChunkPos.x === cx && this.lastChunkPos.z === cz) { return; } this.lastChunkPos = { x: cx, z: cz }; const newActiveChunks = new Set(); for (let x = cx - RENDER_DISTANCE; x <= cx + RENDER_DISTANCE; x++) { for (let z = cz - RENDER_DISTANCE; z <= cz + RENDER_DISTANCE; z++) { const chunkKey = this.voxelWorld.getChunkKey(x, z); newActiveChunks.add(chunkKey); if (!this.voxelWorld.chunks[chunkKey]) { this.voxelWorld.generateChunk(x, z); } if (!this.chunkMeshes[chunkKey]) { this.createChunkMesh(x, z); } } } for (const chunkKey in this.chunkMeshes) { if (!newActiveChunks.has(chunkKey)) { this.chunkMeshes[chunkKey].dispose(); delete this.chunkMeshes[chunkKey]; } } } } window.addEventListener("DOMContentLoaded", () => { new Game(); });