-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
162 lines (124 loc) · 7.03 KB
/
index.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html>
<head>
<title>three.js - 3d webgl render</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>3d webgl render</title>
<link href="css/map.css" rel="stylesheet">
<script type="text/javascript" src="src/libraries/rhill-voronoi-core.min.js"></script>
<script type="text/javascript" src="src/libraries/Simplex.js"></script>
<script type="text/javascript" src="src/libraries/perlin.js"></script>
<script type="text/javascript" src="src/libraries/paper.js"></script>
<script type="text/javascript" src="src/libraries/three.js"></script>
<script type="text/javascript" src="src/libraries/Reflector.js"></script>
<script type="text/javascript" src="src/libraries/Refractor.js"></script>
<script type="text/javascript" src="src/libraries/OrbitControls.js"></script>
<script type="text/javascript" src="src/libraries/Detector.js"></script>
<script type="text/javascript" src="src/libraries/dat.gui.min.js"></script>
<script type="text/javascript" src="src/Island.js"></script>
<script type="text/javascript" src="src/PaperRenderer.js"></script>
<script type="text/javascript" src="src/MeshDataFactory.js"></script>
<script type="text/javascript" src="src/TerrainWater.js"></script>
<script type="text/javascript" src="src/ThreeJsRenderer.js"></script>
<script type="text/javascript" src="src/SimpleGUI.js"></script>
</head>
<body>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> - 3d webgl render
</div>
<div id="progress" style="Display:none">
<div id="progressBar"></div>
</div>
<canvas id="paperCanvas" resize="true"></canvas>
<canvas id="perlinNoiseCanvas" hidden="true"></canvas>
<canvas id="threeJsCanvas" resize="true"></canvas>
<script type="x-shader/x-vertex" id="backGroundVertexShader">
varying vec3 vWorldPosition;
void main() {
vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
vWorldPosition = worldPosition.xyz;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script type="x-shader/x-fragment" id="backGroundfragmentShader">
uniform vec3 topColor;
uniform vec3 bottomColor;
uniform float offset;
uniform float exponent;
varying vec3 vWorldPosition;
void main() {
float h = normalize( vWorldPosition + offset ).y;
gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h , 0.0), exponent ), 0.0 ) ), 1.0 );
}
</script>
<script type="application/javascript">
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
function startProgress() {
var progress = document.getElementById("progress");
progress.style.display = 'block';
var bar = document.getElementById("progressBar");
var width = 1;
bar.style.width = width + '%';
}
function updateProgress(percentage) {
var bar = document.getElementById("progressBar");
bar.style.width = percentage + '%';
}
function finishProgress(percentage) {
var progress = document.getElementById("progress");
progress.style.display = 'none';
}
var launchProcess = function(userConfig){
var paperCanvas = document.getElementById('paperCanvas');
var perlinNoiseCanvas = document.getElementById('perlinNoiseCanvas');
var threeJsCanvas = document.getElementById('threeJsCanvas');
paperCanvas.onclick = function() {
PaperRenderer.toggleDebug();
perlinNoiseCanvas.style.display = (perlinNoiseCanvas.style.display == 'block' ? 'none' : 'block');
};
startProgress();
var islandStartTime = new Date().getTime();
var result = Island.generate(userConfig, perlinNoiseCanvas);
console.log("Island generate finished in: " + eval(new Date().getTime() - islandStartTime) + " miliseconds");
updateProgress(25);
var paperStartTime = new Date().getTime();
PaperRenderer.render(paperCanvas, result.diagram, result.sites, userConfig);
console.log("Paper renderer finished in: " + eval(new Date().getTime() - paperStartTime) + " miliseconds");
updateProgress(50);
var meshDataFactoryStartTime = new Date().getTime();
var meshData = MeshDataFactory.create(result.diagram, result.sites, userConfig.width, userConfig.height);
console.log("Mesh data factory finished in: " + eval(new Date().getTime() - meshDataFactoryStartTime) + " miliseconds");
updateProgress(75);
var threeJsStartTime = new Date().getTime();
ThreeJsRenderer.render(threeJsCanvas, meshData, userConfig.width, userConfig.height);
console.log("Three renderer finished in: " + eval(new Date().getTime() - threeJsStartTime) + " miliseconds");
updateProgress(100);
finishProgress();
console.log("Complete process finished in : " + eval(new Date().getTime() - islandStartTime) + " miliseconds");
}
window.onload = function(e) {
var userConfig = {
width: 256,
height: 256,
perlinWidth: 256,
perlinHeight: 256,
allowDebug: false, // if set to true, you can clic on the map to enter "debug" mode. Warning : debug mode is slow to initialize, set to false for faster rendering.
nbSites: 10000, // nb of voronoi cell
sitesDistribution: 'hexagon', // distribution of the site : random, square or hexagon
sitesRandomisation: 80, // will move each site in a random way (in %), for the square or hexagon distribution to look more random
nbGraphRelaxation: 0, // nb of time we apply the relaxation algo to the voronoi graph (slow !), for the random distribution to look less random
cliffsThreshold: 0.15,
lakesThreshold: 0.005, // lake elevation will increase by this value (* the river size) when a new river end inside
nbRivers: 25, //(10000 / 200),
maxRiversSize: 4,
shading: 0.35,
shadeOcean: true
}
this.launchProcess(userConfig);
SimpleGUI.create(userConfig, this.launchProcess);
};
</script>
<noscript>You need to enable Javascript in your browser for this page to display properly.</noscript>
</body>
</html>