diff --git a/docs/learning-note/graphic/_category_.json b/docs/learning-note/graphic/_category_.json
new file mode 100644
index 0000000..677dbf7
--- /dev/null
+++ b/docs/learning-note/graphic/_category_.json
@@ -0,0 +1 @@
+{"label":"Graphic","position":3,"link":{"type":"generated-index"}}
\ No newline at end of file
diff --git a/docs/learning-note/graphic/webgl/_category_.json b/docs/learning-note/graphic/webgl/_category_.json
new file mode 100644
index 0000000..96b7fc0
--- /dev/null
+++ b/docs/learning-note/graphic/webgl/_category_.json
@@ -0,0 +1 @@
+{"label":"Webgl","position":1,"link":{"type":"generated-index"}}
\ No newline at end of file
diff --git a/docs/learning-note/graphic/webgl/rn-webgl.md b/docs/learning-note/graphic/webgl/rn-webgl.md
new file mode 100644
index 0000000..bc0120f
--- /dev/null
+++ b/docs/learning-note/graphic/webgl/rn-webgl.md
@@ -0,0 +1,91 @@
+---
+sidebar_position: 1
+---
+    
+# How to Integrate R3F into a CLI React Native App
+
+1. Install the `expo` package: 
+```bash
+npm install expo expo-file-system expo-asset
+```
+
+
+2. Configure Android (`android/settings.gradle`): 
+```gradle
+1. Old way
+apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle")
+useExpoModules()
+
+2. New way
+pluginManagement {
+    includeBuild("../node_modules/@react-native/gradle-plugin")
+    
+    // 1. ADD THIS EXPO BLOCK to locate the new plugin
+    def expoPluginsPath = new File(
+        providers.exec {
+            workingDir(rootDir)
+            commandLine("node", "--print", "require.resolve('expo-modules-autolinking/package.json', { paths: [require.resolve('expo/package.json')] })")
+        }.standardOutput.asText.get().trim(),
+        "../android/expo-gradle-plugin"
+    ).absolutePath
+    includeBuild(expoPluginsPath)
+}
+
+plugins {
+    id("com.facebook.react.settings")
+    // 2. ADD THIS LINE to apply the plugin
+    id("expo-autolinking-settings") 
+}
+
+extensions.configure(com.facebook.react.ReactSettingsExtension){ ex ->
+    // 3. MODIFY THIS LINE to pass the Expo command
+    ex.autolinkLibrariesFromCommand(expoAutolinking.rnConfigCommand) 
+}
+
+rootProject.name = 'YourAppName' // <-- Keep your actual project name here
+include ':app'
+includeBuild('../node_modules/@react-native/gradle-plugin')
+
+// 4. ADD THESE 3 LINES AT the very bottom
+expoAutolinking.useExpoModules()
+expoAutolinking.useExpoVersionCatalog()
+includeBuild(expoAutolinking.reactNativeGradlePlugin)
+```
+
+
+3. Configure iOS (`ios/Podfile`)
+```ruby
+target 'YourAppName' do
+  use\_expo\_modules!
+  config = use\_native\_modules!
+  # ... rest of your config
+end
+```
+
+
+4. install R3F
+```bash
+npm install three @react-three/fiber expo-gl
+```
+
+5. Rebuild
+
+- iOS: `cd ios && pod install` then rebuild your app.
+
+- Android: Rebuild your app (`npx react-native run-android`).
+
+Tips:
+
+- Metro: Start your server with the reset cache flag:
+```bash
+npx react-native start --reset-cache
+```
+
+- Android: Clean cache and rebuild your app.
+```bash
+cd android && ./gradlew clean && cd ..
+npx react-native run-android
+```
+
+<div style={{textAlign: 'right'}}><small style={{color: 'grey'}}>last modified at March 1, 2026 00:14</small></div>
+      
\ No newline at end of file
diff --git a/docs/learning-note/hardware/_category_.json b/docs/learning-note/hardware/_category_.json
index 061b466..6f6cf9d 100644
--- a/docs/learning-note/hardware/_category_.json
+++ b/docs/learning-note/hardware/_category_.json
@@ -1 +1 @@
-{"label":"Hardware","position":3,"link":{"type":"generated-index"}}
\ No newline at end of file
+{"label":"Hardware","position":4,"link":{"type":"generated-index"}}
\ No newline at end of file
diff --git a/docs/learning-note/investment/_category_.json b/docs/learning-note/investment/_category_.json
index 349bcf2..897e71d 100644
--- a/docs/learning-note/investment/_category_.json
+++ b/docs/learning-note/investment/_category_.json
@@ -1 +1 @@
-{"label":"Investment","position":4,"link":{"type":"generated-index"}}
\ No newline at end of file
+{"label":"Investment","position":5,"link":{"type":"generated-index"}}
\ No newline at end of file
diff --git a/docs/learning-note/javascript/_category_.json b/docs/learning-note/javascript/_category_.json
index 94d17c0..181de6e 100644
--- a/docs/learning-note/javascript/_category_.json
+++ b/docs/learning-note/javascript/_category_.json
@@ -1 +1 @@
-{"label":"Javascript","position":5,"link":{"type":"generated-index"}}
\ No newline at end of file
+{"label":"Javascript","position":6,"link":{"type":"generated-index"}}
\ No newline at end of file
diff --git a/docs/learning-note/linux/_category_.json b/docs/learning-note/linux/_category_.json
index a6ce35e..913a432 100644
--- a/docs/learning-note/linux/_category_.json
+++ b/docs/learning-note/linux/_category_.json
@@ -1 +1 @@
-{"label":"Linux","position":6,"link":{"type":"generated-index"}}
\ No newline at end of file
+{"label":"Linux","position":7,"link":{"type":"generated-index"}}
\ No newline at end of file
diff --git a/docs/learning-note/react/_category_.json b/docs/learning-note/react/_category_.json
index 7ad272c..49d04c9 100644
--- a/docs/learning-note/react/_category_.json
+++ b/docs/learning-note/react/_category_.json
@@ -1 +1 @@
-{"label":"React","position":7,"link":{"type":"generated-index"}}
\ No newline at end of file
+{"label":"React","position":8,"link":{"type":"generated-index"}}
\ No newline at end of file
diff --git a/docs/learning-note/rust/_category_.json b/docs/learning-note/rust/_category_.json
index e093273..c575516 100644
--- a/docs/learning-note/rust/_category_.json
+++ b/docs/learning-note/rust/_category_.json
@@ -1 +1 @@
-{"label":"Rust","position":8,"link":{"type":"generated-index"}}
\ No newline at end of file
+{"label":"Rust","position":9,"link":{"type":"generated-index"}}
\ No newline at end of file
diff --git a/docs/learning-note/science/_category_.json b/docs/learning-note/science/_category_.json
index 7f2d6c6..372c17b 100644
--- a/docs/learning-note/science/_category_.json
+++ b/docs/learning-note/science/_category_.json
@@ -1 +1 @@
-{"label":"Science","position":9,"link":{"type":"generated-index"}}
\ No newline at end of file
+{"label":"Science","position":10,"link":{"type":"generated-index"}}
\ No newline at end of file
diff --git a/docs/learning-note/stenography/_category_.json b/docs/learning-note/stenography/_category_.json
index 32f390f..e9e4257 100644
--- a/docs/learning-note/stenography/_category_.json
+++ b/docs/learning-note/stenography/_category_.json
@@ -1 +1 @@
-{"label":"Stenography","position":10,"link":{"type":"generated-index"}}
\ No newline at end of file
+{"label":"Stenography","position":11,"link":{"type":"generated-index"}}
\ No newline at end of file