Babylon~cinematics

BABYLON.CINEMATICS

There is no FILM. No MP4. Just BABYLON with a JSON~SCRIPT to direct animations at runtime.

To achieve that, we used FRAMES in SEQUENCES in a LOOP, to organized the animation objects from a SCRIPT(screenplay).
Similar to SCENE and CAMERA.

We extend the metaphor ALL the way out.

That is the vision, the challenge, the mission, the question.

HOW TO BUILD MOVIES INSIDE JAVASCRIPT - powered by BABYLON

Examples of the cinematic achievement are below.

1 Like

I have a working example internally of Babylon handling a MP4 in 3D plane with no issues.

1 Like

I like this OGV-player thing… https://www.babylonjs-playground.com/#XWVXN9#101 … running on a @TheLeftover’s MeshWriter text-stack. It’s “spiffy”. :slight_smile:

I suspect it does mp4 and webM, too. I just need to find test-files within playground CORs view… to test-with. Yay, videoTexture.

3 Likes

Wingnut . . . dude your handle is well-deserved!

Who does this? Who thinks of it?

1 Like

Mostly, Adobe artists who work for big advertising companies. :slight_smile: The Ford Mustang commercial might start with a view of real mustangs galloping across the plains… and then they gently pull the camera out, to show that it was a reflection in one of the chrome wheel covers of a speeding-along 2020 Ford Mustang.

Then idiots like me… rake-up various pieces of genius written by others, and solder junk together (in BJS) until something similar… quits blowing up, and starts working, somehow. heh. Big team, lots of contributors.

There’s a thread about someone wanting a “working TV” within a scene… nearby, too, if I rem right.

1 Like

Would like to see it! : )

MP4 in a 3DPlane. - we see that as a very important animation type.

We use Gif in a 2DPlane as one type of plug-and-play pattern of ANMZ.
Along with key-frame, interpolation, and ui animations.
We have no need for videoTexture (yet). But probably will.

About BABYLON.CINEMATICS…

the 3D-World is the movie.

It is a CONCEPT. :pray: super-seb wants to build non-vanilla 5.0 analog?
Probably many more important things to do.
So, we give (whatever we got) to advance the state-of-the-art.

CONCEPT: “MOVIES INSIDE BABYLON.”

REQUIREMENT1: everything directed by the JSONSCRIPT.

Team innovates BABYLON.CINEMATICS.JSONSCRIPT movie script SCREENPLAY.

I seriously can’t tell what your question is.

1 Like

@sebavan - apologies for confusion. When I say “Make Movies in BABYLON.”

In addition to SCENE and CAMERA, my team and I create SCRIPT and FRAME and SEQUENCE.

We call them all something else. Above is just the PATTERN we are describing.

@delaneyj - “Demos and projects”.

Our passion project is WEB CINEMATICS.

Been at it a while. My team and I start this question in 2010 in dawning days of WebGL.

Rephrased as QUESTION : HOW TO MAKE MOVIES IN BABYLON?

“IN” meaning “INSIDE”. Thank you for the hint.

HOW TO MAKE MOVIES “INSIDE” BABYLON

We found how to RECORD MOVEMENT, EDIT, SAVE, OPTIMIZE, reRENDER. And a whole bunch of other freaky cool things!

Getting inside sequencing babylon animations that is the purpose and project of this thread.

: )

Ohhhh I see this is an interesting concept :slight_smile:

1 Like

Thank you, super-seb, @sebavan :slight_smile:

1 Like

REQUIREMENT2: MAKE a JSON Object that runs a movie…

LOOP, SEQUENCE, FRAME. Easy. Right?

For anyone who wants to try, here is a GETTING STARTED object…

We call it the EPIC~OBJECT, and you can call it whatever you want. : )-.

//TEMPLATE-EPIC-OBJECT-.
 var aEPIC = {
     0:{epicID:0},
     1:{epicID:1,name:'AScene',initfn:function(){}},
     2:{epicID:1,name:'Scene2',initfn:function(){},runfn:function(){},endfn:function(){}},
     8:{epicID:8,name:'FinalSeq',initfn:function(){
         aSeqIdx[10] = {on:1}; //ANMETHODOLOGY: AUTO-START-FRAMESET-on Sequence-.
         nx.runCinematicSequence("FinalSequence"); //COOL PATTERN for FRAME-SET, run Sequence-.
     },runfn:function(){},endfn:function(){}},
 }

BARE-BONES:

var aMovie = { 2:{epicID:2,name:‘Scene2’,initfn:function(){},runfn:function(){},endfn:function(){}} }

DESCRIPTION: Three simple…Callback-Functions: init, run, and end. That is it! You add anything.

PURPOSE: The EPIC~OBJECT is the JSON~SCRIPT. : )

INSTRUCTIONS: LOOP. And… drop in your SEQUENCES.

Why did we choose number-keys? (more later, if you like).

GOAL: One thousand ANMZ encapsulated (neatly) in aSCRIPT of SEQUENCE and FRAME.

We think that is cool!
:grin:

:slight_smile: You sure get excited over HTML canvas element, camera, and deterministic-lockstep.

I think most folk rather interact with a scene… than simply watch one in movie-like form.

https://www.babylonjs-playground.com/#HH1U5#66 That’s a movie I made. :slight_smile: Sort of. Based upon time, and that’s all that “counts”, right?

Hey @JCPalmer… is that butterfly thing you made… still around? Got a fresh URL? That has some… “sequencing” to it, right? I can’t remember the details of that. Might be related to the mysterious POV methods, too? My memory fails me… but it’s always good to hear about related systems, right aF?

1 Like

REQUIREMENT3: Loop over an array that triggers animations encapsulated in objects.

Memento Pattern (Memento JavaScript Design Pattern with examples- dofactory.com) with a twist.

SEQUENCE & FRAME … is what goes inside. And still not down to the babylon ANMZ (yet).

FRAME~SEQUENCE~PATTERN:

A movie FRAME pattern in JS, for short-form, run-time-rendering SEQUENCES in BABYLON.

No example yet. But FRAMES are neat.

BABYLON.CINEMATICS:
REQUIREMENT1: everything directed by the JSONSCRIPT.
REQUIREMENT2: MAKE one JSON Object that runs that movie…
REQUIREMENT3: Loop over the frames and trigger animations encapsulated as sequences.
REQUIREMENT4: And that is where hundreds of BABYLON ANMZ go.


We did that…

I feel like putting it in REQUIREMENT language might help be clearer? Idk.

So you are looking for something as scripted animations including sound and camera movement and speaking characters and maybe subtitles? Like as with in-game cinematic / scenes?

Similar to the following, but maybe with more options and ability to load from a cinematic script file:

https://doc.babylonjs.com/how_to/sequence

https://www.babylonjs-playground.com/#2L26P1#8

Sound! Camera! Action! :movie_camera: :dancer::musical_note:

3 Likes

There is this for the butterfly. This is the result of a process I put inside my animation system, QI. I do not think that is what he wants. Anyway, I have abandoned GIF for high quality, up to 4K, WEBM (vp8 codec) that gets perfectly synced with the merged sound tracks and converted to H264 or BP9, using ffmeg.

I am able to do this, primarily because there is a master time control system inside of QI (no longer being published externally). That means it can tell the animations exactly what time they are supposed to “think” it is, and btw animations are ALL time based, not frame based, so 120 fps, 4k frames can be exactly generated. Probably at of about 2-10 per second. Here is a scene, which @Wingnut thinks I should know how to embed, but I don’t :grin: (I am a programmer, not a web page cake decorator). https://www.youtube.com/watch?v=DZvzXd7Y06s

Again, this does not look like what is being asked for. I actually think I am beginning to think about something similar, but I am not working on that part yet. Even when I do, it will not be near as generic / databasey, partly because QI meshes come from a source code generator coming out of Blender. These meshes can request to be generated as a subclass of anything they want, as long as the class existed when the constructor runs.

While there is a QI.Mesh subclass of BABYLON.Mesh, I can also write sub-classes of QI.Mesh which can hold particular animations, abilities & other methods inside them. In a music analogy, I can have a drummer, guitarist, and keyboard sub-meshes, then export out of Blender as anyone of them. A lot of work, but I can pull off shit you others would not even attempt.

2 Likes

Yes. We did that. So, we are no longer looking. Finding.

…“sharing-back”…

Sorry for my prior dreadful answers. It takes me a LONG time to find better words. : )

1 Like

QI? not familiar. Pls share.

REQUIREMENT5: ANMZ are placeholders for many types of ANMZ. BOTH Key-Frame and Interpolation based animations and others. Atomic, mixable, self-descriptive, movable, composable - easily in the FRAME structure.

REQUIREMENT6: ANMZ need ability to Syncronize, simultaneous, and sequential, AND guarantee one-time-initialization-. So as to always avoid one anm running twice (when it shouldn’t)(surprise).


After 2 years - we find a set of PATTERNS that work fantastically - for our requirements.
We share back… revealing results soon.
Who knows: Maybe you like!?!

Follow a Hero Journey in BABYLON

a Babylon5 world in BabylonJS.

That!


RESULTS first and CONCEPTS second? Ah! I am slow.

image

EXACTLY! Also spot on with that link for “SEQUENCES”. That was a starting point.

pls support and rain :heart: s on BABYLON CINEMATICS? :slight_smile:

1 Like

There are no likes from me because as far as I understand it you and your team have created something called BABYLON.CINEMATICS and you have described methods and requirements. This sounds interesting but I have no real understanding of what you have achieved. Do you at least have a video demonstrating an example of what you have achieved?

1 Like