How to create a Scene.environmentTexture (before engine/scene is initialized) ?

[sevaseva]

Hi, I hope everyone is doing well.

I'd like to set <Scene ... environmentTexture={...} attribute as I use a 'react-babylonjs' Scene component.

new CubeTexture(...) constructor that I use to create the texture accepts sceneOrEngine argument and actually seem to require a real one in order to work.

A naive attempt to pass either useEngine() or useScene() fails to

Unhandled Runtime Error
TypeError: this._getEngine() is null

which makes sense as the CubeTexture constructor actually runs before the return statement is executed so there is no Engine yet.

How do I make something like this work?

---

More concrete short snippet of the relevant code in my component source file:

import { Scene, Engine, useEngine, useCanvas, useScene } from 'react-babylonjs'

import {Vector3, CubeTexture, ...} from "@babylonjs/core"

export default function MyScene({ id }) {
    const env = new CubeTexture(
        "foo.env",
        useScene(),...);
    env.rotationY = ....; ...; ...;
    return <>
        <Engine
            antialias
            adaptToDeviceRatio
            canvasId={id}
            renderOptions={{
                whenVisibleOnly: true,
            }}
        >
            <Scene
                clearColor={Color3.Black()}
                ambientColor={Color3.Black()}
                environmentTexture={env}
            >
....

[brianzinn]

Does this help?
https://brianzinn.github.io/react-babylonjs/examples/hooks/scene-engine

You have also a callback when the scene is created. Also, a skybox component. Otherwise you have a chicken/egg problem.

[brianzinn]

it does work if you assign it a texture. ie:

const MyScene = () => {

  const engine = useEngine();
  const [textureReady, setTextureReady] = useState(false);
  const cubeTextureRef = useRef<undefined | CubeTexture>();

  useEffect(() => {
    if (engine !== null) {
      console.log('engine', engine);
      cubeTextureRef.current = new CubeTexture('../../../assets/textures/environment.env', engine);
      setTextureReady(true); // force a re-render to attach
      console.log('texture:', cubeTextureRef.current);
    }
  }, [engine])

  return (
    <Scene environmentTexture={cubeTextureRef.current}>
      ...
    </Scene>
  )
}

[sevaseva]

Thank you for this example, @brianzinn , it is a good one for me to learn.

However, while you are welcome to disagree, but I am pretty convinced that ... if what you just demonstrated is really the intended way of using Scene.environmentTexture attribute in react-babylonjs, then it's a pretty darn terrible corner of react-babylonjs API. It is hard for me to imagine an engineer who, seeing this environmentTexture attribute supported by Scene component and knowing what environmentTexture is in babylonjs, writes something like you just wrote in a first/second/third attempt to set the env texture in their scene.

I don't mean to attack you. And I know you will be first to admit that this library (as well as every other library) isn't perfect, and it isn't for every use case or every user.

But yeah, while it is nice to know environmentTexture attribute isn't completely useless, and it can be put to use if one knows what they are doing and they for some reason really prefer setting this attribute to using Skybox component,.. after seeing this example I am still of the opinion that it'd be better (for the quality of the API and overall usability of react-babylonjs) if this attribute didn't exist at all (or wasn't visible to users).

Because I do like some nice things this library provides (like <Engine renderOptions={{ whenVisibleOnly: true }}> that works and I can trust that you implemented that better and cleaner than I probably would), I'll leave my usage to minimum that brings me specific benefits I want, but do most of the things from a looooong callback function where I'll just code against babylonjs APIs.

If at some point I'll see a tangible benefit for my codebase from building scenes using declarative react-babylonjs (rather than babylonjs APIs directly) I'll consider it again.

Thank you very much. Keep up good work!

[brianzinn]

i put up the sample to help the next person:
https://brianzinn.github.io/react-babylonjs/examples/basic/assign-to

no offense, but your example code would create a new texture with every render

// not a good practice:
<Scene environmentTexture={createEnvTexture(useEngine())}

if you're not going declarative then you are better off with babylonjs-hook https://www.npmjs.com/package/babylonjs-hook, although not sure if all the same render options made their way over to there....

[sevaseva]

Cool, thank you very much!

[sevaseva]

(cannot mark this as the new Answer though because it's not a top level response)

[brianzinn]

I don’t know if I implemented this:

https://forum.babylonjs.com/t/environment-texutre-doesnt-work-when-develop-with-react-babylonjs/20936

[brianzinn]

I got this working:

<Engine antialias adaptToDeviceRatio canvasId="babylon-js">
        <Scene>
          <arcRotateCamera
            name="camera1"
            target={Vector3.Zero()}
            minZ={0.001}
            alpha={0}
            beta={Math.PI / 2}
            radius={5}
            lowerBetaLimit={2}
            upperRadiusLimit={5}
          />
          <hemisphericLight name="light1" intensity={0.9} direction={Vector3.Down()} />
          <sphere name='sphere1' segments={16} diameter={2}>
            <pbrMaterial
              name='pbr'
              albedoColor={new Color3(1, 0.766, 0.336)}
              metallic={1.0}
              roughness={1.0}
              useRoughnessFromMetallicTextureAlpha={false} useRoughnessFromMetallicTextureGreen useMetallnessFromMetallicTextureBlue>
              <texture url='../../assets/textures/mr.jpg' assignTo='metallicTexture' />
            </pbrMaterial>
          </sphere>
          <cubeTexture level={0.5} assignTo="environmentTexture" rootUrl='../../assets/textures/environment.env' />
        </Scene>
      </Engine>

Would that work for you? I'll need to commit the code changes before it would work on your side.

[brianzinn]

this was the example that I copied: https://playground.babylonjs.com/#2FDQT5#1153

[sevaseva]

Would that work for you?

I assume you mean that the change you drafted adds assignTo attribute to all texture components including cubeTexture, texture and others, and the expected behavior is that it

1. fails at compile time or runtime if the value assigned to that attribute is not a string (because we interpret that value as an attribute in a component)
2. assigns the texture[1] as value to the attribute of the immediate parent component
3. fails at compile time or runtime if the attribute with that name - like metallicTexture or environmentTexture - isn't found in the immediate parent component OR if assigning the texture[1] to that attribute produces an compilation or runtime error

[1] I don't know how textures (values like import {CubeTexture} from "@babylonjs/core"; const x = new CubeTexture(...);) correspond to react components like cubeTexture or texture of react-babylonjs, but I hope that you clarify that in comments in the code and documentation you add with this change.

If that's what you have implemented, it looks like a reasonable change to me.

---

Also adding import { Skybox } from 'react-babylonjs' component as a direct child of Scene worked for me. And I am actually curious exactly what's the difference - if any - there will be in the runtime behavior between using Skybox and using <cubeTexture assignTo="environmentTexture"> direct child component of Scene. If you would mention that in comments and/or documentation that you commit with the code change and point me to that commit, I'd appreciate that.

(Actually, if there happens to be no difference at all, then - depending on your philosophy for this library of components, it may not necessarily be a good idea to add this assignTo attribute new behavior. I haven't been looking at this library enough to know what this philosophy is.)

---

Also another idea, now that you are adding this assignTo attribute (I am assuming no components currently have that attrubute and you are planning to add it only to texture components), consider just adding it to all react-babylonjs components. Assuming that you can specify a relatively simple rule how the value to be assigned (e.g. new CubeTexture(...) value in my example) is deducted from any component. If this is easily specifiable without too much confusion and if it is implementable, it may be a better idea than just implement it as a special case only for textures (which I assume you are planning to do; although I suppose this may be a wrong assumption).

---

Thanks! Please link the commit when you push it and let me know what version it will be released with. Keep up the good work!

[sevaseva]

I marked this response of yours as Answer. I am assuming you will commit that change. I'll mark something else as answer if you change your mind. Keep us posted :)

[sevaseva]

... on the other hand if you add <cubeTexture ... assignTo="environmentTexture" /> it means you plan to keep Scene.environmentTexture attribute.

Are you planning to address in some way the issue of Scene.environmentTexture being present and easily discoverable, but attempts to use it naturally leading to frustration and lost time?