DUDE STORY - Watch Tower - Episode 001

Demos and projects
1

DUDE STORY - Watch Tower - Episode 001

https://playground.babylonjs.com/#XVEFAU#26
Edited, more correct link https://playground.babylonjs.com/#XVEFAU#30 (thanks @Wingnut)

The scene
Now Dude is on duty on some distant planet (maybe not far from Arrakis with its sand dunes). The naked yellow-red sun with quite strange orbit throws nice shadows to the ground. Dude is walking inside the watch tower, looking at every direction in order to secure the position.
(If you want to look inside, hold I on keyboard).
On the roof of the watch tower there is huge vintage fan (Fallout style), gathering energy of the wind (in the form of particles) into the BJS cube, which goes up and down inside the tower, rotating by some magical forces.
So in case of emergency there is no need to worry. Just press SPACE and the fan will blast deadly beautiful rain… But be careful, it could become addictive… so there is some parental control inside.

Funny thing is that shadows from the fan don’t rotate when the fan is out of camera view.

image
image.jpg1920Ă—883 419 KB

image
image.jpg1920Ă—883 264 KB

image
image.jpg1920Ă—883 276 KB

image
image.jpg1208Ă—827 229 KB

P.S. Rabbit on Fire, depicted on screenshots, is commented in PG example, and will be used in the one of the next episodes from Dude Story, “Save the Rabbit” :slight_smile:

6 Likes
2

You’re a madman, Labris! :slight_smile:

https://playground.babylonjs.com/#XVEFAU#28

Take a look at lines 304-307. Notice… how the loaders are all embeded/nested in each other? Inside the logo loader onSuccess callback, we load the fan. Inside ITS OSC (onSuccess callback)… we load dude. Inside HIS OSC, we load tower… and do a bunch of other crap. Nested stuff. I THINK… its a more-approved way of doing things.

I moved light and shadowGen way up north… before all loaders… so ALL the OSC’s could have the shadowGen in-scope… and add their mesh to it, as wanted.

Sometimes… that fan is BIG… way bigger than the tower. Yet line 129 says it SHOULDN’T be monster-sized. hmm. I don’t quite understand that, yet.

Ok, that’s all I got. Fun playground!!

1 Like
3

Ok, I see why. You have two root nodes in the scene… one for dude, one for fan.

As soon as I changed to fan = vintagefan[0];… the scaling and positioning started working better.

https://playground.babylonjs.com/#XVEFAU#30

Phew, that fan was BIG (for me). Scared my dog. :slight_smile:

Spacebar… starts the particles and speeds-up the fan. FUN!!!

4

Thank you very much for your corrections.
Next time I will use Asset Manager, seems now it is time for me to know it better, as well as JS itself :slight_smile:
Anyway, I had a lot of fun creating this scene and have got a lot of knowledge about new (for me) functions. It as good as good prototype could be. I think maybe I will develop my findings to some conceptual e-commerce page for fan manufacturers… particles are very addictive…

2 Likes
5

I love your creativity… using local models to spin a story or 100… too fun. There’s a method around here… mesh.instantiateHierarchy()… to instance an entire model-hierarchy. So, you know… Dude’s rabbit farm… or Rabbit’s dude ranch, or… Rabbit and Dude’s Tower Company… on and on. You could accidentally start a trend around here… and get famous.

I goofed-around with trying to remove the animationGroups on the fan, and add my own fan blade spinner. I wasn’t able to kill the scene.animationGroups for it… dunno much about those, yet.

One of the funner things to do with 3d… is “cinematics”… or, in other words… making movies/sequences. @aFalcon is working on something new, there, but before that… I made a pile of “animators”… all based-on a method called createAndStartAnimation. Take a look here: https://www.babylonjs-playground.com/#HH1U5#72

Spin, spinTo, move, moveTo, scale, scaleTo, color, colorTo… see 'em at the top? Lines 150-166 is a time-based script… it calls those animators… at certain times, etc. It could probably use a “manager” (like a scheduler that allows add/remove of time-based events). But, this is a fun and easy way… to make animation-event sequences.

I think you… are a storyteller. You are showing signs of it. :slight_smile: You maybe need one more type of animator… one that creates/displays a GUI box of text at various times, and then turns them off at a certain times. These text boxes can be attached to mesh… like text balloons seen in comics. You could make two boxes talk to each other… flirt with each other… rub against each other… and tell a story. Rabbit could talk with dude, and fan could talk too.

Time-based stuff… cinematics… the BabylonJS Mesh TV Show. :slight_smile:

I think you’d be REAL GOOD at doing these types of things. You have shown promise as a producer/director. A few more easy animating tools, and I think you’ll be “dangerous”. But first, you might need to code a better “scheduler” for entering “scripts”. Not many people are making TV show-like sequences… and in my opinion… it is a possible place for “expansion”.

Use all those animators however you wish. Improve them, make more, see if you can clean up my mess and become a BJS movie maker… if you wish. I love what you’ve done so far. Fun!

And yes, particles are very addictive. I dunno if you have used .manualEmitCount (instead of emitRate) yet… but it’s pretty fun, too. Start a particle system with no emitRate set, and instead set .manualEmitCount to 0. After that… anytime you set .manualEmitCount = somenumber, it emits that many particles… and then sits idling, again, waiting for you to do it again.

This works great for “scheduling”. The particleSystem sits there idling, doing nothing… but still started. Emitters can be mesh (invisible or not) OR can be a vector3. So, move emitter, spit 1000 particles, move emiiter again, spit 1000 particles, all based-on time (possibly engine deltaTime feeding scene elapsed-time to an animation scheduler/manager).

Lots of potential, there… and hours of addictive fun. And many particle systems can run at the same time, or one particle system can change emitters, and even APPEAR to use multiple emitters at the same time. :slight_smile: ParticleSystems allow easy-installation of custom functions, too… such as its updateFunction… which is the function that runs VERY FAST… stepping the particles thru their “flight” and aging. Get to know that small updateFunction, and then you have MASSIVE and powerful control over particle systems… telling them how to act.

https://www.babylonjs-playground.com/#1NXKLI#21

Lines 64-98 is a customUpdate function. It gets installed in the particleSystem… at line 101. This customUpdate… makes sparkly particles which don’t fly, don’t z-spin, and ignore color1, color2, colorDead. Fun. Here’s another odd one… https://www.babylonjs-playground.com/#J6ZLH#4

It has a custom particle startPosition function at lines 11-16, installed in the PS at line 112. Still using the sparkly particle update function… lines 22-43… installed at line 111. Crazy.

1 Like
6

Playground tips: use full.html template :wink: https://playground.babylonjs.com/full.html#XVEFAU#30

2 Likes
7

Thank you. That is true. BABYLON.Cinematics (concept) is alive and well, and definitely a fun challenge. But, should any attempt it - gruesome SURPRISES await you! The bulleted-babble below, is for any who choose to attempt… programmatic-cinematography.

My team and I experimented with many animation techniques, before we finally found the one that fit our (unusual) requirements of programmatic-cinematography.

Ironically, the end format was a MIXTURE-OF-BOTH or ALL-OF-THE-ABOVE simplification. Where key-frame animations AND interpolation methodologies, (with textual animations[TXTs]), and others…, - to animate, on command, in a singular uniform way. For that, we chose JSON.

That concept is similar to the concept of INSTRUMENTATION. But in this context, INSTRUMENTATION, is T=the approach of abstracting ALL animations UP into single objects.
To be easily placed AND MOVED AROUND in an array of sequences, and looped (in a CinematicLoop) over everything - without ever breaking. (Ha! For the most part. That works).

Instrumenting Sequences… was the easy part. : )

There were many unanticipated challenges afterward.

A few examples, to think about:

  • naming conventions. The order of operations, or hierarchy, is easily confusing. So we used a metaphor of the THEATRE. A simplified lexicon of unique identifiers - to organize the cinematic-chaos (with precision) into uniform-interchangable-parts. Below, many of them are CAPITALIZED, (as a Namespace Pattern). Easy to SEE, remember, and short. We arrived at the hierarchy of: EPIC, SEQ, FRAME, ANM and some others. Which organize the cinematic mess (of triggers, interactions, txts etc), into predictable placements, and fully-flexible, interchangability. Another requirement we call PRECISION. Tow examples, we call all cameras CAMS. Making initFreeCAM, and initFollowCAM… easier to SCRIPT. To make the concept “scene” unique we choose EPIC - so as to avoid confusion… with precision.

  • Hero’s Journey - there is a DESIGN PATTERN in the writing world, which translates directly to story-telling for programmatic worlds. It is worth studying, and looking at feature-films, to see how this is done… to great affect. In short - yes, movie magic translates to BABYLON. Your 3D world, your story, distributed by WEB, no publisher, no gatekeeper. You can do that too. The pattern, guides how to sequence for maximum affect. In addition to storytelling techniques - look at how cameras move. We study cinematography techniques… and translate the best concepts to BABYLON.Camera (CAMS).
    And more.

  • onInit, onEnd, onPause, and onAssetReady. Big headaches to solve early. For a sequence to be loaded in any order… we use a standard of: onInit and onEnd to make changes to each EPIC. Examples being: placements of a characters, AND for turning particles on and off. Pause (at best) is a single line of code (infecting) every animation, with knowing where to restart… a fantastic surprise to solve. REQUIREMENT: We try to instrument, and abstract these away from the animation logic as much as possible. So end at constructs of: onInitSEQ, onEndSEQ, onPauseSEQ, and onAssetsReady.

  • Lazy-Loading Assets. For performance we do not load ANYTHING up front. : ) Not even BABYLON. Just a blank canvas… with a CURTAIN, and your LOGO.Then, for any given EPIC, first load all the LIBS, then run any SEQ, ANM, at any FRAME[0]. But as anticipated, there is a surprising problem with all of that. We need to wait for all assets to be loaded dynamically and signal to us that they are there - first. Not easy. For that we use an old and simple solution: a MANIFEST counter. Each EPIC tracks who/what needs to be on STAGE, and tells the AssetManager - queue the assets, that are not already there. Awaiting for the count to be reached. When reached… raise the CURTAIN and begin the SHOW.

  • PATH Animations. A surprising challenge exists AFTER characters (HEROs) and cameras (CAMS) move around in the world either SIMULTANEOUSLY or SEQUENTIALLY. As mentioned, each… ANM… is easy. The TRIGGERS of each SEQ and FRAME, is an additional puzzle. But then arrives the best puzzle of all. How to create MANY complex animated movements quickly and easily? And then make tiny adjustments as mesh (like landscape changes surprise! We animated through the mountain). So we were forced to arrive at a PATH-EDITOR. A simple array of objects which contain positions (POS) and rotations (ROT). Which we can visualize(VIS) at runtime, then EDIT, and PUBLISH… to replace the prior PATH object in the code. Despite the blatant breaking from the taboos of copy and paste - we are convinced that Benjamin Franklin would be proud. And it fulfills the PRECISION REQUIREMENT needed to animate. So we stopped our INSTRUMENTATION innovations there. In pure raw form. That is fine (for us).

This is too much information no doubt. But … my time is running out.

So, I leave this here for the next open-source-warriors who take up the good journey of moving forward our collective abilities.
…

1 Like
8
9

Just to show that there are even more possibilities - since we are at HTML page, we can deform and move canvas as we need to achieve desired visual effect (or apply opacity, put elements over etc.).

https://igiuk.com/3d-utilities/animatecss/

1 Like
10

Well, usually I correct stories which other people tell or write (like content producer or editor), but here I had a chance to tell my own story based on assets which we have, and for quite special auditory :slight_smile:

1 Like
11

Well, here are my childish efforts (it was about month ago) to do something in this field - https://mu-so.ru/3d/v112/
While the upper line of buttons performs their functions well (and videorecorder even has progress bar), buttons at the right columns are not so good :slight_smile: But I understood quite fast that I am trying just to invent another bicycle, so I stopped for a while till I will have more knowledge about this. But I definitely need some kind of tools to make 1-minute videos of product models, in a nice cinematic way.

I also forked some time ago Babylon/CCapture solution for recording high quality video - https://codepen.io/eldinor/pen/oNvaPKV - it works, but it seems that there should be used deltatime somewhere.

1 Like
12

That is a really GREAT IDEA.

We mix lots of 2D and 3D.

Even out into the SocialWeb. : )

No boundaries.

13

sounds like a good project…

14

Babylon.js sample code (unfinished prototype)
A kind of utility (or extension) which lets to load models, choose lighting etc, choose some camera presets and their order and make a short movie (for Instagram, for example).

image
image.png1920Ă—944 193 KB

1 Like
15

We target animos to tictok. And a ton more just coming up now… vocal is another.

16

Well, Babylon gives us vast possibilities to present some good stories… in a way which is still unusual for the Web…

Below is the quote from 5 emerging UX trends in 2019 | Creative Bloq

02. Storytelling for a more memorable experience

From a consumer’s point of view, UX design is no longer a unique selling point, it’s now an expectation. Humans become engrossed in stories and a good story has the power to create empathy with the user. Because more brands seek new and innovative ways to stand out from the rest, we will see a growing trend towards storytelling in UX.

However, learning how to incorporate storytelling into the design process will be one of the biggest challenges for UXers this year, but it also represents a huge area of opportunity for both brands and UXers who want to stand out.

2 Likes
17

Hi “Labs”/others. “Engrossed”… there’s a nice word. I’ve always used “enthralled”… the two terms are essentially identical in meaning.

I wish I could keep this on the “everything is fine” painted-up side, but when news services tell stories (spin things)… that is contamination… and it misleads. That’s a troublesome area… a type of blatant lying and a way of railroading/band-wagoning, and often deceptive. Ratings == money, you know that story.

Do humans sometimes wish to “escape” into a story? Do we “blood boil” over watching competing? Does the “empathy” you mention… work in multiple ways - make us feel the emotions of what we are gathering from 1-5 senses? Do we smile when we see others having a blast? Yes. Do we feel combative when we see others in combat? Yes. Do we believe stories that many others have bought-into? Yes. There are deep ramifications to humans’ seeking of stories. It’s a very large subject.

These days, and maybe always, poverty-inflicted classes… are scrambling pretty intensely… to “keep their heads above water” and “stay ahead of the game”. This keeps them from having enough time… to get “engrossed” in a story. That’s why storytellers sometimes start new story chapters by saying “Last time, on Star Trek - The Next Generation…”. :slight_smile: In general, folks who are allowed more “free time”… are likely more available for enthrallment. :slight_smile:

But the “desperate to escape” will also jump into a fantasy… as a pain reliever.

Daydreaming is still/often discouraged… for the kids. Imagining is encouraged, but only under controlled environment… like ONLY when someone is not peddling THEIR stories/rhetoric at them. Teachings… are often stories… with alluding… hand-me-down traditions and social mores… sometimes/often outdated/stale. If a student or other story-peddling-target wanders-off on an imagination trail DURING this “lesson”… they often get reprimanded and drugged for A.D.D…

My point? I dunno. I was hoping I didn’t need one. Labris’ quoted article was really really “marketing”-laden… and I just wanted to remind… that storytelling has just as many people AGAINST it, as FOR it. This forum tends to lean FAR RIGHT… towards technical/programming… and folks like that… have little time/gumption for stories and artsy fluff. They’re quite logic/no-nonsense leaning… which is a habit gotten from programming. For programmers, ALWAYS TAKE THE SHORTEST PATH… is the accepted “creed”. For storytellers, dreamers, and imagineers… the HOPE is to take the LONGEST possible path… and paint it up with every color and emotion in the rainbow. :slight_smile:

Where do the storytellers “fit” here on the forum? They really don’t. The “gameplay” is on the “other side”… the “user side”… and programmers are not usually game players. Programmers rather get engrossed by a programming challenge… than a game-story.

It is a line… variable position. SOME logic-locked folks easily cross the line to game/story land. Some want nothing to do with “fluff” and consider it a complete waste of time (and feed ADD drugs to anyone who dares wander-away on an imagining). Others… gladly invite that TV show or game into their lives… as a way to escape (…work).

And guess what. I STILL don’t have a point. :slight_smile: But, I just felt like sharing some things I’ve observed, and see if others had comments.

WebGL and its audio layer… is really not easy/fleshed enough… yet… to allow it to be a good storytelling “medium”. Neither is TV/movie making, or music production… all of which require quite a large team which requires coaxing/luring folks aboard the team… with money. WebGL on the browser… represents yet another “hope” for the little guy… along with home video cameras and desktop recording studios. It empowers… to a degree. But still, just like TV, there are just too many sub-tasks involved in the production… to do it alone… without a hired team.

So, current status of storytelling… “money talks”. The best stories… will always be the “funded” stories. The best games… will be the funded games. Same for TV/video production. Same for music industry. The little guys, who MAY have THE BEST stories of all, and might need to “be heard” more than any others… are the folks with the smallest microphone and start the furthest “behind the 8-ball” and “over a barrel”. That, in my opinion, is very sad… makes me cry. The “cult” of money users… is torturing and gagging a group of unheard voices… and they won’t be allowing their stories or screams for help… to reach listening ears… until something big… changes.

A sad story, eh? nod. Over 1000 people starve-to-death… PER HOUR… on the planet. Does anyone hear THAT story told by the World Health Org? Does any programmer see THAT as a worthy programming challenge? Does any news service tell THAT story every hour on the hour? More people die of starvation in 4 hours time… than entire 9-11 incident. This is the saddest story of all… yet most adopt “see no evil, hear no evil, speak no evil”. It is a distasteful story… one that we all prefer to label as “nuh uh”… and certainly not on-topic with the local techies. :slight_smile: But it is REAL… and happening in the same scope as BJS framework operates-within. A BJS box mesh CAN hover-over 3rd world countries… I’ve tried it. What story should we make our box… tell?

2 Likes
18

Beneath the fantasy, we tell a story of what is actually real, and who we actually are.

For the reasons above, we need it more than ever. But why?

To crystallize the momentivechoice. So that when it is made, we’ve made it informed.

All of the above, a reasoning essential, foretelling, more GOOD stories, faster - no less.

:eagle: : )

19

@Wingnut Your reply is so voluminous that I could reply only gradually, with some quotes :slight_smile:

When I was in school, stereometry course was a nightmare for most of us. Now, with the help of BJS, it is possible to create an interactive stereometry course for children in a game form, which will work even on low-end devices. Isn’t it a good story to tell?

20

Hi L. Yeah, maybe that’s a good story to tell. We are each different, with differing priorities.

About 15,000 children under age 5… died of preventable causes… today. Same tomorrow. Wouldn’t it be cool if those kids… could live to an old-enough age… to discover/explore the word/phenomena of stereometry?

Why did they die? A lack of little green pieces of paper (called money)… used to “order” the supplies/sanitation needed to live thru tomorrow.

That’s the kind of story that I like (dis-like) telling. High impact game-changers… gut-wrenchers that make people shock-puke, and slam them to the ground from well-blindered high-horses. Wake up time. Just a pinch of ground mustard mixed with folks’ daily cocaine of “I’m a good person” self-lie.

Boat-rocker stories, ya know? We hippies call it “the establishment”… the institutions/traditions that railroad each-other/ourselves into “everything is fine” beliefs… while another 15,000 pre-schoolers die for no good reason.

The numbers are real… the stories are real… the mainstream news coverage of these attrocities… zero. To use the comparison once more… under 4000 adults died in 9-11 incident, and the news treated it like the world had come to an end. 15,000 infants dying every day… no big deal, apparently. Tell the story of WHY that happens (no news coverage)… and now you have an interesting and powerful (and likely Earth-moving) story, right?

How’s the stereometry story feel, now? A little lower priority than before? shrug.

Yuh, I like aiming my camera at the most-disgusting, most-appalling, most-newsworthy TRUE stories on the planet. Those stories have the highest chance for moral success. As for economic success… I don’t know much about that… I don’t seek it unless forced to do so. I prefer somehow getting 15,000 kids thru tomorrow… so they have a chance to learn what moral success (and a bicycle)… is. Impactful stories are the most delicious stories of all. :slight_smile: