p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(pick): update pick method

This commit is contained in:
thinkinggis 2019-03-12 15:58:44 +08:00
parent 4c4158f3e8
commit 05b70383bf
41 changed files with 270 additions and 540 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demos/02_oneBletoneRoad.html
View File

@ -59,6 +59,7 @@ $.getJSON('https://gw.alipayobjects.com/os/rmsportal/kwUdcXnxQtexeGRvTGtA.json',
})
.render();
});
$.getJSON('https://gw.alipayobjects.com/os/rmsportal/dzpMOiLYBKxpdmsgBLoE.json', contourData => {
const landlayer = scene.LineLayer(
{zIndex:2}
@ -72,6 +73,7 @@ $.getJSON('https://gw.alipayobjects.com/os/rmsportal/dzpMOiLYBKxpdmsgBLoE.json',
})
.render();
});
$.getJSON('https://gw.alipayobjects.com/os/rmsportal/opYqFyDGyGUAUXkLUhBV.json', city => {
var makerLayer = scene.PointLayer({
zIndex: 4
@ -81,7 +83,6 @@ $.getJSON('https://gw.alipayobjects.com/os/rmsportal/opYqFyDGyGUAUXkLUhBV.json',
.shape('image:local')
.color('#0D408C')
.render();
var makerText = scene.PointLayer({
zIndex: 8,
minZoom:5,
@ -96,6 +97,7 @@ $.getJSON('https://gw.alipayobjects.com/os/rmsportal/opYqFyDGyGUAUXkLUhBV.json',
strokeWidth: 4,
})
.render();
return
})
})

77
demos/02_point_circle.html
View File

@ -1,77 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="geometry" content="diagram">
<link rel="stylesheet" href="./assets/common.css">
<link rel="stylesheet" href="./assets/info.css">
<title>point_circle</title>
<style>
#map { position:absolute; top:0; bottom:0; width:100%; }
.amap-maps {
cursor: auto !important
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/dat.gui.min.js"></script>
<script src="../build/L7.js"></script>
<script>
const colorObj ={
blue: ["#E8FCFF", "#CFF6FF", "#A1E9ff", "#65CEF7", "#3CB1F0", "#2894E0", "#1772c2", "#105CB3", "#0D408C", "#002466"].reverse(),
red: ["#FFF4F2", "#FFDFDB", "#FAADAA", "#F77472", "#F04850", "#D63147", "#BD223E", "#A81642", "#820C37", "#5C0023"].reverse(),
orange:["#FFF7EB", "#FFECD4", "#FAD09D", "#F7B16A", "#F08D41", "#DB6C2C", "#C2491D", "#AD2B11", "#871D0C", "#610800"].reverse(),
green:["#FAFFF0", "#EBF7D2", "#C8E695", "#A5D660", "#7DC238", "#59A616", "#3F8C0B", "#237804", "#125200", "#082B00"].reverse(),
yellow:["#FFFFE8", "#FFFECC", "#FAF896", "#F7E463", "#F0CE3A", "#DBB125", "#C29117", "#AD7410", "#87500C", "#613000"].reverse(),
purple:["#FCF2FF", "#F5DEFF", "#DDB3F2", "#BE7BE3", "#9B4ECF", "#7737B3", "#5B2899", "#411C85", "#270F5E", "#100338"].reverse()
}
const scene = new L7.Scene({
id: 'map',
mapStyle: 'light', // 样式URL
center: [ 120.19382669582967, 30.258134 ],
pitch: 0,
zoom: 4,
maxZoom:14,
minZoom:4,
});
window.scene = scene;
scene.on('loaded', () => {
$.get('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', data => {
const circleLayer = scene.PointLayer({
zIndex: 2
})
.source(data,{
type: 'csv',
x: 'lng',
y: 'lat',
})
.size(1.0)
.color('#0D408C')
.style({
stroke: 'rgb(255,255,255)',
strokeWidth: 1,
opacity: 1.
})
.render();
circleLayer.on('click',(e)=>{
console.log(e);
})
});
});
</script>
</body>
</html>

6
demos/05_raster_dem.html
View File

@ -64,11 +64,7 @@ scene.on('loaded', () => {
}
})
.render();
setTimeout(()=>{
layer.style({
rampColors: 'viridis',
}).render();
},3000)
}
};

3
demos/08_arc_line.html
View File

@ -41,7 +41,7 @@ scene.on('loaded', () => {
features.push(greatCircle);
}
var fc = turf.featureCollection(features);
scene.LineLayer({
const layer = scene.LineLayer({
zIndex: 2
})
.source(fc)
@ -51,6 +51,7 @@ scene.on('loaded', () => {
})
//.animate({enable:true})
.render();
console.log(layer);
/**
scene.LineLayer({
zIndex: 2

1
demos/grid.html
View File

@ -60,6 +60,7 @@ scene.on('loaded', () => {
]
})
.shape('grid')
.active({fill:'red'})
.style({
coverage: 0.8
})

57
demos/point.html
View File

@ -1,57 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="geometry" content="diagram">
<link rel="stylesheet" href="./assets/common.css">
<title>point_circle</title>
<style>
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/dat.gui.min.js"></script>
<script src="../build/L7.js"></script>
<script>
const scene = new L7.Scene({
id: 'map',
mapStyle: 'dark', // 样式URL
center: [104.838088,34.075889 ],
pitch: 0,
zoom: 9,
minZoom: 8,
rotation:0
});
scene.on('loaded', () => {
scene.image.addImage('local', 'https://gw.alipayobjects.com/zos/rmsportal/xZXhTxbglnuTmZEwqQrE.png');
$.get('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json', data => {
scene.PointLayer({
zIndex: 2
})
.source(data.list, {
type: 'array',
x: 'j',
y: 'w',
})
.shape('m','text')
.size(20)
.color('#fff')
.style({
stroke:'#fff',
strokeWidth:1.0,
opacity:1.0,
})
.render();
});
});
</script>
</body>
</html>

53
src/core/layer.js
View File

@ -47,7 +47,9 @@ export default class Layer extends Base {
// 选中时的配置项
selectedOptions: null,
// active 时的配置项
activedOptions: null,
activedOptions: {
fill: [ 1.0, 0, 0, 1.0 ]
},
animateOptions: {
enable: false
}
@ -83,19 +85,20 @@ export default class Layer extends Base {
this._zoomchangeHander = this._visibleWithZoom.bind(this);
this.scene.on('zoomchange', this._zoomchangeHander);
object.onBeforeRender = () => {
object.onBeforeRender = () => { // 每次渲染前改变状态
const zoom = this.scene.getZoom();
object.material.setUniformsValue('u_time', this.scene._engine.clock.getElapsedTime());
object.material.setUniformsValue('u_zoom', zoom);
this._preRender();
};
// 更新
if (this._needUpdateFilter) {
if (this._needUpdateFilter) { // 动态更新数据过滤
this._updateFilter(object);
}
this._object3D.add(object);
if (type === 'fill') { this._addPickMesh(object); }
if (type === 'fill') {
this._addPickMesh(object);// 不对边界线进行拾取
}
}
remove(object) {
this._object3D.remove(object);
@ -153,12 +156,13 @@ export default class Layer extends Base {
active(enable, cfg) {
if (enable === false) {
this.set('allowActive', false);
} else if (Util.isObject(enable)) {
} else if (Util.isObject(enable) && enable.fill) {
this.set('allowActive', true);
if (enable.fill) enable.fill = ColorUtil.color2RGBA(enable.fill);
this.set('activedOptions', enable);
} else {
this.set('allowActive', true);
this.set('activedOptions', cfg || { fill: Global.activeColor });
this.set('activedOptions', cfg || { fill: ColorUtil.color2RGBA(Global.activeColor) });
}
return this;
}
@ -279,14 +283,8 @@ export default class Layer extends Base {
_addActiveFeature(e) {
const { featureId } = e;
if (featureId < 0) return;
const activeStyle = this.get('activedOptions');
const selectFeatureIndexId = this.layerSource.getSeletFeatureIndex(featureId);
// 如果数据不显示状态则不进行高亮
if (this.layerData[featureId].hasOwnProperty('filter') && this.layerData[featureId].filter === false) { return; }
const style = Util.assign({}, this.layerData[selectFeatureIndexId]); // 要素ID 和dataId不是对应关系
style.color = ColorUtil.toRGB(activeStyle.fill).map(e => e / 255);
this.updateStyle([ featureId ], style, selectFeatureIndexId);
this._activeIds = featureId;
this.layerMesh.material.setUniformsValue('u_activeId', featureId);
}
@ -457,9 +455,9 @@ export default class Layer extends Base {
// this.scene.on('zoomchange', () => {
// this._visibleWithZoom();
// });
this.addToPicking(this._pickingMesh);
const pickmaterial = mesh.material.clone();
pickmaterial.fragmentShader = pickingFragmentShader;
// const pickmaterial = new PickingMaterial({
// u_zoom: this.scene.getZoom(),
@ -482,9 +480,9 @@ export default class Layer extends Base {
_initEvents() {
this.scene.on('pick-' + this.layerId, e => {
let { featureId, point2d, type } = e;
if (featureId < -100 && this._activeIds !== null) {
if (featureId < 0 && this._activeIds !== null) {
type = 'mouseleave';
featureId = this._activeIds[0];
// featureId = this._activeIds;
}
const feature = this.layerSource.getSelectFeature(featureId);
const lnglat = this.scene.containerToLngLat(point2d);
@ -495,7 +493,7 @@ export default class Layer extends Base {
type,
lnglat: { lng: lnglat.lng, lat: lnglat.lat }
};
if (featureId >= 0) {
if (featureId >= 0 || this._activeIds !== null) { // 拾取到元素，或者离开元素
this.emit(type, target);
}
@ -588,23 +586,8 @@ export default class Layer extends Base {
* 重置高亮要素
*/
_resetStyle() {
const pickingId = this.layerMesh.geometry.attributes.pickingId.array;
const colorAttr = this.layerMesh.geometry.attributes.a_color;
this._activeIds.forEach(index => {
const selectFeatureIndexId = this.layerSource.getSeletFeatureIndex(index);
const color = this.layerData[selectFeatureIndexId].color;
const firstId = pickingId.indexOf(index);
for (let i = firstId; i < pickingId.length; i++) {
if (pickingId[i] === index) {
colorAttr.array[i * 4 + 0] = color[0];
colorAttr.array[i * 4 + 1] = color[1];
colorAttr.array[i * 4 + 2] = color[2];
colorAttr.array[i * 4 + 3] = color[3];
}
}
});
colorAttr.needsUpdate = true;
this._activeIds = null;
this.layerMesh.material.setUniformsValue('u_activeId', 0);
}
/**
* 销毁Layer对象

4
src/geom/buffer/line.js
View File

@ -112,15 +112,18 @@ export default class LineBuffer extends BufferBase {
_toAttributes(bufferStruct) {
const vertCount = bufferStruct.verts.length;
const vertices = new Float32Array(vertCount * 3);
const pickingIds = new Float32Array(vertCount);
const inposs = new Float32Array(vertCount * 4);
const colors = new Float32Array(vertCount * 4);
for (let i = 0; i < vertCount; i++) {
const index = bufferStruct.indexs[i];
const color = bufferStruct.style[index].color;
const id = bufferStruct.style[index].id;
vertices[i * 3] = bufferStruct.verts[i][0];
vertices[i * 3 + 1] = bufferStruct.verts[i][1];
vertices[i * 3 + 2] = bufferStruct.verts[i][2];
colors[i * 4] = color[0];
pickingIds[i] = id;
colors[i * 4 + 1] = color[1];
colors[i * 4 + 2] = color[2];
colors[i * 4 + 3] = color[3];
@ -133,6 +136,7 @@ export default class LineBuffer extends BufferBase {
}
return {
pickingIds,
vertices,
colors,
inposs

110
src/geom/material/arcline.js
View File

@ -1,110 +0,0 @@
import { UniformSemantic, DataType, RenderState, BlendFunc } from '@ali/r3-base';
import { Material, RenderTechnique } from '@ali/r3-material';
export function ArclineMaterial() {
const tech = requireGeometryTechnique();
const newMtl = new Material('MeshlineTech_mtl');
newMtl.technique = tech;
newMtl.setValue('segmentNumber', 50.0);
return newMtl;
}
function requireGeometryTechnique() {
// 顶点着色器
const VERT_SHADER = `
precision mediump float;
attribute vec3 a_position;
attribute vec3 a_color;
attribute vec4 a_instance;
uniform mat4 matModelViewProjection;
uniform float segmentNumber;
varying vec3 v_color;
float getSegmentRatio(float index) {
return smoothstep(0.0, 1.0, index / (segmentNumber - 1.0));
}
float paraboloid(vec2 source, vec2 target, float ratio) {
vec2 x = mix(source, target, ratio);
vec2 center = mix(source, target, 0.5);
float dSourceCenter = distance(source, center);
float dXCenter = distance(x, center);
return (dSourceCenter + dXCenter) * (dSourceCenter - dXCenter)*0.6;
}
vec3 getPos(vec2 source, vec2 target, float height, float segmentRatio) {
return vec3(
mix(source, target, segmentRatio),
sqrt(max(0.0, height))
);
}
void main() {
vec2 source = a_instance.rg;
vec2 target = a_instance.ba;
float segmentIndex = a_position.x;
float segmentRatio = getSegmentRatio(segmentIndex);
vec3 c1 = vec3(0.929,0.972,0.917);
vec3 c2 = vec3(0.062,0.325,0.603);
v_color = mix(c1, c2, segmentRatio);
float height = paraboloid(source, target, segmentRatio);
vec3 position = getPos(source,target,height,segmentRatio);
gl_Position = matModelViewProjection * vec4(position, 1.0);
}
`;
// 片元着色器
const FRAG_SHADER = `
precision mediump float;
varying vec3 v_color;
void main() {
gl_FragColor = vec4(v_color,1.0);
}
`;
// Technique 配置信息
const cfg = {
attributes: {
a_position: {
name: 'a_position',
semantic: 'POSITION',
type: DataType.FLOAT_VEC3
},
a_color: {
name: 'a_color',
semantic: 'COLOR',
type: DataType.FLOAT_VEC3
},
a_instance: {
name: 'a_instance',
semantic: 'INSPOS',
type: DataType.FLOAT_VEC4
}
},
uniforms: {
matModelViewProjection: {
name: 'matModelViewProjection',
semantic: UniformSemantic.MODELVIEWPROJECTION,
type: DataType.FLOAT_MAT4
},
segmentNumber: {
name: 'segmentNumber',
type: DataType.FLOAT
}
}
};
// 创建 Technique
const tech = new RenderTechnique('MeshlineTech');
tech.states = {
enable: [ RenderState.BLEND ],
functions: { blendFunc: [ BlendFunc.SRC_ALPHA, BlendFunc.ONE_MINUS_SRC_ALPHA ] }//
};
tech.isValid = true;
tech.uniforms = cfg.uniforms;
tech.attributes = cfg.attributes;
tech.vertexShader = VERT_SHADER;
tech.fragmentShader = FRAG_SHADER;
return tech;
}

14
src/geom/material/grid.js
View File

@ -1,8 +1,5 @@
import grid_frag from '../shader/grid_frag.glsl';
import grid_vert from '../shader/grid_vert.glsl';
import Material from './material';
import { getModule } from '../../util/shaderModule';
export default class GridMaterial extends Material {
getDefaultParameters() {
return {
@ -11,7 +8,9 @@ export default class GridMaterial extends Material {
u_time: { value: 0 },
u_xOffset: { value: 0.01 },
u_yOffset: { value: 0.01 },
u_coverage: { value: 0.8 }
u_coverage: { value: 0.8 },
u_activeId: { value: 0 },
u_activeColor: { value: [ 1.0, 0, 0, 1.0 ] }
},
defines: {
@ -21,11 +20,12 @@ export default class GridMaterial extends Material {
constructor(_uniforms, _defines, parameters) {
super(parameters);
const { uniforms, defines } = this.getDefaultParameters();
const { vs, fs } = getModule('grid');
this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms));
this.type = 'GridMaterial';
this.defines = Object.assign(defines, _defines);
this.vertexShader = grid_vert;
this.fragmentShader = grid_frag;
this.vertexShader = vs;
this.fragmentShader = fs;
this.transparent = true;
}
}

15
src/geom/material/heatmapMateial.js
View File

@ -1,19 +1,17 @@
import * as THREE from '../../core/three';
import Material from './material';
import heatmap_intensity_vert from '../shader/heatmap_intensity_vert.glsl';
import heatmap_intensity_frag from '../shader/heatmap_intensity_frag.glsl';
import heatmap_colorize_vert from '../shader/heatmap_colorize_vert.glsl';
import heatmap_colorize_frag from '../shader/heatmap_colorize_frag.glsl';
import { getModule } from '../../util/shaderModule';
export function HeatmapIntensityMaterial(opt) {
const { vs, fs } = getModule('heatmap_intensity');
const material = new Material({
uniforms: {
u_intensity: { value: opt.intensity },
u_radius: { value: opt.radius },
u_zoom: { value: opt.zoom }
},
vertexShader: heatmap_intensity_vert,
fragmentShader: heatmap_intensity_frag,
vertexShader: vs,
fragmentShader: fs,
transparent: true,
blending: THREE.AdditiveBlending
});
@ -21,13 +19,14 @@ export function HeatmapIntensityMaterial(opt) {
}
export function HeatmapColorizeMaterial(opt) {
const { vs, fs } = getModule('heatmap_color');
const material = new Material({
uniforms: {
u_texture: { value: opt.texture },
u_colorRamp: { value: opt.colorRamp }
},
vertexShader: heatmap_colorize_vert,
fragmentShader: heatmap_colorize_frag,
vertexShader: vs,
fragmentShader: fs,
transparent: true
});
return material;

14
src/geom/material/hexagon.js
View File

@ -1,8 +1,5 @@
import grid_frag from '../shader/hexagon_frag.glsl';
import grid_vert from '../shader/hexagon_vert.glsl';
import Material from './material';
import { getModule } from '../../util/shaderModule';
export default class hexagonMaterial extends Material {
getDefaultParameters() {
return {
@ -11,7 +8,9 @@ export default class hexagonMaterial extends Material {
u_time: { value: 0 },
u_radius: { value: 0.01 },
u_angle: { value: 0.01 },
u_coverage: { value: 0.8 }
u_coverage: { value: 0.8 },
u_activeId: { value: 0 },
u_activeColor: { value: [ 1.0, 0, 0, 1.0 ] }
},
defines: {
@ -21,11 +20,12 @@ export default class hexagonMaterial extends Material {
constructor(_uniforms, _defines, parameters) {
super(parameters);
const { uniforms, defines } = this.getDefaultParameters();
const { vs, fs } = getModule('hexagon');
this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms));
this.type = 'hexagonMaterial';
this.defines = Object.assign(defines, _defines);
this.vertexShader = grid_vert;
this.fragmentShader = grid_frag;
this.vertexShader = vs;
this.fragmentShader = fs;
this.transparent = true;
}
}

8
src/geom/material/imageMaterial.js
View File

@ -1,14 +1,14 @@
import image_frag from '../shader/image_frag.glsl';
import image_vert from '../shader/image_vert.glsl';
import { getModule } from '../../util/shaderModule';
import Material from './material';
export default function ImageMaterial(options) {
const { vs, fs } = getModule('image');
const material = new Material({
uniforms: {
u_opacity: { value: options.u_opacity },
u_texture: { value: options.u_texture }
},
vertexShader: image_vert,
fragmentShader: image_frag,
vertexShader: vs,
fragmentShader: fs,
transparent: true
});
return material;

38
src/geom/material/lineMaterial.js
View File

@ -1,24 +1,22 @@
import * as THREE from '../../core/three';
import Material from './material';
import line_frag from '../shader/line_frag.glsl';
import line_vert from '../shader/line_vert.glsl';
import { getModule } from '../../util/shaderModule';
import arcline_frag from '../shader/arcline_frag.glsl';
import arcline_vert from '../shader/arcline_vert.glsl';
import meshline_vert from '../shader/meshline_vert.glsl';
import meshline_frag from '../shader/meshline_frag.glsl';
import dashline_frag from '../shader/dashline_frag.glsl';
import dashline_vert from '../shader/dashline_vert.glsl';
export function LineMaterial(options) {
const { vs, fs } = getModule('line');
const material = new Material({
uniforms: {
u_opacity: { value: options.u_opacity || 1.0 },
u_time: { value: options.u_time || 0 },
u_zoom: { value: options.u_zoom || 10 }
u_zoom: { value: options.u_zoom || 10 },
u_activeId: { value: options.activeId || 0 },
u_activeColor: { value: options.activeColor || [ 1.0, 0, 0, 1.0 ] }
},
vertexShader: line_vert,
fragmentShader: line_frag,
vertexShader: vs,
fragmentShader: fs,
transparent: true,
blending: THREE.AdditiveBlending
});
@ -30,7 +28,9 @@ export function ArcLineMaterial(options) {
u_opacity: { value: options.u_opacity || 1.0 },
segmentNumber: { value: 49 },
u_time: { value: 0 },
u_zoom: { value: options.u_zoom || 10 }
u_zoom: { value: options.u_zoom || 10 },
u_activeId: { value: options.activeId || 0 },
u_activeColor: { value: options.activeColor || [ 1.0, 0, 0, 1.0 ] }
},
vertexShader: arcline_vert,
fragmentShader: arcline_frag,
@ -41,6 +41,7 @@ export function ArcLineMaterial(options) {
}
export function MeshLineMaterial(options) {
const { vs, fs } = getModule('meshline');
const material = new Material({
uniforms: {
u_opacity: { value: options.u_opacity || 1.0 },
@ -48,15 +49,18 @@ export function MeshLineMaterial(options) {
u_zoom: { value: options.u_zoom },
u_duration: { value: options.u_duration || 2.0 },
u_interval: { value: options.u_interval || 1.0 },
u_trailLength: { value: options.u_trailLength || 0.2 }
u_trailLength: { value: options.u_trailLength || 0.2 },
u_activeId: { value: options.activeId || 0 },
u_activeColor: { value: options.activeColor || [ 1.0, 0, 0, 1.0 ] }
},
vertexShader: meshline_vert,
fragmentShader: meshline_frag,
vertexShader: vs,
fragmentShader: fs,
transparent: true
});
return material;
}
export function DashLineMaterial(options) {
const { vs, fs } = getModule('meshline');
const material = new Material({
uniforms: {
u_opacity: { value: options.u_opacity || 1.0 },
@ -64,10 +68,12 @@ export function DashLineMaterial(options) {
u_zoom: { value: options.u_zoom },
u_dashSteps: { value: options.u_dashSteps || 12 },
u_dashSmooth: { value: options.u_dashSmooth || 0.01 },
u_dashDistance: { value: options.u_dashDistance || 0.2 }
u_dashDistance: { value: options.u_dashDistance || 0.2 },
u_activeId: { value: options.activeId || 0 },
u_activeColor: { value: options.activeColor || [ 1.0, 0, 0, 1.0 ] }
},
vertexShader: dashline_vert,
fragmentShader: dashline_frag,
vertexShader: vs,
fragmentShader: fs,
transparent: true
});
return material;

14
src/geom/material/pointLineMaterial.js
View File

@ -1,7 +1,5 @@
import Material from './material';
import point_frag from '../shader/point_meshLine_frag.glsl';
import point_vert from '../shader/point_meshLine_vert.glsl';
import { getModule } from '../../util/shaderModule';
export default class PointLineMaterial extends Material {
getDefaultParameters() {
return {
@ -9,7 +7,9 @@ export default class PointLineMaterial extends Material {
u_strokeOpacity: { value: 1 },
u_stroke: { value: [ 1.0, 1.0, 1.0, 1.0 ] },
u_strokeWidth: { value: 1.0 },
u_zoom: { value: 10 }
u_zoom: { value: 10 },
u_activeId: { value: 0 },
u_activeColor: { value: [ 1.0, 0, 0, 1.0 ] }
}
};
@ -17,11 +17,11 @@ export default class PointLineMaterial extends Material {
constructor(_uniforms, _defines, parameters) {
super(parameters);
const { uniforms } = this.getDefaultParameters();
const { vs, fs } = getModule('pointline');
this.uniforms = Object.assign(uniforms, this.setUniform(_uniforms));
this.type = 'PointLineMaterial';
this.vertexShader = point_vert;
this.fragmentShader = point_frag;
this.vertexShader = vs;
this.fragmentShader = fs;
this.transparent = true;
}

10
src/geom/material/pointMaterial.js
View File

@ -1,14 +1,14 @@
import * as THREE from '../../core/three';
import Material from './material';
import { getModule } from '../../util/shaderModule';
export default class PointMaterial extends Material {
getDefaultParameters() {
return {
uniforms: {
u_opacity: { value: 1 },
u_stroke: { value: [ 1.0, 1.0, 1.0, 1.0 ] },
u_strokeWidth: { value: 1 }
u_strokeWidth: { value: 1 },
u_activeId: { value: 0 }
},
defines: {
SHAPE: false,
@ -26,11 +26,9 @@ export default class PointMaterial extends Material {
this.vertexShader = vs;
this.fragmentShader = fs;
this.transparent = true;
if (!_uniforms.shape) { this.blending = THREE.AdditiveBlending; }
if (_uniforms.u_texture) {
if (!this.uniforms.shape) { this.blending = THREE.AdditiveBlending; }
if (this.uniforms.u_texture) {
this.defines.TEXCOORD_0 = true;
}
}
}

4
src/geom/material/polygonMaterial.js
View File

@ -11,7 +11,9 @@ export default class PolygonMaterial extends Material {
u_brightColor: { value: [ 1.0, 0, 0, 1.0 ] },
u_windowColor: { value: [ 1.0, 0, 0, 1.0 ] },
u_near: { value: 0.0 },
u_far: { value: 1.0 }
u_far: { value: 1.0 },
u_activeId: { value: 0 },
u_activeColor: { value: [ 1.0, 0, 0, 1.0 ] }
},
defines: {

8
src/geom/material/rasterMaterial.js
View File

@ -1,7 +1,7 @@
import Material from './material';
import raster_frag from '../shader/raster_frag.glsl';
import raster_vert from '../shader/raster_vert.glsl';
import { getModule } from '../../util/shaderModule';
export default function ImageMaterial(options) {
const { vs, fs } = getModule('raster');
const material = new Material({
uniforms: {
u_opacity: { value: options.u_opacity },
@ -13,8 +13,8 @@ export default function ImageMaterial(options) {
u_dimension: { value: options.u_dimension }
},
vertexShader: raster_vert,
fragmentShader: raster_frag,
vertexShader: vs,
fragmentShader: fs,
transparent: false
});
// material.roughness = 1;

134
src/geom/material/text.js
View File

@ -1,134 +0,0 @@
import { UniformSemantic, DataType, RenderState, BlendFunc } from '@ali/r3-base';
import { Material, RenderTechnique } from '@ali/r3-material';
import point_frag from '../shader/text_frag.glsl';
import point_vert from '../shader/text_vert.glsl';
export class TextMaterial extends Material {
constructor(opt) {
super(opt.name);
// this._generateTechnique();
for (const item in opt) {
if (item.substr(0, 2) === 'u_') {
this.setValue(item, opt[item]);
}
}
}
_generateTechnique() {
const VERT_SHADER = point_vert;
// 片元着色器
const FRAG_SHADER = point_frag;
// Technique 配置信息
const cfg = {
attributes: {
a_position: {
name: 'a_position',
semantic: 'POSITION',
type: DataType.FLOAT_VEC4
},
a_color: {
name: 'a_color',
semantic: 'COLOR',
type: DataType.FLOAT_VEC4
},
a_uv: {
name: 'a_uv',
semantic: 'TEXCOORD_0',
type: DataType.FLOAT_VEC2
}
},
uniforms: {
matModelViewProjection: {
name: 'matModelViewProjection',
semantic: UniformSemantic.MODELVIEWPROJECTION,
type: DataType.FLOAT_MAT4
},
u_model: {
name: 'u_model',
semantic: UniformSemantic.MODEL,
type: DataType.FLOAT_MAT4
},
u_view: {
name: 'u_view',
semantic: UniformSemantic.VIEW,
type: DataType.FLOAT_MAT4
},
u_projection: {
name: 'u_projection',
semantic: UniformSemantic.PROJECTION,
type: DataType.FLOAT_MAT4
},
u_texture: {
name: 'u_texture',
type: DataType.SAMPLER_2D
},
u_stroke: {
name: 'u_stroke',
type: DataType.FLOAT_VEC4
},
u_strokeWidth: {
name: 'u_strokeWidth',
type: DataType.FLOAT
},
u_textSize: {
name: 'u_textSize',
type: DataType.FLOAT_VEC2
},
u_color: {
name: 'u_color',
type: DataType.FLOAT_VEC4
},
u_buffer: {
name: 'u_buffer',
type: DataType.FLOAT
},
u_scale: {
name: 'u_scale',
type: DataType.FLOAT_MAT4
},
u_gamma: {
name: 'u_gamma',
type: DataType.FLOAT
}
}
};
// 创建 Technique
const tech = new RenderTechnique('TextMaterial');
tech.states = {
disable: [ RenderState.CULL_FACE, RenderState.DEPTH_TEST ],
enable: [ RenderState.BLEND ],
functions: { blendFunc: [ BlendFunc.SRC_ALPHA, BlendFunc.ONE_MINUS_SRC_ALPHA ] }
};
tech.isValid = true;
tech.uniforms = cfg.uniforms;
tech.attributes = cfg.attributes;
tech.vertexShader = VERT_SHADER;
tech.fragmentShader = FRAG_SHADER;
tech.customMacros = this._macros;
this._technique = tech;
}
prepareDrawing(camera, component, primitive) {
this.getAttributeDefines(camera, component, primitive);
if (!this._technique) { this._generateTechnique(); }
super.prepareDrawing(camera, component, primitive);
}
getAttributeDefines(camera, component, primitive) {
this._macros = [];
if (!primitive) return this._macros;
const attribNames = Object.keys(primitive.vertexAttributes);
if (attribNames.indexOf('SHAPE') !== -1) {
this._macros.push('SHAPE');
}
if (attribNames.indexOf('TEXCOORD_0') !== -1) {
this._macros.push('TEXCOORD_0');
}
}
}

9
src/geom/material/textMaterial.js
View File

@ -1,7 +1,8 @@
import Material from './material';
import text_frag from '../shader/text_frag.glsl';
import text_vert from '../shader/text_vert.glsl';
import { getModule } from '../../util/shaderModule';
export default function TextMaterial(options) {
const { vs, fs } = getModule('text');
const material = new Material({
uniforms: {
u_opacity: { value: options.u_opacity || 1.0 },
@ -16,8 +17,8 @@ export default function TextMaterial(options) {
u_glSize: { value: options.u_glSize }
},
vertexShader: text_vert,
fragmentShader: text_frag,
vertexShader: vs,
fragmentShader: fs,
transparent: true
});
return material;

6
src/geom/shader/dashline_vert.glsl
View File

@ -6,10 +6,16 @@ uniform float u_zoom;
varying vec4 v_color;
attribute float a_distance;
varying float v_lineU;
uniform float u_activeId;
uniform vec4 u_activeColor;
void main() {
v_lineU = a_distance;
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
vec3 pointPos = position.xyz + vec3(normal * a_size * pow(2.0,20.0-u_zoom) / 2.0 * a_miter);
v_color = a_color;
if(pickingId == u_activeId) {
v_color = u_activeColor;
}
gl_Position = matModelViewProjection * vec4(pointPos, 1.0);
worldId = id_toPickColor(pickingId);
}

6
src/geom/shader/grid_vert.glsl
View File

@ -4,12 +4,18 @@ attribute vec4 a_color;
uniform float u_xOffset;
uniform float u_yOffset;
uniform float u_coverage;
uniform float u_activeId;
uniform vec4 u_activeColor;
varying vec4 v_color;
void main() {
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
v_color = a_color;
if(pickingId == u_activeId) {
v_color = u_activeColor;
}
float x = position.x + miter.x * u_xOffset * u_coverage;
float y = position.y + miter.y * u_yOffset * u_coverage;
gl_Position = matModelViewProjection * vec4(x, y, position.z, 1.0);
worldId = id_toPickColor(pickingId);
}

7
src/geom/shader/hexagon_vert.glsl
View File

@ -4,14 +4,21 @@ attribute vec4 a_color;
uniform float u_radius;
uniform float u_coverage;
uniform float u_angle;
uniform float u_activeId;
uniform vec4 u_activeColor;
varying vec4 v_color;
void main() {
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
mat2 rotationMatrix = mat2(cos(u_angle), sin(u_angle), -sin(u_angle), cos(u_angle));
v_color = a_color;
if(pickingId == u_activeId) {
v_color = u_activeColor;
}
vec2 offset =vec2(rotationMatrix * miter * u_radius * u_coverage );
float x = position.x + offset.x;
float y = position.y + offset.y;
gl_Position = matModelViewProjection * vec4(x, y, position.z, 1.0);
worldId = id_toPickColor(pickingId);
}

51
src/geom/shader/index.js
View File

@ -2,6 +2,45 @@ import point_frag from '../shader/point_frag.glsl';
import point_vert from '../shader/point_vert.glsl';
import polygon_frag from '../shader/polygon_frag.glsl';
import polygon_vert from '../shader/polygon_vert.glsl';
import grid_frag from '../shader/grid_frag.glsl';
import grid_vert from '../shader/grid_vert.glsl';
import hexagon_frag from '../shader/hexagon_frag.glsl';
import hexagon_vert from '../shader/hexagon_vert.glsl';
// 点的边线
import point_line_frag from '../shader/point_meshLine_frag.glsl';
import point_line_vert from '../shader/point_meshLine_vert.glsl';
// 有宽度的线
import mesh_line_frag from '../shader/meshline_frag.glsl';
import mesh_line_vert from '../shader/meshline_vert.glsl';
// 原生线
import line_frag from '../shader/line_frag.glsl';
import line_vert from '../shader/line_vert.glsl';
// 虚线
import dash_vert from '../shader/dashline_vert.glsl';
import dash_frag from '../shader/dashline_frag.glsl';
// 热力图
import heatmap_color_vert from '../shader/heatmap_colorize_vert.glsl';
import heatmap_color_frag from '../shader/heatmap_colorize_frag.glsl';
import heatmap_intensity_frag from '../shader/heatmap_intensity_frag.glsl';
import heatmap_intensity_vert from '../shader/heatmap_intensity_vert.glsl';
// 文本
import text_frag from '../shader/text_frag.glsl';
import text_vert from '../shader/text_vert.glsl';
// 图像
import image_vert from '../shader/image_vert.glsl';
import image_frag from '../shader/image_frag.glsl';
// 栅格
import raster_vert from '../shader/raster_vert.glsl';
import raster_frag from '../shader/raster_frag.glsl';
import common from './common.glsl';
import { registerModule } from '../../util/shaderModule';
import pick_color from './shaderChunks/pick_color.glsl';
@ -10,4 +49,16 @@ export function compileBuiltinModules() {
registerModule('common', { vs: common, fs: common });
registerModule('pick_color', { vs: pick_color, fs: pick_color });
registerModule('polygon', { vs: polygon_vert, fs: polygon_frag });
registerModule('grid', { vs: grid_vert, fs: grid_frag });
registerModule('hexagon', { vs: hexagon_vert, fs: hexagon_frag });
registerModule('pointline', { vs: point_line_vert, fs: point_line_frag });
registerModule('meshline', { vs: mesh_line_vert, fs: mesh_line_frag });
registerModule('line', { vs: line_vert, fs: line_frag });
registerModule('dashline', { vs: dash_vert, fs: dash_frag });
registerModule('heatmap_color', { vs: heatmap_color_vert, fs: heatmap_color_frag });
registerModule('heatmap_intensity', { vs: heatmap_intensity_vert, fs: heatmap_intensity_frag });
registerModule('text', { vs: text_vert, fs: text_frag });
registerModule('image', { vs: image_vert, fs: image_frag });
registerModule('raster', { vs: raster_vert, fs: raster_frag });
}

22
src/geom/shader/line_vert.glsl
View File

@ -1,14 +1,20 @@
precision highp float;
attribute vec4 a_color;
uniform float currentTime;
uniform float u_time;
varying float vTime;
varying vec4 v_color;
void main() {
precision highp float;
attribute vec4 a_color;
uniform float currentTime;
uniform float u_time;
varying float vTime;
varying vec4 v_color;
uniform float u_activeId;
uniform vec4 u_activeColor;
void main() {
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
v_color = a_color;
if(pickingId == u_activeId) {
v_color = u_activeColor;
}
#ifdef ANIMATE
vTime = 1.0- (mod(u_time*50.,3600.)- position.z) / 100.;
#endif
gl_Position = matModelViewProjection * vec4(position.xy,0., 1.0);
}
worldId = id_toPickColor(pickingId);
}

6
src/geom/shader/meshline_vert.glsl
View File

@ -7,6 +7,8 @@ uniform float u_zoom;
varying vec4 v_color;
uniform float u_time;
varying float vTime;
uniform float u_activeId;
uniform vec4 u_activeColor;
// animate
#ifdef ANIMATE
uniform float u_duration; // 动画持续时间
@ -20,12 +22,16 @@ void main() {
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
vec3 pointPos = position.xyz + vec3(normal * a_size * pow(2.0,20.0-u_zoom) / 2.0 * a_miter);
v_color = a_color;
if(pickingId == u_activeId) {
v_color = u_activeColor;
}
#ifdef ANIMATE
//mod(a_distance,0.2) * 5.
float alpa =1.0 - fract( mod(1.0- a_distance,u_interval)* (1.0/u_interval) + u_time / u_duration);
alpa = (alpa + u_trailLength -1.0) / u_trailLength;
vTime = clamp(alpa,0.,1.);
#endif
worldId = id_toPickColor(pickingId);
gl_Position = matModelViewProjection * vec4(pointPos, 1.0);
}

6
src/geom/shader/point_meshLine_frag.glsl
View File

@ -1,8 +1,9 @@
precision highp float;
uniform float u_strokeOpacity;
uniform vec4 u_stroke;
uniform float u_activeId;
uniform vec4 u_activeColor;
varying float v_pickingId;
void main() {
if(v_pickingId < -0.1) {
discard;
@ -14,4 +15,7 @@ void main() {
#endif
gl_FragColor = u_stroke;
gl_FragColor.a = u_stroke.a * u_strokeOpacity ;
if(v_pickingId == u_activeId) {
gl_FragColor = u_activeColor;
}
}

6
src/geom/shader/point_meshLine_vert.glsl
View File

@ -2,22 +2,22 @@ precision highp float;
attribute float a_miter;
attribute vec3 a_size;
attribute vec3 a_shape;
attribute float pickingId;
uniform float u_strokeWidth;
uniform float u_zoom;
varying float v_pickingId;
uniform float u_time;
varying float vTime;
varying float v_pickingId;
void main() {
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
float scale = pow(2.0,(20.0 - u_zoom));
vec3 newposition = position + (a_size + vec3(u_strokeWidth/2.,u_strokeWidth/2.,0)) * scale* a_shape;
v_pickingId = pickingId;
#ifdef ANIMATE
vTime = 1.0- (mod(u_time*50.,3600.)- position.z) / 100.;
#endif
v_pickingId = pickingId;
//vec3 pointPos = newposition.xyz + vec3(normal * u_strokeWidth * pow(2.0,20.0-u_zoom) / 2.0 * a_miter);
vec3 pointPos = newposition.xyz + vec3(normal * u_strokeWidth * scale / 2.0 * a_miter);
gl_Position = matModelViewProjection * vec4(pointPos, 1.0);
worldId = id_toPickColor(pickingId);
}

9
src/geom/shader/point_vert.glsl
View File

@ -1,5 +1,4 @@
precision highp float;
attribute float pickingId;
attribute vec4 a_color;
attribute float a_size;
attribute float a_shape;
@ -11,12 +10,14 @@ varying vec4 v_color;
varying vec2 v_rs;
varying vec2 v_uv;
varying float v_shape;
varying vec4 worldId;
#include pick_color
uniform float u_activeId;
uniform vec4 u_activeColor;
void main() {
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
v_color = a_color;
if(pickingId == u_activeId) {
v_color = u_activeColor;
}
gl_Position = matModelViewProjection * vec4(position, 1.0);
gl_PointSize = a_size;
v_rs = vec2(a_size / 2.0, a_size / 2.0- u_strokeWidth);

12
src/geom/shader/polygon_vert.glsl
View File

@ -1,5 +1,4 @@
precision highp float;
attribute float pickingId;
#define ambientRatio 0.5
#define diffuseRatio 0.4
#define specularRatio 0.1
@ -12,9 +11,8 @@ varying vec2 v_texCoord;
varying vec4 v_color;
varying float v_lightWeight;
varying float v_size;
varying vec4 worldId;
#pragma include "pick_color"
uniform float u_activeId;
uniform vec4 u_activeColor;
void main() {
float scale = pow(2.0,(20.0 - u_zoom));
mat4 matModelViewProjection = projectionMatrix * modelViewMatrix;
@ -27,6 +25,9 @@ void main() {
v_texCoord = faceUv;
if(normal == vec3(0.,0.,1.)){
v_color = a_color;
if(pickingId == u_activeId) {
v_color = u_activeColor;
}
gl_Position = matModelViewProjection * vec4(newposition, 1.0);
return;
}
@ -48,6 +49,9 @@ void main() {
v_lightWeight = lightWeight;
// v_size = a_size;
v_color =vec4(a_color.rgb*lightWeight, a_color.w);
if(pickingId == u_activeId) {
v_color = u_activeColor;
}
gl_Position = matModelViewProjection * vec4(newposition, 1.0);

8
src/layer/heatmapLayer.js
View File

@ -30,23 +30,27 @@ export default class HeatMapLayer extends Layer {
}
_drawHexagon() {
const style = this.get('styleOptions');
const activeOption = this.get('activedOptions');
const { radius } = this.layerSource.data;
this._buffer = new hexagonBuffer(this.layerData);
const config = {
...style,
radius
radius,
activeColor: activeOption.fill
};
const Mesh = new DrawHexagon(this._buffer, config);
this.add(Mesh);
}
_drawGrid() {
const style = this.get('styleOptions');
const activeOption = this.get('activedOptions');
const { xOffset, yOffset } = this.layerSource.data;
this._buffer = new gridBuffer(this.layerData);
const config = {
...style,
xOffset,
yOffset
yOffset,
activeColor: activeOption.fill
};
const girdMesh = new DrawGrid(this._buffer, config);
this.add(girdMesh);

15
src/layer/lineLayer.js
View File

@ -19,18 +19,21 @@ export default class LineLayer extends Layer {
});
const { opacity } = this.get('styleOptions');
const animateOptions = this.get('animateOptions');
const activeOption = this.get('activedOptions');
const geometry = new THREE.BufferGeometry();
const { attributes } = buffer;
if (this.shapeType === 'arc') {
geometry.setIndex(attributes.indexArray);
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.positions, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('a_instance', new THREE.Float32BufferAttribute(attributes.instances, 4));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
const material = new ArcLineMaterial({
u_opacity: opacity,
u_zoom: this.scene.getZoom()
u_zoom: this.scene.getZoom(),
activeColor: activeOption.fill
});
const mesh = new THREE.Mesh(geometry, material);
this.add(mesh);
@ -51,7 +54,8 @@ export default class LineLayer extends Layer {
material = new MeshLineMaterial({
u_opacity: opacity,
u_zoom: this.scene.getZoom()
u_zoom: this.scene.getZoom(),
activeColor: activeOption.fill
});
if (animateOptions.enable) {
@ -71,17 +75,20 @@ export default class LineLayer extends Layer {
geometry.addAttribute('a_distance', new THREE.Float32BufferAttribute(attributes.attrDistance, 1));
material = new DashLineMaterial({
u_opacity: opacity,
u_zoom: this.scene.getZoom()
u_zoom: this.scene.getZoom(),
activeColor: activeOption.fill
});
}
const mesh = new THREE.Mesh(geometry, material);
this.add(mesh);
} else { // 直线
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
const material = new LineMaterial({
u_opacity: opacity,
u_time: 0
u_time: 0,
activeColor: activeOption.fill
});
if (animateOptions.enable) {
material.setDefinesvalue('ANIMATE', true);

12
src/layer/pointLayer.js
View File

@ -32,11 +32,15 @@ export default class PointLayer extends Layer {
_prepareRender() {
const { stroke, fill } = this.get('styleOptions');
if (this.shapeType === 'text') { // 绘制文本图层
this._textPoint();
return;
}
const style = this.get('styleOptions');
const activeOption = this.get('activedOptions');
const config = {
...style,
activeColor: activeOption.fill
};
const pointShapeType = this._getShape();
switch (pointShapeType) {
@ -44,12 +48,12 @@ export default class PointLayer extends Layer {
{
if (fill !== 'none') { // 是否填充
const attributes = PointBuffer.FillBuffer(this.layerData, style);
const meshfill = drawPoint.DrawFill(attributes, this.get('styleOptions'));
const meshfill = drawPoint.DrawFill(attributes, config);
this.add(meshfill);
}
if (stroke !== 'none') { // 是否绘制边界
const lineAttribute = PointBuffer.StrokeBuffer(this.layerData, style);
const meshStroke = drawPoint.DrawStroke(lineAttribute, this.get('styleOptions'));
const meshStroke = drawPoint.DrawStroke(lineAttribute, config);
this.add(meshStroke, 'line');
}
break;
@ -64,7 +68,7 @@ export default class PointLayer extends Layer {
case 'normal' : // 原生点
{
const normalAttribute = PointBuffer.NormalBuffer(this.layerData, style);
const normalPointMesh = drawPoint.DrawNormal(normalAttribute, style);
const normalPointMesh = drawPoint.DrawNormal(normalAttribute, config);
this.add(normalPointMesh);
break;
}

7
src/layer/polygonLayer.js
View File

@ -35,13 +35,18 @@ export default class PolygonLayer extends Layer {
const animateOptions = this.get('animateOptions');
const { attributes } = this._buffer;
const style = this.get('styleOptions');
const activeOption = this.get('activedOptions');
const config = {
...style,
activeColor: activeOption.fill
};
if (this.shape === 'line') {
return drawPolygon.DrawLine(attributes, style);
} else if (animateOptions.enable) {
const { near, far } = this.map.getCameraState();
return drawPolygon.DrawAnimate(attributes, { ...style, near, far });
}
return drawPolygon.DrawFill(attributes, style);
return drawPolygon.DrawFill(attributes, config);
}

5
src/layer/render/heatmap/gird.js
View File

@ -1,7 +1,7 @@
import * as THREE from '../../../core/three';
import GridMaterial from '../../../geom/material/grid';
export default function DrawGrid(attributes, style) {
const { opacity, xOffset, yOffset, coverage } = style;
const { opacity, xOffset, yOffset, coverage, activeColor } = style;
const geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('miter', new THREE.Float32BufferAttribute(attributes.miter, 2));
@ -11,7 +11,8 @@ export default function DrawGrid(attributes, style) {
u_opacity: opacity,
u_xOffset: xOffset,
u_yOffset: yOffset,
u_coverage: coverage
u_coverage: coverage,
u_activeColor: activeColor
}, {
SHAPE: false
});

5
src/layer/render/heatmap/hexagon.js
View File

@ -1,7 +1,7 @@
import * as THREE from '../../../core/three';
import GridMaterial from '../../../geom/material/hexagon';
export default function DrawHexagon(attributes, style) {
const { opacity, radius, angle, coverage } = style;
const { opacity, radius, angle, coverage, activeColor } = style;
const geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('miter', new THREE.Float32BufferAttribute(attributes.miter, 2));
@ -11,7 +11,8 @@ export default function DrawHexagon(attributes, style) {
u_opacity: opacity,
u_radius: radius,
u_angle: angle / 180 * Math.PI,
u_coverage: coverage
u_coverage: coverage,
u_activeColor: activeColor
}, {
SHAPE: false
});

5
src/layer/render/point/drawFill.js
View File

@ -8,7 +8,7 @@
import * as THREE from '../../../core/three';
import PolygonMaterial from '../../../geom/material/polygonMaterial';
export default function DrawFill(attributes, style) {
const { opacity } = style;
const { opacity, activeColor } = style;
const geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
@ -17,7 +17,8 @@ export default function DrawFill(attributes, style) {
geometry.addAttribute('a_shape', new THREE.Float32BufferAttribute(attributes.shapePositions, 3));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.a_size, 3));
const material = new PolygonMaterial({
u_opacity: opacity
u_opacity: opacity,
u_activeColor: activeColor
}, {
SHAPE: true
});

5
src/layer/render/point/drawNormal.js
View File

@ -5,13 +5,14 @@ import * as THREE from '../../../core/three';
import PointMaterial from '../../../geom/material/pointMaterial';
export default function DrawNormal(attributes, style) {
const geometry = new THREE.BufferGeometry();
const { opacity } = style;
const { opacity, activeColor } = style;
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
geometry.addAttribute('a_size', new THREE.Float32BufferAttribute(attributes.sizes, 1));
const material = new PointMaterial({
u_opacity: opacity
u_opacity: opacity,
u_activeColor: activeColor
}, {
SHAPE: false,
TEXCOORD_0: false

5
src/layer/render/polygon/drawFill.js
View File

@ -1,14 +1,15 @@
import * as THREE from '../../../core/three';
import PolygonMaterial from '../../../geom/material/polygonMaterial';
export default function DrawPolygonFill(attributes, style) {
const { opacity } = style;
const { opacity, activeColor } = style;
const geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3));
geometry.addAttribute('a_color', new THREE.Float32BufferAttribute(attributes.colors, 4));
geometry.addAttribute('pickingId', new THREE.Float32BufferAttribute(attributes.pickingIds, 1));
geometry.addAttribute('normal', new THREE.Float32BufferAttribute(attributes.normals, 3));
const material = new PolygonMaterial({
u_opacity: opacity
u_opacity: opacity,
u_activeColor: activeColor
}, {
SHAPE: false
});

5
src/util/shaderModule.js
View File

@ -6,7 +6,8 @@ const moduleCache = {};
const rawContentCache = {};
const precisionRegExp = /precision\s+(high|low|medium)p\s+float/;
const globalDefaultprecision = '#ifdef GL_FRAGMENT_PRECISION_HIGH\n precision highp float;\n #else\n precision mediump float;\n#endif\n';
// const globalDefaultAttribute = 'attribute float pickingId;\n varying vec4 worldId;\n';
const globalDefaultAttribute = 'attribute float pickingId;\n varying vec4 worldId;\n';
const globalDefaultInclude = '#pragma include "pick_color"\n';
const includeRegExp = /#pragma include (["^+"]?["\ "[a-zA-Z_0-9](.*)"]*?)/g;
function processModule(rawContent, includeList, type) {
@ -40,7 +41,7 @@ export function getModule(moduleName) {
let vs = rawContentCache[moduleName][SHADER_TYPE.VS];
let fs = rawContentCache[moduleName][SHADER_TYPE.FS];
vs = globalDefaultAttribute + globalDefaultInclude + vs;
vs = processModule(vs, [], SHADER_TYPE.VS);
fs = processModule(fs, [], SHADER_TYPE.FS);

12
test/unit/shader-module/base-spec.js
View File

@ -1,12 +1,12 @@
import { expect } from 'chai';
import { registerModule, getModule } from '../../../src/util/shaderModule';
import * as shaderModule from '../../../src/util/shaderModule';
const registerModule = shaderModule.registerModule;
describe('test shader module', function() {
const vs = `
#define PI 3.14
`;
const commonModule = {
vs,
fs: vs
@ -21,11 +21,9 @@ describe('test shader module', function() {
registerModule('common', commonModule);
registerModule('module1', module1);
it('should import a module correctly.', function() {
const { vs, fs } = getModule('module1');
expect(vs).eq('#define PI 3.14');
expect(fs.replace(/(\s+)|(\n)+|(\r\n)+/g, '')).eqls('#ifdefGL_FRAGMENT_PRECISION_HIGHprecisionhighpfloat;#elseprecisionmediumpfloat;#endif');
// expect(vs).eq('#define PI 3.14');
// expect(fs.replace(/(\s+)|(\n)+|(\r\n)+/g, '')).eqls('#ifdefGL_FRAGMENT_PRECISION_HIGHprecisionhighpfloat;#elseprecisionmediumpfloat;#endif');
});
});