Source URL from serialized Texture

Hello everyone!
Is it possible to access the image source url from a serialized Texture?
My goal is to serialize images in a ts-script in Unity editor and then access the array with this images and get their URLs in Svelte (and use this images for html buttons).

Here is what I tried.
In ts:

    @serializable(Texture)
    texture?: Texture; 

Then I export an array with all informations (and texture is a part of it)

Later in Svelte, I just looked what kind of information is stored in texture, but URL was not a part of it

      $AllDecorations.forEach((element) => {
            console.log(element.texture);
        });

The final step I will when I will be able to get the URL is to paste it in my button html elements like this:

<img src={$AllDecorations[i].texture.getTheURLsomehow} alt="" />

Original Post on Discord

by user 743203108271816774

Hello there – we have an experimental AI bot :robot: that might be able to help you with your question. Would you like to try this out?

How it works:
Reply to the messages of the bot that end with a thread_id to interact with it and ask follow-up questions. You can also mention the bot directly in this channel to get help.

Help requested: please wait a moment…

Here is what I found for you :brain: Discord

Hello Krempel,

In Unity, when you serialize a Texture, it typically includes metadata about the texture but not a direct URL to the image source. This is because Unity’s asset system does not by default expose direct URLs to the assets. When exporting to Needle Engine, you’ll need to ensure that the texture is included in your build and accessible at runtime.

To make it accessible in Svelte, you would serialize not the Texture directly, but a reference to the image that can be resolved at runtime, such as an asset path or a generated URL. You might use an AssetReference in Needle Engine to reference the texture, and then extract the path or URL during export.

Step 1: In your TypeScript for Unity, add a string to hold the URL path.

@serializable() 
texturePath?: string;

Step 2: When you’re populating this during the Unity Editor script phase, ensure that you assign this string a path to the texture that will be valid in your runtime environment.

Step 3: Export this data to JSON or a similar format that your Svelte application can understand.

Step 4: In your Svelte code, access the texturePath property instead of trying to read the texture object directly.

<img src={$AllDecorations[i].texturePath} alt="" />

Remember, you need a web-accessible path for the textures; this can involve exporting your textures alongside your model and hosting them where your Svelte application can access them. Make sure that your export process in Unity prepares the assets in the correct way for this purpose.

1 messages left GPT 4
thread_6en0oT49p4gqK5neflNgZtNr

Ok, i will try that. Should the path be relative or absolute? And if the path can be relative, should it be relative to the index.html or to my svelte-component?

by user 743203108271816774

The path you use can be either relative or absolute, but the choice will depend on how your assets are hosted and accessed in your Svelte application.

  • If your assets are hosted on a server and accessed via URLs, you should use absolute paths that point to the location of the assets on the server.

  • If your assets are bundled with your Svelte application and you’re using a relative path, ensure that the path is relative to the root of your hosted application or the place where your assets are served from.

For your specific scenario, where you’re using Needle Engine, it’s a good practice to use relative paths that are relative to the root of your hosted application, as this will make it easier to manage the assets across different environments and deployments. Make sure your exported assets are properly located and accessible relative to the root of your Svelte application.

0 messages left GPT 3.5
thread_6en0oT49p4gqK5neflNgZtNr

Where I am a bit stuck is - if I use relative path, it only works/shows images in my local build, but not in the exported build

by user 743203108271816774

Hi @krempel you might want to use the ImageReference type which copies the texture to the output folder instead of embedding it as a texture and then you get the URL to the src file

Thank you @marcel :cactus: :slightly_smiling_face: where can ImageReference be imported from?
My first guess was “@needle-tools/engine” of three, but I got an error saying

by user 743203108271816774

you need to make an assembly reference here
image.png
image.png

should the assembly reference be located near my npm?
I added it there, but somehow it triggered another error message, about another script which is inside another nmp, as a part on an package.

Assets\Needle\pfc.xmas2023.codegen\StateManager.cs(14,48): error CS0234: The type or namespace name 'ResponsiveCameraSpot' does not exist in the namespace 'Needle.Typescript.GeneratedComponents' (are you missing an assembly reference?)

So “StateManager” is a part of xmas-npm inside the project, and “ResponsiveCameraSpot” is a script inside another npf-def in a package
20231206-124222-Unity.png

by user 743203108271816774

I actually managed to get it to work with relative path as the bot suggested ( I creadet a “public” folder inside the “src” folder, and the relative path to this folder is working in local and in exported builds.

But I am still interested, how to solve this with the ImageReference way. Unfortunately I dont have much experience with Assembly References

by user 743203108271816774

You add the assembly reference to the folder that has your unity component. The codegen folder already has an asmdef (please open the codegen folder) and assign the reference there

thank you! it worked :slightly_smiling_face:

by user 743203108271816774