Why do importing the same GLB model have different rendering details on the sandbox page and locally?

[xxf1996]

I want to try using Babylon to restore the GLB model exported from Blender in a local project, but I found that the rendering effect of the imported GLB model is not consistent with that of the Sandbox page. The Sandbox page effect is closer to the effect in Blender, so I don’t understand why these differences are caused?

I have also looked at the source code of the sandbox page and tried to fix it based on 3D Commerce Certified Viewer | Babylon.js Documentation, but none of them were able to solve this problem;

Here are some relevant version information：

• system: MacOS 11
• browser: Chrome 120.0.6099.109
• BabylonJS: 6.33.2

The local code is as follows：

import { CubeTexture, Engine, Scene, SceneLoader } from "babylonjs";
import 'babylonjs-loaders'

const forceSRGBBufferSupportState = false
const antialias = true

function createScene(scene: Scene, engine: Engine) {
  const env = CubeTexture.CreateFromPrefilteredData('https://assets.babylonjs.com/environments/studio.env', scene)
  scene.environmentTexture = env
  scene.createDefaultCamera(true, true, true)
  scene.createDefaultSkybox(env, true, (scene.activeCamera!.maxZ - scene.activeCamera!.minZ) / 2, 0.3, false);

  engine.runRenderLoop(() => {
    scene.render()
  })

  window.addEventListener('resize', () => {
    engine.resize()
  })
}

export function test(canvas: HTMLCanvasElement) {

  const engine = new Engine(canvas, antialias, {
    // useHighPrecisionMatrix: true,
    // premultipliedAlpha: false,
    // preserveDrawingBuffer: true,
    // antialias,
    forceSRGBBufferSupportState: forceSRGBBufferSupportState,
  })

  SceneLoader.Load('models/', 'test.glb', engine, model => {
    console.log(model)
    createScene(model, engine)
    model.debugLayer.show()
  })
}

This is the effect of the Sandbox page：

And this is the effect of my local project, which is clearly inconsistent with the effect of the Sandbox page：

But another confusing point for me is that when I used INSPECTOR’s “CAPURE With RTT” function to take screenshots, the image I got was actually not consistent with the effect I saw on the canvas element, but rather closer to the effect of the Sandbox page：

Here is the GLB model I used：

test.glb

[labris]

Hello and welcome!
Do you use the same environment texture as in Sandbox? There are 2 env textures available at Sandbox - Default and Studio (which is used in your code).
Try to change the env texture URL to https://assets.babylonjs.com/environments/environmentSpecular.env , hope it will solve your problem.

[xxf1996]

Yes, I use the same environment texture as in Sandbox, I use the local code and SandBox all use Studio(https://assets.babylonjs.com/environments/studio.env).

[Evgeni_Popov]

This thread may help:

How to make model lighting/pre-processing in code the same as how a model appears in the sandbox?

Hey @johntdaly7 Fun topic, I just did some learning about this myself! I agree it’s not documented well enough. I’m going to change that! I’ll add a new doc section about the Sandbox and reference the lighting setup that’s in it, so in the future, folks can recreate it in the playground more easily. Thanks for the awesome question. Ok so here we go: https://playground.babylonjs.com/#T0S9R4 This playground has nothing in it apart from a camera, a loaded gltf model, and the exact environment t…

[xxf1996]

Thank you for your answer, but I have reviewed this thread and found that using the methods inside does not solve my problem

[Joe_Kerr]

Just a shot in the dark but try importing all materials (like the esm equivalent of this “https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js”). I remember that some imports have side effects that might be missing in your local project.

[sebavan]

Can you share a small snippet on github of your local project ?

[xxf1996]

Thanks for @Joe_Kerr 's suggestion, but I have imported the babylonjs-materials package according to NPM Support | Babylon.js Documentation instructions and there have been no changes.

So I also built a demo(https://playground.babylonjs.com/#T0S9R4#6) on Playground, and the code is consistent with the local one (especially simple import). However, I have made the GLB model here a bit simpler (mainly removing some irrelevant models and reducing file volume). @sebavan

This is a new model：https://dl.dropbox.com/scl/fi/bwo5rhvo2co7waidenamo/simple-test.glb?rlkey=pk6fuxck9ntns3vnjnz50iemm&dl=0

[sebavan]

It is because your model has some opacity set but is fully opaque:

so basically you see the color of the element behind the canvas which is different between sandbox and playground

[xxf1996]

Thanks for @sebavan. I have also discovered this at this point, but unfortunately, the material parameters of Sandbox and the local page are consistent. I tried to adjust the Transparency Mode on both sides to others, but the effects on both sides are also inconsistent.

Just now I tried to change the alpha on both sides to 1, and the rendering effect was completely consistent.

So why do the same material parameters Sandbox and local code have different rendering results? This confuses me, and of course, why does Blender export the transparency mode of the transparent material to Opaque when exporting the GLB model

[xxf1996]

Thanks again for @sebavan 's reminder. Finally, I understand! It turns out that when Alpha is not 1, it will be affected by the color of the bottom element of Canvas element, that is, the rendering of the underlying element will be mixed

I discovered this when I tune the Alpha parameter of the material to 0. The following is the performance of adjusting Alpha to 0 under different pages：

Sandbox

Local Page

Transparent Rendering | Babylon.js Documentation

The specific location of official examples：

So is this feature or bug?

[sebavan]

From a pbr standpoint a feature but from glb/gltf let s ask @bghgary how it should behave ?

[sebavan]

Might be a confusing feature in pbr as well tbh

[bghgary]

From a glTF perspective, if the alpha mode is opaque, the material should be opaque regardless of what the alpha value is.

[xxf1996]

@sebavan This is really confusing.

@bghgary

From a glTF perspective, if the alpha mode is opaque, the material should be opaque regardless of what the alpha value is.

Theoretically, this is true, but in fact the pixel of canvas is affected by Alpha.In my case, I had to solve it by turning the background color of the body element into black.

[Evgeni_Popov]

What is somewhat abnormal is setting alpha < 1 on an opaque material…

The simplest solution would be to loop through all the materials and set alpha=1 when the transparency mode is opaque.

[bghgary]

@xxf1996

@bghgary

From a glTF perspective, if the alpha mode is opaque, the material should be opaque regardless of what the alpha value is.

Theoretically, this is true, but in fact the pixel of canvas is affected by Alpha.In my case, I had to solve it by turning the background color of the body element into black.

I’m not implying anything here, I’m just replying to @sebavan.

We should fix this in the glTF loader since it is the expected behavior for the spec.

• OPAQUE - The rendered output is fully opaque and any alpha value is ignored.

I can take of it.

[bghgary]

PR: Force alpha to be 1 with opaque alpha mode in glTF by bghgary · Pull Request #14628 · BabylonJS/Babylon.js · GitHub. This apparently has been wrong since the very beginning . Thanks for the report!