Exporting to a .glb file does not include an important color detail

[bhs67]

Is there an existing issue for this?

• [X] I have searched the existing issues

Problem description

Exporting a 3D multi-color car into a glb file works. It can be viewed with 3D Viewer.

https://snipboard.io/mbPeYN.jpg

Importing that glb file into JavaScript results in a 3D black color car.

https://snipboard.io/ezPKAo.jpg

This is the JavaScript code:

const carUrl = new URL('../assets/car.glb', import.meta.url);

and

assetLoader.load(carUrl.href, function(glb) {
  const model = glb.scene;
  scene.add(model);
  model.position.set(0, 1, 0);
  model.scale.set(30, 30, 30);
}, undefined, function(error) {
  console.error(error);
});

I downloaded a glb image of a car from Sketchfab — https://sketchfab.com/3d-models/tvr-tuscan-s-special-edition-2001-c8a325b2d7794e68a033f84f6741b0f7 —. This car does show up in color when imported with JavaScript.

A glb could include geometry, materials, textures, colors, and animations --- https://www.vntana.com/blog/demystifying-3d-file-formats-for-3d-commerce-and-more/.

There appears to be one parameter, or more parameters, missing from the FreeCAD exported glb.

Full version info

OS: Windows 10 (10.0)
Word size of FreeCAD: 64-bit
Version: 0.20.26761 (Git)
Build type: Release
Python version: 3.8.12
Qt version: 5.12.9
Coin version: 4.0.0
OCC version: 7.5.3
Locale: English/United States (en_US)

Subproject(s) affected?

None

Anything else?

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[luzpaz]

Why are you using v0.20.x ? Please use latest stable 0.21.2

[bhs67]

Good suggestion!

I found 0.21.2 - https://github.com/FreeCAD/FreeCAD-Bundle/releases/tag/0.21.2. I downloaded FreeCAD-Bundle-0.21.2.zip. I don't know how to install?

[wwmayer]

https://github.com/FreeCAD/FreeCAD/pull/10918

[luzpaz]

@bhs67 unzip the 7z compressed file with 7zip application. Although, if the fix was just implemented it will only be available in the development version (generated a few days) see https://github.com/FreeCAD/FreeCAD-Bundle/releases/tag/weekly-builds

@wwmayer does #10918 fix this ticket ?

[wwmayer]

With the current developer version when I create a shape set individual colors to the faces, export and import as glb then the colors are restored.

[luzpaz]

@bhs67 please test developer version https://github.com/FreeCAD/FreeCAD-Bundle/releases/tag/weekly-builds (Same instructions (unzip the 7z compressed file with 7zip application)

[bhs67]

Sorry for the delayed response. I am able to download the FreeCAD-Bundle-0.21.2 folder. I don't know how to install FreeCAD 0.21.2.

[bhs67]

I downloaded "freecad_source.tar.gz" from https://github.com/FreeCAD/FreeCAD-Bundle/releases/tag/weekly-builds. How do I install?

[wwmayer]

Isn't this just a ZIP archive? If yes, then it should be sufficient to simply unpack it and start the executable.

[bhs67]

I was downloading the wrong file. Good grief!!! My apologies.

[bhs67]

Back to the original post.

---

OS: Windows 10 build 19045 Word size of FreeCAD: 64-bit Version: 0.22.0dev.35209 (Git) Build type: Release Branch: main Hash: 1c0456654880e58e5d9e839f27df177c68980185 Python 3.10.13, Qt 5.15.8, Coin 4.0.0, Vtk 9.2.6, OCC 7.6.3 Locale: English/United States (en_US) Installed mods:

• fasteners 0.3.44

• Manipulator 1.4.3

Exporting a 3D multi-color car into a glb file works. It can be viewed with 3D Viewer.

https://snipboard.io/mbPeYN.jpg

Importing that glb file into JavaScript results in a 3D black color car.

https://snipboard.io/ezPKAo.jpg

This is the JavaScript code:

const carUrl = new URL('../assets/car.glb', import.meta.url); and assetLoader.load(carUrl.href, function(glb) { const model = glb.scene; scene.add(model); model.position.set(0, 1, 0); model.scale.set(30, 30, 30); }, undefined, function(error) { console.error(error); });

---

I downloaded a glb image of a car from Sketchfab — https://sketchfab.com/3d-models/tvr-tuscan-s-special-edition-2001-c8a325b2d7794e68a033f84f6741b0f7 —. This car does show up in color when imported with JavaScript.

A glb could include geometry, materials, textures, colors, and animations --- https://www.vntana.com/blog/demystifying-3d-file-formats-for-3d-commerce-and-more/.

There appears to be one parameter, or more parameters, missing from the FreeCAD exported glb in Version: 0.22.0dev.35209 (Git).

[luzpaz]

@bhs67 please clarify, the fix works for you?

[bhs67]

Not sure which fix? I used the most recent update to FreeCAD 0.22.0dev.35209. The exported colored car glb displays as black when imported into JavaScript.

[wwmayer]

Just to get your workflow right:

1. You load a glb file into FreeCAD
2. You export the model again as glb file
3. You load the new glb file with JS and there it's without colors

If you load the original glb file into FreeCAD does it show the colors? If you load the new glb file into FreeCAD does it show the colors?

[bhs67]

The car is created in FreeCAD. The FCStd file can be downloaded from my website https://temp.foxping.com/ -> Car.FCStd.

The Move 3D.zip is the html and JavaScript code.

[wwmayer]

Ok, it doesn't seem to work if several objects are selected for export. But if you select one object only then the color is restored. Can you confirm it?

[bhs67]

I exported just the Body. It is in color via 3D Viewer. It is black with JavaScript displayed on a Chrome browser.

[bhs67]

My mistake. I needed directional light to see the image. See https://discourse.threejs.org/t/how-do-change-the-size-and-keep-the-color-of-a-glb-file/58241/17.

[luzpaz]

@bhs67 so this issue is fixed on the FreeCAD side of things ?

[bhs67]

My initial post was my misunderstanding of 3D JavaScript. I did not realize that there needs too be a light above the surface which projects light on the car image.

There was never an issue with FreeCAD. Thanks for the responses, luzpaz and wwmayer.