bytev-charts
Version:
基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;
242 lines (216 loc) • 10.6 kB
JavaScript
import _Object$create from "@babel/runtime-corejs2/core-js/object/create";
import "core-js/modules/es.array.iterator.js";
import "core-js/modules/es.array-buffer.slice.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/es.typed-array.uint8-array.js";
import "core-js/modules/es.typed-array.copy-within.js";
import "core-js/modules/es.typed-array.every.js";
import "core-js/modules/es.typed-array.fill.js";
import "core-js/modules/es.typed-array.filter.js";
import "core-js/modules/es.typed-array.find.js";
import "core-js/modules/es.typed-array.find-index.js";
import "core-js/modules/es.typed-array.for-each.js";
import "core-js/modules/es.typed-array.includes.js";
import "core-js/modules/es.typed-array.index-of.js";
import "core-js/modules/es.typed-array.iterator.js";
import "core-js/modules/es.typed-array.join.js";
import "core-js/modules/es.typed-array.last-index-of.js";
import "core-js/modules/es.typed-array.map.js";
import "core-js/modules/es.typed-array.reduce.js";
import "core-js/modules/es.typed-array.reduce-right.js";
import "core-js/modules/es.typed-array.reverse.js";
import "core-js/modules/es.typed-array.set.js";
import "core-js/modules/es.typed-array.slice.js";
import "core-js/modules/es.typed-array.some.js";
import "core-js/modules/es.typed-array.sort.js";
import "core-js/modules/es.typed-array.subarray.js";
import "core-js/modules/es.typed-array.to-locale-string.js";
import "core-js/modules/es.typed-array.to-string.js";
import "core-js/modules/es.array.join.js";
import "core-js/modules/es.array.map.js";
import "core-js/modules/es.typed-array.float32-array.js";
import { AdditiveBlending, Box2, BufferGeometry, ClampToEdgeWrapping, Color, DataTexture, InterleavedBuffer, InterleavedBufferAttribute, Mesh, MeshBasicMaterial, NearestFilter, RGBFormat, RawShaderMaterial, Vector2, Vector3, Vector4 } from "../../../build/three.module.js";
var Lensflare = function Lensflare() {
Mesh.call(this, Lensflare.Geometry, new MeshBasicMaterial({
opacity: 0,
transparent: true
}));
this.type = 'Lensflare';
this.frustumCulled = false;
this.renderOrder = Infinity; //
var positionScreen = new Vector3();
var positionView = new Vector3(); // textures
var tempMap = new DataTexture(new Uint8Array(16 * 16 * 3), 16, 16, RGBFormat);
tempMap.minFilter = NearestFilter;
tempMap.magFilter = NearestFilter;
tempMap.wrapS = ClampToEdgeWrapping;
tempMap.wrapT = ClampToEdgeWrapping;
var occlusionMap = new DataTexture(new Uint8Array(16 * 16 * 3), 16, 16, RGBFormat);
occlusionMap.minFilter = NearestFilter;
occlusionMap.magFilter = NearestFilter;
occlusionMap.wrapS = ClampToEdgeWrapping;
occlusionMap.wrapT = ClampToEdgeWrapping; // material
var geometry = Lensflare.Geometry;
var material1a = new RawShaderMaterial({
uniforms: {
'scale': {
value: null
},
'screenPosition': {
value: null
}
},
vertexShader: ['precision highp float;', 'uniform vec3 screenPosition;', 'uniform vec2 scale;', 'attribute vec3 position;', 'void main() {', ' gl_Position = vec4( position.xy * scale + screenPosition.xy, screenPosition.z, 1.0 );', '}'].join('\n'),
fragmentShader: ['precision highp float;', 'void main() {', ' gl_FragColor = vec4( 1.0, 0.0, 1.0, 1.0 );', '}'].join('\n'),
depthTest: true,
depthWrite: false,
transparent: false
});
var material1b = new RawShaderMaterial({
uniforms: {
'map': {
value: tempMap
},
'scale': {
value: null
},
'screenPosition': {
value: null
}
},
vertexShader: ['precision highp float;', 'uniform vec3 screenPosition;', 'uniform vec2 scale;', 'attribute vec3 position;', 'attribute vec2 uv;', 'varying vec2 vUV;', 'void main() {', ' vUV = uv;', ' gl_Position = vec4( position.xy * scale + screenPosition.xy, screenPosition.z, 1.0 );', '}'].join('\n'),
fragmentShader: ['precision highp float;', 'uniform sampler2D map;', 'varying vec2 vUV;', 'void main() {', ' gl_FragColor = texture2D( map, vUV );', '}'].join('\n'),
depthTest: false,
depthWrite: false,
transparent: false
}); // the following object is used for occlusionMap generation
var mesh1 = new Mesh(geometry, material1a); //
var elements = [];
var shader = LensflareElement.Shader;
var material2 = new RawShaderMaterial({
uniforms: {
'map': {
value: null
},
'occlusionMap': {
value: occlusionMap
},
'color': {
value: new Color(0xffffff)
},
'scale': {
value: new Vector2()
},
'screenPosition': {
value: new Vector3()
}
},
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader,
blending: AdditiveBlending,
transparent: true,
depthWrite: false
});
var mesh2 = new Mesh(geometry, material2);
this.addElement = function (element) {
elements.push(element);
}; //
var scale = new Vector2();
var screenPositionPixels = new Vector2();
var validArea = new Box2();
var viewport = new Vector4();
this.onBeforeRender = function (renderer, scene, camera) {
renderer.getCurrentViewport(viewport);
var invAspect = viewport.w / viewport.z;
var halfViewportWidth = viewport.z / 2.0;
var halfViewportHeight = viewport.w / 2.0;
var size = 16 / viewport.w;
scale.set(size * invAspect, size);
validArea.min.set(viewport.x, viewport.y);
validArea.max.set(viewport.x + (viewport.z - 16), viewport.y + (viewport.w - 16)); // calculate position in screen space
positionView.setFromMatrixPosition(this.matrixWorld);
positionView.applyMatrix4(camera.matrixWorldInverse);
if (positionView.z > 0) return; // lensflare is behind the camera
positionScreen.copy(positionView).applyMatrix4(camera.projectionMatrix); // horizontal and vertical coordinate of the lower left corner of the pixels to copy
screenPositionPixels.x = viewport.x + positionScreen.x * halfViewportWidth + halfViewportWidth - 8;
screenPositionPixels.y = viewport.y + positionScreen.y * halfViewportHeight + halfViewportHeight - 8; // screen cull
if (validArea.containsPoint(screenPositionPixels)) {
// save current RGB to temp texture
renderer.copyFramebufferToTexture(screenPositionPixels, tempMap); // render pink quad
var uniforms = material1a.uniforms;
uniforms["scale"].value = scale;
uniforms["screenPosition"].value = positionScreen;
renderer.renderBufferDirect(camera, null, geometry, material1a, mesh1, null); // copy result to occlusionMap
renderer.copyFramebufferToTexture(screenPositionPixels, occlusionMap); // restore graphics
var uniforms = material1b.uniforms;
uniforms["scale"].value = scale;
uniforms["screenPosition"].value = positionScreen;
renderer.renderBufferDirect(camera, null, geometry, material1b, mesh1, null); // render elements
var vecX = -positionScreen.x * 2;
var vecY = -positionScreen.y * 2;
for (var i = 0, l = elements.length; i < l; i++) {
var element = elements[i];
var uniforms = material2.uniforms;
uniforms["color"].value.copy(element.color);
uniforms["map"].value = element.texture;
uniforms["screenPosition"].value.x = positionScreen.x + vecX * element.distance;
uniforms["screenPosition"].value.y = positionScreen.y + vecY * element.distance;
var size = element.size / viewport.w;
var invAspect = viewport.w / viewport.z;
uniforms["scale"].value.set(size * invAspect, size);
material2.uniformsNeedUpdate = true;
renderer.renderBufferDirect(camera, null, geometry, material2, mesh2, null);
}
}
};
this.dispose = function () {
material1a.dispose();
material1b.dispose();
material2.dispose();
tempMap.dispose();
occlusionMap.dispose();
for (var i = 0, l = elements.length; i < l; i++) {
elements[i].texture.dispose();
}
};
};
Lensflare.prototype = _Object$create(Mesh.prototype);
Lensflare.prototype.constructor = Lensflare;
Lensflare.prototype.isLensflare = true; //
var LensflareElement = function LensflareElement(texture, size, distance, color) {
this.texture = texture;
this.size = size || 1;
this.distance = distance || 0;
this.color = color || new Color(0xffffff);
};
LensflareElement.Shader = {
uniforms: {
'map': {
value: null
},
'occlusionMap': {
value: null
},
'color': {
value: null
},
'scale': {
value: null
},
'screenPosition': {
value: null
}
},
vertexShader: ['precision highp float;', 'uniform vec3 screenPosition;', 'uniform vec2 scale;', 'uniform sampler2D occlusionMap;', 'attribute vec3 position;', 'attribute vec2 uv;', 'varying vec2 vUV;', 'varying float vVisibility;', 'void main() {', ' vUV = uv;', ' vec2 pos = position.xy;', ' vec4 visibility = texture2D( occlusionMap, vec2( 0.1, 0.1 ) );', ' visibility += texture2D( occlusionMap, vec2( 0.5, 0.1 ) );', ' visibility += texture2D( occlusionMap, vec2( 0.9, 0.1 ) );', ' visibility += texture2D( occlusionMap, vec2( 0.9, 0.5 ) );', ' visibility += texture2D( occlusionMap, vec2( 0.9, 0.9 ) );', ' visibility += texture2D( occlusionMap, vec2( 0.5, 0.9 ) );', ' visibility += texture2D( occlusionMap, vec2( 0.1, 0.9 ) );', ' visibility += texture2D( occlusionMap, vec2( 0.1, 0.5 ) );', ' visibility += texture2D( occlusionMap, vec2( 0.5, 0.5 ) );', ' vVisibility = visibility.r / 9.0;', ' vVisibility *= 1.0 - visibility.g / 9.0;', ' vVisibility *= visibility.b / 9.0;', ' gl_Position = vec4( ( pos * scale + screenPosition.xy ).xy, screenPosition.z, 1.0 );', '}'].join('\n'),
fragmentShader: ['precision highp float;', 'uniform sampler2D map;', 'uniform vec3 color;', 'varying vec2 vUV;', 'varying float vVisibility;', 'void main() {', ' vec4 texture = texture2D( map, vUV );', ' texture.a *= vVisibility;', ' gl_FragColor = texture;', ' gl_FragColor.rgb *= color;', '}'].join('\n')
};
Lensflare.Geometry = function () {
var geometry = new BufferGeometry();
var float32Array = new Float32Array([-1, -1, 0, 0, 0, 1, -1, 0, 1, 0, 1, 1, 0, 1, 1, -1, 1, 0, 0, 1]);
var interleavedBuffer = new InterleavedBuffer(float32Array, 5);
geometry.setIndex([0, 1, 2, 0, 2, 3]);
geometry.setAttribute('position', new InterleavedBufferAttribute(interleavedBuffer, 3, 0, false));
geometry.setAttribute('uv', new InterleavedBufferAttribute(interleavedBuffer, 2, 3, false));
return geometry;
}();
export { Lensflare, LensflareElement };