Getting issue to generate texture using local file(base64)

Questions
1

We are trying to convert the HDR local file(File Object / base64) into a png file.

Using URL of HDR image, We have achieved that but facing the issue to get texture using base64 of the local file and not converting into PNG.

Tried the following syntax:

   1]     let texture = new Texture(`data:${fileName}`, scene, false, false, Texture.BILINEAR_SAMPLINGMODE, null, null, this.base64FileString, false);
   2]     let texture = new Texture(this.base64FileString, scene);
1 Like
2

loading data URLs is fully supported. Is this.base64FileString containing “data:” and the mime type?

3

Yes, It is contain that

data:application/octet-stream;base64,Iz9SQURJQU5DRQojIE1hZGUgd2l0...

4

it should be an image. try pasting this data URL in your browser’s address line - if the browser can load it, so should babylon.js
It should probably start with something similar to this:
data:image/png;base64,

5

Thanks for your response,

Using URL it’s working fine. Instead that URL upload the HDR file using file uploader then convert it to base64, then try to get texture using that base64.

HDR image gives application/octet-stream type.

6

if you can share a playground we might be able to understand better and help :slight_smile:
thanks!

7

Hi RaananW,

My playground link( Please change version to 4.2.1)

here set base64 of image file manually, in real time we have image uploader. Using image uploader we upload HDR image, then convert it to base64.

Now from base64 we want PNG image

Reference links where i found possibilities :
http://webglworkshop.com/12/Babylon.pdf

8

Hi, thanks for the playground.

There was an error running it, but it was simple to resolve. Now - this playground does nothing. You are just showing what you described, but not showing it doesn’t work.

Show me how you plan to use the texture, and show me it doesn’t work. This way there is something we can work with. OItherwise - the playground works as expected…

Thanks :slight_smile:

9

Thanks Raanan,

I want to create texture using base64. I am not able to create texture using base 64 as defined in playground. These base 64 is generate of hdr image. I think I missing some parameters combinations.

10

a data URL doesn’t involve the filename, it requires the decoded base4 string. and to use an HDR tedture you would need the HDRCubeTexture (assuming this is a cube).

Here, this is a working example - convert HDR to PNG | Babylon.js Playground (babylonjs-playground.com)

11

The pg shows a blank screen on iphone
v5 has a blue screen
V4.2.1 has error and white screen , texture.onLoadObservable.add is not defined

1 Like
12

Hi RaananW,
When i tried HDRCubeTexture with version 4.2.1, Its gives me following error.
Property ‘onLoadObservable’ does not exist on type ‘HDRCubeTexture’

And apart base64, URL contain HDR image and new Texture(URL) working fine.

Let me do more clarity on the use case. I don’t want to upload HDR image on any server then use that URL.
I just want to Upload HDR image on browser locally and convert it to PNG through texture. if conversion possible without texture using other concept, you can suggest it.

13

this is using the same code as our texture inspector:

convert HDR to PNG | Babylon.js Playground (babylonjs-playground.com)

14

The playground is not meant to display anything, so it is actually odd that an iphone displays a black screen.

Otherwise, the decision to use the newly added observable was of the original poster :slight_smile: This is a new API, so it is not available on 4.2.1.

15

Ah, I opened the playground on my desktop which showed the auto-downloaded png. Makes sense now:)

16

Hello @Ratansinh_parmar just checking in, was your question answered?

17

You need use ‘data:image/jpg;base64,’
Thhis is run:
new BABYLON.Texture(data:image/jpg;base64,${value.Product.ProductImage}, scene, false, false, BABYLON.Texture.BILINEAR_SAMPLINGMODE, null, null, this.base64FileString, false);