Js tweening (#952)

* Add .animate attribute to mobjects

* Return function from _AnimationBuilder.__getattr__

* black

* Pass background color to JS renderer

* Handle default case

* Pass background color to JS renderer

* Remove line that came back in the merge

* Handle FrameServer case

* Use community colors by default

* Allow for chaining _AnimationBuilder

* Trying to do tweening

* Add _AnimationBuilder.build()

* Apply docs patch

* Pass tweening data

* Pass ID for ImageMobject

* Fix Wait bug, add FadeIn tween data

* Remove unused proto fields

* Remove unused proto field

* Optimize RPCs

* Handle frame skipping better

* Refactoring

* Ignore PreviewMode.ALL

* Remove preview mode

* Don't send tween data for wait

* Opacity fixes

* Add comments

* Simplify protos

* Add tween data for wait

* Add todo

* Serialize when updating

* Prepare to send tweened and non-tweened mobject IDs

* Pass updater information to javascript

* Add log

* Rename js_* -> webgl_*, remove WebGLScene

* rename js->webgl in workflow file

* Update doctest

* Update .gitattributes

* Remove try/except for webgl imports

* Step through animations using updaters with fixed frame rate

* Add --webgl_updater_fps flag

* Configuration test

* configuration test

* JS->WebGL

* Add install message

Author: eulertour

.gitattributes

@@ -1 +1 @@
-manim/grpc/gen/* linguist-generated=true
+manim/grpc/gen/** linguist-generated=true

.github/workflows/ci.yml

@@ -112,7 +112,7 @@ jobs:
 
       - name: Install manim
         run: |
-          poetry install -E js_renderer
+          poetry install -E webgl_renderer
 
       - name: Run tests
         run: poetry run pytest

docs/source/tutorials/configuration.rst

@@ -351,14 +351,14 @@ A list of all config options
    'custom_folders', 'disable_caching', 'dry_run', 'ffmpeg_loglevel', 'flush_cache',
    'frame_height', 'frame_rate', 'frame_size', 'frame_width', 'frame_x_radius',
    'frame_y_radius', 'from_animation_number', 'images_dir', 'input_file',
-   'js_renderer_path', 'leave_progress_bars', 'left_side', 'log_dir', 'log_to_file',
+   'leave_progress_bars', 'left_side', 'log_dir', 'log_to_file',
    'max_files_cached', 'media_dir', 'movie_file_extension', 'output_file',
    'partial_movie_dir', 'pixel_height', 'pixel_width', 'plugins', 'png_mode',
    'preview', 'progress_bar', 'quality', 'right_side', 'save_as_gif', 'save_last_frame',
    'save_pngs', 'scene_names', 'show_in_file_browser', 'sound', 'tex_dir',
    'tex_template', 'tex_template_file', 'text_dir', 'top', 'transparent',
-   'upto_animation_number', 'use_js_renderer', 'verbosity', 'video_dir',
-   'write_all', 'write_to_movie']
+   'upto_animation_number', 'use_webgl_renderer', 'verbosity', 'video_dir',
+   'webgl_renderer_path', 'webgl_updater_fps', 'write_all', 'write_to_movie']
 
 
 A list of all CLI flags
@@ -429,9 +429,11 @@ A list of all CLI flags
      -n FROM_ANIMATION_NUMBER, --from_animation_number FROM_ANIMATION_NUMBER
                            Start rendering at the specified animation index, instead of the first animation. If you pass in two comma separated values, e.g. '3,6', it will end
                            the rendering at the second value
-     --use_js_renderer     Render animations using the javascript frontend
-     --js_renderer_path JS_RENDERER_PATH
-                           Path to the javascript frontend
+     --use_webgl_renderer     Render animations using the WebGL frontend
+     --webgl_renderer_path WEBGL_RENDERER_PATH
+                           Path to the WebGL frontend
+     --webgl_updater_fps WEBGL_UPDATER_FPS
+                           Frame rate to use when generating keyframe data for animations that use updaters while using the WebGL frontend
      --config_file CONFIG_FILE
                            Specify the configuration file
      --custom_folders      Use the folders defined in the [custom_folders] section of the config file to define the output folder structure

manim/__init__.py

@@ -59,10 +59,6 @@
 from .scene.moving_camera_scene import *
 from .scene.reconfigurable_scene import *
 
-try:
-    from .scene.js_scene import *
-except ModuleNotFoundError:
-    pass  # optional deps
 from .scene.scene import *
 from .scene.sample_space_scene import *
 from .scene.three_d_scene import *

manim/__main__.py

@@ -12,11 +12,6 @@
 from manim.utils.file_ops import open_file as open_media_file
 from manim._config.main_utils import parse_args
 
-try:
-    from manim.grpc.impl import frame_server_impl
-except ImportError:
-    frame_server_impl = None
-
 
 def open_file_if_needed(file_writer):
     if config["verbosity"] != "DEBUG":
@@ -77,16 +72,20 @@ def main():
     else:
         config.digest_args(args)
         input_file = config.get_dir("input_file")
-        if config["use_js_renderer"]:
+        if config["use_webgl_renderer"]:
             try:
-                if frame_server_impl is None:
-                    raise ImportError("Dependencies for JS renderer is not installed.")
+                from manim.grpc.impl import frame_server_impl
+
                 server = frame_server_impl.get(input_file)
                 server.start()
                 server.wait_for_termination()
-            except Exception:
+            except ModuleNotFoundError as e:
                 print("\n\n")
-                traceback.print_exc()
+                print(
+                    "Dependencies for the WebGL render are missing. Run "
+                    "pip install manim[webgl_renderer] to install them."
+                )
+                print(e)
                 print("\n\n")
         else:
             for SceneClass in scene_classes_from_file(input_file):

manim/_config/default.cfg

@@ -84,11 +84,14 @@ tex_dir = {media_dir}/Tex
 text_dir = {media_dir}/texts
 partial_movie_dir = {video_dir}/partial_movie_files/{scene_name}
 
-# --use_js_renderer
-use_js_renderer = False
+# --use_webgl_renderer
+use_webgl_renderer = False
 
-# --js_renderer_path
-js_renderer_path =
+# --webgl_renderer_path
+webgl_renderer_path =
+
+# --webgl_updater_fps
+webgl_updater_fps = 15
 
 # If the -t (--transparent) flag is used, these will be replaced with the
 # values specified in the [TRANSPARENT] section later in this file.

manim/_config/main_utils.py

@@ -412,15 +412,21 @@ def _parse_args_no_subcmd(args: list) -> argparse.Namespace:
     )
 
     parser.add_argument(
-        "--use_js_renderer",
-        help="Render animations using the javascript frontend",
+        "--use_webgl_renderer",
+        help="Render animations using the WebGL frontend",
         action="store_const",
         const=True,
     )
 
     parser.add_argument(
-        "--js_renderer_path",
-        help="Path to the javascript frontend",
+        "--webgl_renderer_path",
+        help="Path to the WebGL frontend",
+    )
+
+    parser.add_argument(
+        "--webgl_updater_fps",
+        type=int,
+        help="Frame rate to use when generating keyframe data for animations that use updaters while using the WebGL frontend",
     )
 
     # Specify the manim.cfg file

manim/_config/utils.py

@@ -262,7 +262,7 @@ class MyScene(Scene):
         "from_animation_number",
         "images_dir",
         "input_file",
-        "js_renderer_path",
+        "webgl_renderer_path",
         "leave_progress_bars",
         "log_dir",
         "log_to_file",
@@ -286,7 +286,8 @@ class MyScene(Scene):
         "tex_template_file",
         "text_dir",
         "upto_animation_number",
-        "use_js_renderer",
+        "use_webgl_renderer",
+        "webgl_updater_fps",
         "verbosity",
         "video_dir",
         "write_all",
@@ -508,7 +509,7 @@ def digest_parser(self, parser: configparser.ConfigParser) -> "ManimConfig":
             "disable_caching",
             "flush_cache",
             "custom_folders",
-            "use_js_renderer",
+            "use_webgl_renderer",
         ]:
             setattr(self, key, parser["CLI"].getboolean(key, fallback=False))
 
@@ -521,6 +522,7 @@ def digest_parser(self, parser: configparser.ConfigParser) -> "ManimConfig":
             # the next two must be set BEFORE digesting frame_width and frame_height
             "pixel_height",
             "pixel_width",
+            "webgl_updater_fps",
         ]:
             setattr(self, key, parser["CLI"].getint(key))
 
@@ -540,7 +542,7 @@ def digest_parser(self, parser: configparser.ConfigParser) -> "ManimConfig":
             "png_mode",
             "movie_file_extension",
             "background_color",
-            "js_renderer_path",
+            "webgl_renderer_path",
         ]:
             setattr(self, key, parser["CLI"].get(key, fallback="", raw=True))
 
@@ -623,7 +625,8 @@ def digest_args(self, args: argparse.Namespace) -> "ManimConfig":
             "scene_names",
             "verbosity",
             "background_color",
-            "use_js_renderer",
+            "use_webgl_renderer",
+            "webgl_updater_fps",
         ]:
             if hasattr(args, key):
                 attr = getattr(args, key)
@@ -1029,20 +1032,26 @@ def dry_run(self, val: bool) -> None:
             )
 
     @property
-    def use_js_renderer(self):
-        """Whether to use JS renderer or not (default)."""
-        return self._d["use_js_renderer"]
+    def use_webgl_renderer(self):
+        """Whether to use WebGL renderer or not (default)."""
+        return self._d["use_webgl_renderer"]
 
-    @use_js_renderer.setter
-    def use_js_renderer(self, val: bool) -> None:
-        self._d["use_js_renderer"] = val
+    @use_webgl_renderer.setter
+    def use_webgl_renderer(self, val: bool) -> None:
+        self._d["use_webgl_renderer"] = val
         if val:
             self["disable_caching"] = True
 
-    js_renderer_path = property(
-        lambda self: self._d["js_renderer_path"],
-        lambda self, val: self._d.__setitem__("js_renderer_path", val),
-        doc="Path to JS renderer.",
+    webgl_renderer_path = property(
+        lambda self: self._d["webgl_renderer_path"],
+        lambda self, val: self._d.__setitem__("webgl_renderer_path", val),
+        doc="Path to WebGL renderer.",
+    )
+
+    webgl_updater_fps = property(
+        lambda self: self._d["webgl_updater_fps"],
+        lambda self, val: self._d.__setitem__("webgl_updater_fps", val),
+        doc="Frame rate to use when generating keyframe data for animations that use updaters while using the WebGL frontend.",
     )
 
     media_dir = property(

manim/animation/transform.py

@@ -189,7 +189,8 @@ def check_validity_of_input(self, mobject: Mobject) -> None:
 
 
 class _MethodAnimation(MoveToTarget):
-    def __init__(self, mobject):
+    def __init__(self, mobject, methods):
+        self.methods = methods
         super().__init__(mobject)
 
 

manim/camera/js_camera.py renamed to manim/camera/webgl_camera.py

@@ -2,7 +2,7 @@
 import copy
 
 
-class JsCamera(Camera):
+class WebGLCamera(Camera):
     def __init__(self, **kwargs):
         super().__init__(self, **kwargs)
         self.serialized_frame = []