-
Notifications
You must be signed in to change notification settings - Fork 13
/
04-shader-lighting.html
79 lines (69 loc) · 2.81 KB
/
04-shader-lighting.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dungeon with Lighting Utilizing a Shader Function</title>
<link href="../unicodetiles/unicodetiles.css" rel="stylesheet" type="text/css" />
<link href="../docs/style.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="../unicodetiles/unicodetiles.js"></script>
<script src="../unicodetiles/ut.WebGLRenderer.js"></script>
<script src="../unicodetiles/ut.CanvasRenderer.js"></script>
<script src="../unicodetiles/ut.DOMRenderer.js"></script>
<script src="../unicodetiles/input.js"></script>
<script src="renderer-switcher.js"></script>
<!-- We are extending the simple-dungeon example -->
<script src="simple-dungeon.js"></script>
<!-- We are extending the fov-dungeon example -->
<script src="fov.js"></script>
<script>
var LIGHT_COLOR = { r: 255, g: 255, b: 0 };
var LIGHT_INTENSITY = 0.7;
var MAX_DIST = 5;
// Helper function that calculates a distance
function distance(x1, y1, x2, y2) {
return Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1));
}
// Helper function that does blending between two values
function blend(a, b, f) {
return a*f + b*(1.0-f);
}
// Shades the tile according to distance from player,
// giving a kind of torch effect
function doLighting(tile, x, y, time) {
// Calculate a pulsating animation value from the time
var anim = time / 1000.0;
anim = Math.abs(anim - Math.floor(anim) - 0.5) + 0.5;
var d = distance(pl.x, pl.y, x, y);
// No shading if the tile is too far away from the player's "torch"
if (d >= MAX_DIST) return tile;
// We will create a new instance of ut.Tile because the tile
// passed in might be (and in this case is) a reference to
// a shared "constant" tile and we don't want the shader to
// affect all the places where that might be referenced
var shaded = new ut.Tile(tile.getChar());
// Calculate a blending factor between light and tile colors
var f = (1.0 - (d / MAX_DIST)) * LIGHT_INTENSITY * anim;
// Do the blending
shaded.r = Math.round(blend(LIGHT_COLOR.r, tile.r, f));
shaded.g = Math.round(blend(LIGHT_COLOR.g, tile.g, f));
shaded.b = Math.round(blend(LIGHT_COLOR.b, tile.b, f));
return shaded;
}
// Attaches the lighting shader
function initLighting() {
eng.setShaderFunc(doLighting);
}
</script>
</head>
<body onload="initSimpleDungeon(); createRendererSwitcher(); initFOV(); initLighting();">
<p class="centerer">Move around with arrow keys.</p>
<div class="centerer">
<div id="game">Enable JavaScript and reload the page.</div>
</div>
<div class="centerer" id="renderer-switcher">
<!-- Populated by renderer-switcher.js -->
</div>
<a class="backlink" href="index.html"><-- Back to index</a>
</body>
</html>