How can i apply HDRTexture to Skybox on react-babylonjs

Questions
1

I use react-babylonjs and it is awesome
but it seems to be different with babylonjs

I try to apply my HDRTexture to environment or skybox

on babylon,

const reflectionTexture = new HDRCubeTexture(
      '/testEnvironment.hdr',
      scene,
      128,
      false,
      true,
      false,
      true,
    );
    scene.createDefaultSkybox(reflectionTexture, true, 10000);

//load model
SceneLoader.AppendAsync('', glbPath, scene, undefined, '.glb');

on this code, this hdrTexture reflect my model like light

but on react-babylon, i don’n know how to do it
Skybox component is also different with above texture,
Skybox texture didn’t reflect my model like above reflection texture

please tell me how to reflect texture to my model on react-babylonjs !!

1 Like
2

hi Maxx. good question. Let’s look at the skybox component that is part of the library (and see why it doesn’t work out of the box):

import { Texture } from "@babylonjs/core/Materials/Textures/texture.js";
import React from "react";

interface SkyboxProps {
  rootUrl: string
  size?: number
  name?: string
}

const Skybox: React.FC<SkyboxProps> = (props: SkyboxProps) => 
   <box name={props.name ? `skybox-${props.name}` : 'skybox'} size={props.size ?? 100} infiniteDistance={true} renderingGroupId={0}>
     <standardMaterial name={props.name ? `skybox-material-${props.name}` : 'skybox-material'} backFaceCulling={false} disableLighting={true}>
       <cubeTexture key={`cube-texture-${props.rootUrl}`} rootUrl={props.rootUrl} coordinatesMode={Texture.SKYBOX_MODE} assignTo={'reflectionTexture'} />
     </standardMaterial>
   </box>

export default Skybox

The most important part of that snippet is assignTo, because the texture can be applied to different properties of the material, so we need to let react-babylonjs know which one (otherwise it will assign to diffuseTexture!).

What you need instead is to use <pbrMaterial ../> instead of <standardMaterial ../>. The accompanying source is here that we are trying to duplicate:
Babylon.js/sceneHelpers.ts at c843dcbc3875e9eee184152a10b857f7af9f4993 · BabylonJS/Babylon.js (github.com)

So, one option is to just copy the above and put in a <pbrMaterial .../>.

I don’t know if that creation method is something that I would add to the framework, but what I could do is perhaps:

<createDefaultSkybox texture={reflectionTexture} pbr scale={1000}/>

or

<Skybox texture={reflectionTexture} pbr scale={1000} />
1 Like
4

thank you for reply
but i don’t understand what do i copy

   <Skybox  reflectionTexture={hdrTexture}  size={1000} pbr>
          <pbrMaterial  microSurface={0.96}>
             <hdrCubeTexture
                    url="assets/textures/testEnvironment.hdr"
                    size={1000}
                    gammaSpace={false}
                    noMipmap={false}
                    generateHarmonics
                    prefilterOnLoad
                    ref={hdrTextureRef}
                    coordinatesMode={Texture.SKYBOX_MODE}
                    reflectionTexture={hdrTextureClone}
                    />
          </pbrMaterial>
     </Skybox>

I try this code, but it’s not working…

this video show me what i want exactly…

5

I did not try this, but it should work:

const pbrSkybox= ({rootUrl, blur} = props) => (
  <box name="hdrSkybox" size={1000} infiniteDistance={true} isPickable={false} ignoreCameraMaxZ>
     <pbrMaterial name="skybox" backFaceCulling={false} disableLighting={true} microSurface={(1.0 - blur)} ...>
       <hdrCubeTexture rootUrl={rootUrl} coordinatesMode={Texture.SKYBOX_MODE} assignTo={'reflectionTexture'} ... />
     </pbrMaterial>
   </box>

If you want to use an existing texture - you can always do this and the other properties will be updateable by the reconciler (use disposeOnUnmount if it’s not a clone or you are using the texture elsewhere):

   <hdrCubeTexture fromInstance={hdrTextureClone} disposeOnUmount={false} .../>