Instanced Entities and better fog

Author: michaljaz

coffee/client/module/Entities.coffee

@@ -2,33 +2,29 @@ import * as THREE from './build/three.module.js'
 class Entities
 	constructor:(options)->
 		@scene=options.scene
-		@saved={}
 		@nick=options.nick
 		@TWEEN=options.TWEEN
+		@mobMeshMaterial = new THREE.MeshBasicMaterial {color: new THREE.Color "red" }
+		@mobMeshGeometry = new THREE.BoxGeometry 1, 1, 1
+		@maxCount=200
+		@mobMesh=new THREE.InstancedMesh @mobMeshGeometry,@mobMeshMaterial,@maxCount
+		@mobMesh.instanceMatrix.setUsage THREE.DynamicDrawUsage
+		@scene.add @mobMesh
+		@dummy = new THREE.Object3D()
+		return
 	update:(entities)->
 		offset=[-0.5,16,-0.5]
+		num=0
 		for i of entities
-			if entities[i].username isnt @nick
-				pos=[entities[i].position.x+offset[0],entities[i].position.y+offset[1],entities[i].position.z+offset[2]]
-				if @saved[entities[i].uuid] is undefined
-					if entities[i].name is "item"
-						material = new THREE.MeshBasicMaterial( {color: new THREE.Color("blue")} )
-						geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 )
-					else
-						material = new THREE.MeshBasicMaterial( {color: new THREE.Color("red")} )
-						geometry = new THREE.BoxGeometry( 1, 1, 1 )
-					cube = new THREE.Mesh( geometry, material )
-					@scene.add(cube)
-					@saved[entities[i].uuid]=cube
-					@saved[entities[i].uuid].position.set pos...
-					@saved[entities[i].uuid].active=true
-				else
-					@saved[entities[i].uuid].position.set pos...
-					@saved[entities[i].uuid].active=true
-		for i of @saved
-			if @saved[i].active is false
-				@scene.remove @saved[i]
-				delete @saved[i]
-		for i of @saved
-			@saved[i].active=false
+			if entities[i].type is "mob"
+				num++
+		@mobMesh.count=num
+		num=0
+		for i of entities
+			if entities[i].type is "mob"
+				@dummy.position.set entities[i].position.x+offset[0],entities[i].position.y+offset[1],entities[i].position.z+offset[2]
+				@dummy.updateMatrix()
+				@mobMesh.setMatrixAt num++, @dummy.matrix
+		@mobMesh.instanceMatrix.needsUpdate = true
+		return
 export {Entities}

coffee/client/module/FirstPersonControls.coffee

@@ -11,6 +11,7 @@ class FirstPersonControls
 			16:"sneak"
 			82:"sprint"
 		}
+		@fov=options.fov
 		@keys={}
 		@canvas=options.canvas
 		@camera=options.camera
@@ -69,7 +70,7 @@ class FirstPersonControls
 			if _this.kc[z.keyCode] isnt undefined and _this.gameState is "gameLock"
 				_this.socket.emit "move",_this.kc[z.keyCode],true
 				if _this.kc[z.keyCode] is "sprint"
-					to={fov:105}
+					to={fov:_this.fov+10}
 					new _this.TWEEN.Tween _this.camera
 						.to to, 200
 						.easing _this.TWEEN.Easing.Quadratic.Out
@@ -85,7 +86,7 @@ class FirstPersonControls
 			if _this.kc[z.keyCode] isnt undefined
 				_this.socket.emit "move",_this.kc[z.keyCode],false
 				if _this.kc[z.keyCode] is "sprint"
-					to={fov:95}
+					to={fov:_this.fov}
 					new _this.TWEEN.Tween _this.camera
 						.to to, 200
 						.easing _this.TWEEN.Easing.Quadratic.Out
@@ -120,7 +121,7 @@ class FirstPersonControls
 		document.exitPointerLock()
 	state:(state)->
 		@gameState=state
-		console.log "Game state: "+state
+		# console.log "Game state: "+state
 	resetState:()->
 		$(".chat").removeClass("focus")
 		$(".chat").addClass("blur")

coffee/client/module/World/AnimatedTextureAtlas.coffee

@@ -76,23 +76,14 @@ class AnimatedTextureAtlas
 		})
 		xd=true
 		@material.onBeforeCompile=(shader)->
-			console.log shader
-
 			#Uniforms
 			shader.uniforms.u_fogColor={value:[0.8, 0.9, 1, 1]}
-			shader.uniforms.u_fogAmount={value:0.2}
-			shader.uniforms.u_fogNear={value:10}
-			shader.uniforms.u_fogFar={value:30}
+			shader.uniforms.u_fogAmount={value:0.1}
 			shader.uniforms.time={value:0}
-			setInterval ()->
-				shader.uniforms.time.value+=0.05
-			,10
 
 			#Fragment shader
 			shader.fragmentShader=[
 				"uniform vec4 u_fogColor;"
-				"uniform float u_fogNear;"
-				"uniform float u_fogFar;"
 				"uniform float u_fogAmount;"
 				shader.fragmentShader
 			].join("\n")
@@ -105,18 +96,6 @@ class AnimatedTextureAtlas
 				].join("\n")
 			)
 
-			#Vertex shader
-			shader.vertexShader=[
-				"uniform float time;"
-				"uniform mat4 u_worldView;"
-				"attribute vec4 a_position;"
-				shader.vertexShader
-			].join("\n")
-			shader.vertexShader=shader.vertexShader.replace(
-				"#include <begin_vertex>"
-				"vec3 transformed = vec3( position.x + sin( time + position.y ) / 8.0, position.y, position.z );"
-			)
-
 			materialShader = shader
 			return
 		@atlasCreator=new TextureAtlasCreator({

coffee/client/module/World/World.coffee

@@ -97,6 +97,11 @@ class World
 		geometry.setAttribute 'color',new THREE.BufferAttribute(new Float32Array(cell.colors), 3)
 		if mesh is undefined
 			@cellMesh[cellId]=new THREE.Mesh geometry,@material
+			@cellMesh[cellId].frustumCulled = false
+			_this=@
+			@cellMesh[cellId].onAfterRender = ()->
+				_this.cellMesh[cellId].frustumCulled = true
+				_this.cellMesh[cellId].onAfterRender = ->
 			@scene.add @cellMesh[cellId]
 		else
 			@cellMesh[cellId].geometry=geometry
@@ -189,6 +194,7 @@ class World
 			return false
 	_setCell: (cellX,cellY,cellZ,buffer,biome)->
 		#Wysyłanie do ChunkWorkera informacji nowej komórce
+
 		@cellUpdateTime=performance.now()
 		@chunkWorker.postMessage {
 			type:"setCell"

coffee/client/module/World/chunk.worker.coffee

@@ -226,10 +226,13 @@ handlers={
 		terrain.cellTerrain.setVoxel data...
 	genCellGeo: (data)->
 		if ((terrain.cellTerrain.vec3 data...) of terrain.cellTerrain.cells) is true
+			p1=performance.now()
 			geo=terrain.genCellGeo data...
+			p2=performance.now()
 			postMessage {
 				cell:geo
 				info:data
+				p:performance.now()
 			}
 	setCell: (data)->
 		terrain.cellTerrain.setCell data[0],data[1],data[2],data[3]

coffee/client/module/index.coffee

@@ -21,32 +21,19 @@ init = ()->
 		PixelRatio:window.devicePixelRatio
 	}
 	scene=new THREE.Scene
-	camera = new THREE.PerspectiveCamera 95, 2, 0.1, 1000
+	camera = new THREE.PerspectiveCamera 70, 2, 0.1, 1000
 	camera.rotation.order = "YXZ"
 	camera.position.set 26, 26, 26
 
 	#Skybox
-	rt = new THREE.WebGLCubeRenderTarget al.get("skybox").image.height
-	rt.fromEquirectangularTexture renderer, al.get "skybox"
-	scene.background = rt
+	scene.background = new THREE.Color("#adc8ff")
 
 	#Światła
 	ambientLight=new THREE.AmbientLight 0xcccccc
 	scene.add ambientLight
 	directionalLight = new THREE.DirectionalLight 0x333333, 2
 	directionalLight.position.set(1, 1, 0.5).normalize()
 	scene.add directionalLight
-	#Text geometry
-	# new THREE.TextGeometry 'Hello three.js!', {
-	# 	size: 80
-	# 	height: 5
-	# 	curveSegments: 12
-	# 	bevelEnabled: true
-	# 	bevelThickness: 10
-	# 	bevelSize: 8
-	# 	bevelOffset: 0
-	# 	bevelSegments: 5
-	# }
 
 	#Informacja o gpu komputera
 	console.warn gpuInfo()
@@ -82,6 +69,7 @@ init = ()->
 		micromove: 0.3
 		socket
 		TWEEN
+		fov:70
 	}
 
 	#Czat
@@ -160,15 +148,16 @@ init = ()->
 	#Interfejs dat.gui
 	gui = new GUI()
 	params={
-		fog:false
-		chunkdist:4
+		fog:true
+		chunkdist:3
 	}
+	color = new THREE.Color "#adc8ff"
+	near = 0.5*16
+	far = 3*16
+	scene.fog = new THREE.Fog color, near, far
 	gui.add( params, 'fog' ).name( 'Enable fog' ).listen().onChange ()->
 		if params.fog
 			#Mgła
-			color = new THREE.Color "#adc8ff"
-			near = 3*16-13
-			far = 3*16-3
 			scene.fog = new THREE.Fog color, near, far
 		else
 			scene.fog = null