clean: texture loader huge improvements

src/main.ts

@@ -4,6 +4,7 @@ import { OrbitControls } from "three/addons/controls/OrbitControls.js"
 import Face from "./face"
 import Block from "./block"
 import TextureLoader from "./textureLoader"
+// import TextureLoader from "./textureLoader"
 
 const scene = new THREE.Scene()
 const camera = new THREE.PerspectiveCamera(
@@ -20,7 +21,16 @@ const controls = new OrbitControls(camera, renderer.domElement)
 controls.update()
 document.body.appendChild(renderer.domElement)
 
-new TextureLoader("/grass.png", 16, 16, onTextureLoaded)
+let grassTextures = [] as THREE.Texture[]
+let dirtTextures = [] as THREE.Texture[]
+
+async function loadTextures() {
+	const textureLoader = new TextureLoader(16, 16)
+	grassTextures = await textureLoader.load("/grass.png")
+	dirtTextures = await textureLoader.load("/dirt.png")
+	// const debugTextures = await textureLoader.load("/debug.png")
+	onTextureLoaded()
+}
 
 // const gridHelper = new THREE.GridHelper(1000, 1000)
 // scene.add(gridHelper)
@@ -83,48 +93,58 @@ function countVisibleFaces(
 	return faceCounts
 }
 
-function onTextureLoaded(textures: THREE.Texture[]) {
+function onTextureLoaded() {
 	const chunk = [] as THREE.Vector3[]
 	const chunkSet = new Set<string>()
-	const radius = 64
-	for (let i = -radius; i < radius; i++) {
-		for (let j = -radius; j < radius; j++) {
-			const block = new THREE.Vector3(
-				i,
-				Math.ceil(Math.sin(i / 25) * 8 + Math.cos(j / 25) * 8),
-				j
-			)
-			chunk.push(block)
-			chunkSet.add(block.toArray().toString())
+	const radius = 32
+	for (let i = 0; i < radius; i++) {
+		for (let j = 0; j < radius; j++) {
+			const max = Math.ceil(Math.sin(i / 30) * 10 + Math.cos(j / 30) * 10)
+			for (let k = -64; k < max; k++) {
+				const vec3 = new THREE.Vector3(i, k, j)
+				chunk.push(vec3)
+				chunkSet.add(vec3.toArray().toString())
+			}
 		}
 	}
 
 	const faceCounts = countVisibleFaces(chunkSet, chunk)
 
-	const faces = [
-		new Face("Up", faceCounts.Up, textures[0]),
-		new Face("North", faceCounts.North, textures[1]),
-		new Face("South", faceCounts.South, textures[2]),
-		new Face("East", faceCounts.East, textures[3]),
-		new Face("West", faceCounts.West, textures[4]),
-		new Face("Down", faceCounts.Down, textures[5])
+	const grassFaces = [
+		new Face("Up", faceCounts.Up, grassTextures[0]),
+		new Face("North", faceCounts.North, grassTextures[1]),
+		new Face("South", faceCounts.South, grassTextures[2]),
+		new Face("East", faceCounts.East, grassTextures[3]),
+		new Face("West", faceCounts.West, grassTextures[4]),
+		new Face("Down", faceCounts.Down, grassTextures[5])
+	]
+
+	const dirtFaces = [
+		new Face("Up", faceCounts.Up, dirtTextures[0]),
+		new Face("North", faceCounts.North, dirtTextures[1]),
+		new Face("South", faceCounts.South, dirtTextures[2]),
+		new Face("East", faceCounts.East, dirtTextures[3]),
+		new Face("West", faceCounts.West, dirtTextures[4]),
+		new Face("Down", faceCounts.Down, dirtTextures[5])
 	]
 
 	const cubes = [] as Block[]
 	chunk.forEach((block) => {
-		cubes.push(new Block(filterFaces(faces, block, chunkSet), block))
+		cubes.push(new Block(filterFaces(grassFaces, block, chunkSet), block))
 	})
 
-	faces.forEach((face) => {
+	grassFaces.forEach((face) => {
 		if (face.instancedMesh) scene.add(face.instancedMesh)
 	})
 }
 
-camera.position.x = 5
-camera.position.y = 5
-camera.position.z = 5
+camera.position.x = 15
+camera.position.y = 15
+camera.position.z = 15
 
 function animate(elapsedTimeMs: number) {
 	renderer.render(scene, camera)
 	controls.update()
 }
+
+loadTextures()