feat: implement skybox texture (#250)

docs/docs/guides/SKYBOX.mdx

@@ -24,7 +24,7 @@ import { Skybox } from 'react-native-filament';
 
 ```tsx
 function Scene() {
-    const cubemap = useBuffer(require("./skybox_cubemap.ktx"))
+    const cubemap = require("./skybox_cubemap.ktx")
 
     return (
         <FilamentView>

package/cpp/core/RNFEngineImpl.Skybox.cpp

@@ -3,11 +3,15 @@
 //
 
 #include "RNFEngineImpl.h"
+
 #include "RNFReferences.h"
 #include "utils/RNFConverter.h"
+
 #include <filament/Scene.h>
 #include <filament/Skybox.h>
 
+#include <ktxreader/Ktx1Reader.h>
+
 namespace margelo {
 void EngineImpl::createAndSetSkybox(std::string hexColor, std::optional<bool> showSun, std::optional<float> envIntensity) {
   Skybox::Builder builder = Skybox::Builder();
@@ -29,9 +33,42 @@ void EngineImpl::createAndSetSkybox(std::string hexColor, std::optional<bool> sh
   _scene->setSkybox(_skybox.get());
 }
 
-void EngineImpl::createAndSetSkybox(std::optional<std::shared_ptr<FilamentBuffer>> textureBuffer, std::optional<bool> showSun,
+void EngineImpl::createAndSetSkybox(std::shared_ptr<FilamentBuffer> textureBuffer, std::optional<bool> showSun,
                                     std::optional<float> envIntensity) {
-  throw std::runtime_error("Not implemented yet");
+  Skybox::Builder builder = Skybox::Builder();
+  if (showSun.has_value()) {
+    builder.showSun(showSun.value());
+  }
+  if (envIntensity.has_value()) {
+    builder.intensity(envIntensity.value());
+  }
+
+  if (!textureBuffer) {
+    throw std::runtime_error("Texture buffer is null");
+  }
+  auto buffer = textureBuffer->getBuffer();
+  if (buffer->getSize() == 0) {
+    throw std::runtime_error("Texture buffer is empty");
+  }
+
+  auto* bundle = new image::Ktx1Bundle(buffer->getData(), buffer->getSize());
+  Texture* cubemap = ktxreader::Ktx1Reader::createTexture(
+      _engine.get(), *bundle, false,
+      [](void* userdata) {
+        auto* bundle = (image::Ktx1Bundle*)userdata;
+        delete bundle;
+      },
+      bundle);
+
+  builder.environment(cubemap);
+
+  Skybox* skybox = builder.build(*_engine);
+  _skybox = References<Skybox>::adoptEngineRef(_engine, skybox, [cubemap](std::shared_ptr<Engine> engine, Skybox* skybox) {
+    Logger::log(TAG, "Destroying Skybox...");
+    engine->destroy(skybox);
+    engine->destroy(cubemap);
+  });
+  _scene->setSkybox(_skybox.get());
 }
 
 void EngineImpl::clearSkybox() {

package/cpp/core/RNFEngineImpl.h

@@ -63,7 +63,7 @@ class EngineImpl : public std::enable_shared_from_this<EngineImpl> {
   std::shared_ptr<NameComponentManagerWrapper> createNameComponentManager();
   std::shared_ptr<MaterialWrapper> createMaterial(std::shared_ptr<FilamentBuffer> materialBuffer);
   void createAndSetSkybox(std::string hexColor, std::optional<bool> showSun, std::optional<float> envIntensity);
-  void createAndSetSkybox(std::optional<std::shared_ptr<FilamentBuffer>> textureBuffer, std::optional<bool> showSun,
+  void createAndSetSkybox(std::shared_ptr<FilamentBuffer> textureBuffer, std::optional<bool> showSun,
                           std::optional<float> envIntensity);
   void clearSkybox();
   void setAutomaticInstancingEnabled(bool enabled);

package/example/Shared/src/App.tsx

@@ -18,6 +18,7 @@ import { FadeOut } from './FadeOut'
 import { CastShadow } from './CastShadow'
 import { ScaleEffect } from './ScaleEffect'
 import { ChangeMaterials } from './ChangeMaterials'
+import { SkyboxExample } from './SkyboxExample'
 
 function NavigationItem(props: { name: string; route: string }) {
   const navigation = useNavigation()
@@ -62,6 +63,7 @@ function HomeScreen() {
       <NavigationItem name="🌑 Cast Shadow" route="CastShadow" />
       <NavigationItem name="↕️ Scale Effect" route="ScaleEffect" />
       <NavigationItem name="🎨 Change Materials" route="ChangeMaterials" />
+      <NavigationItem name="☁️ Skybox" route="SkyboxExample" />
     </ScrollView>
   )
 }
@@ -103,6 +105,7 @@ function App() {
           <Stack.Screen name="ScaleEffect" component={ScaleEffect} />
           <Stack.Screen name="ChangeMaterials" component={ChangeMaterials} />
           <Stack.Screen name="Test" component={TestScreen} />
+          <Stack.Screen name="SkyboxExample" component={SkyboxExample} />
         </Stack.Navigator>
       </NavigationContainer>
     </GestureHandlerRootView>

package/example/Shared/src/SkyboxExample.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+
+import { StyleSheet } from 'react-native'
+import { FilamentView, Camera, FilamentScene, Model, Light, Skybox } from 'react-native-filament'
+
+function Renderer() {
+  return (
+    <FilamentView style={styles.container}>
+      <Camera />
+      <Light type="directional" intensity={10_00000} colorKelvin={6_500} />
+      <Model source={require('~/assets/buster_drone.glb')} transformToUnitCube />
+
+      <Skybox source={require('~/assets/default_env_ibl.ktx')} />
+    </FilamentView>
+  )
+}
+
+export function SkyboxExample() {
+  return (
+    <FilamentScene>
+      <Renderer />
+    </FilamentScene>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+})