slides/webgl/asset/ec-demo2/bar3D-image-pixels.html (178 lines of code) (raw):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bar3D Image Pixels - 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/echarts.js"></script>
<script src="../common/echarts-gl.js"></script>
<script src="../common/StageControl.js"></script>
<script src="../texture/sample.jpg.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'), null, {
devicePixelRatio: 1
});
var img = new Image();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var config = {
scale: 0.0
};
chart.setOption({
tooltip: {},
xAxis3D: {
type: 'value'
},
yAxis3D: {
type: 'value'
},
zAxis3D: {
type: 'value',
min: 0,
max: 100
},
grid3D: {
show: false,
viewControl: {
alpha: 89,
beta: 0,
animationEasingUpdate: 'cubicInOut',
animationDurationUpdate: 4000
},
postEffect: {
enable: false,
bloom: {
enable: false
}
},
boxDepth: 100,
boxHeight: 1,
environment: 'none',
light: {
main: {
shadow: true,
intensity: 1
},
ambientCubemap: {
texture: '../texture/canyon.hdr',
exposure: 2,
diffuseIntensity: 0.2
}
}
}
});
function createColorMapper(data) {
return function (params) {
var i = params.dataIndex;
var r = data[i * 4] / 255;
var g = data[i * 4 + 1] / 255;
var b = data[i * 4 + 2] / 255;
var lum = (0.2125 * r + 0.7154 * g + 0.0721 * b);
r *= lum * 2;
g *= lum * 2;
b *= lum * 2;
return [r, g, b, 1];
};
}
function updateData(data, width, height) {
console.time('update');
var dataItem = [];
var dataProvider = {
getItem: function (i) {
var r = data[i * 4];
var g = data[i * 4 + 1];
var b = data[i * 4 + 2];
var lum = (0.2125 * r + 0.7154 * g + 0.0721 * b);
lum = (lum - 125) * config.scale + 50;
dataItem[0] = i % width;
dataItem[1] = height - Math.floor(i / width);
dataItem[2] = lum;
return dataItem;
},
count: function () {
return data.length / 4;
}
};
chart.setOption({
grid3D: {
boxWidth: (chart.getOption().grid3D[0].boxDepth || 100) / height * width
},
series: [{
type: 'bar3D',
shading: 'lambert',
barSize: 0.8,
silent: true,
itemStyle: {
color: createColorMapper(data)
},
data: dataProvider,
animationEasingUpdate: 'cubicInOut',
animationDurationUpdate: 2000
}]
});
console.timeEnd('update');
}
img.onload = function () {
var width = canvas.width = img.width / 2;
var height = canvas.height = img.height / 2;
ctx.drawImage(img, 0, 0, width, height);
var imgData = ctx.getImageData(0, 0, width, height);
updateData(imgData.data, width, height);
new StageControl([
function () {
},
function () {
chart.setOption({
grid3D: {
boxWidth: 200 / img.height * img.width,
boxDepth: 200
}
});
},
function () {
chart.setOption({
grid3D: {
viewControl: {
distance: 100,
alpha: 10,
beta: 30
},
boxHeight: 20
}
});
},
function () {
config.scale = 0.5;
updateData(imgData.data, width, height);
},
function () {
chart.setOption({
grid3D: {
environment: '../texture/starfield.jpg',
postEffect: {
enable: true,
bloom: {
enable: true
},
depthOfField: {
enable: true,
quality: 'high',
focalRange: 50,
fstop: 5
}
}
}
});
}
]);
};
img.src = sampleUrl;
window.onresize = chart.resize;
</script>
</body>
</html>