SVG not working as texture anymore

Hi

I just updated today from 5.4.0 to version 5.21.0 and I noticed that SVG files loaded and base64 hardcoded in the pass stopped working and now only the red and black checker is showing up instead.

I made a small PG to demonstrate:

We also noticed there is a bug with version 5.4.0 and SVG textures under firefox (version 104) that’s why I tried to update and found this.

Reards
Peter

@carolhmj , @Deltakosh , were there any changes to NME that could cause this issue?

Not that I can recall on top of my mind, but I’ll investigate :thinking:

1 Like

@carolhmj

Hi

Any update on this issue?

Regards
Peter

The fix was just merged - Add type on blob creation by carolhmj · Pull Request #12912 · BabylonJS/Babylon.js (github.com)
Will be available tomorrow and in the next minor version in 2 days

@RaananW

Oh, that’s great. Thanks for that.

We also noticed a similar issue. The loaded SVG and then placed on canvas were also not showing up on texture. I will try to make a PG tomorrow to see if the fix that you just rolled in will cover this issue under FF as well.

The playground will use the new version as well?

Regards
Peter

yes, that will happen during the nightly build.

@RaananW @carolhmj

Hi

I can confirm the error from PG is gone in version 5.21.0

I will test now our other error from FF and keep you posted.

Regards
Peter

2 Likes

@RaananW

Ok, so I do not get it.

Playground with version 5.21.0 works but my local files are still not working. As I checked the package.json file I was installing version 5.21.0 and now on npm there are no new versions available:

image

So when the new fixed 5.21.1 or something version with this fix will be available on npm?

Regards
Peter

5.22.0 will be released tomorrow morning :slight_smile:

Oh, and you are right - we should state nightly in the playground. we’ll see about fixing that

@RaananW

Ok makes sense :slight_smile: Will wait for new version :slight_smile:

Regards
Peter

@carolhmj @RaananW

So today after installing 5.22.0 my storybook exploded with this error:

ERROR in ./node_modules/@babylonjs/core/Materials/Textures/Procedurals/noiseProceduralTexture.js 101:43
Module parse failed: Unexpected token (101:43)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         texture.persistence = parsedTexture.persistence;
|         texture.animationSpeedFactor = parsedTexture.animationSpeedFactor;
>         texture.time = parsedTexture.time ?? 0;
|         return texture;
|     }
 @ ./node_modules/@babylonjs/core/Materials/Textures/Procedurals/index.js 2:0-44 2:0-44
 @ ./node_modules/@babylonjs/core/Materials/Textures/index.js
[...]

Multiple times in a row with a different file.

Any suggestions on what this might be?

I’m using rollup BTW.

Regards
Peer

Storybook uses webpack, and the webpack storybook is using is sadly too old to understand Nullish coalescing operator (??) - JavaScript | MDN

What you can do is add another step to transpile the moden js to es5. I wonder if it is realted to an old version of storybook, or if there really is an issue with webpack in general. we have moved to a more modern flavor of js (which your rollup will have no issue with)

I made sure our module test (which is also using webpack) runs correctly - it seems like the latest webpack does work correctly. what version of storybook are you using in your project? if it is using webpack 4 you will need to add a babel step to its webpack configuration

@RaananW

storybook last stable 6.5.10

and my target is es5.

What step should I add to babel.config.js?

can you share your webpack configs and stuff??

Regards
Peter

AFAIK you can opt in to use webpack 5 in storybook, which will solve your issue:

@RaananW

After that update of storybook I can’t run it at all.

:expressionless:

So any suggestions?

Regards
Peter

I have no idea why you can’t run it at all, but I would recommend you to do your best to get it to work with webpack 5. Webpack 4 is very old. the last 4 version was released 2 years ago, and it hasn’t updated since.
I agree that it doesn’t mean it’s bad, but if you can take the time to upgrade your project, i would recommend it. Otherwise, you can add the babel step to your storybook webpack (4)'s configuration:

I have no experience with that, so I won’t be able to help you, but that should solve the issue you are experiencing.