Strange Texture Problems with GLTF and scaling?!

[Whykiki]

Hello people

I am completely new here and have a - for me - really complicated question or possibly even several

I work with Cinema 4D in the current version and have created some models, which I then exported as GLTF. Nothing special, a container and a few furniture assets.
I then textured them in C4D - both with standard material and with PBR.
At first I had some problems with backface culling - but I fixed most of them already.

But I get problems when displaying the model in my code. The texture is completely chopped up, as you can see in the screenshot.

When I put the same model into the GLTF viewer, everything looks fine. As seen in the next screenshot.
I also cloned the viewer from Github and ran it locally, and it looks fine there too.
The viewer doesn’t seem to care about backface culling etc., it displays the model correctly…

I tried to look at the code of the GLTF viewer to see what is different and removed almost everything there, but still the model looks good in there, but not in my own code.

In summary, you can say that there is something in the viewer code to display the model correctly and I may be doing something wrong in my code. But unfortunately I don’t know what. You can find my test code on Github, see link.

GitHub - TheWhykiki/viewer-github

Is it possible that it has to do with the model scaling and the camera?
Maybe I haven’t really understood it yet - I notice that I have to scale my model from C4D by a factor of 0.1 so that I can see it somehow.
My export settings for GLTF are set to centimetre…

Sorry for the extremely long text, but I wanted to describe the problem as detailed as possible.
I would be happy if you could help me with my problem.

Thank you Kiki

[Oxyn]

Hello cinema4D friend.
About scaling:
This is a well known issue with some GLTF export without any real answers yet.
Sometimes the exporter absolutely want to scale the file at 0.1 factor whatsoever unit is used.
If you find any hints about this, don’t hesitate to post your findings. There is a long list of similar post about this very specific scaling issue (among other softwares too).

my best guess is developers are copy/pasting GLTF export code from the same source (the Blender one?) spreading it around like a curse.

[donmccurdy]

if the model looks OK in some online threejs-based viewers but not your viewer, i’d guess there’s something about the application code and not the model that isn’t quite right. My first guess would be to try adjusting your camera near/far values to be closer together, so that the depth buffer’s precision is better distributed. Using an environment map is often also a good idea for any PBR material.

[Whykiki]

Hello

Thank you very much for your answers.

I have now tried a little more and taken the code from the following example as a basis and now only exchange the model in each case.

https://threejs.org/examples/webgl_loader_gltf.html

I use only the code from the exdample website, for testing purposes…!!!

It is exported from the current version 2023 of C4D - if I want to use the model then I have to set the units in C4D to metres instead of centimetres, then everything is displayed in a correct size. This seems to be somehow different depending on the project, but I can’t understand it.

However, I have made a little progress with the texture issue:
As soon as I add a relief/bump or normal channel to my texture in C4D, it is displayed broken.

So with Bump Relief

And so with normals

If I only use the colour/diffuse channel then it works. It doesn’t matter if I use standard material or PBR in C4D.

But why is this always displayed correctly in the viewer? What is so different about the code?
The Viewer, for example, always displays a model appropriately, regardless of the size in which I have exported it - this must also be hidden somewhere in the code. But I can’t find out what it is.

Thats a screen from same model with Relief on:

I’m still at the very beginning and want to at least understand the basics correctly and acquire a good workflow for C4d <-> ThreeJS that can also be reproduced.

Translated with DeepL

[donmccurdy]

It is hard to guess from just screenshots. Could you share a GLB?

I would strongly encourage splitting your work into two steps:

1. first ensure that your exports from C4D to glTF are working in online viewers
2. second try to make your own viewer look correct too

[Whykiki]

I have another example that I just don’t understand…I used the Example URL above and just sort of “recreated” the project.

I use Webpack as the bundler.

On the Example website it looks like this:

In my own local code like this:

ut the local code is almost 1:1 the same as on the example, only the paths to OrbitControls and Co I have adjusted - they were not correct any more…

How can that be? I don’t understand it
Or do I just not understand some fundamental concept?

[Whykiki]

In the online viewers everytime everything works like a charm and my models look fine.

I try to add my simple example scene here.
Testszene.gltf (2.0 MB)

[donmccurdy]

The normal maps and occlusion maps in your glTF are not valid:

A correct normal map will have a bluish or violet color. A correct occlusion map will use the red channel, this just looks like another diffuse color texture. I would suggest omitting both textures, unless you have the right textures for those slots.

[Whykiki]

OK - but I dont understand why…here some screenshots of my texture settings used in the GLTF:

My normal texture is a bluish one (generated by Photoshop):

My BumpMap looks Like this:

And color / diffuse looks like this:

All images are made from one “base texture”…I have to question again maybe:

Or do I just not understand some fundamental concept?

[donmccurdy]

Perhaps your bump map texture is being exported instead of the normal map texture? There should be no reason to use both - use a normal map instead of the bump map.

Unfortunately, the C4D glTF exporter is not currently as good as some others, like Blender or Substance Painter. It may just be doing the wrong thing.

[Whykiki]

Have you seen my post before, this my rebuild example of the helmet scene - I downloaded the GLTF from ThreeJS Website. And If you can see - the error with the textures and normals is occuring here too:

The only difference is the used setup. I use webpack as bundler, on the example website it’s not bundled.
Could this be a problem?

Here is my code:

GitHub - TheWhykiki/simplethreejs

[donmccurdy]

Webpack should e fine, I wouldn’t worry about that.

I haven’t gone through all of your website code, there is a lot to debug and it’s easier if it can be simplified… but i’d suggest double-checking:

• camera near/far
• environment map loading
• resolution of any renderers used, vs. the resolution of the window. sometimes if your CSS loads late, the canvas might have a small resolution at the time JavaScript runs and then resize later, this must be handled in your code.

[Whykiki]

Ohhh noooo I think I found one of my main problems…when I was writing my replies I thought I could be a good idea looking what ThreeJS is used in my package.json (I used my first attempts from a few months ago and they are based on the Webpack-Example from the Bruno SImon Course)

And guess what - my version of ThreeJS was 0.125. Made npm install --save three@latest and now my textures and models look like in the viewer.

Sorry for stealing your time.