Unable to position the character in HDRI environment

vijay_krishna · November 10, 2023, 5:51am

Hi,

We need to position the avatar into HDRI environment on the ground, we controlled camera settings but we are not able to put the character to get realistic effect.

Can somebody suggest some approach like in blender to position the character

Initially we were able to achieve the same using blender, but glb/gltf format does not support HDRI textures to run from babylonjs.

Thanks
vijay

Leon · November 10, 2023, 7:18am

I have created a minimal template for getting up and running with the latest babylon + typescript + hdri environment.

you can create your own by running

npm init babylon@latest

Or you can see the source code for how to init a environment which both acts as the background and the reflection map.

github.com

leon/create-babylon/blob/main/templates/ts/src/helpers.ts

import { BackgroundMaterial } from '@babylonjs/core/Materials/Background/backgroundMaterial'
import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture'
import { Texture } from '@babylonjs/core/Materials/Textures/texture'
import { CreateBox } from '@babylonjs/core/Meshes/Builders/boxBuilder'
import { Scene } from '@babylonjs/core/scene'

import '@babylonjs/core/Materials/Textures/Loaders/envTextureLoader' // needed for environment texture
import '@babylonjs/core/Misc/dds' // needed for environment texture

export function createEnvironment(scene: Scene) {
  const environmentTexture = CubeTexture.CreateFromPrefilteredData('/environments/environment-specular.env', scene)
  scene.environmentTexture = environmentTexture

  const skyBox = CreateBox('skyBox', { size: 1000 }, scene)
  skyBox.isPickable = false
  skyBox.infiniteDistance = true
  skyBox.ignoreCameraMaxZ = true
  const skyBoxMaterial = new BackgroundMaterial('skyBoxMaterial', scene)
  skyBox.material = skyBoxMaterial
  skyBoxMaterial.reflectionTexture = environmentTexture.clone()

This file has been truncated. show original

vijay_krishna · November 10, 2023, 11:57am

Thanks @Leon for the help…
trying to create PG with yur logic…unable to import external materials into PG

import { CubeTexture } from ‘@babylonjs/core/Materials/Textures/cubeTexture’

can u throw some light how to incorporate this stuff into PG

Thanks
vijay

labris · November 10, 2023, 1:35pm

It is already there. To get it just use BABYLON.CubeTexture

vijay_krishna · November 11, 2023, 11:32am

Thanks @labris for the help…

@Leon using hdri(CreateFromPrefilteredData) unable to load the scene…

using blender, this is possible.
could u help us to achieve the same using babylonjs

Thanks
vijay

sebavan · November 20, 2023, 8:24pm

You are not using the right texture type https://playground.babylonjs.com/#19JGPR#370

Also if you want to move it on the ground you need Skyboxes | Babylon.js Documentation

vijay_krishna · November 21, 2023, 5:34am

Thanks @sebavan

trying ground projection along with shadows by using skyboxes…

like in blender how can i apply Holdout Mask for the ground to get the shadow ?
can u throw some light here…

sebavan · November 21, 2023, 7:15pm

You can see an example here https://aka.ms/groundprojection

vijay_krishna · November 22, 2023, 8:56am

@sebavan its working…

for all 3d environments in .env format
But we have HDR format models, tried this logic for HDR environments, it failed

am just trying to change the logic …

sebavan · November 22, 2023, 4:43pm

It is exactly what I explained in the first answer, you are not using the correct texture type…