clem
September 9, 2022, 3:36am
1
Hello everyone,
Versions:
@babylon/js/core -> 5.21.0
@babylonjs/react-native-iosandroid-0-65
My project is using react native (iOS) and I’m getting an error while running a sample code with a reflection probe:
The full error is:
TypeError: undefined is not an object (evaluating 'gl.TEXTURE_CUBE_MAP')
ThinEngine.prototype.createRenderTargetCubeTexture
-> engine.renderTargetCube.js:20:33
RenderTargetTexture
-> renderTargetTexture.js:148:39
ReflectionProbe
-> reflectionProbe.js:75:37
[...]
Cedric
September 9, 2022, 7:53am
2
Hi @clem
Rendering to a cubemap is not currently supported in BabylonNative/BabylonReactNative
We have to ETA yet. Sorry for that.
1 Like
clem
September 9, 2022, 6:32pm
3
Hey @Cedric , thanks for the quick response, I’m curious, is the work required to support this significant? I can consider doing a patch if you point me in the right direction. In the meantime, I’m thinking of generating the environment file offline (maybe that can actually be done with the babylon web editor?).
Cedric
September 12, 2022, 8:17am
4
It’s quite a difficult change. I’ve started a PR some time ago :
BabylonJS:master
← CedricGuillemet:cubemapRendering
opened 03:09PM - 28 Jun 21 UTC
For use with pointlight shadows.
Also fixes invertY for RTT and cubemap loading… .
`FrameBuffer` can refer to a 2D Framebuffer or it can holds 6 framebuffers for cubemap. A boolean propery `m_cubeFrameBuffer` is used to determine its nature.
This PR will be updated once https://github.com/BabylonJS/Babylon.js/pull/10581 is in a new NPM.
But I didn’t finish it (priorities…)
I think @sebavan worked on env file filtering some time ago.
2 Likes
Thanks Cedric for all your hard work! Is there any way to get a envTexture from the phone camera, so it can be used with reflections and refractions and PBR materials? I’ve seen some implementations using ReflectionProbes to create those using the phone camera image but at this stage it cannot be used on BabylonNative/BabylonReactNative.
Thanks!
Cedric
August 10, 2023, 9:31am
6
Hi @rformato
IIRC Babylon React Native has access to camera on Android and iOS.
So, this porting this code https://www.babylonjs-playground.com/#9ZA2CA#0
with BRN should work.
Once the camera texture is available, it should be possible to use it as a reflection probe, I guess.
Do you know if it’s possible to use a 2d texture as a reflection probe @Evgeni_Popov ?
We can use an equirectangular texture for the reflection texture.
See this post to convert a regular texture to an equirectangular texture:
1 Like
Thanks a lot Cedric!
I’m still struggling to understand how to create the VideoTexture from the native camera in BRN.
I have tried the following
const video = engine.createVideoElement({video: true});
return new VideoTexture('vt', video, scene);
but the resulting texture is not working.
I’ve not been able to find examples. Could you please point me to the right direction?
Thanks a lot!
Cedric
August 11, 2023, 7:36am
9
This code should be portable. let me know:
scene.activeCamera.position.set(0, 1, -10);
scene.activeCamera.setTarget(new BABYLON.Vector3(0, 1, 0));
scene.meshes[0].setEnabled(false);
var plane = BABYLON.MeshBuilder.CreatePlane("plane", {size: 1, sideOrientation: BABYLON.Mesh.DOUBLESIDE});
plane.rotation.y = Math.PI;
plane.rotation.z = Math.PI;
plane.position.y = 1;
var mat = new BABYLON.StandardMaterial("mat", scene);
mat.diffuseColor = BABYLON.Color3.Black();
var tex = BABYLON.VideoTexture.CreateFromWebCam(scene, function(videoTexture) {
const videoSize = videoTexture.getSize();
mat.emissiveTexture = videoTexture;
plane.material = mat;
plane.scaling.x = 5;
plane.scaling.y = 5 * (videoSize.height / videoSize.width);
console.log("Video texture size: " + videoSize);
}, { maxWidth: 1280, maxHeight: 720, facingMode: 'environment'});
Thanks a lot Cedric,
one thing I fear I was not describing is that I’m using AR.
So once I call
BABYLON.VideoTexture.CreateFromWebCam
the camera background in AR and the tracking stop.
Sorry for that, I should have written since the beginning.
Cedric
August 11, 2023, 8:53am
11
I’ve not seen a link between the camera texture and any public API for accessing it.
And light estimation is available in Babylon.js but not yet for BabylonNative
opened 06:00PM - 14 Aug 20 UTC
help wanted
WebXR Lighting Estimation [specs](https://github.com/immersive-web/lighting-esti… mation/blob/master/lighting-estimation-explainer.md)
This need to get exposed (or some forms of it) such that [ARKit](https://developer.apple.com/documentation/arkit/arlightestimate) and [ARCore](https://developers.google.com/ar/develop/unity/light-estimation) implementations can get surfaced.