@babylonjs/react-native 0.4.0-alpha.43 → 0.4.0-alpha.47

package/EngineView.d.ts

@@ -4,6 +4,7 @@ import { Camera } from '@babylonjs/core';
 export interface EngineViewProps extends ViewProps {
     camera?: Camera;
     displayFrameRate?: boolean;
+    isTransparent?: boolean;
     onInitialized?: (view: EngineViewCallbacks) => void;
 }
 export interface EngineViewCallbacks {

package/EngineView.js

@@ -10,6 +10,7 @@ export const EngineView = (props) => {
     const [sceneStats, setSceneStats] = useState();
     const engineViewRef = useRef(null);
     const snapshotPromise = useRef();
+    const isTransparent = props.isTransparent || false;
     useEffect(() => {
         (async () => {
             setInitialized(await ensureInitialized());
@@ -97,7 +98,7 @@ export const EngineView = (props) => {
     }, []);
     if (initialized !== false) {
         return (React.createElement(View, { style: [{ flex: 1 }, props.style, { overflow: "hidden" }] },
-            initialized && React.createElement(NativeEngineView, { ref: engineViewRef, style: { flex: 1 }, onSnapshotDataReturned: snapshotDataReturnedHandler }),
+            initialized && React.createElement(NativeEngineView, { ref: engineViewRef, style: { flex: 1 }, onSnapshotDataReturned: snapshotDataReturnedHandler, isTransparent: isTransparent }),
             sceneStats !== undefined &&
                 React.createElement(View, { style: { backgroundColor: '#00000040', opacity: 1, position: 'absolute', right: 0, left: 0, top: 0, flexDirection: 'row-reverse' } },
                     React.createElement(Text, { style: { color: 'yellow', alignSelf: 'flex-end', margin: 3, fontVariant: ['tabular-nums'] } },

package/EngineView.js.map

@@ -1 +1 @@
-{"version":3,"file":"EngineView.js","sourceRoot":"","sources":["../../Modules/@babylonjs/react-native/EngineView.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"EngineView.js","sourceRoot":"","sources":["../../Modules/@babylonjs/react-native/EngineView.tsx"],"names":[],"mappings":"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"}

package/README.md

@@ -76,4 +76,12 @@ const MyComponent: FunctionComponent<MyComponentProps> = (props: MyComponentProp
 }
 ```
 
+Also the `EngineView` has a boolean `isTransparent` flag which defines whether the background of the scene should be transparent or not.
+
+e.g.
+
+```tsx
+<EngineView style={{flex: 1}} camera={camera} isTransparent={true} />
+```
+
 Note: Currently only one `EngineView` can be active at any given time. Multi-view will be supported in a future release.

package/android/build.gradle

@@ -89,7 +89,7 @@ repositories {
 dependencies {
     //noinspection GradleDynamicVersion
     implementation 'com.facebook.react:react-native:+'  // From node_modules
-    implementation 'com.google.ar:core:1.27.0'
+    implementation 'com.google.ar:core:1.22.0'
 }
 
 def configureReactNativePom(def pom) {

package/android/src/main/java/com/babylonreactnative/EngineView.java

@@ -2,37 +2,41 @@ package com.babylonreactnative;
 
 import android.annotation.TargetApi;
 import android.graphics.Bitmap;
+import android.graphics.SurfaceTexture;
 import android.os.Build;
 import android.os.Handler;
 import android.os.HandlerThread;
 import android.util.Base64;
 import android.view.MotionEvent;
 import android.view.PixelCopy;
+import android.view.Surface;
 import android.view.SurfaceHolder;
 import android.view.SurfaceView;
+import android.view.TextureView;
 import android.view.View;
 import android.widget.FrameLayout;
 
+import androidx.annotation.NonNull;
+
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.uimanager.UIManagerModule;
 import com.facebook.react.uimanager.events.EventDispatcher;
 
 import java.io.ByteArrayOutputStream;
 
-public final class EngineView extends FrameLayout implements SurfaceHolder.Callback, View.OnTouchListener {
+public final class EngineView extends FrameLayout implements SurfaceHolder.Callback, TextureView.SurfaceTextureListener, View.OnTouchListener {
     private static final FrameLayout.LayoutParams childViewLayoutParams = new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
-    private final SurfaceView primarySurfaceView;
-    private final SurfaceView xrSurfaceView;
+    private TextureView transparentTextureView;
+    private Surface transparentSurface = null;
+    private SurfaceView opaqueSurfaceView = null;
+    private SurfaceView xrSurfaceView;
     private final EventDispatcher reactEventDispatcher;
     private Runnable renderRunnable;
 
     public EngineView(ReactContext reactContext) {
         super(reactContext);
 
-        this.primarySurfaceView = new SurfaceView(reactContext);
-        this.primarySurfaceView.setLayoutParams(EngineView.childViewLayoutParams);
-        this.primarySurfaceView.getHolder().addCallback(this);
-        this.addView(this.primarySurfaceView);
+        this.setIsTransparent(false);
 
         this.xrSurfaceView = new SurfaceView(reactContext);
         this.xrSurfaceView.setLayoutParams(childViewLayoutParams);
@@ -60,22 +64,43 @@ public final class EngineView extends FrameLayout implements SurfaceHolder.Callb
         this.reactEventDispatcher = reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
     }
 
-    @Override
-    public void surfaceCreated(SurfaceHolder surfaceHolder) {
-        this.renderRunnable = new Runnable() {
-            @Override
-            public void run() {
-                if (BabylonNativeInterop.isXRActive()) {
-                    EngineView.this.xrSurfaceView.setVisibility(View.VISIBLE);
-                } else {
-                    EngineView.this.xrSurfaceView.setVisibility(View.INVISIBLE);
-                }
+    // ------------------------------------
+    // TextureView related
 
-                BabylonNativeInterop.renderView();
-                EngineView.this.postOnAnimation(this);
+    public void setIsTransparent(Boolean isTransparent) {
+        if (isTransparent) {
+            if (this.opaqueSurfaceView != null) {
+                this.opaqueSurfaceView.setVisibility(View.GONE);
+                this.opaqueSurfaceView = null;
             }
-        };
-        this.postOnAnimation(this.renderRunnable);
+            if (this.transparentTextureView == null) {
+                this.transparentTextureView = new TextureView(this.getContext());
+                this.transparentTextureView.setLayoutParams(EngineView.childViewLayoutParams);
+                this.transparentTextureView.setSurfaceTextureListener(this);
+                this.transparentTextureView.setOpaque(false);
+                this.addView(this.transparentTextureView);
+            }
+        } else {
+            if (this.transparentTextureView != null) {
+                this.transparentTextureView.setVisibility(View.GONE);
+                this.transparentTextureView = null;
+            }
+            if (this.opaqueSurfaceView == null) {
+                this.opaqueSurfaceView = new SurfaceView(this.getContext());
+                this.opaqueSurfaceView.setLayoutParams(EngineView.childViewLayoutParams);
+                this.opaqueSurfaceView.getHolder().addCallback(this);
+                this.addView(this.opaqueSurfaceView);
+            }
+        }
+        // xr view needs to be on top of views that might be created after it.
+        if (this.xrSurfaceView != null) {
+            this.xrSurfaceView.bringToFront();
+        }
+    }
+
+    @Override
+    public void surfaceCreated(SurfaceHolder surfaceHolder) {
+        this.startRenderLoop();
     }
 
     @Override
@@ -89,6 +114,43 @@ public final class EngineView extends FrameLayout implements SurfaceHolder.Callb
         this.renderRunnable = null;
     }
 
+    @Override
+    public void onSurfaceTextureAvailable(@NonNull SurfaceTexture surfaceTexture, int i, int i1) {
+        this.startRenderLoop();
+        this.acquireNewTransparentSurface(surfaceTexture);
+        BabylonNativeInterop.updateView(this.transparentSurface);
+    }
+
+    @Override
+    public void onSurfaceTextureSizeChanged(@NonNull SurfaceTexture surfaceTexture, int i, int i1) {
+        this.acquireNewTransparentSurface(surfaceTexture);
+        BabylonNativeInterop.updateView(this.transparentSurface);
+    }
+
+    @Override
+    public boolean onSurfaceTextureDestroyed(@NonNull SurfaceTexture surfaceTexture) {
+        this.stopRenderLoop();
+        this.transparentSurface.release();
+        this.transparentSurface = null;
+        return false;
+    }
+
+    @Override
+    public void onSurfaceTextureUpdated(@NonNull SurfaceTexture surfaceTexture) {
+        this.acquireNewTransparentSurface(surfaceTexture);
+        BabylonNativeInterop.updateView(this.transparentSurface);
+    }
+
+    private void acquireNewTransparentSurface(@NonNull SurfaceTexture surfaceTexture) {
+        if (this.transparentSurface != null) {
+            this.transparentSurface.release();
+        }
+        this.transparentSurface = new Surface(surfaceTexture);
+    }
+
+    // ------------------------------------
+    // Common
+
     @Override
     public boolean onTouch(View view, MotionEvent motionEvent) {
         BabylonNativeInterop.reportMotionEvent(motionEvent);
@@ -114,13 +176,20 @@ public final class EngineView extends FrameLayout implements SurfaceHolder.Callb
         helperThread.start();
         final Handler helperThreadHandler = new Handler(helperThread.getLooper());
 
-        SurfaceView surfaceView = this.primarySurfaceView;
+        Surface sourceSurface = this.transparentSurface;
         if (BabylonNativeInterop.isXRActive()) {
-            surfaceView = this.xrSurfaceView;
+            sourceSurface = this.xrSurfaceView.getHolder().getSurface();
+        } else if (this.opaqueSurfaceView != null) {
+            sourceSurface = this.opaqueSurfaceView.getHolder().getSurface();
         }
+        PixelCopy.request(sourceSurface, bitmap, getOnPixelCopyFinishedListener(bitmap, helperThread), helperThreadHandler);
+    }
 
-        // Request the pixel copy.
-        PixelCopy.request(surfaceView, bitmap, (copyResult) ->  {
+    // ---------------------------------------------------------------------------------------------
+    // Returns the listener for the PixelCopy.request function call
+    @NonNull
+    private PixelCopy.OnPixelCopyFinishedListener getOnPixelCopyFinishedListener(Bitmap bitmap, HandlerThread helperThread) {
+        return (copyResult) -> {
             // If the pixel copy was a success then convert the image to a base 64 encoded jpeg and fire the event.
             String encoded = "";
             if (copyResult == PixelCopy.SUCCESS) {
@@ -130,10 +199,32 @@ public final class EngineView extends FrameLayout implements SurfaceHolder.Callb
                 bitmap.recycle();
                 encoded = Base64.encodeToString(byteArray, Base64.DEFAULT);
             }
-
             SnapshotDataReturnedEvent snapshotEvent = new SnapshotDataReturnedEvent(this.getId(), encoded);
             reactEventDispatcher.dispatchEvent(snapshotEvent);
             helperThread.quitSafely();
-        }, helperThreadHandler);
+        };
+    }
+
+    private void startRenderLoop() {
+        if(this.renderRunnable == null){
+            this.renderRunnable = new Runnable() {
+                @Override
+                public void run() {
+                    if (BabylonNativeInterop.isXRActive()) {
+                        EngineView.this.xrSurfaceView.setVisibility(View.VISIBLE);
+                    } else {
+                        EngineView.this.xrSurfaceView.setVisibility(View.INVISIBLE);
+                    }
+                    BabylonNativeInterop.renderView();
+                    EngineView.this.postOnAnimation(this);
+                }
+            };
+            this.postOnAnimation(this.renderRunnable);
+        }
+    }
+
+    private void stopRenderLoop() {
+        this.removeCallbacks(this.renderRunnable);
+        this.renderRunnable = null;
     }
 }

package/android/src/main/java/com/babylonreactnative/EngineViewManager.java

@@ -1,5 +1,7 @@
 package com.babylonreactnative;
 
+import android.widget.FrameLayout;
+
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 
@@ -7,6 +9,7 @@ import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.common.MapBuilder;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
 
 import java.util.Map;
 
@@ -20,6 +23,11 @@ public final class EngineViewManager extends SimpleViewManager<EngineView> {
         return "EngineView";
     }
 
+    @ReactProp(name = "isTransparent")
+    public void setIsTransparent(EngineView view, Boolean isTransparent) {
+        view.setIsTransparent(isTransparent);
+    }
+
     @NonNull
     @Override
     protected EngineView createViewInstance(@NonNull ThemedReactContext reactContext) {

package/ios/BabylonNativeInterop.mm

@@ -36,7 +36,7 @@ static NSMutableArray* activeTouches = [NSMutableArray new];
         });
     } };
 
-    Babylon::Initialize(*GetJSIRuntime(bridge), std::move(jsDispatcher));
+    BabylonNative::Initialize(*GetJSIRuntime(bridge), std::move(jsDispatcher));
 
     [[NSNotificationCenter defaultCenter] removeObserver:self
         name:RCTBridgeWillInvalidateModulesNotification
@@ -51,7 +51,7 @@ static NSMutableArray* activeTouches = [NSMutableArray new];
 // NOTE: This happens during dev mode reload, when the JS engine is being shutdown and restarted.
 + (void)onBridgeWillInvalidate:(NSNotification*)notification
 {
-    Babylon::Deinitialize();
+    BabylonNative::Deinitialize();
 }
 
 + (void)updateView:(MTKView*)mtkView {
@@ -59,24 +59,24 @@ static NSMutableArray* activeTouches = [NSMutableArray new];
     const int width = static_cast<int>(mtkView.bounds.size.width * scale);
     const int height = static_cast<int>(mtkView.bounds.size.height * scale);
     if (width != 0 && height != 0) {
-        Babylon::UpdateView((__bridge void*)mtkView, width, height);
+        BabylonNative::UpdateView(mtkView, width, height);
     }
 }
 
 + (void)renderView {
-    Babylon::RenderView();
+    BabylonNative::RenderView();
 }
 
 + (void)resetView {
-    Babylon::ResetView();
+    BabylonNative::ResetView();
 }
 
 + (void)updateXRView:(MTKView*)mtkView {
-    Babylon::UpdateXRView((__bridge void*)mtkView);
+    BabylonNative::UpdateXRView(mtkView);
 }
 
 + (bool)isXRActive {
-    return Babylon::IsXRActive();
+    return BabylonNative::IsXRActive();
 }
 
 + (void)reportTouchEvent:(MTKView*)mtkView touches:(NSSet<UITouch*>*)touches event:(UIEvent*)event {
@@ -98,14 +98,14 @@ static NSMutableArray* activeTouches = [NSMutableArray new];
                         pointerId = [activeTouches count];
                         [activeTouches addObject:touch];
                     }
-                    Babylon::SetTouchButtonState(static_cast<uint32_t>(pointerId), true, x, y);
+                    BabylonNative::SetTouchButtonState(static_cast<uint32_t>(pointerId), true, x, y);
                     break;
                 }
 
                 case UITouchPhaseMoved: {
                     NSUInteger pointerId = [activeTouches indexOfObject:touch];
                     if (pointerId != NSNotFound) {
-                        Babylon::SetTouchPosition(static_cast<uint32_t>(pointerId), x, y);
+                        BabylonNative::SetTouchPosition(static_cast<uint32_t>(pointerId), x, y);
                     }
                     break;
                 }
@@ -115,7 +115,7 @@ static NSMutableArray* activeTouches = [NSMutableArray new];
                     NSUInteger pointerId = [activeTouches indexOfObject:touch];
                     if (pointerId != NSNotFound) {
                         [activeTouches replaceObjectAtIndex:pointerId withObject:[NSNull null]];
-                        Babylon::SetTouchButtonState(static_cast<uint32_t>(pointerId), false, x, y);
+                        BabylonNative::SetTouchButtonState(static_cast<uint32_t>(pointerId), false, x, y);
                     }
                     break;
                 }

package/ios/EngineViewManager.mm

@@ -11,6 +11,8 @@
 @interface EngineView : MTKView
 
 @property (nonatomic, copy) RCTDirectEventBlock onSnapshotDataReturned;
+@property (nonatomic, assign) BOOL isTransparent;
+
 
 @end
 
@@ -22,7 +24,6 @@
 - (instancetype)init:(RCTBridge*)_bridge {
     if (self = [super initWithFrame:CGRectZero device:MTLCreateSystemDefaultDevice()]) {
         bridge = _bridge;
-
         super.translatesAutoresizingMaskIntoConstraints = false;
         super.colorPixelFormat = MTLPixelFormatBGRA8Unorm_sRGB;
         super.depthStencilPixelFormat = MTLPixelFormatDepth32Float;
@@ -30,6 +31,16 @@
     return self;
 }
 
+- (void)setIsTransparentFlag:(NSNumber*)isTransparentFlag {
+    BOOL isTransparent = [isTransparentFlag intValue] == 1;
+    if(isTransparent){
+        [self setOpaque:NO];
+    } else {
+        [self setOpaque:YES];
+    }
+    self.isTransparent = isTransparent;
+}
+
 - (void)setBounds:(CGRect)bounds {
     [super setBounds:bounds];
     [BabylonNativeInterop updateView:self];
@@ -103,6 +114,10 @@
 
 @implementation EngineViewManager
 
+RCT_CUSTOM_VIEW_PROPERTY(isTransparent, NSNumber*, EngineView){
+    [view setIsTransparentFlag:json];
+}
+
 RCT_EXPORT_MODULE(EngineViewManager)
 
 RCT_EXPORT_VIEW_PROPERTY(onSnapshotDataReturned, RCTDirectEventBlock)