feat: initialize mini program map engine
This commit is contained in:
329
miniprogram/engine/renderer/webglTileRenderer.ts
Normal file
329
miniprogram/engine/renderer/webglTileRenderer.ts
Normal file
@@ -0,0 +1,329 @@
|
||||
import { rotateScreenPoint, type ScreenPoint } from '../camera/camera'
|
||||
import { type TileStore, type TileStoreEntry } from '../tile/tileStore'
|
||||
import { TileLayer } from '../layer/tileLayer'
|
||||
import { buildCamera, type MapScene } from './mapRenderer'
|
||||
|
||||
interface TextureRecord {
|
||||
key: string
|
||||
texture: any
|
||||
}
|
||||
|
||||
function createShader(gl: any, type: number, source: string): any {
|
||||
const shader = gl.createShader(type)
|
||||
if (!shader) {
|
||||
throw new Error('WebGL shader 创建失败')
|
||||
}
|
||||
|
||||
gl.shaderSource(shader, source)
|
||||
gl.compileShader(shader)
|
||||
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
||||
const message = gl.getShaderInfoLog(shader) || 'unknown shader error'
|
||||
gl.deleteShader(shader)
|
||||
throw new Error(message)
|
||||
}
|
||||
|
||||
return shader
|
||||
}
|
||||
|
||||
function createProgram(gl: any, vertexSource: string, fragmentSource: string): any {
|
||||
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource)
|
||||
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource)
|
||||
const program = gl.createProgram()
|
||||
if (!program) {
|
||||
throw new Error('WebGL program 创建失败')
|
||||
}
|
||||
|
||||
gl.attachShader(program, vertexShader)
|
||||
gl.attachShader(program, fragmentShader)
|
||||
gl.linkProgram(program)
|
||||
gl.deleteShader(vertexShader)
|
||||
gl.deleteShader(fragmentShader)
|
||||
|
||||
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
||||
const message = gl.getProgramInfoLog(program) || 'unknown program error'
|
||||
gl.deleteProgram(program)
|
||||
throw new Error(message)
|
||||
}
|
||||
|
||||
return program
|
||||
}
|
||||
|
||||
export class WebGLTileRenderer {
|
||||
canvas: any
|
||||
gl: any
|
||||
tileLayer: TileLayer
|
||||
tileStore: TileStore
|
||||
dpr: number
|
||||
program: any
|
||||
positionBuffer: any
|
||||
texCoordBuffer: any
|
||||
positionLocation: number
|
||||
texCoordLocation: number
|
||||
textureCache: Map<string, TextureRecord>
|
||||
|
||||
constructor(tileLayer: TileLayer, tileStore: TileStore) {
|
||||
this.canvas = null
|
||||
this.gl = null
|
||||
this.tileLayer = tileLayer
|
||||
this.tileStore = tileStore
|
||||
this.dpr = 1
|
||||
this.program = null
|
||||
this.positionBuffer = null
|
||||
this.texCoordBuffer = null
|
||||
this.positionLocation = -1
|
||||
this.texCoordLocation = -1
|
||||
this.textureCache = new Map<string, TextureRecord>()
|
||||
}
|
||||
|
||||
attachCanvas(canvasNode: any, width: number, height: number, dpr: number): void {
|
||||
this.canvas = canvasNode
|
||||
this.dpr = dpr || 1
|
||||
canvasNode.width = Math.max(1, Math.floor(width * this.dpr))
|
||||
canvasNode.height = Math.max(1, Math.floor(height * this.dpr))
|
||||
|
||||
const gl = canvasNode.getContext('webgl') || canvasNode.getContext('experimental-webgl')
|
||||
if (!gl) {
|
||||
throw new Error('当前环境不支持 WebGL')
|
||||
}
|
||||
|
||||
this.gl = gl
|
||||
this.program = createProgram(
|
||||
gl,
|
||||
'attribute vec2 a_position; attribute vec2 a_texCoord; varying vec2 v_texCoord; void main() { gl_Position = vec4(a_position, 0.0, 1.0); v_texCoord = a_texCoord; }',
|
||||
'precision mediump float; varying vec2 v_texCoord; uniform sampler2D u_texture; void main() { gl_FragColor = texture2D(u_texture, v_texCoord); }',
|
||||
)
|
||||
this.positionBuffer = gl.createBuffer()
|
||||
this.texCoordBuffer = gl.createBuffer()
|
||||
this.positionLocation = gl.getAttribLocation(this.program, 'a_position')
|
||||
this.texCoordLocation = gl.getAttribLocation(this.program, 'a_texCoord')
|
||||
|
||||
gl.viewport(0, 0, canvasNode.width, canvasNode.height)
|
||||
gl.disable(gl.DEPTH_TEST)
|
||||
gl.enable(gl.BLEND)
|
||||
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
|
||||
|
||||
this.tileStore.attachCanvas(canvasNode)
|
||||
}
|
||||
|
||||
destroy(): void {
|
||||
if (this.gl) {
|
||||
this.textureCache.forEach((record) => {
|
||||
this.gl && this.gl.deleteTexture(record.texture)
|
||||
})
|
||||
if (this.program) {
|
||||
this.gl.deleteProgram(this.program)
|
||||
}
|
||||
if (this.positionBuffer) {
|
||||
this.gl.deleteBuffer(this.positionBuffer)
|
||||
}
|
||||
if (this.texCoordBuffer) {
|
||||
this.gl.deleteBuffer(this.texCoordBuffer)
|
||||
}
|
||||
}
|
||||
|
||||
this.textureCache.clear()
|
||||
this.program = null
|
||||
this.positionBuffer = null
|
||||
this.texCoordBuffer = null
|
||||
this.gl = null
|
||||
this.canvas = null
|
||||
}
|
||||
|
||||
render(scene: MapScene): void {
|
||||
if (!this.gl || !this.program || !this.positionBuffer || !this.texCoordBuffer) {
|
||||
return
|
||||
}
|
||||
|
||||
const gl = this.gl
|
||||
const camera = buildCamera(scene)
|
||||
const tiles = this.tileLayer.prepareTiles(scene, camera, this.tileStore)
|
||||
|
||||
gl.viewport(0, 0, this.canvas.width, this.canvas.height)
|
||||
gl.clearColor(0.8588, 0.9333, 0.8314, 1)
|
||||
gl.clear(gl.COLOR_BUFFER_BIT)
|
||||
gl.useProgram(this.program)
|
||||
|
||||
for (const tile of tiles) {
|
||||
const readyEntry = this.tileStore.getEntry(tile.url)
|
||||
|
||||
if (readyEntry && readyEntry.status === 'ready' && readyEntry.image) {
|
||||
this.drawEntry(readyEntry, tile.url, 0, 0, readyEntry.image.width || 256, readyEntry.image.height || 256, tile.leftPx, tile.topPx, tile.sizePx, tile.sizePx, scene)
|
||||
this.tileLayer.lastReadyTileCount += 1
|
||||
continue
|
||||
}
|
||||
|
||||
const parentFallback = this.tileStore.getParentFallbackSlice(tile, scene)
|
||||
if (parentFallback) {
|
||||
this.drawEntry(
|
||||
parentFallback.entry,
|
||||
tile.url + '|parent',
|
||||
parentFallback.sourceX,
|
||||
parentFallback.sourceY,
|
||||
parentFallback.sourceWidth,
|
||||
parentFallback.sourceHeight,
|
||||
tile.leftPx,
|
||||
tile.topPx,
|
||||
tile.sizePx,
|
||||
tile.sizePx,
|
||||
scene,
|
||||
)
|
||||
}
|
||||
|
||||
const childFallback = this.tileStore.getChildFallback(tile, scene)
|
||||
if (!childFallback) {
|
||||
continue
|
||||
}
|
||||
|
||||
const cellWidth = tile.sizePx / childFallback.division
|
||||
const cellHeight = tile.sizePx / childFallback.division
|
||||
for (const child of childFallback.children) {
|
||||
this.drawEntry(
|
||||
child.entry,
|
||||
tile.url + '|child|' + child.offsetX + '|' + child.offsetY,
|
||||
0,
|
||||
0,
|
||||
child.entry.image.width || 256,
|
||||
child.entry.image.height || 256,
|
||||
tile.leftPx + child.offsetX * cellWidth,
|
||||
tile.topPx + child.offsetY * cellHeight,
|
||||
cellWidth,
|
||||
cellHeight,
|
||||
scene,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
drawEntry(
|
||||
entry: TileStoreEntry,
|
||||
cacheKey: string,
|
||||
sourceX: number,
|
||||
sourceY: number,
|
||||
sourceWidth: number,
|
||||
sourceHeight: number,
|
||||
drawLeft: number,
|
||||
drawTop: number,
|
||||
drawWidth: number,
|
||||
drawHeight: number,
|
||||
scene: MapScene,
|
||||
): void {
|
||||
if (!this.gl || !entry.image) {
|
||||
return
|
||||
}
|
||||
|
||||
const texture = this.getTexture(cacheKey, entry)
|
||||
if (!texture) {
|
||||
return
|
||||
}
|
||||
|
||||
const gl = this.gl
|
||||
const imageWidth = entry.image.width || 256
|
||||
const imageHeight = entry.image.height || 256
|
||||
const texLeft = sourceX / imageWidth
|
||||
const texTop = sourceY / imageHeight
|
||||
const texRight = (sourceX + sourceWidth) / imageWidth
|
||||
const texBottom = (sourceY + sourceHeight) / imageHeight
|
||||
|
||||
const topLeft = this.transformToClip(drawLeft, drawTop, scene)
|
||||
const topRight = this.transformToClip(drawLeft + drawWidth, drawTop, scene)
|
||||
const bottomLeft = this.transformToClip(drawLeft, drawTop + drawHeight, scene)
|
||||
const bottomRight = this.transformToClip(drawLeft + drawWidth, drawTop + drawHeight, scene)
|
||||
|
||||
const positions = new Float32Array([
|
||||
topLeft.x, topLeft.y,
|
||||
topRight.x, topRight.y,
|
||||
bottomLeft.x, bottomLeft.y,
|
||||
bottomLeft.x, bottomLeft.y,
|
||||
topRight.x, topRight.y,
|
||||
bottomRight.x, bottomRight.y,
|
||||
])
|
||||
const texCoords = new Float32Array([
|
||||
texLeft, texTop,
|
||||
texRight, texTop,
|
||||
texLeft, texBottom,
|
||||
texLeft, texBottom,
|
||||
texRight, texTop,
|
||||
texRight, texBottom,
|
||||
])
|
||||
|
||||
gl.bindTexture(gl.TEXTURE_2D, texture.texture)
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer)
|
||||
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STREAM_DRAW)
|
||||
gl.enableVertexAttribArray(this.positionLocation)
|
||||
gl.vertexAttribPointer(this.positionLocation, 2, gl.FLOAT, false, 0, 0)
|
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, this.texCoordBuffer)
|
||||
gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STREAM_DRAW)
|
||||
gl.enableVertexAttribArray(this.texCoordLocation)
|
||||
gl.vertexAttribPointer(this.texCoordLocation, 2, gl.FLOAT, false, 0, 0)
|
||||
|
||||
gl.drawArrays(gl.TRIANGLES, 0, 6)
|
||||
}
|
||||
|
||||
getTexture(cacheKey: string, entry: TileStoreEntry): TextureRecord | null {
|
||||
if (!this.gl || !entry.image) {
|
||||
return null
|
||||
}
|
||||
|
||||
const key = cacheKey + '|' + entry.sourcePath
|
||||
const existing = this.textureCache.get(key)
|
||||
if (existing) {
|
||||
return existing
|
||||
}
|
||||
|
||||
const texture = this.gl.createTexture()
|
||||
if (!texture) {
|
||||
return null
|
||||
}
|
||||
|
||||
this.gl.bindTexture(this.gl.TEXTURE_2D, texture)
|
||||
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE)
|
||||
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE)
|
||||
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR)
|
||||
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR)
|
||||
this.gl.pixelStorei(this.gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1)
|
||||
this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, entry.image)
|
||||
|
||||
const record = { key, texture }
|
||||
this.textureCache.set(key, record)
|
||||
return record
|
||||
}
|
||||
|
||||
transformToClip(x: number, y: number, scene: MapScene): ScreenPoint {
|
||||
const rotated = rotateScreenPoint(
|
||||
{ x, y },
|
||||
scene.viewportWidth / 2,
|
||||
scene.viewportHeight / 2,
|
||||
scene.rotationRad || 0,
|
||||
)
|
||||
const translated = {
|
||||
x: rotated.x + scene.translateX,
|
||||
y: rotated.y + scene.translateY,
|
||||
}
|
||||
const previewed = this.applyPreview(translated.x, translated.y, scene)
|
||||
|
||||
return {
|
||||
x: this.toClipX(previewed.x, scene.viewportWidth),
|
||||
y: this.toClipY(previewed.y, scene.viewportHeight),
|
||||
}
|
||||
}
|
||||
|
||||
applyPreview(x: number, y: number, scene: MapScene): { x: number; y: number } {
|
||||
const scale = scene.previewScale || 1
|
||||
const originX = scene.previewOriginX || scene.viewportWidth / 2
|
||||
const originY = scene.previewOriginY || scene.viewportHeight / 2
|
||||
|
||||
return {
|
||||
x: originX + (x - originX) * scale,
|
||||
y: originY + (y - originY) * scale,
|
||||
}
|
||||
}
|
||||
|
||||
toClipX(x: number, width: number): number {
|
||||
return x / width * 2 - 1
|
||||
}
|
||||
|
||||
toClipY(y: number, height: number): number {
|
||||
return 1 - y / height * 2
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user