@revideo/create 0.5.5-alpha.1062 → 0.5.5

package/examples/three-js-example/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "3d-testing",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "start": "vite",
+    "serve": "vite",
+    "build": "tsc && vite build",
+    "render": "tsc && node dist/render.js"
+  },
+  "dependencies": {
+    "@revideo/2d": "0.5.4",
+    "@revideo/core": "^0.5.4",
+    "@revideo/renderer": "^0.5.4",
+    "@revideo/ffmpeg": "^0.5.4",
+    "three": "^0.167.1"
+  },
+  "devDependencies": {
+    "@revideo/ui": "^0.5.4",
+    "@revideo/vite-plugin": "^0.5.4",
+    "@types/three": "^0.167.1",
+    "typescript": "^5.2.2",
+    "vite": "^4.0.0"
+  }
+}

package/examples/three-js-example/src/components/Three.ts

@@ -0,0 +1,166 @@
+import { Layout, LayoutProps } from "@revideo/2d/lib/components";
+import { computed, initial, signal } from "@revideo/2d/lib/decorators";
+import { Vector2 } from "@revideo/core/lib/types";
+import {
+  Camera,
+  Color,
+  OrthographicCamera,
+  PerspectiveCamera,
+  Scene,
+  WebGLRenderer,
+} from "three";
+import { SimpleSignal } from "@revideo/core/lib/signals";
+
+interface RenderCallback {
+  (renderer: WebGLRenderer, scene: Scene, camera: Camera): void;
+}
+
+export interface ThreeProps extends LayoutProps {
+  scene?: Scene;
+  camera?: Camera;
+  quality?: number;
+  background?: string;
+  zoom?: number;
+  onRender?: RenderCallback;
+}
+
+export class Three extends Layout {
+  @initial(1)
+  @signal()
+  public declare readonly quality: SimpleSignal<number, this>;
+
+  @initial(null)
+  @signal()
+  public declare readonly camera: SimpleSignal<Camera | null, this>;
+
+  @initial(null)
+  @signal()
+  public declare readonly scene: SimpleSignal<Scene | null, this>;
+
+  @initial(null)
+  @signal()
+  public declare readonly background: SimpleSignal<string | null, this>;
+
+  @initial(1)
+  @signal()
+  public declare readonly zoom: SimpleSignal<number, this>;
+
+  private readonly renderer: WebGLRenderer;
+  private readonly context: WebGLRenderingContext;
+  private readonly pixelSample = new Uint8Array(4);
+  public onRender: RenderCallback;
+
+  public constructor({ onRender, ...props }: ThreeProps) {
+    super(props);
+    this.renderer = borrow();
+    this.context = this.renderer.getContext();
+    this.onRender =
+      onRender ?? ((renderer, scene, camera) => renderer.render(scene, camera));
+  }
+
+  protected override async draw(context: CanvasRenderingContext2D) {
+    const { width, height } = this.computedSize();
+    const quality = this.quality();
+    const scene = this.configuredScene();
+    const camera = this.configuredCamera();
+    const renderer = this.configuredRenderer();
+
+    if (width > 0 && height > 0) {
+      this.onRender(renderer, scene, camera);
+      context.imageSmoothingEnabled = false;
+      context.drawImage(
+        renderer.domElement,
+        0,
+        0,
+        quality * width,
+        quality * height,
+        width / -2,
+        height / -2,
+        width,
+        height,
+      );
+    }
+
+    super.draw(context);
+  }
+
+  @computed()
+  private configuredRenderer(): WebGLRenderer {
+    const size = this.computedSize();
+    const quality = this.quality();
+
+    this.renderer.setSize(size.width * quality, size.height * quality);
+    return this.renderer;
+  }
+
+  @computed()
+  private configuredCamera(): Camera {
+    const size = this.computedSize();
+    const camera = this.camera();
+    const ratio = size.width / size.height;
+    const scale = this.zoom() / 2;
+    if (camera instanceof OrthographicCamera) {
+      camera.left = -ratio * scale;
+      camera.right = ratio * scale;
+      camera.bottom = -scale;
+      camera.top = scale;
+      camera.updateProjectionMatrix();
+    } else if (camera instanceof PerspectiveCamera) {
+      camera.aspect = ratio;
+      camera.updateProjectionMatrix();
+    }
+
+    return camera;
+  }
+
+  @computed()
+  private configuredScene(): Scene | null {
+    const scene = this.scene();
+    const background = this.background();
+    if (scene) {
+      scene.background = background ? new Color(background) : null;
+    }
+    return scene;
+  }
+
+  public getColorAtPoint(position: Vector2) {
+    const relativePosition = position.scale(this.quality());
+    this.context.readPixels(
+      relativePosition.x,
+      relativePosition.y,
+      1,
+      1,
+      this.context.RGBA,
+      this.context.UNSIGNED_BYTE,
+      this.pixelSample,
+    );
+    const color = new Color();
+    color.setRGB(
+      this.pixelSample[0] / 255,
+      this.pixelSample[1] / 255,
+      this.pixelSample[2] / 255,
+    );
+    return color;
+  }
+
+  public dispose() {
+    dispose(this.renderer);
+  }
+}
+
+const pool: WebGLRenderer[] = [];
+function borrow() {
+  if (pool.length) {
+    return pool.pop();
+  } else {
+    return new WebGLRenderer({
+      canvas: document.createElement("canvas"),
+      // antialias: true,
+      alpha: true,
+      stencil: true,
+    });
+  }
+}
+function dispose(renderer: WebGLRenderer) {
+  pool.push(renderer);
+}

package/examples/three-js-example/src/global.css

@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lexend:wght@600&family=Noto+Color+Emoji&display=swap");

package/examples/three-js-example/src/project.meta

@@ -0,0 +1,31 @@
+{
+  "version": 0,
+  "shared": {
+    "background": "rgb(255,255,255)",
+    "range": [
+      0,
+      null
+    ],
+    "size": {
+      "x": 1920,
+      "y": 1080
+    },
+    "audioOffset": 0
+  },
+  "preview": {
+    "fps": 30,
+    "resolutionScale": 1
+  },
+  "rendering": {
+    "fps": 60,
+    "resolutionScale": 1,
+    "colorSpace": "srgb",
+    "exporter": {
+      "name": "@revideo/core/wasm",
+      "options": {
+        "fastStart": true,
+        "includeAudio": true
+      }
+    }
+  }
+}

package/examples/three-js-example/src/project.ts

@@ -0,0 +1,8 @@
+import { makeProject } from "@revideo/core";
+
+import basic3D from "./scenes/basic3D?scene";
+import "./global.css";
+
+export default makeProject({
+  scenes: [basic3D],
+});

package/examples/three-js-example/src/render.ts

@@ -0,0 +1,15 @@
+import {renderVideo} from '@revideo/renderer';
+
+async function render() {
+  console.log('Rendering video...');
+
+  // This is the main function that renders the video
+  const file = await renderVideo({
+    projectFile: './src/project.ts',
+    settings: {logProgress: true},
+  });
+
+  console.log(`Rendered video to ${file}`);
+}
+
+render();

package/examples/three-js-example/src/revideo.d.ts

@@ -0,0 +1 @@
+/// <reference types="@revideo/core/project" />

package/examples/three-js-example/src/scenes/basic3D.meta

@@ -0,0 +1,5 @@
+{
+  "version": 0,
+  "timeEvents": [],
+  "seed": 3264532001
+}

package/examples/three-js-example/src/scenes/basic3D.tsx

@@ -0,0 +1,89 @@
+import {Three} from '../components/Three';
+import { makeScene2D, Txt } from '@revideo/2d';
+import { tween, waitFor, delay, createRef, all, chain, linear} from '@revideo/core';
+import * as THREE from 'three';
+
+
+function setup3DScene() {
+    const threeScene = new THREE.Scene();
+
+    const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
+    const material = new THREE.MeshNormalMaterial();
+
+    const mesh = new THREE.Mesh( geometry, material );
+    threeScene.add(mesh);
+
+    const camera = new THREE.PerspectiveCamera(90);
+
+    mesh.position.set(0, 0, 0);
+    mesh.scale.set(1, 1, 1);
+    camera.rotation.set(0, 0, 0);
+    camera.position.set(0, 0, 0.5);
+
+    return {threeScene, camera, mesh};
+}
+
+export default makeScene2D(function* (view) {
+    const {threeScene, camera, mesh} = setup3DScene();
+
+    const threeRef = createRef<Three>();
+    const txtRef = createRef<Txt>();
+
+    yield view.add(
+        <>
+            <Three
+                width={1920}
+                height={1080}
+                camera={camera}
+                scene={threeScene}
+                opacity={0}
+                fontWeight={900}
+                ref={threeRef}
+            />
+        </>
+    );
+
+    yield view.add(<Txt fill={"black"} fontFamily={"Lexend"} ref={txtRef} fontSize={80}/>)
+
+    yield* chain(
+        txtRef().text("Revideo x 3D with Three.js", 1),
+        all(
+          txtRef().position.y(-300, 1),
+          delay(0.5, threeRef().opacity(1, 0.5))
+        )
+    )
+
+    yield tween(4, value => {
+        mesh.rotation.set(
+            0,
+            linear(value, 0, 2*3.14),
+            0
+        );
+    });
+
+    yield* waitFor(2);
+
+    yield addRotatingCube(threeRef().scene(), 0.1, 0.3, -0.2, 0.1);
+    yield addRotatingCube(threeRef().scene(), 0.1, -0.3, -0.2, 0.1);
+
+    yield* waitFor(2);
+});
+
+function* addRotatingCube(threeScene: THREE.Scene, size: number, x: number, y: number, z: number){
+    const geometry = new THREE.BoxGeometry( size, size, size );
+    const material = new THREE.MeshNormalMaterial();
+    const mesh = new THREE.Mesh( geometry, material );
+
+    mesh.position.set(x, y, z);
+    mesh.scale.set(1, 1, 1);
+
+    threeScene.add(mesh);
+
+    yield* tween(4, value => {
+        mesh.rotation.set(
+            0,
+            linear(value, 0, 2*3.14),
+            0
+        );
+    });
+}

package/examples/three-js-example/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@revideo/2d/tsconfig.project.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "dist",
+    "module": "CommonJS"
+  }
+}

package/examples/three-js-example/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import motionCanvas from "@revideo/vite-plugin";
+
+export default defineConfig({
+  plugins: [motionCanvas()],
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revideo/create",
-  "version": "0.5.5-alpha.1062+bd743d61",
+  "version": "0.5.5",
   "description": "Quickly scaffold revideo projects",
   "main": "index.js",
   "author": "revideo",
@@ -20,17 +20,17 @@
     "url": "https://github.com/havenhq/revideo.git"
   },
   "devDependencies": {
-    "@revideo/2d": "^0.5.5-alpha.1062+bd743d61",
-    "@revideo/core": "^0.5.5-alpha.1062+bd743d61",
-    "@revideo/ffmpeg": "^0.5.5-alpha.1062+bd743d61",
-    "@revideo/renderer": "^0.5.5-alpha.1062+bd743d61",
-    "@revideo/ui": "^0.5.5-alpha.1062+bd743d61",
-    "@revideo/vite-plugin": "^0.5.5-alpha.1062+bd743d61"
+    "@revideo/2d": "0.5.5",
+    "@revideo/core": "0.5.5",
+    "@revideo/ffmpeg": "0.5.5",
+    "@revideo/renderer": "0.5.5",
+    "@revideo/ui": "0.5.5",
+    "@revideo/vite-plugin": "0.5.5"
   },
   "dependencies": {
-    "@revideo/telemetry": "^0.5.5-alpha.1062+bd743d61",
+    "@revideo/telemetry": "0.5.5",
     "minimist": "^1.2.8",
     "prompts": "^2.4.2"
   },
-  "gitHead": "bd743d618bd501b4d414bebbdce78a7c765e3c15"
+  "gitHead": "3dcb623279d10fe09c5dd2eda18c1c4adb4ba1eb"
 }