@revideo/create 0.5.11-alpha.1102 → 0.5.11-alpha.1104

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.10",
+    "@revideo/core": "0.5.10",
+    "@revideo/renderer": "0.5.10",
+    "@revideo/ffmpeg": "0.5.10",
+    "three": "^0.167.1"
+  },
+  "devDependencies": {
+    "@revideo/ui": "0.5.10",
+    "@revideo/vite-plugin": "0.5.10",
+    "@types/three": "^0.167.1",
+    "typescript": "5.5.4",
+    "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/examples/youtube-shorts/README.md

@@ -0,0 +1,65 @@
+# Youtube Shorts with Subtitles
+
+This example project lets you generate Youtube Shorts with AI.
+
+https://github.com/redotvideo/revideo-examples/assets/122226645/98bc202d-6b7d-4b8a-9a7f-c41533d8c760
+
+
+## Project Structure
+
+There are three main files you should look at in this project:
+
+- `src/scenes/example.tsx`: This file defines the flow of the video and its animations. It accepts variables such as a list of background images, a voiceover audio file, as well as a list of words along with their timestamps to display the video captions.
+- `src/get-assets.ts`: This is a node.js process which generates assets (script, voiceover, etc.) using AI services and writes them to a json file storing your video variables 
+- `src/render.ts`: This code calls `renderVideo()` with variables from a metadata file to export the final video.
+
+
+## Getting Started
+
+After cloning the repo, go inside the project folder and install all dependencies using `npm install`. Now you can preview an example video.
+
+### Preview Video
+
+You can start the editor using the following command:
+
+```
+npm start
+```
+
+The editor preview uses example assets (images and voiceovers) specified in `src/metadata.json` which are located in an AWS bucket we own. This way, you can test the template without having to generate your own assets. To render the video with the example asseets, click the render button in the UI or run `npm run render`.
+
+When previewing the video in the editor, your browser will first have to load the assets, which can cause a bit of a lag - you might have to wait a few seconds.
+
+## Rendering Videos with your own AI assets
+If you want to render your own videos using ChatGPT, Dall-E and Elevenlabs voiceovers, you need to create a `.env` file in the project root directory and add the following environment variables:
+
+```
+OPENAI_API_KEY=<your-openai-key>
+ELEVEN_API_KEY=<your-elevenlabs-key>
+DEEPGRAM_API_KEY=<your-deepgram-key>
+```
+
+Now you can run `tsc && node dist/get-assets.ts`, which will create a new metadata file that you can use in `render.ts` and `project.ts`.
+
+
+## Animating Subtitles
+
+This project has a heavy emphasis on animating subtitles. It provides the option to stream subtitles word-by-word, to highlight the currently spoken word, or to let words fade into the image as they appear. To play around with the different caption animation options, you can modify the `textSettings` object in `src/scenes/example.tsx`:
+
+```ts
+const textSettings: captionSettings = {
+  fontSize: 80,
+  numSimultaneousWords: 4, // how many words are shown at most simultaneously
+  textColor: "white",
+  fontWeight: 800,
+  fontFamily: "Mulish",
+  stream: false, // if true, words appear one by one
+  textAlign: "center",
+  textBoxWidthInPercent: 70,
+  fadeInAnimation: true,
+  currentWordColor: "cyan",
+  currentWordBackgroundColor: "red", // adds a colored box to the word currently spoken
+  shadowColor: "black",
+  shadowBlur: 30
+}
+```