1
/*
2
 * HexGL
3
 * @author Thibaut 'BKcore' Despoulain <http://bkcore.com>
4
 * @license This work is licensed under the Creative Commons Attribution-NonCommercial 3.0 Unported License.
5
 *          To view a copy of this license, visit http://creativecommons.org/licenses/by-nc/3.0/.
6
 */
7

8
var bkcore = bkcore || {};
9
bkcore.hexgl = bkcore.hexgl || {};
10
bkcore.hexgl.tracks = bkcore.hexgl.tracks || {};
11

12
bkcore.hexgl.tracks.Cityscape = {
13

14
	lib: null,
15
	materials: {},
16

17
	name: "Cityscape",
18

19
	checkpoints: {
20
		list: [0,1,2],
21
		start: 0,
22
		last: 2
23
	},
24

25
	spawn: {
26
		x: -1134*2,
27
		y: 387,
28
		z: -443*2
29
	},
30

31
	spawnRotation: {
32
		x: 0,
33
		y: 0,
34
		z: 0
35
	},
36

37
	analyser: null,
38
	pixelRatio: 2048.0 / 6000.0,
39

40
	load: function(opts, quality)
41
	{
42
		this.lib = new bkcore.threejs.Loader(opts);
43

44
		// desktop + quality low
45
		// OR
46
		// mobile + quality low or mid
47
		if(quality < 2) // LOW
48
		{
49
			this.lib.load({
50
				textures: {
51
					'hex'								: "textures/hud/hex.jpg",
52
					'spark'								: "textures/particles/spark.png",
53
					'cloud'								: "textures/particles/cloud.png",
54
					'ship.feisar.diffuse'				: "textures/ships/feisar/diffuse.jpg",
55
					'booster.diffuse'					: "textures/ships/feisar/booster/booster.png",
56
					'booster.sprite'					: "textures/ships/feisar/booster/boostersprite.jpg",
57
					'track.cityscape.diffuse'			: "textures/tracks/cityscape/diffuse.jpg",
58
					'track.cityscape.scrapers1.diffuse'	: "textures/tracks/cityscape/scrapers1/diffuse.jpg",
59
					'track.cityscape.scrapers2.diffuse'	: "textures/tracks/cityscape/scrapers2/diffuse.jpg",
60
					'track.cityscape.start.diffuse'		: "textures/tracks/cityscape/start/diffuse.jpg",
61
					'track.cityscape.start.banner'		: "textures/tracks/cityscape/start/start.jpg",
62
					'bonus.base.diffuse'				: "textures/bonus/base/diffuse.jpg"
63
				},
64
				texturesCube: {
65
					'skybox.dawnclouds'					: "textures/skybox/dawnclouds/%1.jpg"
66
				},
67
				geometries: {
68
					'bonus.base'						: "geometries/bonus/base/base.js",
69
					'booster'							: "geometries/booster/booster.js",
70
					'ship.feisar'						: "geometries/ships/feisar/feisar.js",
71
					'track.cityscape'					: "geometries/tracks/cityscape/track.js",
72
					'track.cityscape.scrapers1'			: "geometries/tracks/cityscape/scrapers1.js",
73
					'track.cityscape.scrapers2'			: "geometries/tracks/cityscape/scrapers2.js",
74
					'track.cityscape.start'				: "geometries/tracks/cityscape/start.js",
75
					'track.cityscape.start.banner'		: "geometries/tracks/cityscape/startbanner.js",
76
					'track.cityscape.bonus.speed'		: "geometries/tracks/cityscape/bonus/speed.js"
77
				},
78
				analysers: {
79
					'track.cityscape.collision'			: "textures/tracks/cityscape/collision.png",
80
					'track.cityscape.height'			: "textures/tracks/cityscape/height.png"
81
				},
82
				images: {
83
					'hud.bg'							: "textures/hud/hud-bg.png",
84
					'hud.speed'							: "textures/hud/hud-fg-speed.png",
85
					'hud.shield'						: "textures/hud/hud-fg-shield.png"
86
				},
87
				sounds: {
88
					bg: {
89
						src: 'audio/bg.ogg',
90
						loop: true,
91
						usePanner: false
92
					},
93
					crash: {
94
						src: 'audio/crash.ogg',
95
						loop: false,
96
						usePanner: true
97
					},
98
					destroyed: {
99
						src: 'audio/destroyed.ogg',
100
						loop: false,
101
						usePanner: false
102
					},
103
					boost: {
104
						src: 'audio/boost.ogg',
105
						loop: false,
106
						usePanner: true
107
					},
108
					wind: {
109
						src: 'audio/wind.ogg',
110
						loop: true,
111
						usePanner: true
112
					}
113
				}
114
			});
115
		}
116
		// desktop + quality mid or high
117
		// OR
118
		// mobile + quality high
119
		else // HIGH
120
		{console.log('HIGH');
121
			this.lib.load({
122
				textures: {
123
					'hex'								: "textures.full/hud/hex.jpg",
124
					'spark'								: "textures.full/particles/spark.png",
125
					'cloud'								: "textures.full/particles/cloud.png",
126
					'ship.feisar.diffuse'				: "textures.full/ships/feisar/diffuse.jpg",
127
					'ship.feisar.specular'				: "textures.full/ships/feisar/specular.jpg",
128
					'ship.feisar.normal'				: "textures.full/ships/feisar/normal.jpg",
129
					'booster.diffuse'					: "textures.full/ships/feisar/booster/booster.png",
130
					'booster.sprite'					: "textures.full/ships/feisar/booster/boostersprite.jpg",
131
					'track.cityscape.diffuse'			: "textures.full/tracks/cityscape/diffuse.jpg",
132
					'track.cityscape.specular'			: "textures.full/tracks/cityscape/specular.jpg",
133
					'track.cityscape.normal'			: "textures.full/tracks/cityscape/normal.jpg",
134
					'track.cityscape.scrapers1.diffuse'	: "textures.full/tracks/cityscape/scrapers1/diffuse.jpg",
135
					'track.cityscape.scrapers1.specular': "textures.full/tracks/cityscape/scrapers1/specular.jpg",
136
					'track.cityscape.scrapers1.normal'	: "textures.full/tracks/cityscape/scrapers1/normal.jpg",
137
					'track.cityscape.scrapers2.diffuse'	: "textures.full/tracks/cityscape/scrapers2/diffuse.jpg",
138
					'track.cityscape.scrapers2.specular': "textures.full/tracks/cityscape/scrapers2/specular.jpg",
139
					'track.cityscape.scrapers2.normal'	: "textures.full/tracks/cityscape/scrapers2/normal.jpg",
140
					'track.cityscape.start.diffuse'		: "textures.full/tracks/cityscape/start/diffuse.jpg",
141
					'track.cityscape.start.specular'	: "textures.full/tracks/cityscape/start/specular.jpg",
142
					'track.cityscape.start.normal'		: "textures.full/tracks/cityscape/start/normal.jpg",
143
					'track.cityscape.start.banner'		: "textures.full/tracks/cityscape/start/start.jpg",
144
					'bonus.base.diffuse'				: "textures.full/bonus/base/diffuse.jpg",
145
					'bonus.base.normal'					: "textures.full/bonus/base/normal.jpg",
146
					'bonus.base.specular'				: "textures.full/bonus/base/specular.jpg"
147
				},
148
				texturesCube: {
149
					'skybox.dawnclouds'					: "textures.full/skybox/dawnclouds/%1.jpg"
150
				},
151
				geometries: {
152
					'bonus.base'						: "geometries/bonus/base/base.js",
153
					'booster'							: "geometries/booster/booster.js",
154
					'ship.feisar'						: "geometries/ships/feisar/feisar.js",
155
					'track.cityscape'					: "geometries/tracks/cityscape/track.js",
156
					'track.cityscape.scrapers1'			: "geometries/tracks/cityscape/scrapers1.js",
157
					'track.cityscape.scrapers2'			: "geometries/tracks/cityscape/scrapers2.js",
158
					'track.cityscape.start'				: "geometries/tracks/cityscape/start.js",
159
					'track.cityscape.start.banner'		: "geometries/tracks/cityscape/startbanner.js",
160
					'track.cityscape.bonus.speed'		: "geometries/tracks/cityscape/bonus/speed.js"
161
				},
162
				analysers: {
163
					'track.cityscape.collision'			: "textures.full/tracks/cityscape/collision.png",
164
					'track.cityscape.height'			: "textures.full/tracks/cityscape/height.png"
165
				},
166
				images: {
167
					'hud.bg'							: "textures.full/hud/hud-bg.png",
168
					'hud.speed'							: "textures.full/hud/hud-fg-speed.png",
169
					'hud.shield'						: "textures.full/hud/hud-fg-shield.png"
170
				},
171
				sounds: {
172
					bg: {
173
						src: 'audio/bg.ogg',
174
						loop: true
175
					},
176
					crash: {
177
						src: 'audio/crash.ogg',
178
						loop: false
179
					},
180
					destroyed: {
181
						src: 'audio/destroyed.ogg',
182
						loop: false
183
					},
184
					boost: {
185
						src: 'audio/boost.ogg',
186
						loop: false
187
					},
188
					wind: {
189
						src: 'audio/wind.ogg',
190
						loop: true
191
					}
192
				}
193
			});
194
		}
195
	},
196

197
	buildMaterials: function(quality)
198
	{
199
		// desktop + quality low
200
		// OR
201
		// mobile + quality low or mid
202
		if(quality < 2) // LOW
203
		{
204
			this.materials.track = new THREE.MeshBasicMaterial({
205
				map: this.lib.get("textures", "track.cityscape.diffuse"),
206
				ambient: 0xcccccc
207
			});
208

209
			this.materials.bonusBase = new THREE.MeshBasicMaterial({
210
				map: this.lib.get("textures", "bonus.base.diffuse"),
211
				ambient: 0xcccccc
212
			});
213

214
			this.materials.bonusSpeed = new THREE.MeshBasicMaterial({
215
				color: 0x0096ff
216
			});
217

218
			this.materials.ship = new THREE.MeshBasicMaterial({
219
				map: this.lib.get("textures", "ship.feisar.diffuse"),
220
				ambient: 0xaaaaaa
221
			});
222

223
			this.materials.booster = new THREE.MeshBasicMaterial({
224
				map: this.lib.get("textures", "booster.diffuse"),
225
				transparent: true
226
			});
227

228
			this.materials.scrapers1 = new THREE.MeshBasicMaterial({
229
				map: this.lib.get("textures", "track.cityscape.scrapers1.diffuse"),
230
				ambient: 0xcccccc
231
			});
232

233
			this.materials.scrapers2 = new THREE.MeshBasicMaterial({
234
				map: this.lib.get("textures", "track.cityscape.scrapers2.diffuse"),
235
				ambient: 0xcccccc
236
			});
237

238
			this.materials.start = new THREE.MeshBasicMaterial({
239
				map: this.lib.get("textures", "track.cityscape.start.diffuse"),
240
				ambient: 0xcccccc
241
			});
242

243
			this.materials.startBanner = new THREE.MeshBasicMaterial({
244
				map: this.lib.get("textures", "track.cityscape.start.banner"),
245
				transparent: false
246
			});
247
		}
248
		// desktop + quality mid or high
249
		// OR
250
		// mobile + quality high
251
		else // HIGH
252
		{
253
			this.materials.track = bkcore.Utils.createNormalMaterial({
254
				diffuse: this.lib.get("textures", "track.cityscape.diffuse"),
255
				specular: this.lib.get("textures", "track.cityscape.specular"),
256
				normal: this.lib.get("textures", "track.cityscape.normal"),
257
				ambient: 0xffffff,
258
				shininess: 42,
259
				metal: true,
260
				perPixel: true
261
			});
262

263
			this.materials.bonusBase = bkcore.Utils.createNormalMaterial({
264
				diffuse: this.lib.get("textures", "bonus.base.diffuse"),
265
				specular: this.lib.get("textures", "bonus.base.specular"),
266
				normal: this.lib.get("textures", "bonus.base.normal"),
267
				normalScale: 3.0,
268
				ambient: 0x444444,
269
				shininess: 42,
270
				metal: false,
271
				perPixel: false
272
			});
273

274
			this.materials.bonusSpeed = new THREE.MeshBasicMaterial({
275
				color: 0x0096ff
276
			});
277

278
			this.materials.ship = bkcore.Utils.createNormalMaterial({
279
				diffuse: this.lib.get("textures", "ship.feisar.diffuse"),
280
				specular: this.lib.get("textures", "ship.feisar.specular"),
281
				normal: this.lib.get("textures", "ship.feisar.normal"),
282
				ambient: 0x444444,
283
				shininess: 42,
284
				metal: true,
285
				perPixel: false
286
			});
287

288
			this.materials.booster = new THREE.MeshBasicMaterial({
289
				map: this.lib.get("textures", "booster.diffuse"),
290
				transparent: true
291
			});
292

293
			this.materials.scrapers1 = bkcore.Utils.createNormalMaterial({
294
				diffuse: this.lib.get("textures", "track.cityscape.scrapers1.diffuse"),
295
				specular: this.lib.get("textures", "track.cityscape.scrapers1.specular"),
296
				normal: this.lib.get("textures", "track.cityscape.scrapers1.normal"),
297
				cube: this.lib.get("texturesCube", "skybox.dawnclouds"),
298
				reflectivity: 0.8,
299
				ambient: 0x444444,
300
				shininess: 42,
301
				metal: false,
302
				perPixel: false
303
			});
304

305
			this.materials.scrapers2 = bkcore.Utils.createNormalMaterial({
306
				diffuse: this.lib.get("textures", "track.cityscape.scrapers2.diffuse"),
307
				specular: this.lib.get("textures", "track.cityscape.scrapers2.specular"),
308
				normal: this.lib.get("textures", "track.cityscape.scrapers2.normal"),
309
				cube: this.lib.get("texturesCube", "skybox.dawnclouds"),
310
				reflectivity: 0.8,
311
				ambient: 0x000000,
312
				shininess: 42,
313
				metal: false,
314
				perPixel: false
315
			});
316

317
			this.materials.start = bkcore.Utils.createNormalMaterial({
318
				diffuse: this.lib.get("textures", "track.cityscape.start.diffuse"),
319
				specular: this.lib.get("textures", "track.cityscape.start.specular"),
320
				normal: this.lib.get("textures", "track.cityscape.start.normal"),
321
				ambient: 0xaaaaaa,
322
				shininess: 42,
323
				metal: false,
324
				perPixel: false
325
			});
326

327
			this.materials.startBanner = new THREE.MeshBasicMaterial({
328
				map: this.lib.get("textures", "track.cityscape.start.banner"),
329
				transparent: false
330
			});
331
		}
332
	},
333

334
	buildScenes: function(ctx, quality)
335
	{
336
		// IMPORTANT
337
		this.analyser = this.lib.get("analysers", "track.cityscape.collision");
338

339
		// SKYBOX
340
		var sceneCube = new THREE.Scene();
341

342
		var cameraCube = new THREE.PerspectiveCamera( 70, ctx.width / ctx.height, 1, 6000 );
343
		sceneCube.add( cameraCube );
344

345
		var skyshader = THREE.ShaderUtils.lib[ "cube" ];
346
		skyshader.uniforms[ "tCube" ].texture = this.lib.get("texturesCube", "skybox.dawnclouds");
347

348
		var skymaterial = new THREE.ShaderMaterial(
349
		{
350
			fragmentShader: skyshader.fragmentShader,
351
			vertexShader: skyshader.vertexShader,
352
			uniforms: skyshader.uniforms,
353
			depthWrite: false
354
		});
355

356
		var mesh = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), skymaterial );
357
		mesh.flipSided = true;
358

359
		sceneCube.add(mesh);
360

361
		ctx.manager.add("sky", sceneCube, cameraCube);
362

363
		var ambient = 0xbbbbbb, diffuse = 0xffffff, specular = 0xffffff, shininess = 42, scale = 23;
364

365
		// MAIN SCENE
366
		var camera = new THREE.PerspectiveCamera( 70, ctx.width / ctx.height, 1, 60000 );
367

368
		var scene = new THREE.Scene();
369
		scene.add( camera );
370
		scene.add( new THREE.AmbientLight( ambient ) );
371

372
		// SUN
373
		var sun = new THREE.DirectionalLight( diffuse, 1.5, 30000 );
374
		sun.position.set( -4000, 1200, 1800 );
375
		sun.lookAt(new THREE.Vector3());
376

377
		// desktop + quality mid or high
378
		if(quality > 2)
379
		{
380
			sun.castShadow = true;
381
			sun.shadowCameraNear = 50;
382
			sun.shadowCameraFar = camera.far*2;
383
			sun.shadowCameraRight     =  3000;
384
			sun.shadowCameraLeft      = -3000;
385
			sun.shadowCameraTop       =  3000;
386
			sun.shadowCameraBottom    = -3000;
387
			//sun.shadowCameraVisible = true;
388
			sun.shadowBias = 0.0001;
389
			sun.shadowDarkness = 0.7;
390
			sun.shadowMapWidth = 2048;
391
			sun.shadowMapHeight = 2048;
392
		}
393
		scene.add( sun );
394

395
		// SHIP
396
		var ship = ctx.createMesh(scene, this.lib.get("geometries", "ship.feisar"), -1134*2, 10, -443*2, this.materials.ship);
397

398
		var booster = ctx.createMesh(ship, this.lib.get("geometries", "booster"), 0, 0.665, -3.8, this.materials.booster);
399
		booster.depthWrite = false;
400

401
		var boosterSprite = new THREE.Sprite({
402
			map: this.lib.get("textures", "booster.sprite"),
403
			blending: THREE.AdditiveBlending,
404
			useScreenCoordinates: false,
405
			color: 0xffffff
406
		});
407
		boosterSprite.scale.set(0.02, 0.02, 0.02);
408
		boosterSprite.mergeWith3D = false;
409
		booster.add(boosterSprite);
410

411
		var boosterLight = new THREE.PointLight(0x00a2ff, 4.0, 60);
412
		boosterLight.position.set(0, 0.665, -4);
413
		
414
		// desktop + quality low, mid or high
415
		// OR
416
		// mobile + quality mid or high
417
		// NB booster is now enabled on desktop + low quality,
418
		// when it wasn't before; this is because this booster setting
419
		// is the only difference between mobile + mid quality
420
		// and desktop + low quality, so I merged them for convenience
421
		if(quality > 0)
422
			ship.add(boosterLight);
423

424
		// SHIP CONTROLS
425
		var shipControls = new bkcore.hexgl.ShipControls(ctx);
426
		shipControls.collisionMap = this.lib.get("analysers", "track.cityscape.collision");
427
		shipControls.collisionPixelRatio = 2048.0 / 6000.0;
428
		shipControls.collisionDetection = true;
429
		shipControls.heightMap = this.lib.get("analysers", "track.cityscape.height");;
430
		shipControls.heightPixelRatio = 2048.0 / 6000.0;
431
		shipControls.heightBias = 4.0;
432
		shipControls.heightScale = 10.0;
433
		shipControls.control(ship);
434
		ctx.components.shipControls = shipControls;
435
		ctx.tweakShipControls();
436

437
		// SHIP EFFECTS AND PARTICLES
438
		var fxParams = {
439
			scene: scene,
440
			shipControls: shipControls,
441
			booster: booster,
442
			boosterSprite: boosterSprite,
443
			boosterLight: boosterLight,
444
			useParticles: false
445
		};
446
		
447
		// desktop + quality mid or high
448
		if(quality > 2)
449
		{
450
			fxParams.textureCloud = this.lib.get("textures", "cloud");
451
			fxParams.textureSpark = this.lib.get("textures", "spark");
452
			fxParams.useParticles = true;
453
		}
454
		ctx.components.shipEffects = new bkcore.hexgl.ShipEffects(fxParams);
455

456
		// TRACK
457
		var track = ctx.createMesh(scene, this.lib.get("geometries", "track.cityscape"), 0, -5, 0, this.materials.track);
458
		var bonusBase = ctx.createMesh(scene, this.lib.get("geometries", "bonus.base"), 0, -5, 0, this.materials.bonusBase);
459
		var bonusSpeed = ctx.createMesh(scene, this.lib.get("geometries", "track.cityscape.bonus.speed"), 0, -5, 0, this.materials.bonusSpeed);
460
		bonusSpeed.receiveShadow = false;
461
		var scrapers1 = ctx.createMesh(scene, this.lib.get("geometries", "track.cityscape.scrapers1"), 0, 0, 0, this.materials.scrapers1);
462
		var scrapers2 = ctx.createMesh(scene, this.lib.get("geometries", "track.cityscape.scrapers2"), 0, 0, 0, this.materials.scrapers2);
463
		var start = ctx.createMesh(scene, this.lib.get("geometries", "track.cityscape.start"), 0, -5, 0, this.materials.start);
464
		var startbanner = ctx.createMesh(scene, this.lib.get("geometries", "track.cityscape.start.banner"), 0, -5, 0, this.materials.startBanner);
465
		startbanner.doubleSided = true;
466

467
		// CAMERA
468
		ctx.components.cameraChase = new bkcore.hexgl.CameraChase({
469
			target: ship,
470
			camera: camera,
471
			cameraCube: ctx.manager.get("sky").camera,
472
			lerp: 0.5,
473
			yoffset: 8.0,
474
			zoffset: 10.0,
475
			viewOffset: 10.0
476
		});
477

478
		ctx.manager.add("game", scene, camera, function(delta, renderer)
479
		{
480
			if(delta > 25 && this.objects.lowFPS < 1000) this.objects.lowFPS++;
481

482
			var dt = delta/16.6;
483

484
			this.objects.components.shipControls.update(dt);
485

486
			this.objects.components.shipEffects.update(dt);
487

488
			this.objects.components.cameraChase.update(dt, this.objects.components.shipControls.getSpeedRatio());
489
			/*this.objects.time += 0.002;
490
			var c = this.objects.components.cameraChase.camera;
491
			c.position.set(
492
				Math.cos(this.objects.time)*15+this.objects.components.shipControls.dummy.position.x,
493
				10+this.objects.components.shipControls.dummy.position.y,
494
				Math.sin(this.objects.time)*15+this.objects.components.shipControls.dummy.position.z
495
			);
496
			c.lookAt(this.objects.components.shipControls.dummy.position);
497
			this.objects.components.cameraChase.cameraCube.rotation.copy(c.rotation);*/
498

499
			this.objects.composers.game.render(dt);
500
			if(this.objects.hud) this.objects.hud.update(
501
				this.objects.components.shipControls.getRealSpeed(100),
502
				this.objects.components.shipControls.getRealSpeedRatio(),
503
				this.objects.components.shipControls.getShield(100),
504
				this.objects.components.shipControls.getShieldRatio()
505
			);
506
			if(this.objects.components.shipControls.getShieldRatio() < 0.2)
507
				this.objects.extras.vignetteColor.setHex(0x992020);
508
			else
509
				this.objects.extras.vignetteColor.setHex(0x458ab1);
510
		},
511
		{
512
			components: ctx.components,
513
			composers: ctx.composers,
514
			extras: ctx.extras,
515
			quality: quality,
516
			hud: ctx.hud,
517
			time: 0.0,
518
			lowFPS: 0
519
		});
520
	}
521
}
522

523