Giter Club home page Giter Club logo

velato's Introduction

Velato

An integration to parse and render Lottie with Vello.

Linebender Zulip dependency status MIT/Apache 2.0 vello version
Crates.io Docs Build status

Warning

The goal of this crate is to provide coverage of the large Lottie spec, up to what vello can render, for use in interactive graphics. We are working towards correctness, but there are missing features listed below.

Missing features

Several Lottie features are not yet supported, including:

  • Non-linear easings
  • Position keyframe (ti, to) easing
  • Time remapping (tm)
  • Text
  • Image embedding
  • Advanced shapes (stroke dash, zig-zag, etc.)
  • Advanced effects (motion blur, drop shadows, etc.)
  • Correct color stop handling
  • Split rotations
  • Split positions

Usage

Velato makes it simple to encode Lottie as a vello::Scene.

// Parse your lottie file
let lottie = include_str!("../lottie.json");
let composition = velato::Composition::from_str(lottie).expect("valid file");

// Render to a scene
let mut new_scene = vello::Scene::new();

// Render to a scene!
let mut renderer = velato::Renderer::new();
let frame = 0.0; // Arbitrary number chosen. Ensure it's a valid frame!
let transform = vello::kurbo::Affine::IDENTITY;
let alpha = 1.0;
renderer.render(&composition, frame, transform, alpha, &mut new_scene);

Examples

Cross platform (Winit)

cargo run -p with_winit

You can also load an entire folder or individual files.

cargo run -p with_winit -- examples/assets

Web platform

Because Vello relies heavily on compute shaders, we rely on the emerging WebGPU standard to run on the web. Until browser support becomes widespread, it will probably be necessary to use development browser versions (e.g. Chrome Canary) and explicitly enable WebGPU.

This uses cargo-run-wasm to build the example for web, and host a local server for it

# Make sure the Rust toolchain supports the wasm32 target
rustup target add wasm32-unknown-unknown

# The binary name must also be explicitly provided as it differs from the package name
cargo run_wasm -p with_winit --bin with_winit_bin

There is also a web demo available here on supporting web browsers.

Warning

The web is not currently a primary target for Vello, and WebGPU implementations are incomplete, so you might run into issues running this example.

Community

Discussion of Velato development happens in the Linebender Zulip, specifically the #gpu stream. All public content can be read without logging in.

Contributions are welcome by pull request. The Rust code of conduct applies.

License

Licensed under either of

at your option.

The files in subdirectories of the examples/assets directory are licensed solely under their respective licenses, available in the LICENSE file in their directories.

Contribution

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.

velato's People

Contributors

djmcnab avatar luke1188 avatar marijns95 avatar seabassjh avatar simbleau avatar waywardmonkeys avatar xstrom avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

velato's Issues

Error parsing Lottie JSON with precomposition

bodymovin-rs is unable to parse any animations with precompositions.

Tested using several animations from https://googlefonts.github.io/noto-emoji-animation/. One animation with a precomp looks like this: (using https://lottiefiles.github.io/lottie-docs/playground/json_editor/):

image

Error:

Unable to parse lottie JSON: ParseFailed(Error("data did not match any variant of untagged enum Asset", line: 1, column: 80831))

I believe it is referring to this data structure not able to be deserialized

#[derive(Debug, Deserialize)]
#[serde(untagged)]
pub enum Asset {
    Image(Image),
    PreComp(PreComp),
}

Importer should warn on old lottie schema versions

#10 has discovered that old lottie files don't import as expected, and with the recent LAC establishment, and coming versioning of Lottie files, we should be aware of what schema versions we support and produce a log or error when old versions of bodymovin are used.

Followup changes to vellottie merge

#13 is quite large already, so this track issues and further enhancements to make after its merge.

Needed for release

  • move util.rs into import.rs (from @DJMcNab)
  • add lib.rs crate documentation (from @DJMcNab)
  • reduce boilerplate in scenes/src/download/default_downloads.rs with a macro (from @DJMcNab)
  • add usage to README
  • print total file download at prompt time (from @DJMcNab)
  • Introduce a changelog

Not needed for release

  • Consolidate schema changes from LAC
  • separate the with_winit example from vello into something that can be imported, to reduce copy/paste work
  • include optional wgpu-profiler work from linebender/vello#502 (from @DJMcNab) (superseded by the above)
  • Non-linear interpolation with kurbo primitives (from @dfrg)
  • Consolidate the runtime SplitValues((Value<f32>, Value<f32>)) into Value(Value<Point>) (from @dfrg)
  • Pack tangent and hold frame into a u32 (from @dfrg) - See this discussion.
  • Replace brush_with_alpha after linebender/peniko#27

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.