add textures to my game the textures are programmerly generated so as gust using random noise but 2 selected colour like grass dark green to light green dirt dark brown to light brown stone light gray to dark gray 16 by 16 textures. ``` Minecraft with Building body { margin: 0; overflow: hidden; } #fpsCounter { position: absolute; top: 10px; left: 10px; color: #0f0; font-family: monospace; background: rgba(0, 0, 0, 0.5); padding: 5px 10px; border-radius: 4px; user-select:none; } #instructions { position: absolute; bottom: 10px; left: 10px; color: #ccc; font-family: monospace; background: rgba(0,0,0,0.3); padding: 5px 10px; border-radius: 4px; user-select:none; } #crosshair { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); border: 2px solid rgba(255,255,255,0.8); border-radius: 50%; pointer-events: none; } FPS: -- Move: W/A/S/D Jump: Space Sneak: Shift Left Click: Break Block Right Click: Place Block ESC: Release Mouse const canvas = document.getElementById("glcanvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const gl = canvas.getContext("webgl"); if (!gl) { alert("WebGL not supported"); } const fpsCounter = document.getElementById("fpsCounter"); // Enable depth test gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); // Simple shaders const vs = ` attribute vec3 pos; attribute vec3 col; uniform mat4 vp; varying vec3 vCol; void main() { gl_Position = vp * vec4(pos, 1.0); vCol = col; } `; const fs = ` precision mediump float; varying vec3 vCol; void main() { gl_FragColor = vec4(vCol, 1.0); } `; function compile(type, src) { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) { console.error(gl.getShaderInfoLog(s)); } return s; } const program = gl.createProgram(); gl.attachShader(program, compile(gl.VERTEX_SHADER, vs)); gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fs)); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { console.error(gl.getProgramInfoLog(program)); } gl.useProgram(program); // Uniform location const vpLoc = gl.getUniformLocation(program, "vp"); // Locations for attributes const posLoc = gl.getAttribLocation(program, "pos"); const colLoc = gl.getAttribLocation(program, "col"); // --- Infinite Terrain System --- const CHUNK_SIZE_X = 32; const CHUNK_SIZE_Y = 32; const CHUNK_SIZE_Z = 32; const RENDER_DISTANCE = 4; const LOAD_DISTANCE = RENDER_DISTANCE + 1; // Block types const BLOCK_AIR = 0; const BLOCK_GRASS = 1; const BLOCK_DIRT = 2; const BLOCK_STONE = 3; const BLOCK_WOOD = 4; const BLOCK_LEAVES = 5; // Chunk class to manage terrain data class Chunk { constructor(x, z) { this.x = x; this.z = z; this.voxels = new Uint8Array(CHUNK_SIZE_X * CHUNK_SIZE_Y * CHUNK_SIZE_Z); this.mesh = null; this.needsUpdate = true; this.generateTerrain(); } index(x, y, z) { return x + CHUNK_SIZE_X * (y + CHUNK_SIZE_Y * z); } generateTerrain() { const worldX = this.x * CHUNK_SIZE_X; const worldZ = this.z * CHUNK_SIZE_Z; for(let x = 0; x < CHUNK_SIZE_X; x++) { for(let z = 0; z < CHUNK_SIZE_Z; z++) { const wx = worldX + x; const wz = worldZ + z; // Improved terrain generation with more variation const height = Math.floor(10 + 8 * Math.sin(wx * 0.05) * Math.cos(wz * 0.05)); const dirtHeight = 3; for(let y = 0; y < CHUNK_SIZE_Y; y++) { if (y <= height) { // Grass on top, dirt below, stone at bottom if (y === height) { this.voxels[this.index(x, y, z)] = BLOCK_GRASS; } else if (y > height - dirtHeight) { this.voxels[this.index(x, y, z)] = BLOCK_DIRT; } else { this.voxels[this.index(x, y, z)] = BLOCK_STONE; } } else { this.voxels[this.index(x, y, z)] = BLOCK_AIR; } } } } this.needsUpdate = true; } setBlock(x, y, z, type) { if(x < 0 || x >= CHUNK_SIZE_X || y < 0 || y >= CHUNK_SIZE_Y || z < 0 || z >= CHUNK_SIZE_Z) { return false; } this.voxels[this.index(x, y, z)] = type; this.needsUpdate = true; return true; } voxelAt(x, y, z) { if(x < 0 || x >= CHUNK_SIZE_X || y < 0 || y >= CHUNK_SIZE_Y || z < 0 || z >= CHUNK_SIZE_Z) { return BLOCK_AIR; } return this.voxels[this.index(x, y, z)]; } greedyMesh() { const vertices = []; const colors = []; const indices = []; let indexCount = 0; const directions = [ { name: 'x+', vector: [1,0,0], u:[0,1,0], v:[0,0,1] }, { name: 'x-', vector: [-1,0,0], u:[0,1,0], v:[0,0,1] }, { name: 'y+', vector: [0,1,0], u:[1,0,0], v:[0,0,1] }, { name: 'y-', vector: [0,-1,0], u:[1,0,0], v:[0,0,1] }, { name: 'z+', vector: [0,0,1], u:[1,0,0], v:[0,1,0] }, { name: 'z-', vector: [0,0,-1], u:[1,0,0], v:[0,1,0] }, ]; const blockColors = { [BLOCK_GRASS]: { // Grass 'x+': [0.4, 0.8, 0.2], 'x-': [0.4, 0.8, 0.2], 'y+': [0.2, 0.6, 0.1], 'y-': [0.3, 0.3, 0.3], 'z+': [0.4, 0.8, 0.2], 'z-': [0.4, 0.8, 0.2] }, [BLOCK_DIRT]: { // Dirt 'x+': [0.5, 0.35, 0.2], 'x-': [0.5, 0.35, 0.2], 'y+': [0.5, 0.35, 0.2], 'y-': [0.5, 0.35, 0.2], 'z+': [0.5, 0.35, 0.2], 'z-': [0.5, 0.35, 0.2] }, [BLOCK_STONE]: { // Stone 'x+': [0.5, 0.5, 0.5], 'x-': [0.5, 0.5, 0.5], 'y+': [0.5, 0.5, 0.5], 'y-': [0.5, 0.5, 0.5], 'z+': [0.5, 0.5, 0.5], 'z-': [0.5, 0.5, 0.5] }, [BLOCK_WOOD]: { // Wood 'x+': [0.5, 0.35, 0.2], 'x-': [0.5, 0.35, 0.2], 'y+': [0.5, 0.35, 0.2], 'y-': [0.5, 0.35, 0.2], 'z+': [0.5, 0.35, 0.2], 'z-': [0.5, 0.35, 0.2] }, [BLOCK_LEAVES]: { // Leaves 'x+': [0.2, 0.8, 0.2], 'x-': [0.2, 0.8, 0.2], 'y+': [0.2, 0.8, 0.2], 'y-': [0.2, 0.8, 0.2], 'z+': [0.2, 0.8, 0.2], 'z-': [0.2, 0.8, 0.2] } }; for (let d = 0; d < 6; d++) { const dir = directions[d]; const axisU = dir.u; const axisV = dir.v; const normal = dir.vector; let dimU, dimV, dimW; if (normal[0] !== 0) { dimU = CHUNK_SIZE_Y; dimV = CHUNK_SIZE_Z; dimW = CHUNK_SIZE_X; } else if (normal[1] !== 0) { dimU = CHUNK_SIZE_X; dimV = CHUNK_SIZE_Z; dimW = CHUNK_SIZE_Y; } else { dimU = CHUNK_SIZE_X; dimV = CHUNK_SIZE_Y; dimW = CHUNK_SIZE_Z; } for (let w = 0; w < dimW; w++) { let mask = new Array(dimU * dimV); let maskType = new Array(dimU * dimV); for (let v = 0; v < dimV; v++) { for (let u = 0; u < dimU; u++) { let x, y, z; if (normal[0] !== 0) { x = w; y = u; z = v; } else if (normal[1] !== 0) { x = u; y = w; z = v; } else { x = u; y = v; z = w; } let voxelCurrent = this.voxelAt(x,y,z); let voxelNext = this.voxelAt(x + normal[0], y + normal[1], z + normal[2]); if (voxelCurrent && !voxelNext) { mask[u + dimU * v] = 1; maskType[u + dimU * v] = voxelCurrent; } else { mask[u + dimU * v] = 0; } } } let u = 0, v = 0; while (v < dimV) { u = 0; while (u < dimU) { const c = mask[u + dimU * v]; if (c) { const blockType = maskType[u + dimU * v]; let width = 1; while (u + width < dimU && mask[u + width + dimU * v] === c && maskType[u + width + dimU * v] === blockType) { width++; } let height = 1; let done = false; while (!done && v + height < dimV) { for (let k = 0; k < width; k++) { if (mask[u + k + dimU * (v + height)] !== c || maskType[u + k + dimU * (v + height)] !== blockType) { done = true; break; } } if (!done) height++; } let x, y, z; if (normal[0] !== 0) { x = w; y = u; z = v; } else if (normal[1] !== 0) { x = u; y = w; z = v; } else { x = u; y = v; z = w; } let px = x + this.x * CHUNK_SIZE_X; let py = y; let pz = z + this.z * CHUNK_SIZE_Z; const nOff = (normal[0] + normal[1] + normal[2]) > 0 ? 1 : 0; px += normal[0] * nOff; py += normal[1] * nOff; pz += normal[2] * nOff; function addVec3(a,b) { return [a[0]+b[0], a[1]+b[1], a[2]+b[2]]; } function scaleVec3(v, s) { return [v[0]*s, v[1]*s, v[2]*s]; } const v0 = [px, py, pz]; const v1 = addVec3(v0, scaleVec3(axisU, width)); const v2 = addVec3(v0, scaleVec3(axisU, width)); v2[0] += axisV[0] * height; v2[1] += axisV[1] * height; v2[2] += axisV[2] * height; const v3 = addVec3(v0, scaleVec3(axisV, height)); const sign = (normal[0] + normal[1] + normal[2]) > 0 ? 1 : -1; const color = blockColors[blockType][dir.name]; if (sign > 0) { vertices.push(...v0, ...v1, ...v2, ...v3); } else { vertices.push(...v0, ...v3, ...v2, ...v1); } for(let i=0; i<4; i++) { colors.push(...color); } indices.push( indexCount, indexCount+1, indexCount+2, indexCount, indexCount+2, indexCount+3 ); indexCount += 4; for(let hh=0; hh= CHUNK_SIZE_Y) return false; const chunk = this.getChunk(chunkX, chunkZ); const success = chunk.setBlock(localX, y, localZ, type); if (success) { // Also update neighboring chunks if we're on the edge if (localX === 0) this.getChunk(chunkX - 1, chunkZ).needsUpdate = true; if (localX === CHUNK_SIZE_X - 1) this.getChunk(chunkX + 1, chunkZ).needsUpdate = true; if (localZ === 0) this.getChunk(chunkX, chunkZ - 1).needsUpdate = true; if (localZ === CHUNK_SIZE_Z - 1) this.getChunk(chunkX, chunkZ + 1).needsUpdate = true; } return success; } voxelAt(x, y, z) { const chunkX = Math.floor(x / CHUNK_SIZE_X); const chunkZ = Math.floor(z / CHUNK_SIZE_Z); const localX = x - chunkX * CHUNK_SIZE_X; const localZ = z - chunkZ * CHUNK_SIZE_Z; if (y < 0 || y >= CHUNK_SIZE_Y) return BLOCK_AIR; const chunk = this.chunks.get(this.getChunkKey(chunkX, chunkZ)); if (!chunk) return BLOCK_AIR; return chunk.voxelAt(localX, y, localZ); } updateChunks(playerX, playerZ) { const chunkX = Math.floor(playerX / CHUNK_SIZE_X); const chunkZ = Math.floor(playerZ / CHUNK_SIZE_Z); // Determine which chunks should be active const newActiveChunks = []; for (let x = chunkX - RENDER_DISTANCE; x <= chunkX + RENDER_DISTANCE; x++) { for (let z = chunkZ - RENDER_DISTANCE; z <= chunkZ + RENDER_DISTANCE; z++) { newActiveChunks.push(this.getChunk(x, z)); } } // Load chunks in a larger radius for (let x = chunkX - LOAD_DISTANCE; x <= chunkX + LOAD_DISTANCE; x++) { for (let z = chunkZ - LOAD_DISTANCE; z <= chunkZ + LOAD_DISTANCE; z++) { this.getChunk(x, z); } } // Update meshes for active chunks this.activeChunks = newActiveChunks; this.meshes = []; for (const chunk of this.activeChunks) { if (chunk.updateMesh()) { this.meshes.push(chunk.mesh); } else if (chunk.mesh) { this.meshes.push(chunk.mesh); } } } } const world = new World(); // Buffer management - we'll create separate buffers for each chunk const chunkBuffers = new Map(); function setupChunkBuffers(chunk) { if (!chunkBuffers.has(chunk)) { const buffers = { vbo: gl.createBuffer(), cbo: gl.createBuffer(), ibo: gl.createBuffer() }; chunkBuffers.set(chunk, buffers); } return chunkBuffers.get(chunk); } // Matrix math helpers function mat4persp(fov, asp, near, far) { const f = 1/Math.tan(fov/2); return [ f/asp,0,0,0, 0,f,0,0, 0,0,(far+near)/(near - far),-1, 0,0,(2*far*near)/(near - far),0 ]; } function lookAt(eye, center, up) { const z = vec3Normalize([ eye[0]-center[0], eye[1]-center[1], eye[2]-center[2] ]); const x = vec3Normalize([ up[1]*z[2]-up[2]*z[1], up[2]*z[0]-up[0]*z[2], up[0]*z[1]-up[1]*z[0] ]); const y = [ z[1]*x[2]-z[2]*x[1], z[2]*x[0]-z[0]*x[2], z[0]*x[1]-z[1]*x[0] ]; return [ x[0], y[0], z[0], 0, x[1], y[1], z[1], 0, x[2], y[2], z[2], 0, -(x[0]*eye[0] + x[1]*eye[1] + x[2]*eye[2]), -(y[0]*eye[0] + y[1]*eye[1] + y[2]*eye[2]), -(z[0]*eye[0] + z[1]*eye[1] + z[2]*eye[2]), 1 ]; } function mat4mul(a,b) { const r = new Array(16); for(let i=0; i<4; i++) { for(let j=0; j<4; j++) { r[i*4+j] = a[0*4+j]*b[i*4+0] + a[1*4+j]*b[i*4+1] + a[2*4+j]*b[i*4+2] + a[3*4+j]*b[i*4+3]; } } return r; } // -------- PLAYER MOVEMENT & COLLISION -------- const player = { pos: [0, CHUNK_SIZE_Y + 5, 0], // start higher above terrain speed: 10, height: 1.8, radius: 0.3, rotX: 0, rotY: 0, selectedBlock: BLOCK_DIRT }; const keys = {}; window.addEventListener("keydown", e => { keys[e.key.toLowerCase()] = true; // Number keys for block selection if (e.key >= '1' && e.key <= '5') { player.selectedBlock = parseInt(e.key); } }); window.addEventListener("keyup", e => { keys[e.key.toLowerCase()] = false; }); // Mouse state let mouseDown = false; let rightMouseDown = false; let lastMouseX = 0, lastMouseY = 0; let pointerLocked = false; // Pointer lock controls function requestPointerLock() { canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock; canvas.requestPointerLock(); } function pointerLockChange() { pointerLocked = document.pointerLockElement === canvas || document.mozPointerLockElement === canvas || document.webkitPointerLockElement === canvas; } document.addEventListener('pointerlockchange', pointerLockChange, false); document.addEventListener('mozpointerlockchange', pointerLockChange, false); document.addEventListener('webkitpointerlockchange', pointerLockChange, false); canvas.addEventListener('click', () => { if (!pointerLocked) { requestPointerLock(); } }); canvas.addEventListener('mousedown', (e) => { if (pointerLocked) { if (e.button === 0) { // Left click mouseDown = true; breakBlock(); } else if (e.button === 2) { // Right click rightMouseDown = true; placeBlock(); } } }); document.addEventListener('mouseup', (e) => { if (e.button === 0) { mouseDown = false; } else if (e.button === 2) { rightMouseDown = false; } }); canvas.addEventListener('mousemove', (e) => { if (pointerLocked) { const deltaX = e.movementX || e.clientX - lastMouseX; const deltaY = e.movementY || e.clientY - lastMouseY; lastMouseX = e.clientX; lastMouseY = e.clientY; player.rotY -= deltaX * 0.002; player.rotX = Math.max(-Math.PI/2, Math.min(Math.PI/2, player.rotX - deltaY * 0.002)); } }); // Block breaking/placing function raycast(maxDistance = 10, step = 0.1) { const origin = player.pos; const direction = [ -Math.sin(player.rotY) * Math.cos(player.rotX), Math.sin(player.rotX), -Math.cos(player.rotY) * Math.cos(player.rotX) ]; let currentPos = [...origin]; let lastPos = [...origin]; for (let i = 0; i < maxDistance / step; i++) { lastPos = [...currentPos]; currentPos[0] += direction[0] * step; currentPos[1] += direction[1] * step; currentPos[2] += direction[2] * step; const block = world.voxelAt( Math.floor(currentPos[0]), Math.floor(currentPos[1]), Math.floor(currentPos[2]) ); if (block !== BLOCK_AIR) { return { hit: true, blockPos: [ Math.floor(currentPos[0]), Math.floor(currentPos[1]), Math.floor(currentPos[2]) ], facePos: [ Math.floor(lastPos[0]), Math.floor(lastPos[1]), Math.floor(lastPos[2]) ] }; } } return { hit: false }; } function breakBlock() { const result = raycast(); if (result.hit) { world.setBlock(...result.blockPos, BLOCK_AIR); } } function placeBlock() { const result = raycast(); if (result.hit) { world.setBlock(...result.facePos, player.selectedBlock); } } function vec3Add(a,b) { return [a[0]+b[0], a[1]+b[1], a[2]+b[2]]; } function vec3Scale(v,s) { return [v[0]*s, v[1]*s, v[2]*s]; } function vec3Length(v) { return Math.sqrt(v[0]*v[0] + v[1]*v[1] + v[2]*v[2]); } function vec3Normalize(v) { const len = vec3Length(v); if (len === 0) return [0,0,0]; return [v[0]/len, v[1]/len, v[2]/len]; } function checkCollision(pos) { const cx = Math.floor(pos[0]); const cy = Math.floor(pos[1]); const cz = Math.floor(pos[2]); for(let x = cx - 1; x <= cx + 1; x++) { for(let y = cy - 1; y <= cy + 2; y++) { for(let z = cz - 1; z <= cz + 1; z++) { if (world.voxelAt(x,y,z)) { const px = Math.max(x, Math.min(pos[0], x+1)); const py = Math.max(y, Math.min(pos[1], y+1)); const pz = Math.max(z, Math.min(pos[2], z+1)); const dist = Math.sqrt( (pos[0]-px)**2 + (pos[1]-py)**2 + (pos[2]-pz)**2 ); if (dist < player.radius) { return true; } } } } } return false; } function movePlayer(dt) { // Calculate forward direction based on rotation const forward = [ -Math.sin(player.rotY), 0, -Math.cos(player.rotY) ]; // Calculate right direction const right = [ Math.cos(player.rotY), 0, -Math.sin(player.rotY) ]; let moveDir = [0,0,0]; if (keys["w"] || keys["arrowup"]) { moveDir[0] += forward[0]; moveDir[2] += forward[2]; } if (keys["s"] || keys["arrowdown"]) { moveDir[0] -= forward[0]; moveDir[2] -= forward[2]; } if (keys["a"] || keys["arrowleft"]) { moveDir[0] -= right[0]; moveDir[2] -= right[2]; } if (keys["d"] || keys["arrowright"]) { moveDir[0] += right[0]; moveDir[2] += right[2]; } moveDir = vec3Normalize(moveDir); let upDown = 0; if (keys[" "]) upDown += 1; if (keys["shift"]) upDown -= 1; const velocity = [ moveDir[0]*player.speed, upDown*player.speed, moveDir[2]*player.speed, ]; // Move X let newPos = [player.pos[0] + velocity[0]*dt, player.pos[1], player.pos[2]]; if (!checkCollision(newPos)) player.pos[0] = newPos[0]; // Move Y newPos = [player.pos[0], player.pos[1] + velocity[1]*dt, player.pos[2]]; if (!checkCollision(newPos)) player.pos[1] = newPos[1]; // Move Z newPos = [player.pos[0], player.pos[1], player.pos[2] + velocity[2]*dt]; if (!checkCollision(newPos)) player.pos[2] = newPos[2]; } // -------- RENDER LOOP -------- let lastTime = 0, frames = 0; function draw(time) { time *= 0.001; const dt = lastTime ? (time - lastTime) : 0; lastTime = time; movePlayer(dt); // Update chunks based on player position world.updateChunks(player.pos[0], player.pos[2]); gl.viewport(0, 0, canvas.width, canvas.height); gl.clearColor(0.53, 0.81, 0.92, 1); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Calculate camera direction based on player rotation const eye = player.pos; const center = [ eye[0] - Math.sin(player.rotY) * Math.cos(player.rotX), eye[1] + Math.sin(player.rotX), eye[2] - Math.cos(player.rotY) * Math.cos(player.rotX) ]; const up = [0,1,0]; const aspect = canvas.width / canvas.height; const proj = mat4persp(Math.PI/3, aspect, 0.1, 1000); const view = lookAt(eye, center, up); const vp = mat4mul(proj, view); gl.uniformMatrix4fv(vpLoc, false, new Float32Array(vp)); // Render all active chunk meshes for (const mesh of world.meshes) { const buffers = setupChunkBuffers(mesh); gl.bindBuffer(gl.ARRAY_BUFFER, buffers.vbo); gl.bufferData(gl.ARRAY_BUFFER, mesh.vertices, gl.STATIC_DRAW); gl.enableVertexAttribArray(posLoc); gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, buffers.cbo); gl.bufferData(gl.ARRAY_BUFFER, mesh.colors, gl.STATIC_DRAW); gl.enableVertexAttribArray(colLoc); gl.vertexAttribPointer(colLoc, 3, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.ibo); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, mesh.indices, gl.STATIC_DRAW); gl.drawElements(gl.TRIANGLES, mesh.indexCount, gl.UNSIGNED_SHORT, 0); } // FPS counter frames++; if(time - (fpsCounter._last || 0) > 1) { fpsCounter.textContent = "FPS: " + frames; frames = 0; fpsCounter._last = time; } requestAnimationFrame(draw); } // Initialize world with chunks around player world.updateChunks(player.pos[0], player.pos[2]); requestAnimationFrame(draw); window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); // Prevent context menu on right click canvas.addEventListener('contextmenu', (e) => { e.preventDefault(); }); ```