add 3d support

Author: bea4dev

backend/src/main.rs

@@ -3,7 +3,7 @@ pub mod ffmpeg;
 pub mod future;
 pub mod util;
 
-use std::{net::SocketAddr, ops::Bound, sync::atomic::AtomicBool};
+use std::{net::SocketAddr, ops::Bound, sync::atomic::AtomicBool, time::{SystemTime, UNIX_EPOCH}};
 
 use axum::{
     Router,
@@ -143,13 +143,33 @@ struct AudioPlanResolved {
     loudness: Option<AudioLoudnessPreset>,
 }
 
+#[derive(Deserialize)]
+struct RenderLogRequest {
+    message: String,
+    level: Option<String>,
+    session: Option<String>,
+    context: Option<serde_json::Value>,
+}
+
+#[derive(Serialize, Clone)]
+struct RenderLogEntry {
+    timestamp_ms: u64,
+    message: String,
+    level: String,
+    session: Option<String>,
+    context: Option<serde_json::Value>,
+}
+
 static RENDER_AUDIO_PLAN: std::sync::LazyLock<std::sync::Mutex<Option<AudioPlanResolved>>> =
     std::sync::LazyLock::new(|| std::sync::Mutex::new(None));
+static RENDER_LOGS: std::sync::LazyLock<std::sync::Mutex<Vec<RenderLogEntry>>> =
+    std::sync::LazyLock::new(|| std::sync::Mutex::new(Vec::new()));
 
 static RENDER_COMPLETED: AtomicUsize = AtomicUsize::new(0);
 static RENDER_TOTAL: AtomicUsize = AtomicUsize::new(0);
 static RENDER_CANCEL: AtomicBool = AtomicBool::new(false);
 static NEXT_SESSION_ID: AtomicUsize = AtomicUsize::new(1);
+const MAX_RENDER_LOGS: usize = 2000;
 
 #[tokio::main]
 async fn main() {
@@ -183,6 +203,12 @@ async fn main() {
                 .get(get_progress_handler)
                 .options(options_handler),
         )
+        .route(
+            "/render_log",
+            post(render_log_handler)
+                .get(get_render_log_handler)
+                .options(options_handler),
+        )
         .route(
             "/render_cancel",
             post(render_cancel_handler).options(options_handler),
@@ -597,6 +623,59 @@ async fn get_progress_handler(State(_state): State<AppState>) -> impl IntoRespon
     (headers, Json(response))
 }
 
+fn now_ms() -> u64 {
+    SystemTime::now()
+        .duration_since(UNIX_EPOCH)
+        .map(|d| d.as_millis() as u64)
+        .unwrap_or(0)
+}
+
+async fn render_log_handler(
+    State(_state): State<AppState>,
+    Json(payload): Json<RenderLogRequest>,
+) -> impl IntoResponse {
+    let mut headers = HeaderMap::new();
+    apply_cors(&mut headers);
+
+    let entry = RenderLogEntry {
+        timestamp_ms: now_ms(),
+        message: payload.message,
+        level: payload.level.unwrap_or_else(|| "info".to_string()),
+        session: payload.session,
+        context: payload.context,
+    };
+
+    {
+        let mut logs = RENDER_LOGS.lock().unwrap();
+        logs.push(entry.clone());
+        if logs.len() > MAX_RENDER_LOGS {
+            let trim = logs.len() - MAX_RENDER_LOGS;
+            logs.drain(0..trim);
+        }
+    }
+
+    let session = entry.session.as_deref().unwrap_or("-");
+    let context = entry
+        .context
+        .as_ref()
+        .map(|value| value.to_string())
+        .unwrap_or_default();
+    info!(
+        "[render_log:{}] {} session={} context={}",
+        entry.level, entry.message, session, context
+    );
+
+    (headers, StatusCode::OK)
+}
+
+async fn get_render_log_handler(State(_state): State<AppState>) -> impl IntoResponse {
+    let mut headers = HeaderMap::new();
+    apply_cors(&mut headers);
+
+    let logs = RENDER_LOGS.lock().unwrap().clone();
+    (headers, Json(logs))
+}
+
 async fn render_cancel_handler(State(_state): State<AppState>) -> impl IntoResponse {
     let mut headers = HeaderMap::new();
     apply_cors(&mut headers);
@@ -617,6 +696,7 @@ async fn reset_handler(State(_state): State<AppState>) -> impl IntoResponse {
     DECODER.clear().await;
     RENDER_CANCEL.store(false, Ordering::Relaxed);
     *RENDER_AUDIO_PLAN.lock().unwrap() = None;
+    RENDER_LOGS.lock().unwrap().clear();
     (headers, StatusCode::OK)
 }
 

docs/docs/lib/3d.md

@@ -0,0 +1,84 @@
+---
+title: 3D
+sidebar_position: 5
+---
+
+FrameScript provides WebGL helpers and a Three.js canvas wrapper that survives context loss.
+Render mode waits for recovery so incomplete frames are avoided.
+
+## WebGL helpers
+
+- `useWebGLContext` initializes WebGL, handles `webglcontextlost`, and recreates resources.
+- `useWebGLFrameWaiter` waits for GPU completion per frame during headless rendering.
+
+```tsx
+import { useRef } from "react"
+import { useWebGLContext, useWebGLFrameWaiter } from "../src/lib/webgl"
+
+const Canvas = () => {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null)
+  const { glRef } = useWebGLContext(canvasRef, ({ gl }) => {
+    // init shaders/buffers
+    return () => {
+      // dispose resources
+    }
+  })
+
+  useWebGLFrameWaiter(glRef)
+
+  return <canvas ref={canvasRef} />
+}
+```
+
+## ThreeCanvas
+
+`<ThreeCanvas />` integrates with `useAnimation` by sampling variables in the `update` callback.
+
+```tsx
+import { useAnimation, useVariable } from "../src/lib/animation"
+import { BEZIER_SMOOTH } from "../src/lib/animation/functions"
+import { seconds } from "../src/lib/frame"
+import { ThreeCanvas, THREE, disposeThreeObject } from "../src/lib/webgl/three"
+
+const Scene = () => {
+  const progress = useVariable(0)
+
+  useAnimation(async (ctx) => {
+    await ctx.move(progress).to(1, seconds(2), BEZIER_SMOOTH)
+    await ctx.move(progress).to(0, seconds(2), BEZIER_SMOOTH)
+  }, [])
+
+  return (
+    <ThreeCanvas
+      setup={({ renderer, size }) => {
+        renderer.outputColorSpace = THREE.SRGBColorSpace
+
+        const scene = new THREE.Scene()
+        const camera = new THREE.PerspectiveCamera(45, size.cssWidth / size.cssHeight, 0.1, 100)
+        camera.position.z = 6
+
+        const mesh = new THREE.Mesh(
+          new THREE.BoxGeometry(),
+          new THREE.MeshStandardMaterial({ color: 0x44aa88 })
+        )
+        scene.add(mesh)
+
+        const light = new THREE.DirectionalLight(0xffffff, 1)
+        light.position.set(2, 3, 4)
+        scene.add(light)
+
+        return {
+          scene,
+          camera,
+          update: ({ frame }) => {
+            const t = progress.get(frame)
+            mesh.position.x = (t - 0.5) * 3
+            mesh.rotation.y = t * Math.PI * 2
+          },
+          dispose: () => disposeThreeObject(mesh),
+        }
+      }}
+    />
+  )
+}
+```

docs/i18n/ja/docusaurus-plugin-content-docs/current/lib/3d.md

@@ -0,0 +1,84 @@
+---
+title: 3D
+sidebar_position: 5
+---
+
+FrameScript には WebGL 用のヘルパーと、Three.js の描画を扱うキャンバスが用意されています。
+context lost からの復旧も組み込まれており、レンダー時は復旧が完了するまで待機します。
+
+## WebGL ヘルパー
+
+- `useWebGLContext` が WebGL を初期化し、`webglcontextlost` からの復旧を行います。
+- `useWebGLFrameWaiter` がヘッドレスレンダー時に GPU 完了待ちを入れます。
+
+```tsx
+import { useRef } from "react"
+import { useWebGLContext, useWebGLFrameWaiter } from "../src/lib/webgl"
+
+const Canvas = () => {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null)
+  const { glRef } = useWebGLContext(canvasRef, ({ gl }) => {
+    // シェーダやバッファを初期化
+    return () => {
+      // リソースの破棄
+    }
+  })
+
+  useWebGLFrameWaiter(glRef)
+
+  return <canvas ref={canvasRef} />
+}
+```
+
+## ThreeCanvas
+
+`<ThreeCanvas />` は `useAnimation` と組み合わせて使えます。
+
+```tsx
+import { useAnimation, useVariable } from "../src/lib/animation"
+import { BEZIER_SMOOTH } from "../src/lib/animation/functions"
+import { seconds } from "../src/lib/frame"
+import { ThreeCanvas, THREE, disposeThreeObject } from "../src/lib/webgl/three"
+
+const Scene = () => {
+  const progress = useVariable(0)
+
+  useAnimation(async (ctx) => {
+    await ctx.move(progress).to(1, seconds(2), BEZIER_SMOOTH)
+    await ctx.move(progress).to(0, seconds(2), BEZIER_SMOOTH)
+  }, [])
+
+  return (
+    <ThreeCanvas
+      setup={({ renderer, size }) => {
+        renderer.outputColorSpace = THREE.SRGBColorSpace
+
+        const scene = new THREE.Scene()
+        const camera = new THREE.PerspectiveCamera(45, size.cssWidth / size.cssHeight, 0.1, 100)
+        camera.position.z = 6
+
+        const mesh = new THREE.Mesh(
+          new THREE.BoxGeometry(),
+          new THREE.MeshStandardMaterial({ color: 0x44aa88 })
+        )
+        scene.add(mesh)
+
+        const light = new THREE.DirectionalLight(0xffffff, 1)
+        light.position.set(2, 3, 4)
+        scene.add(light)
+
+        return {
+          scene,
+          camera,
+          update: ({ frame }) => {
+            const t = progress.get(frame)
+            mesh.position.x = (t - 0.5) * 3
+            mesh.rotation.y = t * Math.PI * 2
+          },
+          dispose: () => disposeThreeObject(mesh),
+        }
+      }}
+    />
+  )
+}
+```