view MSAA

Apps/Playground/playground-shared/App.tsx

@@ -140,7 +140,7 @@ const EngineScreen: FunctionComponent<ViewProps> = (props: ViewProps) => {
                 <Image style={{flex: 1}} source={{uri: snapshotData }} />
               </View>
             }
-            <EngineView camera={camera} onInitialized={onInitialized} displayFrameRate={true} />
+            <EngineView camera={camera} onInitialized={onInitialized} displayFrameRate={true} antiAliasing={2}/>
             <Slider style={{position: 'absolute', minHeight: 50, margin: 10, left: 0, right: 0, bottom: 0}} minimumValue={0.2} maximumValue={2} step={0.01} value={defaultScale} onValueChange={setScale} />
             <Text style={{color: 'yellow',  position: 'absolute', margin: 3}}>{trackingStateToString(trackingState)}</Text>
           </View>

Modules/@babylonjs/react-native-iosandroid/android/src/main/cpp/BabylonNativeInterop.cpp

@@ -72,6 +72,11 @@ extern "C" JNIEXPORT void JNICALL Java_com_babylonreactnative_BabylonNativeInter
     BabylonNative::UpdateView(window, width, height);
 }
 
+extern "C" JNIEXPORT void JNICALL Java_com_babylonreactnative_BabylonNativeInterop_00024BabylonNative_updateMSAA(JNIEnv* env, jclass obj, jint value)
+{
+    BabylonNative::UpdateMSAA(static_cast<uint8_t>(value));
+}
+
 extern "C" JNIEXPORT void JNICALL Java_com_babylonreactnative_BabylonNativeInterop_00024BabylonNative_renderView(JNIEnv* env, jclass obj)
 {
     BabylonNative::RenderView();

Modules/@babylonjs/react-native-iosandroid/android/src/main/java/com/babylonreactnative/BabylonNativeInterop.java

@@ -26,6 +26,7 @@ private static class BabylonNative {
         public static native void renderView();
         public static native void resetView();
         public static native void updateXRView(Surface surface);
+        public static native void updateMSAA(int value);
         public static native boolean isXRActive();
         public static native void setTouchButtonState(int pointerId, boolean isDown, int x, int y);
         public static native void setTouchPosition(int pointerId, int x, int y);
@@ -97,6 +98,10 @@ public static void updateXRView(Surface surface) {
         BabylonNative.updateXRView(surface);
     }
 
+    public static void updateMSAA(int value) {
+        BabylonNative.updateMSAA(value);
+    }
+
     public static boolean isXRActive() {
         return BabylonNative.isXRActive();
     }

Modules/@babylonjs/react-native-iosandroid/android/src/main/java/com/babylonreactnative/EngineView.java

@@ -64,6 +64,9 @@ public void surfaceDestroyed(SurfaceHolder holder) {
         this.reactEventDispatcher = reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
     }
 
+    public void setAntiAliasing(Integer value) {
+        BabylonNativeInterop.updateMSAA(value);
+    }
     // ------------------------------------
     // TextureView related
 

Modules/@babylonjs/react-native-iosandroid/android/src/main/java/com/babylonreactnative/EngineViewManager.java

@@ -28,6 +28,11 @@ public void setIsTransparent(EngineView view, Boolean isTransparent) {
         view.setIsTransparent(isTransparent);
     }
 
+    @ReactProp(name = "antiAliasing")
+    public void setAntiAliasing(EngineView view, Integer value) {
+        view.setAntiAliasing(value);
+    }
+
     @NonNull
     @Override
     protected EngineView createViewInstance(@NonNull ThemedReactContext reactContext) {

Modules/@babylonjs/react-native-iosandroid/ios/BabylonNativeInterop.h

@@ -6,6 +6,7 @@
 @interface BabylonNativeInterop : NSObject
 + (void)initialize:(RCTBridge*)bridge;
 + (void)updateView:(MTKView*)mtkView;
++ (void)updateMSAA:(NSNumber*)value;
 + (void)renderView;
 + (void)resetView;
 + (void)updateXRView:(MTKView*)mtkView;

Modules/@babylonjs/react-native-iosandroid/ios/BabylonNativeInterop.mm

@@ -63,6 +63,10 @@ + (void)updateView:(MTKView*)mtkView {
     }
 }
 
++ (void)updateMSAA:(NSNumber*)value {
+    BabylonNative::UpdateMSAA([value unsignedCharValue]);
+}
+
 + (void)renderView {
     BabylonNative::RenderView();
 }

Modules/@babylonjs/react-native-iosandroid/ios/EngineViewManager.mm

@@ -12,7 +12,7 @@ @interface EngineView : MTKView
 
 @property (nonatomic, copy) RCTDirectEventBlock onSnapshotDataReturned;
 @property (nonatomic, assign) BOOL isTransparent;
-
+@property (nonatomic, assign) NSNumber* antiAliasing;
 
 @end
 
@@ -41,6 +41,10 @@ - (void)setIsTransparentFlag:(NSNumber*)isTransparentFlag {
     self.isTransparent = isTransparent;
 }
 
+- (void)setMSAA:(NSNumber*)value {
+    [BabylonNativeInterop updateMSAA:value];
+}
+
 - (void)setBounds:(CGRect)bounds {
     [super setBounds:bounds];
     [BabylonNativeInterop updateView:self];
@@ -118,6 +122,10 @@ @implementation EngineViewManager
     [view setIsTransparentFlag:json];
 }
 
+RCT_CUSTOM_VIEW_PROPERTY(antiAliasing, NSNumber*, EngineView){
+    [view setMSAA:json];
+}
+
 RCT_EXPORT_MODULE(EngineViewManager)
 
 RCT_EXPORT_VIEW_PROPERTY(onSnapshotDataReturned, RCTDirectEventBlock)

Modules/@babylonjs/react-native-windows/windows/BabylonReactNative/EngineView.cpp

@@ -184,6 +184,10 @@ namespace winrt::BabylonReactNative::implementation {
             {
                 bool isTransparent = propertyValue.AsBoolean();
                 this->CompositeMode(isTransparent ? ElementCompositeMode::MinBlend : ElementCompositeMode::Inherit);
+            } else if (propertyName == "antiAliasing")
+            {
+                auto value = propertyValue.AsUInt8();
+                BabylonNative::UpdateMSAA(value);
             }
         }
     }

Modules/@babylonjs/react-native-windows/windows/BabylonReactNative/EngineViewManager.cpp

@@ -37,6 +37,7 @@ namespace winrt::BabylonReactNative::implementation {
         auto nativeProps = winrt::single_threaded_map<hstring, ViewManagerPropertyType>();
 
         nativeProps.Insert(L"isTransparent", ViewManagerPropertyType::Boolean);
+        nativeProps.Insert(L"antiAliasing", ViewManagerPropertyType::Number);
 
         return nativeProps.GetView();
     }

Modules/@babylonjs/react-native/EngineView.tsx

@@ -9,6 +9,7 @@ export interface EngineViewProps extends ViewProps {
     camera?: Camera;
     displayFrameRate?: boolean;
     isTransparent?: boolean;
+    antiAliasing?: 0 | 1 | 2 | 4 | 8 | 16;
     onInitialized?: (view: EngineViewCallbacks) => void;
 }
 
@@ -26,7 +27,8 @@ export const EngineView: FunctionComponent<EngineViewProps> = (props: EngineView
     const [sceneStats, setSceneStats] = useState<SceneStats>();
     const engineViewRef = useRef<Component<NativeEngineViewProps>>(null);
     const snapshotPromise = useRef<{ promise: Promise<string>, resolve: (data: string) => void }>();
-    const isTransparent = props.isTransparent || false
+    const isTransparent = props.isTransparent ?? false;
+    const antiAliasing = props.antiAliasing ?? 0;
 
     const initialized = useModuleInitializer();
 
@@ -112,7 +114,7 @@ export const EngineView: FunctionComponent<EngineViewProps> = (props: EngineView
     if (initialized !== false) {
         return (
             <View style={[{ flex: 1 }, props.style, { overflow: "hidden" }]}>
-                { initialized && <NativeEngineView ref={engineViewRef} style={{ flex: 1 }} onSnapshotDataReturned={snapshotDataReturnedHandler} isTransparent={isTransparent} /> }
+                { initialized && <NativeEngineView ref={engineViewRef} style={{ flex: 1 }} onSnapshotDataReturned={snapshotDataReturnedHandler} isTransparent={isTransparent} antiAliasing={antiAliasing}/> }
                 { sceneStats !== undefined &&
                 <View style={{ backgroundColor: '#00000040', opacity: 1, position: 'absolute', right: 0, left: 0, top: 0, flexDirection: 'row-reverse' }}>
                     <Text style={{ color: 'yellow', alignSelf: 'flex-end', margin: 3, fontVariant: ['tabular-nums'] }}>FPS: {sceneStats.frameRate.toFixed(0)}</Text>

Modules/@babylonjs/react-native/NativeEngineView.tsx

@@ -5,6 +5,7 @@ declare const global: any;
 
 export interface NativeEngineViewProps extends ViewProps {
     isTransparent: boolean;
+    antiAliasing: number;
     onSnapshotDataReturned?: (event: SyntheticEvent) => void;
 }
 

Modules/@babylonjs/react-native/README.md

@@ -90,4 +90,12 @@ e.g.
 <EngineView style={{flex: 1}} camera={camera} isTransparent={true} />
 ```
 
+To configure anti-aliasing, a property called `antiAliasing` can be changed to a value of 0 or 1 (disable anti-aliasing, default), 2, 4, 8 or 16 (anti-aliasing samples).
+
+e.g.
+
+```tsx
+<EngineView style={{flex: 1}} camera={camera} MSAA={4} />
+```
+
 Note: Currently only one `EngineView` can be active at any given time. Multi-view will be supported in a future release.

Modules/@babylonjs/react-native/shared/BabylonNative.cpp

@@ -88,6 +88,7 @@ namespace BabylonNative
                 g_graphics->UpdateWindow(windowConfig);
                 g_graphics->UpdateSize(width, height);
             }
+            g_graphics->UpdateMSAA(mMSAAValue);
 
             g_graphics->EnableRendering();
             m_isRenderingEnabled = true;
@@ -107,6 +108,15 @@ namespace BabylonNative
             });
         }
 
+        void UpdateMSAA(uint8_t value)
+        {
+            mMSAAValue = value;
+            if (g_graphics)
+            {
+                g_graphics->UpdateMSAA(value);
+            }
+        }
+
         void RenderView()
         {
             // If rendering has not been explicitly enabled, or has been explicitly disabled, then don't try to render.
@@ -225,6 +235,7 @@ namespace BabylonNative
         std::optional<Babylon::Plugins::NativeXr> m_nativeXr{};
 
         std::shared_ptr<bool> m_isXRActive{};
+        uint8_t mMSAAValue{};
     };
 
     namespace
@@ -261,6 +272,18 @@ namespace BabylonNative
         }
     }
 
+    void UpdateMSAA(uint8_t value)
+    {
+        if (auto nativeModule{ g_nativeModule.lock() })
+        {
+            nativeModule->UpdateMSAA(value);
+        }
+        else
+        {
+            throw std::runtime_error{ "UpdateMSAA must not be called before Initialize." };
+        }
+    }
+
     void RenderView()
     {
         if (auto nativeModule{ g_nativeModule.lock() })

Modules/@babylonjs/react-native/shared/BabylonNative.h

@@ -28,6 +28,7 @@ namespace BabylonNative
     void Deinitialize();
 
     void UpdateView(WindowType window, size_t width, size_t height);
+    void UpdateMSAA(uint8_t value);
 
     void RenderView();
     void ResetView();

Package/gulpfile.js

@@ -533,6 +533,13 @@ const validateAssemblediOSAndroid = async () => {
     'Assembled-iOSAndroid/ios/libs/libspirv-cross-msl.a',
     'Assembled-iOSAndroid/ios/libs/libSPIRV.a',
     'Assembled-iOSAndroid/ios/libs/libtinyexr.a',
+	'Assembled-iOSAndroid/ios/libs/libetc1.a',
+    'Assembled-iOSAndroid/ios/libs/libetc2.a',
+    'Assembled-iOSAndroid/ios/libs/libnvtt.a',
+    'Assembled-iOSAndroid/ios/libs/libsquish.a',
+    'Assembled-iOSAndroid/ios/libs/libpvrtc.a',
+    'Assembled-iOSAndroid/ios/libs/libiqa.a',
+    'Assembled-iOSAndroid/ios/libs/libedtaa3.a',
     'Assembled-iOSAndroid/ios/libs/libUrlLib.a',
     'Assembled-iOSAndroid/ios/libs/libWindow.a',
     'Assembled-iOSAndroid/ios/libs/libXMLHttpRequest.a',

Package/iOS/CMakeLists.txt

@@ -5,6 +5,14 @@ include(${CMAKE_CURRENT_SOURCE_DIR}/../../Apps/Playground/Playground/node_module
 set(PACKAGED_LIBS
     astc-codec
     astc
+    etc1
+    etc2
+    nvtt
+    squish
+    pvrtc
+    iqa
+    edtaa3
+    tinyexr
     bgfx
     bimg
     bx