echarts-gl
Version:
Extension pack of ECharts providing 3D plots and globe visualization
359 lines (302 loc) • 13.1 kB
JavaScript
import echarts from 'echarts/lib/echarts';
import graphicGL from '../../util/graphicGL';
import retrieve from '../../util/retrieve';
import ViewGL from '../../core/ViewGL';
import VectorFieldParticleSurface from './VectorFieldParticleSurface';
// TODO 百度地图不是 linear 的
echarts.extendChartView({
type: 'flowGL',
__ecgl__: true,
init: function (ecModel, api) {
this.viewGL = new ViewGL('orthographic');
this.groupGL = new graphicGL.Node();
this.viewGL.add(this.groupGL);
this._particleSurface = new VectorFieldParticleSurface();
var planeMesh = new graphicGL.Mesh({
geometry: new graphicGL.PlaneGeometry(),
material: new graphicGL.Material({
shader: new graphicGL.Shader({
vertex: graphicGL.Shader.source('ecgl.color.vertex'),
fragment: graphicGL.Shader.source('ecgl.color.fragment')
}),
// Must enable blending and multiply alpha.
// Or premultipliedAlpha will let the alpha useless.
transparent: true
})
});
planeMesh.material.enableTexture('diffuseMap');
this.groupGL.add(planeMesh);
this._planeMesh = planeMesh;
},
render: function (seriesModel, ecModel, api) {
var particleSurface = this._particleSurface;
// Set particleType before set others.
particleSurface.setParticleType(seriesModel.get('particleType'));
particleSurface.setSupersampling(seriesModel.get('supersampling'));
this._updateData(seriesModel, api);
this._updateCamera(api.getWidth(), api.getHeight(), api.getDevicePixelRatio());
var particleDensity = retrieve.firstNotNull(seriesModel.get('particleDensity'), 128);
particleSurface.setParticleDensity(particleDensity, particleDensity);
var planeMesh = this._planeMesh;
var time = +(new Date());
var self = this;
var firstFrame = true;
planeMesh.__percent = 0;
planeMesh.stopAnimation();
planeMesh.animate('', { loop: true })
.when(100000, {
__percent: 1
})
.during(function () {
var timeNow = + (new Date());
var dTime = Math.min(timeNow - time, 20);
time = time + dTime;
if (self._renderer) {
particleSurface.update(self._renderer, api, dTime / 1000, firstFrame);
planeMesh.material.set('diffuseMap', particleSurface.getSurfaceTexture());
// planeMesh.material.set('diffuseMap', self._particleSurface.vectorFieldTexture);
}
firstFrame = false;
})
.start();
var itemStyleModel = seriesModel.getModel('itemStyle');
var color = graphicGL.parseColor(itemStyleModel.get('color'));
color[3] *= retrieve.firstNotNull(itemStyleModel.get('opacity'), 1);
planeMesh.material.set('color', color);
particleSurface.setColorTextureImage(seriesModel.get('colorTexture'), api);
particleSurface.setParticleSize(seriesModel.get('particleSize'));
particleSurface.particleSpeedScaling = seriesModel.get('particleSpeed');
particleSurface.motionBlurFactor = 1.0 - Math.pow(0.1, seriesModel.get('particleTrail'));
},
updateTransform: function (seriesModel, ecModel, api) {
this._updateData(seriesModel, api);
},
afterRender: function (globeModel, ecModel, api, layerGL) {
var renderer = layerGL.renderer;
this._renderer = renderer;
},
_updateData: function (seriesModel, api) {
var coordSys = seriesModel.coordinateSystem;
var dims = coordSys.dimensions.map(function (coordDim) {
return seriesModel.coordDimToDataDim(coordDim)[0];
});
var data = seriesModel.getData();
var xExtent = data.getDataExtent(dims[0]);
var yExtent = data.getDataExtent(dims[1]);
var gridWidth = seriesModel.get('gridWidth');
var gridHeight = seriesModel.get('gridHeight');
if (gridWidth == null || gridWidth === 'auto') {
// TODO not accurate.
var aspect = (xExtent[1] - xExtent[0]) / (yExtent[1] - yExtent[0]);
gridWidth = Math.round(Math.sqrt(aspect * data.count()));
}
if (gridHeight == null || gridHeight === 'auto') {
gridHeight = Math.ceil(data.count() / gridWidth);
}
var vectorFieldTexture = this._particleSurface.vectorFieldTexture;
// Half Float needs Uint16Array
var pixels = vectorFieldTexture.pixels;
if (!pixels || pixels.length !== gridHeight * gridWidth * 4) {
pixels = vectorFieldTexture.pixels = new Float32Array(gridWidth * gridHeight * 4);
}
else {
for (var i = 0; i < pixels.length; i++) {
pixels[i] = 0;
}
}
var maxMag = 0;
var minMag = Infinity;
var points = new Float32Array(data.count() * 2);
var offset = 0;
var bbox = [[Infinity, Infinity], [-Infinity, -Infinity]];
data.each([dims[0], dims[1], 'vx', 'vy'], function (x, y, vx, vy) {
var pt = coordSys.dataToPoint([x, y]);
points[offset++] = pt[0];
points[offset++] = pt[1];
bbox[0][0] = Math.min(pt[0], bbox[0][0]);
bbox[0][1] = Math.min(pt[1], bbox[0][1]);
bbox[1][0] = Math.max(pt[0], bbox[1][0]);
bbox[1][1] = Math.max(pt[1], bbox[1][1]);
var mag = Math.sqrt(vx * vx + vy * vy);
maxMag = Math.max(maxMag, mag);
minMag = Math.min(minMag, mag);
});
data.each(['vx', 'vy'], function (vx, vy, i) {
var xPix = Math.round((points[i * 2] - bbox[0][0]) / (bbox[1][0] - bbox[0][0]) * (gridWidth - 1));
var yPix = gridHeight - 1 - Math.round((points[i * 2 + 1] - bbox[0][1]) / (bbox[1][1] - bbox[0][1]) * (gridHeight - 1));
var idx = (yPix * gridWidth + xPix) * 4;
pixels[idx] = (vx / maxMag * 0.5 + 0.5);
pixels[idx + 1] = (vy / maxMag * 0.5 + 0.5);
pixels[idx + 3] = 1;
});
vectorFieldTexture.width = gridWidth;
vectorFieldTexture.height = gridHeight;
if (seriesModel.get('coordinateSystem') === 'bmap') {
this._fillEmptyPixels(vectorFieldTexture);
}
vectorFieldTexture.dirty();
this._updatePlanePosition(bbox[0], bbox[1], seriesModel,api);
this._updateGradientTexture(data.getVisual('visualMeta'), [minMag, maxMag]);
},
// PENDING Use grid mesh ? or delaunay triangulation?
_fillEmptyPixels: function (texture) {
var pixels = texture.pixels;
var width = texture.width;
var height = texture.height;
function fetchPixel(x, y, rg) {
x = Math.max(Math.min(x, width - 1), 0);
y = Math.max(Math.min(y, height - 1), 0);
var idx = (y * (width - 1) + x) * 4;
if (pixels[idx + 3] === 0) {
return false;
}
rg[0] = pixels[idx];
rg[1] = pixels[idx + 1];
return true;
}
function addPixel(a, b, out) {
out[0] = a[0] + b[0];
out[1] = a[1] + b[1];
}
var center = [], left = [], right = [], top = [], bottom = [];
var weight = 0;
for (var y = 0; y < height; y++) {
for (var x = 0; x < width; x++) {
var idx = (y * (width - 1) + x) * 4;
if (pixels[idx + 3] === 0) {
weight = center[0] = center[1] = 0;
if (fetchPixel(x - 1, y, left)) {
weight++; addPixel(left, center, center);
}
if (fetchPixel(x + 1, y, right)) {
weight++; addPixel(right, center, center);
}
if (fetchPixel(x, y - 1, top)) {
weight++; addPixel(top, center, center);
}
if (fetchPixel(x, y + 1, bottom)) {
weight++; addPixel(bottom, center, center);
}
center[0] /= weight;
center[1] /= weight;
// PENDING If overwrite. bilinear interpolation.
pixels[idx] = center[0];
pixels[idx + 1] = center[1];
}
pixels[idx + 3] = 1;
}
}
},
_updateGradientTexture: function (visualMeta, magExtent) {
if (!visualMeta || !visualMeta.length) {
this._particleSurface.setGradientTexture(null);
return;
}
// TODO Different dimensions
this._gradientTexture = this._gradientTexture || new graphicGL.Texture2D({
image: document.createElement('canvas')
});
var gradientTexture = this._gradientTexture;
var canvas = gradientTexture.image;
canvas.width = 200;
canvas.height = 1;
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0.5, canvas.width, 0.5);
visualMeta[0].stops.forEach(function (stop) {
var offset;
if (magExtent[1] === magExtent[0]) {
offset = 0;
}
else {
offset = stop.value / magExtent[1];
offset = Math.min(Math.max(offset, 0), 1);
}
gradient.addColorStop(offset, stop.color);
});
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
gradientTexture.dirty();
this._particleSurface.setGradientTexture(this._gradientTexture);
},
_updatePlanePosition: function (leftTop, rightBottom, seriesModel, api) {
var limitedResult = this._limitInViewportAndFullFill(leftTop, rightBottom, seriesModel, api);
leftTop = limitedResult.leftTop;
rightBottom = limitedResult.rightBottom;
this._particleSurface.setRegion(limitedResult.region);
this._planeMesh.position.set(
(leftTop[0] + rightBottom[0]) / 2,
api.getHeight() - (leftTop[1] + rightBottom[1]) / 2,
0
);
var width = rightBottom[0] - leftTop[0];
var height = rightBottom[1] - leftTop[1];
this._planeMesh.scale.set(width / 2, height / 2, 1);
this._particleSurface.resize(
Math.max(Math.min(width, 2048), 1),
Math.max(Math.min(height, 2048), 1)
);
if (this._renderer) {
this._particleSurface.clearFrame(this._renderer);
}
},
_limitInViewportAndFullFill: function (leftTop, rightBottom, seriesModel, api) {
var newLeftTop = [
Math.max(leftTop[0], 0),
Math.max(leftTop[1], 0)
];
var newRightBottom = [
Math.min(rightBottom[0], api.getWidth()),
Math.min(rightBottom[1], api.getHeight())
];
// Tiliing in lng orientation.
if (seriesModel.get('coordinateSystem') === 'bmap') {
var lngRange = seriesModel.getData().getDataExtent(seriesModel.coordDimToDataDim('lng')[0]);
// PENDING, consider grid density
var isContinuous = Math.floor(lngRange[1] - lngRange[0]) >= 359;
if (isContinuous) {
if (newLeftTop[0] > 0) {
newLeftTop[0] = 0;
}
if (newRightBottom[0] < api.getWidth()) {
newRightBottom[0] = api.getWidth();
}
}
}
var width = rightBottom[0] - leftTop[0];
var height = rightBottom[1] - leftTop[1];
var newWidth = newRightBottom[0] - newLeftTop[0];
var newHeight = newRightBottom[1] - newLeftTop[1];
var region = [
(newLeftTop[0] - leftTop[0]) / width,
1.0 - newHeight / height - (newLeftTop[1] - leftTop[1]) / height,
newWidth / width,
newHeight / height
];
return {
leftTop: newLeftTop,
rightBottom: newRightBottom,
region: region
};
},
_updateCamera: function (width, height, dpr) {
this.viewGL.setViewport(0, 0, width, height, dpr);
var camera = this.viewGL.camera;
// FIXME bottom can't be larger than top
camera.left = camera.bottom = 0;
camera.top = height;
camera.right = width;
camera.near = 0;
camera.far = 100;
camera.position.z = 10;
},
remove: function () {
this._planeMesh.stopAnimation();
this.groupGL.removeAll();
},
dispose: function () {
if (this._renderer) {
this._particleSurface.dispose(this._renderer);
}
this.groupGL.removeAll();
}
});