me/wireless-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

faster texture loading

Browse Source
This commit is contained in:
David Allemang
2026-07-04 12:35:49 -04:00
parent 57660397aa
commit ffd48b2585
3 changed files with 105 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
engine.js
View File

@@ -11,7 +11,6 @@ layout(location=2) in vec2 a_uv;
layout(location=3) in float a_tint;
layout(location=4) in float a_shade;
// Instanced attributes
layout(location=5) in mat4 i_matrix;
layout(location=9) in vec3 i_color;
@@ -25,13 +24,9 @@ out vec3 v_color;
void main() {
gl_Position = u_viewProj * i_matrix * vec4(a_position, 1.0);
v_uv = a_uv;
vec3 normal = normalize(mat3(i_matrix) * a_normal);
// Lambertian lighting
float baseLight = max(dot(normal, normalize(u_lightDir)), 0.0) * 0.6 + 0.4;
v_light = mix(1.0, baseLight, a_shade);
v_color = mix(vec3(1.0), i_color, a_tint);
}
`;
@@ -54,15 +49,12 @@ function compileShader(gl, type, src) {
const shader = gl.createShader(type);
gl.shaderSource(shader, src);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
throw new Error(gl.getShaderInfoLog(shader));
}
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader));
return shader;
}
export class Engine {
constructor() {
// Global canvas sits fixed behind everything
this.canvas = document.createElement('canvas');
this.canvas.style.position = 'fixed';
this.canvas.style.top = '0';
@@ -73,12 +65,10 @@ export class Engine {
document.body.appendChild(this.canvas);
this.gl = this.canvas.getContext('webgl2', {antialias: true, alpha: true});
if (!this.gl) throw new Error("WebGL2 not supported");
const gl = this.gl;
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.enable(gl.SCISSOR_TEST); // Critical for virtual viewports
gl.enable(gl.SCISSOR_TEST);
const vs = compileShader(gl, gl.VERTEX_SHADER, VS_SRC);
const fs = compileShader(gl, gl.FRAGMENT_SHADER, FS_SRC);
@@ -97,18 +87,14 @@ export class Engine {
this.atlas = new TextureAtlas(256);
this.dioramas = [];
this.dioramaMeshes = new Map(); // Global Mesh Storage: Diorama -> Array of meshes
this.renderRequested = false;
// Re-render when the page moves or changes size
window.addEventListener('resize', () => {
this.resize();
this.requestRender();
});
window.addEventListener('resize', () => { this.resize(); this.requestRender(); });
window.addEventListener('scroll', () => this.requestRender(), {passive: true});
this.resize();
}
// Debounced render trigger to save battery
requestRender() {
if (!this.renderRequested) {
this.renderRequested = true;
@@ -126,63 +112,93 @@ export class Engine {
addDiorama(diorama) {
this.dioramas.push(diorama);
this.dioramaMeshes.set(diorama, []);
}
// Transforms a World's data grid into baked WebGL geometry pools
async buildMeshes(world) {
const instancePool = new Map();
// 1. Resolve states and matrices
for (const block of world.blocks.values()) {
const stateJSON = await loadBlockstate(block.id);
const parts = resolveBlock(stateJSON, block.props);
for (const part of parts) {
const hash = getVariantHash(part);
if (!instancePool.has(hash)) {
instancePool.set(hash, {partDef: part, matrices: [], colors: []});
}
const matrix = mat4Identity(new Float32Array(16));
mat4Translate(matrix, matrix, [block.x, block.y, block.z]);
const pool = instancePool.get(hash);
pool.matrices.push(...matrix);
// Simple power level tint
if (block.props.power) {
const p = parseInt(block.props.power, 10);
pool.colors.push((0x4B + (p * 12)) / 255, 0.0, 0.0);
} else {
pool.colors.push(1.0, 1.0, 1.0);
}
}
// O(1) Cascade: Fetch all resources breadth-first across ALL dioramas
async updateAll() {
// --- SWEEP 1: Collect & Fetch Blockstates ---
const uniqueBlockIds = new Set();
for (const d of this.dioramas) {
for (const block of d.world.blocks.values()) uniqueBlockIds.add(block.id);
}
await Promise.all(Array.from(uniqueBlockIds).map(id => loadBlockstate(id)));
// 2. Build geometries & instantiate WebGL buffers
const load_tasks = [];
const newMeshes = [];
for (const [hash, pool] of instancePool.entries()) {
const modelJSON = await loadModel(pool.partDef.model);
// --- SWEEP 2: Resolve Parts & Fetch Models ---
const uniqueModelIds = new Set();
const parsedDioramas = new Map(); // Diorama -> Array of {block, parts}
for (const el of modelJSON.elements || []) {
for (const face of Object.values(el.faces || {})) {
const texPath = resolveTexture(modelJSON, face.texture);
if (texPath) load_tasks.push(this.atlas.load(texPath));
for (const d of this.dioramas) {
const parsedBlocks = [];
for (const block of d.world.blocks.values()) {
const stateJSON = await loadBlockstate(block.id); // Returns instantly from cache
const parts = resolveBlock(stateJSON, block.props);
parsedBlocks.push({block, parts});
for (const p of parts) uniqueModelIds.add(p.model);
}
parsedDioramas.set(d, parsedBlocks);
}
await Promise.all(Array.from(uniqueModelIds).map(id => loadModel(id)));
// --- SWEEP 3: Pool Instances & Fetch Textures ---
const uniqueTexturePaths = new Set();
const dioramaPools = new Map(); // Diorama -> instancePool
for (const d of this.dioramas) {
const instancePool = new Map();
for (const {block, parts} of parsedDioramas.get(d)) {
for (const part of parts) {
const hash = getVariantHash(part);
if (!instancePool.has(hash)) {
instancePool.set(hash, {partDef: part, matrices: [], colors: []});
}
const matrix = mat4Identity(new Float32Array(16));
mat4Translate(matrix, matrix, [block.x, block.y, block.z]);
const pool = instancePool.get(hash);
pool.matrices.push(...matrix);
if (block.props.power) {
const p = parseInt(block.props.power, 10);
pool.colors.push((0x4B + (p * 12)) / 255, 0.0, 0.0);
} else {
pool.colors.push(1.0, 1.0, 1.0);
}
}
}
const geometry = buildGeometry(modelJSON, this.atlas, pool.partDef);
const matrixArray = new Float32Array(pool.matrices);
const colorArray = new Float32Array(pool.colors);
const instanceCount = pool.matrices.length / 16;
newMeshes.push(this.createInstancedMesh(geometry, instanceCount, matrixArray, colorArray));
// Collect required textures from the resolved models
for (const pool of instancePool.values()) {
const modelJSON = await loadModel(pool.partDef.model); // Instant
for (const el of modelJSON.elements || []) {
for (const face of Object.values(el.faces || {})) {
const texPath = resolveTexture(modelJSON, face.texture);
if (texPath) uniqueTexturePaths.add(texPath);
}
}
}
dioramaPools.set(d, instancePool);
}
await Promise.all(load_tasks)
this.updateAtlasTexture()
return newMeshes;
// Fire all texture image requests concurrently
await Promise.all(Array.from(uniqueTexturePaths).map(path => this.atlas.load(path)));
this.updateAtlasTexture();
// --- SWEEP 4: Bake Geometry ---
for (const d of this.dioramas) {
const newMeshes = [];
for (const pool of dioramaPools.get(d).values()) {
const modelJSON = await loadModel(pool.partDef.model); // Instant
const geometry = buildGeometry(modelJSON, this.atlas, pool.partDef);
const matrixArray = new Float32Array(pool.matrices);
const colorArray = new Float32Array(pool.colors);
const instanceCount = pool.matrices.length / 16;
newMeshes.push(this.createInstancedMesh(geometry, instanceCount, matrixArray, colorArray));
}
this.dioramaMeshes.set(d, newMeshes);
}
this.requestRender();
}
updateAtlasTexture() {
@@ -235,18 +251,13 @@ export class Engine {
gl.vertexAttribDivisor(9, 1);
gl.bindVertexArray(null);
return {vao, indexCount: geometry.indices.length, instanceCount};
}
render() {
const gl = this.gl;
// Reset full viewport for clearing
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.scissor(0, 0, gl.canvas.width, gl.canvas.height);
// Use transparent background so the HTML body flows underneath
gl.clearColor(0.0, 0.0, 0.0, 0.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
@@ -257,14 +268,8 @@ export class Engine {
for (const diorama of this.dioramas) {
const rect = diorama.element.getBoundingClientRect();
if (rect.bottom < 0 || rect.top > gl.canvas.height || rect.right < 0 || rect.left > gl.canvas.width) continue;
// Culling: Skip rendering if element is off-screen
if (rect.bottom < 0 || rect.top > gl.canvas.height ||
rect.right < 0 || rect.left > gl.canvas.width) {
continue;
}
// Map DOM rect to WebGL screen coordinates
const bottom = gl.canvas.height - rect.bottom;
gl.viewport(rect.left, bottom, rect.width, rect.height);
gl.scissor(rect.left, bottom, rect.width, rect.height);
@@ -274,7 +279,8 @@ export class Engine {
gl.uniformMatrix4fv(this.uniforms.viewProj, false, viewProj);
gl.uniform3f(this.uniforms.lightDir, 1.0, 2.0, 0.5);
for (const mesh of diorama.meshes) {
const meshes = this.dioramaMeshes.get(diorama) || [];
for (const mesh of meshes) {
gl.bindVertexArray(mesh.vao);
gl.drawElementsInstanced(gl.TRIANGLES, mesh.indexCount, gl.UNSIGNED_SHORT, 0, mesh.instanceCount);
}