Babylon~cinematics

UPDATE:

Added great audio tracks from freesound.org and https://opengameart.org/

  • carefully listed all licenses, including cc0 links, and derivation descriptions for cc3.

  • remixed and added reverb (distortion, etc) with Audacity and LMMS.

  • export to BABYLON. Done.

SOLUTION: optimization for lazy-loading audio was easy.

  • I was front-loading audio. do not createSound until each scene. :heavy_check_mark:

All is working fantastically.

Still on schedule.

3 Likes

F0rtn!te botches another “live event”.

Still no STORYLINE

IMHO :grin:
:eagle:

FIX: for Sound End

Did this:

                let soundEndDamper=0;
                nx.scene.registerBeforeRender(function soundEndLoopz() { 
                    if(++soundEndDamper%100===0){return} //frame-damper-.
                    if(nx.sonics.footsteps1.isPlaying&&!nx.sonics.footsteps1.endSound){ nx.sonics.footsteps1.endSound=1; } //init
                    else if(!nx.sonics.footsteps1.isPlaying&&nx.sonics.footsteps1.endSound){ nx.scene.unregisterBeforeRender(soundEndLoopz); /*self-removing-.*/ } //done
                });

It is a self removing animation loop, called LOOPZ, for unique search in code.

Have a bunch of those all over the place, this one tells when sound is done playing.

Kinda cool? Useful for many things. : )

:eagle:

Cool.
I’ve been using p5’s sound library:
https://p5js.org/reference/#/libraries/p5.sound

Bunch of neat stuff there - esp. tying events to each second of the sound (and onended is reliable).

1 Like

p5.js looks GREAT!

I will probably deepdive someday.

IMPORTANT

Found a great animation syntax.

Had to dig for it. Very obscure. Hidden. Not explained on web.

It was necessary to “instrument” a web cinematic.

It uses “Inbetweening” syntax underneath, (CPU ok) and works (better than) ok.

Proof shortly.

EXAMPLE: interpolates 4 things simultaneously: x, y, z, with 1 rotation.

anm.({FROM},{TO});

x: 0 - 1
y: 10 - 0
z: 100 - 1
anything: 3.14 - 0

 anm({x:0,y:10,z:100, anything: 3.14})
 .anim8({x:1,y:0,z:1,anything:0},
 {bunch:false,dur:8000,ease:'swing',
 idx: function(now) {
    hero.position.x = this.x;  //<-- this.x is the interpolation num assigned to BABYLON.position.x
    hero.position.y = this.y;
    hero.position.z = this.z;
    hero.rotation.x = this.anything; //<-- interpolate multiple things simultaneously with PRECISION-.
 },done:function(){ //important, simple syntax.
}});

ALL IN ONE-LINE OF CODE!

Being COMPACT is key - to scale up.


It is called ANM~PATTERN-.

REQUIREMENT: anms defined ALL IN ONE LINE OF CODE -so they can move around and be instrumented. Which then results in fine-tuned animations at scale.

This is important to me. I had to have it. And I want to share-back. Happy Holidays!
NOTE: item for shelf, not dustheap. lol. : )

EXAMPLE: moving a camera and focus simultaneously:

 $({cx:initCAMPOS.x,cy:initCAMPOS.y,cz:initCAMPOS.z})
 .animate({cx:endCAMPOS.x,cy:endCAMPOS.y,cz:endCAMPOS.z
 },{queue:false,duration:8000*nx.RUNTIME,easing:'swing',
   step: function(now) {
       if(nx.cinemaStop){ $(this).stop(); console.log('stopped'); nx.spaceSeqIdx[1]={on:1}; return;}
          nx.camz.freeCam.position.x = this.cx;
          nx.camz.freeCam.position.y = this.cy;
          nx.camz.freeCam.position.z = this.cz;
          nx.camz.freeCam.setTarget(new BABYLON.Vector3(this.fx,this.fy,this.fz))
      },complete:function(){
       //SEQUENTIAL-ANMS-.
} });

Additional features (above): STOP, FFWD, and SLOWMO, as well.

CPU .

Could it be GPU?, as BABYLON.ANM;

Idk. My code is useless. But the concept is not.

BABYLON could make it cosmic.

Animation-Factory

BABYLON.anm({from},{to},idx=>,done:=>});

  • seems cool2me. <-shrug->
  • it is unique

(ping) @Deltakosh waddya think? : ]

Does aFalcon have ping-power? : )

BABYLON Animation Factory 2020.

It’ll happen.

:eagle:

(NOTE: I try to say clear concepts, good words, few jokes, re-write often. Working on better writing - still. : )

UPDATE:

ACOZMOSTORY: MOVIE~GAME~BOOK~APP. 1st 3D-WebAdventure. 2020.

:eagle:

1 Like

Nice @aFalcon. Sounds like some good figuring out going on there.

I decided to park simultaneity for the moment… so everything in my engine works in sequence. Move character A, then character B, etc. Not the most cinematic, but keeps it simple. At least for first version.

On that note, I’m aiming for a Jan V1 release! Am needing to take all kinds of shortcuts. V1 is gonna be really simple. Probably a good thing.

1 Like

Yes, I had to adopt PRINCIPLE of SIMPLICITY to get to the finishline also.

NOTES:

CINEMATIC~PRINCIPLE: Top~Priorities can be easily mis-aligned.

EXAMPLE:

  • STORY and EMOTION are top priority (for cinematics).

  • because STORY and EMOTION are HOOKS, in addition to LOOKS.

CINEMATIC~META~PROCESSES

To make a CINEMO, there are META~PROCESSES, that are very hard to describe.


EXAMPLES:

MULTI~POINT~EDITING

  • must be able to start at ANY POINT in the entire movie.

  • because that is the only way to have EFFICIENT EDITING.

  • (SLOMO/FASTMO vImportant) (above).

MULTI~INSERTION and MULTI~ORDERING

  • must be able to MOVE animations around easily.

  • that means ADDITIVE such as expanding an ANM at any point. Or compress.

  • and in SEQUENTIAL ORDER or SIMULTANEOUS

  • if ANMS cannot be added and moved around easily, cinematics is impossible.

  • cinematic code needs MAXIMUM~FLEXIBILITY. PRINCIPLE: CINEMATIC~FLUIDITY.

ATOMIC~ANMZ

  • ANMZ tightly packed mini-modules

  • create ANMZ with ZERO-DEPENDENCIES. So they can move around.

  • 1 line of code ANIMATION SYNTAX.

  • then we feed ANM into ANIMATION~FACTORY-.

Lol.

PRINCIPLE of BOTH: GOOD~LOOK and GOOD~STORY-.

1 Like

MODE-FLAG-FACTORIES

rendering functions that animate multiple states, in a single function.

modeFlagFactory = function(mode){}

@withADoveInOneHand, thank you for reading.

I hope this helps you in whatever it is that you are working on.

If you want to talk CAMZ or whatever.

I code BABYLON ALL DAY/ALL NIGHT (24/7), so it seems.

:eagle: : )

1 Like

I thought you went full wingnut for a second.
I will get with you.

1 Like

DM ok.

Like https://treha.online/

:eagle:

HERO JOURNEY “monomyth” DESIGN PATTERN by Campbell and Vogler.

The concept “Hero Journey” was a study by Joseph Campbell, that turned into a DESIGN PATTERN by Christopher Vogler, who inspired Hollywood, in the 80’s, of how to make better movies.

Which STARWARS was the first test, by his colleague/friend George Lucas.

As you know, DESIGN PATTERNS can be applied to any medium.

So, the use of Hero Journey Pattern in BABYLON to tell BETTER STORIES, is a good idea.

Here is how:

Campbell studied ALL the Hero Journey Myths around the world and realized they shared similar aspects. Then Vogler thought, well if these PATTERNS make traditional stories better - would they make movies better?

And they did.

It is NOT a STRICT SCRIPT, but more of a RECIPE - to make stories more INTERESTING.

image
A recipe to make the STORY ENGAGING.

That is what you want, yes? Then, this is THE PATTERN to get YOU there.

Use a few, to ENHANCE your PLOT. There are many FLAVORS. Be flexible.

EXAMPLE:

  • CALL TO ACTION: clear call to go do the hard work, usually with a reluctance, then unavoidable.
  • THRESHOLD: clear differences between this world and the new world. A clear point of no return.
  • MENTOR, ALLIES, CHALLENGES: ordeals for your hero to overcome, with a support group is better.
  • DEATH & REBIRTH: you might want to kill your character - with a clever way of bringing them back(stronger).
  • GROWTH: the most important of all ingredients is to show how your character GROWS into a HERO.

Why show the GROWTH of a COMMON character into a HERO?

Because it gives HOPE to the rest of us.

And more!

The old world is set in its ways ~ but the new world is how we choose to see it.

And that is how a Hero is made.

:eagle:

2 Likes

So,

I solved WebCinema with BABYLON (happy new year)

  • AnimationFactory, with “scripted” Atomic~ANMZ.

  • 3DWebPipeline end-to-end.

  • low-poly episodic~cartoonz for wurld~wild~web

  • new social models, market partnerships &

  • new technologies

  • 1st Vid this Jan.


WebCinema ~ powered by BABYLON ~ 2020.

DM open, enjoy the show.

:eagle:

2 Likes

DETAILS:

Last 3 years (plus)

  • I built a space cartoon. : )

GENERAL-AUDIENCE

(is BIGGEST audience)

NewYearz~GOALZ:

  • start a BLOG on ORDEALS, HOW2’s, and
  • GITHUB stuff
  • for #JS #DEVs.

Call it: aFalcon’s Space Case (or whatever).

  • Hit SUBSCRIBE 2020

  • creative~content

`-~-~-~-~-~-~-~-.

:eagle:

2 Likes

DM me a link brother! I waNNA SEE

1 Like