@revideo/create 0.5.8-alpha.1084 → 0.5.8-beta.1082

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

@@ -1,25 +0,0 @@
-{
-  "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

@@ -1,166 +0,0 @@
-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

@@ -1 +0,0 @@
-@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

@@ -1,31 +0,0 @@
-{
-  "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

@@ -1,8 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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

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

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

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

@@ -1,89 +0,0 @@
-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

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

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

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

package/examples/youtube-shorts/README.md

@@ -1,65 +0,0 @@
-# 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 two 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/render.ts`: This is a node.js process which generates assets (script, voiceover, etc.) using AI services and consequently calls `renderVideo()` to export a video that uses the assets it generated as an input.
-
-
-## 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.
-
-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. This will not be a problem when exporting the video though - when building a web app, this can also easily be avoided by preloading the assets (see our [docs](https://docs.re.video/preview-with-player/#preloading-assets) for info on this).
-
-
-## Rendering your own Videos
-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 `npm run render`, which will execute `src/render.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
-}
-```