SVG boorked, or am I?

Chances are it is something I did, but I can not get an SVG texture to load.

Sample:
https://playground.babylonjs.com/#MU9I15

I get the same thing on my local projects - just a ton of webGL errors and a solid black plane where the texture should be. Any other format loads fine.

“Error: WebGL warning: drawElements: TEXTURE_2D at unit 0 is incomplete: The dimensions of level_base are not all positive.”

Did I just not set this up right?

Hi Calsa. I have same symptoms - using my Firefox 60.8.0esr.

I got pg #5 to work with a different svg.

Also found this old Firefox bug report: 1420122 - WebGL warning: drawElements: Active texture 0 for target 0x0de1 is 'incomplete', and will be rendered as RGBA(0,0,0,1), as per the GLES 2.0.24 $3.8.2: The dimensions of `level_base` are not all positive.

Your “G” playground works fine in my new Google Chrome browser, but it generated an interesting warning:

[Deprecation] Percentages row tracks and gutters for indefinite height grid containers will be resolved against the intrinsic height instead of being treated as auto and zero respectively. This change will happen in M70, around October 2018. See Update behavior of CSS Grid Layout percentage row tracks and gutters - Chrome Platform Status for more details.

Not sure what ANY of that means, but… I would not label yourself as broken, as this time. :slight_smile:

Stay tuned for more comments, and tell us things you learn. Thanks for the report, and sorry for the hassles. All I have is some info and no solutions, yet.

Well, good to know I am not broke for once, well at least that tiny bit of me is not :stuck_out_tongue:

This is repeatable in FF (latest stable), Edge and Droid. Oddly it is doing it on my version of Chrome too, but if not in your version maybe they fixed it - or recently broke it.

I was not actually using the G.svg when I came across this. I just I did not have my SVG uploaded anywhere so I raided wikipedia both to verify it was not my image, and save time vs uploading somewhere. But same thing happened with my .svg

1 Like

:smiley:
Good info, thx. I got Chrome… yesterday. :slight_smile: Version 77.0.3865.90 (Official Build) (64-bit) hmm.

Is the error the same as FF error… at your Chrome console?

1 Like

I get a ton of errors in FF, though the cubemap one is likely my fault for stumbling through a typescript workflow, have not had a chance to figure that out yet. Anyway, I am posting them all in case they are relevant. Beyond the cubemap one, all are newwhen I try and load SVG in FF. All I get is a black box rendering where texture should be.

On aside, Chrome “works” for me with latest (just now updated) but the SVG is horribly rastered, I think I remember reading someone else here on the forum having / reporting the raster issue, but not this error.

Error: WebGL warning: drawElements: TEXTURE_2D at unit 0 is incomplete: The dimensions of level_base are not all positive. 6 [main.js line 1741 > eval:2359:22](http://localhost:8080/main.js line 1741 > eval)

./node_modules/@babylonjs/core/Materials/Textures/cubeTexture.js There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. Use equal casing. Compare these module identifiers: * D:\Desktop\pwt\node_modules@babylonjs\core\Materials\Textures\cubeTexture.js Used by 14 module(s), i. e. D:\Desktop\pwt\node_modules@babylonjs\core\Helpers\environmentHelper.js * D:\Desktop\pwt\node_modules@babylonjs\core\materials\Textures\cubeTexture.js Used by 2 module(s), i. e. D:\Desktop\pwt\node_modules\ts-loader\index.js!D:\Desktop\pwt\src\index.ts client:135:11

Error: WebGL warning: drawElements: TEXTURE_2D at unit 0 is incomplete: The dimensions of level_base are not all positive. 25 [main.js line 1741 > eval:2359:22](http://localhost:8080/main.js line 1741 > eval)

Error: WebGL: No further warnings will be reported for this WebGL context. (already reported 32 warnings) [main.js line 1741 > eval:2359:22](http://localhost:8080/main.js line 1741 > eval)

Source map error: TypeError: NetworkError when attempting to fetch resource. Resource URL: webpack:///./node_modules/@babylonjs/core/Engines/engine.js? Source Map URL: engine.js.map

In this specific case I’m afraid this is more errors for the browser vendors. We call the canvas.drawImage API to render the svg into a texture and then it is up to the vendor to decide what to do with it (hence it is working in Chrome)

I tried on FF (69.0.1 on win10) and it works for me as well:
image

1 Like

Thanks for the info, I will stick to other formats to be safe for now, not worth the cross browser compatibility headache. Thanks.

1 Like