Map uses UVs & has initial textures / materials

.gitignore

@@ -57,3 +57,5 @@ typings/
 # dotenv environment variables file
 .env
 
+# Process pictures
+process

credits.txt

@@ -0,0 +1,38 @@
+This project couldn't have existed without these amazing tools by amazing people:
+
+Node.js
+Three.js
+Ammo.js (with Bullet in extension)
+Sockets.io
+Git
+GitHub
+Stackoverflow
+
+//
+
+Specifically, I would like to thank these people:
+
+The open source community, for allowing me to use all these tools at no additional cost.
+
+//
+
+Special thanks:
+
+Britta
+Angelo "Qaomen"
+Siem "siem3141"
+Matias "Sanguinary"
+Mitchell "Sodaman"
+Tristan "Venlious"
+My family
+
+//
+
+Music:
+Epic Mountain - All Kurzgesagt arrangements
+
+//
+
+Thanks from the bottom of my heart. I'm extremely grateful for this opportunity.
+
+<3

public/render.js

@@ -157,6 +157,8 @@ function animate() {
 	renderer.render( scene, camera );
 }
 
+var mapMesh;
+
 // Stuff that can only be rendered after network data has been received
 function renderInit(){ 
 	for (i = 0; i < net.marblePositions.length/3; i++){
@@ -171,9 +173,31 @@ function renderInit(){
 	// var controls = new THREE.OrbitControls(camera, renderer.domElement);
 
 	getXMLDoc("/client?dlmap=map2",(response)=>{
+
+		var manager = new THREE.LoadingManager();
+		manager.onProgress = function ( item, loaded, total ) {
+			console.log( item, loaded, total );
+		};
+
+		var loader = new THREE.OBJLoader( manager );
+		loader.load( '/resources/map4v2_optimized.obj', function ( object ) {
+			object.traverse( function ( child ) {
+				if ( child.name.indexOf("Terrain") !== -1) {
+					mapMesh = child;
+
+					scene.add( child );
+
+					child.setRotationFromEuler( new THREE.Euler( -Math.PI*.5, 0, Math.PI*.5, 'XYZ' ) );
+
+					child.geometry.computeBoundingBox();
+					child.geometry.center();
+					child.material = createMapMaterial();
+				}
+			} );
+		}, ()=>{}, ()=>{} );
+
 		console.log(response);
 		getXMLDoc("/resources/map4v2_optimized.obj",(response)=>{
-		/* getXMLDoc("https://a.safe.moe/XuTQTmy.obj",(response)=>{ */
 			map = new OBJHeightfield(response);
 			map.centerOrigin("xyz");
 			spawnMap(map);
@@ -206,6 +230,7 @@ function spawnMap(map){
 	let geometry = new THREE.BufferGeometry();
 	let vertices = vertexObjectArrayToFloat32Array(model.vertices);
 	let normals = vertexObjectArrayToFloat32Array(model.vertexNormals);
+	let uvs = textureCoordsArrayToFloat32Array(model.textureCoords);
 	let indices = [];
 	for (let index of model.faces){
 		indices.push(
@@ -215,11 +240,12 @@ function spawnMap(map){
 		);
 	}
 
-	console.log(indices.length,vertices.length,normals.length,30560);
+	console.log(indices.length,vertices.length,normals.length,uvs.length);
 
 	geometry.setIndex(indices);
 	geometry.addAttribute("position", new THREE.Float32BufferAttribute(vertices, 3));
 	geometry.addAttribute("normal", new THREE.Float32BufferAttribute(normals, 3));
+	geometry.addAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2));
 	geometry.scale(1,1,-1); // Faces are flipped so flip them back by negative scaling
 	geometry.computeVertexNormals(true); // Recompute vertex normals
 
@@ -233,39 +259,33 @@ function spawnMap(map){
     var solidMaterial = new THREE.MeshStandardMaterial( { color: 0x33c49a, roughness: .9 } );
     var wireframeMaterial = new THREE.MeshLambertMaterial( { color: 0xff00ff, wireframe:true } );
 
-	mesh = new THREE.Mesh( geometry);
-	scene.add( mesh );
-	mesh.material = mapMaterial;
-	mesh.setRotationFromEuler( new THREE.Euler( 0, Math.PI*.5, 0, 'XYZ' ) );
-
-	var box = new THREE.Mesh( new THREE.BoxGeometry(5,5,5) );
-	scene.add( box );
-	box.position.x = 50;
-	box.position.y = 30;
-	box.position.z = -50;
-	box.material = mapMaterial;
+	var texture = new THREE.TextureLoader().load( "threejs/textures/brick_diffuse.jpg" );
+		texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+
+	var textureMaterial = new THREE.MeshPhongMaterial( { 
+		color: 0xffffff,
+		map: texture
+	} );
 
-	var sphere = new THREE.Mesh( new THREE.SphereBufferGeometry(2.5,32,32) );
-	scene.add( sphere );
-	sphere.position.x = 43;
-	sphere.position.y = 30;
-	sphere.position.z = -50;
-	sphere.material = mapMaterial;
+	mesh = new THREE.Mesh( geometry, textureMaterial);
+	/* scene.add( mesh ); */
+	/* mesh.material = mapMaterial; */
+	mesh.setRotationFromEuler( new THREE.Euler( 0, Math.PI*.5, 0, 'XYZ' ) );
 
 	/* undermesh = new THREE.Mesh( geometry, wireframeMaterial );
 	scene.add( undermesh );
 	undermesh.position.y = .05;
 	undermesh.setRotationFromEuler( new THREE.Euler( 0, Math.PI*.5, 0, 'XYZ' ) ); */
 }
 
-var rtTexture, rtMaterial;
 var library = {};
 var textures = {
 	brick: { url: 'threejs/textures/brick_diffuse.jpg' },
 	dirt: { url: 'threejs/textures/dirt.jpg' },
 	grass: { url: 'threejs/textures/grasslight-big.jpg' },
 	grassNormal: { url: 'threejs/textures/grasslight-big-nm.jpg' },
 	decalDiffuse: { url: 'threejs/textures/decal-diffuse.png' },
+	mask: { url: 'threejs/textures/mask_alpha.png' },
 	cloud: { url: 'threejs/textures/lava/cloud.png' },
 	spherical: { url: 'threejs/textures/envmap.png' }
 };
@@ -300,11 +320,12 @@ function createMapMaterial(){
 	var mtl;
 
 	// MATERIAL
-	mtl = new THREE.PhongNodeMaterial();
-	var tex1 = new THREE.TextureNode( getTexture( "grass" ) );
-	var tex2 = new THREE.TextureNode( getTexture( "dirt" ) );
+	mtl = new THREE.StandardNodeMaterial();
+	mtl.roughness = new THREE.FloatNode( .9 );
+	mtl.metalness = new THREE.FloatNode( 0 );
+
 	var offset = new THREE.FloatNode( 0 );
-	var scale = new THREE.FloatNode( 1 );
+	var scale = new THREE.FloatNode( 20 );
 	var uv = new THREE.UVNode();
 	var uvOffset = new THREE.OperatorNode(
 		offset,
@@ -316,7 +337,24 @@ function createMapMaterial(){
 		scale,
 		THREE.OperatorNode.MUL
 	);
-	var mask = new THREE.TextureNode( getTexture( "decalDiffuse" ), uvScale );
+	var tex1 = new THREE.TextureNode( getTexture( "grass" ), uvScale );
+	var tex2 = new THREE.TextureNode( getTexture( "dirt" ), uvScale );
+
+	var maskUvOffset = new THREE.FloatNode( 0 );
+	var maskUvScale = new THREE.FloatNode( 1 );
+	var maskUv = new THREE.UVNode();
+	var maskUvOffsetNode = new THREE.OperatorNode(
+		maskUvOffset,
+		maskUv,
+		THREE.OperatorNode.ADD
+	);
+	var maskUvScale = new THREE.OperatorNode(
+		maskUvOffsetNode,
+		maskUvScale,
+		THREE.OperatorNode.MUL
+	);
+	console.log(maskUvScale);
+	var mask = new THREE.TextureNode( getTexture( "mask" ), maskUvScale );
 	var maskAlphaChannel = new THREE.SwitchNode( mask, 'w' );
 	var blend = new THREE.Math3Node(
 		tex1,
@@ -347,6 +385,20 @@ function vertexObjectArrayToFloat32Array(array){ // Also converts z up to y up
 	return f32array;
 }
 
+function textureCoordsArrayToFloat32Array(array){ //
+
+	// indexing expects vertices starting at 1, so we add a 0,0,0 vertex at the start to solve this
+	let f32array = new Float32Array(array.length*2 + 10);
+	let i = 5;
+
+	for (let vertex of array){
+		f32array[i*2+0] = vertex.u;
+		f32array[i*2+1] = vertex.v;
+		i++;
+	}
+	return f32array;
+}
+
 function vertexObjectArrayToArray(array){ // Also converts z up to y up
 	let newArray = [];
 	for (let vertex of array){

public/resources/map4v2_optimized.obj

@@ -1,13 +1,11 @@
 # Blender v2.78 (sub 0) OBJ File: 'map4v2_optimized.blend'
 # www.blender.org
-mtllib map4v2_optimized.mtl
 o Water_Plane.001
 v -200.000000 200.000000 57.795784
 v -200.000000 -200.000000 57.795784
 v 200.000000 200.000000 57.795784
 v 200.000000 -200.000000 57.795784
 vn 0.0000 0.0000 1.0000
-usemtl Material.001
 s off
 f 1//1 2//1 4//1 3//1
 o Terrain_Plane
@@ -62135,7 +62133,7 @@ vn 0.4879 0.7905 0.3703
 vn 0.4675 0.6835 0.5606
 vn 0.4865 0.7575 0.4353
 vn 0.1032 0.8248 0.5559
-vn -0.0549 0.8430 0.5352
+vn -0.0549 0.8430 0.5351
 vn 0.0075 0.9020 0.4316
 vn -0.1231 0.8784 0.4617
 vn 0.0023 0.8846 0.4662
@@ -65412,7 +65410,7 @@ vn -0.8109 -0.3778 0.4468
 vn -0.8271 -0.4104 0.3839
 vn -0.8549 -0.4241 0.2987
 vn -0.8268 -0.3941 0.4013
-vn -0.8521 -0.3878 0.3513
+vn -0.8521 -0.3878 0.3514
 vn -0.0571 0.2742 0.9600
 vn 0.4921 0.6922 0.5280
 vn 0.2014 0.5596 0.8039
@@ -65780,7 +65778,7 @@ vn -0.2258 -0.5504 0.8038
 vn -0.2603 -0.5968 0.7590
 vn -0.2571 -0.6633 0.7027
 vn 0.2500 -0.5062 0.8253
-vn 0.1227 -0.4357 0.8917
+vn 0.1226 -0.4357 0.8917
 vn 0.1249 -0.4367 0.8909
 vn -0.7425 -0.6247 0.2415
 vn -0.7806 -0.5104 0.3607
@@ -66013,7 +66011,7 @@ vn -0.2867 -0.6862 0.6685
 vn -0.3045 -0.5977 0.7416
 vn -0.3374 -0.6390 0.6913
 vn -0.3278 -0.7345 0.5941
-vn -0.2650 -0.0410 0.9633
+vn -0.2651 -0.0410 0.9633
 vn -0.2552 0.0501 0.9656
 vn 0.0197 0.1079 0.9940
 vn 0.1536 0.2274 0.9616
@@ -66671,7 +66669,7 @@ vn 0.5635 0.0012 0.8261
 vn 0.5370 0.1260 0.8341
 vn 0.5157 0.1145 0.8491
 vn 0.7660 0.2522 0.5912
-vn 0.0361 0.0486 0.9981
+vn 0.0361 0.0486 0.9982
 vn 0.5390 0.1351 0.8314
 vn 0.3515 0.0726 0.9333
 vn -0.3180 0.2419 0.9167
@@ -66963,15 +66961,15 @@ vn -0.3142 -0.5700 0.7592
 vn -0.3058 -0.6381 0.7066
 vn -0.1373 -0.4506 0.8821
 vn -0.3057 -0.5436 0.7817
-vn -0.0797 -0.4261 0.9012
+vn -0.0797 -0.4261 0.9011
 vn -0.0582 -0.5907 0.8048
 vn 0.1663 -0.3880 0.9065
 vn 0.1848 0.7771 0.6016
 vn 0.1896 0.8171 0.5444
 vn 0.1609 0.8276 0.5377
 vn -0.3692 -0.6406 0.6733
 vn -0.3395 -0.7771 0.5299
-vn -0.2629 -0.7639 0.5893
+vn -0.2629 -0.7640 0.5893
 vn -0.4768 -0.6642 0.5758
 vn -0.5116 -0.7041 0.4924
 vn -0.4148 -0.7956 0.4414
@@ -76966,7 +76964,7 @@ vn 0.9264 -0.2301 0.2980
 vn 0.2752 0.5513 0.7876
 vn 0.1937 0.5022 0.8427
 vn 0.4477 0.4371 0.7801
-vn 0.5446 -0.6980 0.4649
+vn 0.5446 -0.6981 0.4649
 vn 0.5483 -0.6195 0.5617
 vn 0.5097 -0.6623 0.5492
 vn 0.4987 -0.7439 0.4448
@@ -85455,7 +85453,7 @@ vn -0.3192 0.8471 0.4248
 vn -0.5637 0.7499 0.3461
 vn -0.6624 0.6866 0.2995
 vn -0.4488 0.7708 0.4522
-vn -0.3962 0.8065 0.4386
+vn -0.3963 0.8065 0.4386
 vn -0.4845 0.7797 0.3966
 vn -0.5407 0.7407 0.3987
 vn -0.4947 0.7550 0.4304
@@ -91016,7 +91014,7 @@ vn 0.7668 0.3339 0.5481
 vn 0.2594 0.5085 0.8210
 vn 0.2672 0.5456 0.7943
 vn 0.3318 0.6141 0.7161
-vn 0.2731 0.5347 0.7996
+vn 0.2731 0.5347 0.7997
 vn 0.3534 0.6985 0.6222
 vn -0.5105 0.4653 0.7231
 vn -0.6548 0.5104 0.5574
@@ -91679,7 +91677,6 @@ vn 0.8981 0.0864 0.4311
 vn 0.9286 -0.1829 0.3229
 vn 0.7339 -0.3624 0.5744
 vn 0.0556 0.1535 0.9866
-usemtl Material
 s 1
 f 7803/1/2 12816/2/3 23181/3/4
 f 29697/4/5 7804/5/6 7798/6/7