Skip to content

Commit

Permalink
feat: render first backgrounds early
Browse files Browse the repository at this point in the history
  • Loading branch information
@vanaigr
vanaigr committed Dec 15, 2024
1 parent 8427907 commit 9258fe6
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 78 deletions.
2 changes: 1 addition & 1 deletion src/data-processed/backgrounds.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"backgroundColor":1445381,"backgroundResolution":512,"backgroundSize":100,"backgroundStart":[-1757,-1141],"backgroundCount":[35,20],"backgroundLength":286}
{"color":1445381,"resolution":512,"size":100,"startPos":[-1757,-1141]}
10 changes: 4 additions & 6 deletions src/process/compress_backgrounds.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,11 +141,9 @@ for(let i = 0; i < filenames.length; i++) {
}

const bgInfo = {}
bgInfo.backgroundColor = bgInt
bgInfo.backgroundResolution = 512
bgInfo.backgroundSize = B.backgroundSize
bgInfo.backgroundStart = B.backgroundStart
bgInfo.backgroundCount = B.backgroundCount
bgInfo.backgroundLength = B.backgrounds.length
bgInfo.color = bgInt
bgInfo.resolution = 512
bgInfo.size = B.backgroundSize
bgInfo.startPos = B.backgroundStart

fs.writeFileSync(dstInfo, JSON.stringify(bgInfo))
143 changes: 73 additions & 70 deletions src/renderBackground.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
import * as bkg2 from '$/backgrounds.json'
import * as B from '$/backgrounds.json'
import { loadShader, checkProg } from './render_util.js'
import backgroundsUrl from '$/backgrounds.pak'

const actualResolution = bkg2.backgroundResolution
const texturesC = bkg2.backgroundLength

// THIS LANGUAGE... IMAGINE NOT BEING ABLE TO PRINT A NUMBER WITH DECIMAL POINT
// NO, toFixed() ALSO ROUNDS THE NUMBER OR ADDS A MILLION ZEROS
// NO, toString() PRINTS INTEGERS WITHOUT DECIMAL POINT
const bgSize = bkg2.backgroundSize + '.0'
const bgSize = B.size + '.0'

const vsSource = `#version 300 es
precision highp float;
Expand Down Expand Up @@ -110,13 +107,11 @@ function convToRGB565(gl, inputC) {
return res
}

function updateBackground(context, imageData, chunks) {
function updateBackground(context, index, chunks) {
const rd = context.backgrounds
if(rd?.loadImages !== true) return

const imgData = rd.images[imageData.i]
imgData.x = imageData.x
imgData.y = imageData.y
const imgData = rd.images[index]

const blob = new Blob(chunks, { type: 'image/png' })
const url = URL.createObjectURL(blob)
Expand All @@ -128,7 +123,7 @@ function updateBackground(context, imageData, chunks) {
// Technically can be the last texture, so this will make
// mimpaps not appear. But only until the user moves the screen
// or something else triggers a rerender, so shouldn't be a big deal
context.backgrounds.changed.push(imageData.i)
rd.changed.push(index)
imgData.done = true
URL.revokeObjectURL(url)
console.log('err')
Expand All @@ -139,23 +134,32 @@ function updateBackground(context, imageData, chunks) {
gl.bindTexture(gl.TEXTURE_2D_ARRAY, rd.bgTextures)
gl.texSubImage3D(
gl.TEXTURE_2D_ARRAY, 0,
0, 0, imageData.i,
actualResolution, actualResolution, 1,
0, 0, index,
B.resolution, B.resolution, 1,
gl.RGB, gl.UNSIGNED_BYTE,
img
)

rd.changed.push(imageData.i)
rd.changed.push(index)
imgData.ok = true
imgData.done = true

context.requestRender(2, { timeout: 1000 })
if(index < 2) {
context.requestRender(1)
}
else {
context.requestRender(2, { timeout: 1000 })
}
URL.revokeObjectURL(url)
})

}

async function downloadBackgrounds(context) {
const gl = context.gl
const rd = context.backgrounds
if(!rd) return

const resp = await fetch(backgroundsUrl)
const body = resp.body
const reader = body.getReader()
Expand Down Expand Up @@ -207,7 +211,6 @@ async function downloadBackgrounds(context) {
const header = combineChunks(await read(headerLen), headerLen)

var index = 0

// duplicate from load.js
function parseCompressedInt() {
var res = 0
Expand All @@ -220,38 +223,46 @@ async function downloadBackgrounds(context) {
return res
}

const len = parseCompressedInt()
const imageDatas = []
for(let i = 0; i < len; i++) {
const texturesC = parseCompressedInt()

gl.bindTexture(gl.TEXTURE_2D_ARRAY, rd.bgTextures)
gl.texStorage3D(
gl.TEXTURE_2D_ARRAY, __backgrounds_mipmap_levels,
gl.RGB565, B.resolution, B.resolution,
texturesC
)

gl.bindBuffer(gl.ARRAY_BUFFER, rd.buf)
gl.bufferData(gl.ARRAY_BUFFER, texturesC * 12, gl.DYNAMIC_DRAW)

const coordsDv = new DataView(new ArrayBuffer(texturesC * 12))
rd.dataView = coordsDv

const imageDatas = Array(texturesC)
rd.images = imageDatas

for(let i = 0; i < texturesC; i++) {
const size = parseCompressedInt()
const xi = parseCompressedInt()
const yi = parseCompressedInt()
const x = bkg2.backgroundStart[0] + xi * bkg2.backgroundSize
const y = bkg2.backgroundStart[1] + yi * bkg2.backgroundSize
imageDatas.push({ size, i, x, y })

const x = B.startPos[0] + xi * B.size
const y = B.startPos[1] + yi * B.size
imageDatas[i] = { ok: false, done: false, size, x, y }
}

for(let i = 0; i < imageDatas.length; i++) {
for(let i = 0; i < texturesC; i++) {
const id = imageDatas[i]
var chunks = tryRead(id.size)
if(chunks == null) chunks = await read(id.size)
updateBackground(context, id, chunks)
updateBackground(context, i, chunks)
}
}

export function setup(context) {
if(__backgrounds) {
downloadBackgrounds(context).catch(e => {
console.error('Error processing backgrounds', e)
})
}
else {
console.warn('skipping backgrounds')
}

const { gl } = context

const renderData = { changed: [], curCount: 0 }
const renderData = { changed: [], curCount: 0, doneCount: 0 }
context.backgrounds = renderData

const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource)
Expand All @@ -273,28 +284,15 @@ export function setup(context) {
renderData.bgTextures = bgTextures

gl.bindTexture(gl.TEXTURE_2D_ARRAY, bgTextures)
gl.texStorage3D(
gl.TEXTURE_2D_ARRAY, __backgrounds_mipmap_levels,
gl.RGB565, actualResolution, actualResolution,
texturesC
)

gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.NEAREST) // for now
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)

const images = Array(texturesC)
renderData.images = images
renderData.images = null

const buf = gl.createBuffer()
renderData.buf = buf
gl.bindBuffer(gl.ARRAY_BUFFER, buf)
gl.bufferData(gl.ARRAY_BUFFER, texturesC * 12, gl.DYNAMIC_DRAW)

const coords = new ArrayBuffer(texturesC * 12)
const coordsDv = new DataView(coords)
renderData.dataView = coordsDv

const vao = gl.createVertexArray()
renderData.vao = vao
Expand All @@ -317,9 +315,7 @@ export function setup(context) {
const texturesU = gl.getUniformLocation(prog, 'textures')
gl.uniform1i(texturesU, 0)

// by the way, how is this color the correct one?
// I palletized the images, hasn't it change?
const c = bkg2.backgroundColor
const c = B.color
const inputData = new Uint8Array(3)
inputData[0] = (c ) & 0xff
inputData[1] = (c >> 8) & 0xff
Expand All @@ -329,12 +325,17 @@ export function setup(context) {

renderData.ok = true

for(let i = 0; i < texturesC; i++) {
images[i] = { ok: false, done: false }
}

renderData.loadImages = true
renderData.showImages = true

if(__backgrounds) {
downloadBackgrounds(context).catch(e => {
console.error('Error processing backgrounds', e)
})
}
else {
console.warn('skipping backgrounds')
}
}

export function setFiltered(context, showImages) {
Expand All @@ -359,30 +360,32 @@ export function render(context) {
if(rd.changed.length != 0) {
const dv = rd.dataView

var coordsCount = 0
var done = true
for(let i = 0; i < texturesC; i++) {
const it = rd.images[i]
done = done & it.done
const ch = rd.changed
const im = rd.images
let addedC = 0
for(let i = 0; i < ch.length; i++) {
const index = ch[i]
const it = im[index]
if(!it.ok) continue
dv.setFloat32(coordsCount * 12 , it.x, true)
dv.setFloat32(coordsCount * 12 + 4, it.y, true)
dv.setUint32 (coordsCount * 12 + 8, i, true)
coordsCount++
dv.setFloat32(addedC * 12 , it.x, true)
dv.setFloat32(addedC * 12 + 4, it.y, true)
dv.setUint32 (addedC * 12 + 8, index, true)
addedC++
}

if(done && !rd.mimpaps) {
gl.bindBuffer(gl.ARRAY_BUFFER, rd.buf)
gl.bufferSubData(gl.ARRAY_BUFFER, rd.curCount * 12, dv, 0, addedC * 12)

rd.curCount += addedC
rd.doneCount += ch.length
ch.length = 0

if(rd.doneCount === rd.images.length && !rd.mimpaps) {
rd.mimpaps = true
gl.bindTexture(gl.TEXTURE_2D_ARRAY, rd.bgTextures)
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR)
gl.generateMipmap(gl.TEXTURE_2D_ARRAY)
}

gl.bindBuffer(gl.ARRAY_BUFFER, rd.buf)
gl.bufferSubData(gl.ARRAY_BUFFER, 0, dv, 0, coordsCount * 12)

rd.curCount = coordsCount
rd.changed.length = 0
}

if(rd.showImages) {
Expand Down
1 change: 0 additions & 1 deletion vite.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,6 @@ export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
'$/markers.png': srcPath('./data-raw/markers/markers.png'),
'$/backgrounds.pak': srcPath('./data-processed/backgrounds.pak'),

'$/backgrounds.js': srcPath('./data-raw/backgrounds/backgrounds.js'),
'$/backgrounds.json': srcPath('./data-processed/backgrounds.json'),
'$/markers-meta.json': srcPath('./data-processed/markers-meta.json'),
'$/markers.json': srcPath('./data-processed/markers.json'),
Expand Down

0 comments on commit 9258fe6

Please sign in to comment.