slides/webgl/asset/ec-demo2/globe-contour.html (172 lines of code) (raw):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Globe - ECHARTS-GL</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS -->
<link rel="stylesheet" href="../common/reset.css">
</head>
<body>
<div id="main"></div>
<script src="../common/d3-contour.js"></script>
<script src="../common/d3-geo.js"></script>
<script src="../common/d3-timer.js"></script>
<script src="../common/echarts.min.js"></script>
<script src="../common/jquery.min.js"></script>
<script src="../common/echarts-gl.js"></script>
<script src="../common/stackBlur.js"></script>
<script src="../common/dat.gui.js"></script>
<script>
var config = {
color: '#c0101a',
levels: 50,
intensity: 200,
threshold: 0.01
}
var canvas = document.createElement('canvas');
canvas.width = 4096;
canvas.height = 2048;
context = canvas.getContext("2d");
context.lineWidth = 0.2;
context.strokeStyle = config.color;
context.fillStyle = config.color;
context.shadowColor = config.color;
var gui = new dat.GUI();
image("../texture/bathymetry_bw_composite_4k.jpg").then(function(image) {
var m = image.height,
n = image.width,
values = new Array(n * m),
contours = d3.contours().size([n, m]).smooth(true),
projection = d3.geoIdentity().scale(canvas.width / n),
path = d3.geoPath(projection, context);
StackBlur.R(image, 5);
for (var j = 0, k = 0; j < m; ++j) {
for (var i = 0; i < n; ++i, ++k) {
values[k] = image.data[(k << 2)] / 255;
}
}
var option = {
image: canvas
}
var results = [];
function update(threshold, levels) {
context.clearRect(0, 0, canvas.width, canvas.height);
var thresholds = [];
for (var i = 0; i < levels; i++) {
thresholds.push((threshold + 1 / levels * i) % 1);
}
results = contours.thresholds(thresholds)(values);
redraw();
}
function redraw() {
results.forEach(function (d, idx) {
context.beginPath();
path(d);
context.globalAlpha = 1;
context.stroke();
if (idx > config.levels / 5 * 3) {
context.globalAlpha = 0.01;
context.fill();
}
});
option.onupdate();
}
initCharts(option);
update(config.threshold, config.levels);
gui.add(config, 'levels', 0, 100).step(1).onFinishChange(function () {
update(config.threshold, config.levels);
});
gui.addColor(config, 'color').onChange(function () {
context.strokeStyle = context.fillStyle = context.shadowColor = config.color;
redraw();
});
});
function image(url) {
return new Promise(function(resolve) {
var image = new Image;
image.src = url;
image.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = image.width / 4;
canvas.height = image.height / 4;
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0, canvas.width, canvas.height);
resolve(context.getImageData(0, 0, canvas.width, canvas.height));
};
});
}
function initCharts(option) {
var chart = echarts.init(document.getElementById('main'));
var contourChart = echarts.init(document.createElement('canvas'), null, {
width: 4096,
height: 2048
});
var img = new echarts.graphic.Image({
style: {
image: option.image,
x: -1,
y: -1,
width: option.image.width + 2,
height: option.image.height + 2
}
});
contourChart.getZr().add(img);
option.onupdate = function () {
img.dirty();
}
// https://www.behance.net/gallery/50293671/T-GLOBEhttps://bl.ocks.org/mbostock/818053c76d79d4841790c332656bf9da
chart.setOption({
globe: {
environment: '../texture/starfield.jpg',
heightTexture: '../texture/bathymetry_bw_composite_4k.jpg',
displacementScale: 0.05,
displacementQuality: 'high',
baseColor: '#111',
shading: 'realistic',
realisticMaterial: {
roughness: 0.2,
metalness: 0
},
postEffect: {
enable: true,
bloom: {
intensity: 0.05
}
},
temporalSuperSampling: {
enable: true
},
light: {
ambient: {
intensity: 0
},
main: {
intensity: 0.1,
shadow: false
},
ambientCubemap: {
texture: '../texture/lake.hdr',
exposure: 1,
diffuseIntensity: 0.5,
specularIntensity: 2
}
},
viewControl: {
autoRotate: false
},
layers: [{
type: 'blend',
blendTo: 'albedo',
texture: contourChart,
intensity: config.intensity
}]
}
});
window.addEventListener('resize', function () {
chart.resize();
});
}
</script>
</body>
</html>