engine icon indicating copy to clipboard operation
engine copied to clipboard

Png loader example

Open slimbuck opened this issue 3 years ago • 3 comments

This PR adds to the engine an example texture parser for loading PNGs manually and adds an accompanying example.

Manual loading of PNG is useful under iOS which still tramples on texture alpha (see #1930).

The example is completely static, just demonstrating a lightmap without banding and probably needs more work before merging:

Screenshot 2021-08-20 at 16 57 56

slimbuck avatar Aug 20 '21 10:08 slimbuck

For editor only projects, this is only possible when self hosting as the developer would have to hook in the parser between the application creation and config load function call in __start__.js

yaustar avatar Aug 20 '21 10:08 yaustar

Example of adding the upng loader to a self hosted solution:

Add upng.js to the project folder: image

Include it in the HTML image

Add the parser to the texture loader in __start__.js

try {
        app = new pc.Application(canvas, {
            elementInput: devices.elementInput,
            keyboard: devices.keyboard,
            mouse: devices.mouse,
            gamepads: devices.gamepads,
            touch: devices.touch,
            graphicsDeviceOptions: window.CONTEXT_OPTIONS,
            assetPrefix: window.ASSET_PREFIX || "",
            scriptPrefix: window.SCRIPT_PREFIX || "",
            scriptsOrder: window.SCRIPTS || []
        });

        app.loader.getHandler("texture").parsers.png = new PngParser(app.graphicsDevice);
    }

yaustar avatar Aug 20 '21 12:08 yaustar

Just thought of a way to patch it into the engine: https://playcanvas.com/project/870259/overview/added-upng

This adds the upng to the project and an after engine patch on the addHandler function that changes the PNG parser

yaustar avatar Jan 14 '22 14:01 yaustar

closing.

slimbuck avatar Mar 17 '23 11:03 slimbuck