Weekly Video: Introducing the Mystery Demo Tutorial Series

Hey Everybody!

I’m beyond excited today, to kick off an epic 9-part video series that we’re calling “The Mystery Demo” tutorial series. For the next 9 videos, I’m going to take you on a (hopefully) fun and informative journey as we dive in deep, going step by step, to create an eye catching demo with Babylon.js. Here’s the catch though…I’m not going to tell you what we’re creating! You’ll find out after we’re done! Haha. Buckle up…it’s going to be a fun ride!

Let’s kick it off with Part 1!

15 Likes

My guess: 3d pizza.

2 Likes

Lol!

I think… due to the wavey water wandering… we’re making a nice Santa Barbara-grade backyard swimming pool with physics-active diving board. And the best part… it’s full of naked Hollywood girls… with working physics and (lightly-) weighted vertices (with water buoyancy settings) on all “padded parts”. POOL PARTY! :slight_smile:

1 Like

mmh my guess: a sea + a boat, with user interaction?

About the content, nice & efficient tut, maybe starting with maths could frigthen people, but it’s well explained.

We miss a point at the end of the video, even if it’s obvious: tell people (how) to save their work! It’s very important so as to follow all the series without loothing everything. Plus in the video description a link with your final shader.

1 Like

Yes great point. I don’t mention how to save work that’s a great callout!

In the next video we pick up right where we left off, including a link to the nme session from the first video…that said, it’s a good idea to include it in the description. Good call!

Part 2 is here! Diving deeper down the rabbit hole! Hope you enjoy!

6 Likes

Ready to continue unraveling the mystery? Check out Part 3:

Follow along with these links:

Picking Up Where We Left Off From Part 2:
https://nme.babylonjs.com/#QHB2ME#1

Nvidia’s GPU Gems Article:

Checkerboard texture:

Step Node Switches Video:

6 Likes

These videos are GOLD. Changing guess from pizza to potato chips.

3 Likes

https://playground.babylonjs.com/#4I3SIR#15

(Created at end of part2 - before part 3.)

We got Gerstner! Yay! (also known as a ‘trochoidal wave’, apparently). I saw some in my cup of cocoa the other day - didn’t even know what I was looking-at. :slight_smile:

Thx JcP… nice work. Happy Gerstner Day!

2 Likes

Part 4 of the Mystery Demo Tutorial series is here! The enigma becomes even more puzzling after this one!

Special shoutout to our faithful community member (and rumor has it: amateur juggler) – @Wingnut. You wanted more pirate?

I BE HAPPY TO OBLIGE, MATEY!!!

Edited to include links for those that watch it embedded

Pick up where we left off in part 3:
https://nme.babylonjs.com/#QHB2ME#2

Check out the other videos in this series:
Part 1: https://youtu.be/JqMxTZ2q4Nw
Part 2: https://youtu.be/ffUUq_3TCFk
Part 3: https://youtu.be/CKgswRix_Wk

Other links from this video:
https://www.desmos.com/calculator/wu7rqfelt3
https://www.desmos.com/calculator/fpymvt2mjx
https://www.desmos.com/calculator/ziy8az1bbm

The final state from this video:
https://nme.babylonjs.com/#QHB2ME#3

7 Likes

Lost it at “look how deep inside the matrix we are” :rofl:
Am loving this video series. Your enthusiasm is contagious.

Am just a beginner at all this 3D stuff, but playing around with the NME, watching these tutorials and seeing what other folk are making with it is really helping me get my head around it. Am trying to make an “aurora” material…the idea being that it will deform and shade a plane till it looks like the aurora borealis. It’s probably going to take me some time, as I don’t fully understand how to mix effects together yet, but I will get there! This video series will definitely help me with this.

3 Likes

LOL Hahaha.

Thanks @Richard! So glad these are helping you wrap your head around the amazing Node Material! It’s such a powerful tool! 3D is a powerfully addicting world, can’t wait to see the Aurora Borealis once you get it up and working. Remember that this community is fantastically encouraging and helpful, so if you ever get stuck, this is the right place!

Have a blast!

3 Likes

Great “pirate look”, PirateJC! Thanks! It fits you nicely! At first sight, I started scrambling to find some “booty” candy, but then I realized you weren’t at my door to “trick or treat”. :slight_smile:

Nope, this is a genuine pirate mystery… with a mysterious partial map, and a far’n’wide rumor of great treasures. Like any good pirate, PJC knows not to load-down his ships with too much gold. He, instead, depoisits it on various islands and peninsulas… in buried caches. :open_mouth:

Ok, maybe not all that, but he sure is doing a nice job distributing his treasured knowledge… to we islands. Thx PJC!

I’m still working-on part 3… but I’ll get caught-up soon (maybe). I think I need more rum… my brain still hurts from part 2. :slight_smile:

If anyone needs it, here’s the playground for the end of part 2 [nme here]. Its “nme-code” in lines 2-1215… is getting rather “beefy-sized”, eh? Hot coders can code all that NME code… without exporting from the NME. They grow the NME-tree in their brain, and just type-out NME-code as fast as their fingers can move. (kenya maginit?)

At the end of part 2, the NME-code is about 26 times larger than the amiga.jpg texture it uses. :slight_smile:

Forum user: Can you please help me find the mistake I made somewhere in this 40k of NME code?

Wingy answer: Hey, welcome to the BJS forum. Now “walk the plank”. :slight_smile:

1 Like

Part 5 is here! While I’ve been excited about some of the previous videos, I cannot WAIT for you to see the payoff at the end of this one!

Pick up where we left off in part 4:
https://nme.babylonjs.com/#QHB2ME#3

The final state from this video:
https://nme.babylonjs.com/#QHB2ME#4

9 Likes

VERY cool, PJC! Wow.

Here’s the PG: https://playground.babylonjs.com/#4I3SIR#19 I’m still 2.5 videos behind, so I can’t comment much, yet.

125k of NME code in lines 4-4309. Serious. :slight_smile: I’m quite sure that’s the current world record.

Hey PJC, would you consider “fleshing” the metadata panel on that playground… on the way to another SAVE? I think you would be most-qualified, and if you can include a link to this thread… in the metadata… that’d be great.

Thanks… for ALL of this. You certainly have earned and deserve your reputation as NME swashbuckler and infamous commander of the “high seas”. :slight_smile: Very good.

Forum members… see if you can find out what PirateJC eats and drinks, because whatever he’s doing, it must be good. From the look on his face, he’s not yet done pillaging and plundering the NME. He’s thinking about other far-off treasures and beautiful native girls… err… I mean beautiful island beaches. :wink:

Ok, NME != “enemy”. :slight_smile: We got a nice booty of knowledge, and a big haul of fish in the nets, so the crew will be eating well for quite some time. PARTY!!! Three cheers and a rum toast… to our brave captain… the great PirateJC! :slight_smile:

1 Like

As always…thanks for the encouragement @Wingnut!

I’m probably being dense and stupid, but I don’t really understand? Happy to help in any way I can…but can you help me understand this one a little better? Thanks a million!

Hi there! Yeah, if you visit that playground, choose options, then choose metadata, a form opens, and we can type a few words. Ideally, put entries in every field. Maybe a few words about what we are seeing, how it was made, why it was made, URL to this forum thread, maybe a note about “No reptiles were harmed in the making”, you know. Metadata… information “about” a resource.

Tiz no big deal either way. That metadata is used in future playground searches… launched from our docs site. Thx either way.

Like I mentioned earlier, I am behind in the videos, so I don’t know how much “summary” or “wrap-up” you did in part 4 and 5… or if you tell WHY you pursued this objective (back-story?). :slight_smile:

Thx for the response… have a fine weekend, everyone.

Hi everybody! @PirateJC is out on the field doing some special research for the Mystery Demo…

Welcome to part 6 of the Mystery Demo Tutorial Series! The demo starts to become real! In this video we begin to take our amazing node material work and bring it into an actual Babylon scene!

Pick up where we left off in part 5:
Babylon.js Node Material Editor 2ME#4

Check out the other videos in this series:
Part 1: https://youtu.be/JqMxTZ2q4Nw
Part 2: https://youtu.be/ffUUq_3TCFk
Part 3: https://youtu.be/CKgswRix_Wk
Part 4: https://youtu.be/ko0DrgTrH3Q
Part 5: https://youtu.be/ZkYOtKYU5bI

The final state from this video:
https://playground.babylonjs.com/#JEI1D9

5 Likes

I’m totally hooked!

Learning things I vaguely knew existed… and things I hadn’t even thought possible! Amazing!

Thank you, PirateJC!

… BTW, Babylon still run fine on a 6 yrs old iPad and a cheap smartPhone: incredible!

2 Likes