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.

4 Likes

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.

5 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.

2 Likes

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:

1 Like

: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 (JavaScript Memento Design Pattern) 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ā€¦

Sharing the REQUIREMENT language might be clearer. Idk. It is very exciting.

ā€¦

1 Like

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