Can Scene.toJSON support image network URL?

[Aurora-creeper]

Description

If the original image is large enough, currently Scene.toJSON will generate a huge image (starting with "data:").

This will cause a perceptible delay.

The calling chain is as follows: Scene.toJSON -> Texture.toJSON -> Source.serializeImage -> ImageUtils.getDataURL

According to the annotation, ImageUtils.getDataURL will return a URI instead of a URL (even though the name is getDataURL).

On modern platform, images will almost certainly be placed on the canvas, and turn into base64.

Solution

In this case, it still works well with ObjectLoader.parse

class ImageUtils {

    static enableNetworkURL = false; // added

    static getDataURL( image ) {

        if ( /^data:/i.test( image.src ) ) {

            return image.src;

        }

        // add begin
        if ( ImageUtils.enableNetworkURL ) {

            if ( image instanceof HTMLImageElement ) return image.src;

        }
        // add end

        if ( typeof HTMLCanvasElement === 'undefined' ) {

            return image.src;

        }

        // ...
    }
}

Alternatives

I think the natural way should be to pass some flags in the meta to control this behavior, but such a change would be too big.

Additional context

No response

[Bajdzis]

I had a similar problem. I created my Source class and replace "native" Source by iterating through the scene before exporting. I had an additionally complicated case because I wanted to save textures on the server during export. The current export does not make it easy to inject asynchronous code.

Maybe worth considering a different export architecture (I had a problems with gltf 😅 )?

@Mugen87 What do you think about such a proposal. I know there will be a lot of changes 🙈 As the first, move logic to a separate exporter just like other 3d files.
Use the visitor pattern for this: https://refactoring.guru/design-patterns/visitor and create each method asynchronous.

Example of structure:

class ExportVisitor {
    constructor(imageUtils) {
        this.imageUtils = imageUtils;
    }

    async visitScene(scene) {
        // ...
    }

    async visitMesh(mesh) {
        // ...
    }

    async visitTexture(texture) {
        // ...
    }

    async visitGeometry(geometry) {
        // ...
    }

    [...] // all others

    visit (node) {
        if (node instanceof Scene) {
            return this.visitScene(node);
        } else if (node instanceof Mesh) {
            return this.visitMesh(node);
        } else if (node instanceof Texture) {
            return this.visitTexture(node);
        }  
        [...] // all others
    }
}

We inject dependencies such as imageUtils as dependencies into the constructor. Anyone can also extend our class and change the implementation of just one of the methods. The solution would be more flexible and perhaps it would be possible to use it in the future to simplify exporters to other formats.

What do you think about it?

We can start with form very simple implementation. Just:

[...]
    async visitScene(scene) {
        return scene.toJSON(meta)
    }

    async visitMesh(mesh) {
        return mesh.toJSON(meta)
    }
[...]