Added an asynchronous resource loading mechanism through App_GetResourcePath and App_ResourceLoaded. Added stb_image.h and used it to parse a .png file loaded from the server and upload it to app.testTexture. There is some ugliness around the edges images with transparency, probably caused by something pre-multiplied alpha related.

This commit is contained in:
2025-09-02 11:43:19 -07:00
parent 1a9775d670
commit f2d590be13
7 changed files with 8166 additions and 1 deletions

View File

@@ -133,6 +133,10 @@ export function jsGlBlendFuncSeparate(srcRGB, dstRGB, srcAlpha, dstAlpha)
{
appGlobals.glContext.blendFuncSeparate(srcRGB, dstRGB, srcAlpha, dstAlpha);
}
export function jsGlBlendEquation(equation)
{
appGlobals.glContext.blendEquation(equation);
}
export function jsGlDepthFunc(depthFunc)
{
@@ -203,6 +207,11 @@ export function jsGlBindTexture(target, textureId)
appGlobals.glContext.bindTexture(target, texture);
}
export function jsGlPixelStorei(parameter, value)
{
appGlobals.glContext.pixelStorei(parameter, value);
}
export function jsGlTexImage2D(target, level, internalFormat, width, height, border, format, type, dataLength, dataPntr)
{
let dataBuffer = new Uint8Array(appGlobals.memDataView.buffer, dataPntr, dataLength);
@@ -563,6 +572,7 @@ export let jsGlFunctions = {
jsGlDisable: jsGlDisable,
jsGlBlendFunc: jsGlBlendFunc,
jsGlBlendFuncSeparate: jsGlBlendFuncSeparate,
jsGlBlendEquation: jsGlBlendEquation,
jsGlDepthFunc: jsGlDepthFunc,
jsGlFrontFace: jsGlFrontFace,
jsGlDeleteBuffer: jsGlDeleteBuffer,
@@ -573,6 +583,7 @@ export let jsGlFunctions = {
jsGlCreateTexture: jsGlCreateTexture,
jsGlActiveTexture: jsGlActiveTexture,
jsGlBindTexture: jsGlBindTexture,
jsGlPixelStorei: jsGlPixelStorei,
jsGlTexImage2D: jsGlTexImage2D,
jsGlTexParameteri: jsGlTexParameteri,
jsGlGenerateMipmap: jsGlGenerateMipmap,

View File

@@ -51,10 +51,22 @@ async function MainLoop()
console.log("Loading WASM Module...");
await LoadWasmModule("app.wasm", 4);
let initSuccess = appGlobals.wasmModule.exports.App_Initialize();
if (initSuccess)
{
var resourcePaths = [];
var resourceIndex = 0;
while (true)
{
let resourcePathPntr = appGlobals.wasmModule.exports.App_GetResourcePath(resourceIndex);
if (resourcePathPntr == 0) { break; }
let resourcePathStr = wasmPntrToJsString(resourcePathPntr);
resourcePaths.push(resourcePathStr);
resourceIndex++;
}
console.log("Running!");
function renderFrame(currentTime)
{
@@ -63,6 +75,43 @@ async function MainLoop()
else { appGlobals.wasmModule.exports.App_Close(); }
}
window.requestAnimationFrame(renderFrame);
if (resourcePaths.length > 0)
{
console.log("Loading " + resourcePaths.length + " Resource" + (resourcePaths.length == 1 ? "" : "s") + "...");
// console.dir(resourcePaths);
for (var rIndex = 0; rIndex < resourcePaths.length; rIndex++)
{
const file = await fetch(resourcePaths[rIndex]);
if (file.ok)
{
const fileBytes = await file.arrayBuffer();
// console.log(fileBytes);
var fileBytesPntr = 0;
var scratchArenaPntr = 0;
var scratchArenaMark = 0;
if (fileBytes.byteLength > 0)
{
scratchArenaPntr = appGlobals.wasmModule.exports.cGetScratchArenaPntr(0);
scratchArenaMark = appGlobals.wasmModule.exports.cGetScratchArenaMark(0);
fileBytesPntr = appGlobals.wasmModule.exports.cAllocMem(scratchArenaPntr, fileBytes.byteLength);
if (fileBytesPntr != 0)
{
const writeArray = new Uint8Array(appGlobals.wasmModule.exports.memory.buffer);
writeArray.set(new Uint8Array(fileBytes), fileBytesPntr);
}
else { console.error("Failed to allocate " + fileBytes.byteLength + " byte resource[" + rIndex + "] from \"" + resourcePaths[rIndex] + "\""); }
}
appGlobals.wasmModule.exports.App_ResourceLoaded(rIndex, fileBytes.byteLength, fileBytesPntr);
if (fileBytes.byteLength > 0 && fileBytesPntr != 0) { appGlobals.wasmModule.exports.cEndScratchArena(scratchArenaPntr, scratchArenaMark); }
}
else
{
console.error("Failed to fetch resource[" + rIndex + "] from \"" + resourcePaths[rIndex] + "\"");
appGlobals.wasmModule.exports.App_ResourceLoaded(rIndex, 0, 0);
}
}
}
}
else
{