React and Babylon.js - dealing with textures (scene parameter - null?)

Questions
1

Hi

I started using React, Typescript and Babylon as my new stack, and I am still looking for best approaches and practices to create my own boilerplate for the 3D projects.

One issue I encountered is this.

I want to have the structure like this

  1. images.ts (where I load all images that I need to create textures from)
    image

  2. textures.ts (where I create texture from the images defined above)
    image

So furthermore I can have like materials.ts and so on.

The point is that in textures.ts I don’t have a “scene” parameter (scene probably is not even created yet at this point). So I can pass “null” as an argument for scene. But this doesn’t work for VideoTexture. Texture has scene as optional parameter, while VideoTexture does not, so I am getting error at runtime.

image

Makes sense I guess. But I don’t know how to deal with this issue. I would appreciate any ideas that could help improve the structure and fix this issue.

Thanks

2

Hi,

You should try to convert your video to mp4 because *.mov is no longer widely used on the internet. Apple itself generally now uses MP4 for video.

1 Like
3

Good stack :), did you try vite ?

1 Like
4

Hey.

Thanks for the advice. I intended to convert those to mp4 at some point :smiley:
As for the Vite. I just recently started to encounter Vite, and I will most likely include it in my workflow really soon. Need to do some more research though.

1 Like
5

if you have the scene ref (useRef?) in your calling code you could try something like:

// in textures.ts - you can add a guard clause scene isn't null if you want
const posterPenguin_texture = (scene: Nullable<Scene | ThinEngine>) => new VideoTexture(posterPenguin, scene, false, false);

// in calling code
import posterPenguin_texture from './textures.ts';

// set the scene somewhere
const sceneRef = useRef<Scene|null>(null);
...

posterPenguin_texture(sceneRef.current);

hard to say without full code, but also if you put the images in /public then you can serve them and your browser will cache them and load on demand. I think what you have there will bundle videos/images.

edit: the error may be how you are passing in the images. you may need to base64 encode and put in data:... - I haven’t tried with imports before that way.

1 Like
6

Hey. I actually solved the issue the with almost exact way you explained.

It is plausible for now. Will probably try to look for more elegant solution in the future.

Thanks @brianzinn. I will mark your answer as solution, as that’s pretty much how I solved it. Also, I will probably ping you from time to time if I need some help, as I am looking for “perfect” architecture to combine Babylon and React, and so far I have many issues that I am slowly clearing up, but from time to time something weird pops up.

1 Like