in packages/layers/flyline/src/FlyLine.ts [113:215]
init(timeline) {
if (!timeline) {
throw new Error('FlyLine::缺少必要参数 timeline')
}
this.timeline = timeline
// @TODO not safe
this.trackID = '' + Math.random() * 999999
// 飞行部分的点数 = 总点数 * 飞行比例
this.flySegments = Math.floor(this.props.lineSegments * this.props.flyPercent)
// 飞行总长度, 避免大量重复计算
this.flightLength = this.props.lineSegments + this.flySegments
this.flightLength_1 = this.flightLength - 1
this.flightLength_2 = this.flightLength - 2
// 着地时间
this.landingP = this.props.lineSegments / this.flightLength
this.useColors = !!this.props.useColors && !!this.props.colors && this.props.colors.length > 0
this.sampler = {
anisotropy: 8,
minFilter: 'LINEAR_MIPMAP_NEAREST',
}
// 优先使用image属性
if (this.props.image) {
this.props.texture = specifyTexture({
image: {
uri: this.props.image,
extensions: {
EXT_image: {
flipY: !!this.props.flipY,
},
},
},
sampler: this.sampler,
})
} else if (this.props.texture && this.props.texture.image && this.props.texture.image.uri) {
this.props.texture = specifyTexture({
image: this.props.texture.image,
sampler: this.sampler,
})
}
const glineConfig = {
level: this.props.level,
lineWidth: this.props.lineWidth,
pointSize: this.props.pointSize,
color: new Color(this.props.color),
opacity: this.props.opacity,
texture: this.props.useColors ? undefined : this.props.texture,
resolution: this.props.resolution,
usePerspective: this.props.usePerspective,
useColors: this.useColors,
dynamic: true,
u: !(this.props.texture === undefined),
}
this.updateColors(this.props.colors, glineConfig)
this.gline = this.props.gline || new GLine(glineConfig)
this.mesh = this.gline
this.mesh.name = 'FlyLine-' + this.trackID
this.matr = this.gline.material
this.matr.alphaMode = this.props.transparent ? 'BLEND' : 'OPAQUE'
// 缓冲池
// this.bufferLength = this.config.pool * this.config.segment;
// const posBuffers = new Float32Array(this.bufferLength * 3);
const posBuffers: Float32Array[] = []
for (let i = 0; i < this.props.pool; i++) {
const b = new Float32Array(this.flySegments * 3)
this.props.usePoint && b.fill(this.props.infinity)
posBuffers.push(b)
}
this.pointer = 0
this.gline.geometry.updateData({
positions: posBuffers,
colors: this.colorBuffer,
})
// 主动降帧率
this.frameCounting = 0
this.frameValid = true
this.timeline.addTrack({
startTime: this.timeline.currentTime,
duration: Infinity,
onUpdate: () => {
this.frameCounting++
if (this.frameCounting > this.props.frameDropping) {
this.frameValid = true
this.frameCounting = 0
} else {
this.frameValid = false
}
},
})
}