Tutorial Talk

[Wingnut]

Hi gang!

 

Regarding our Basic Series Tutorials 1-17...

 

...they each have a link at their bottoms... that links to the SOURCE.ZIP for that tutorial. Those zips all contain old versions of babylon.js and old versions of hand.js.  All those zips will be leaving, soon.  They will be replaced by the demos in the BabylonJS playground (each playground demo can be zipped and taken home, too).

 

If you would like copies of all 17 of those old zips... you can get them by downloading this 52 mb package. 

 

Again, the old smelly zips that are linked-to at the bottom of the Basic Series tutorials 1-17... are leaving soon.  Freely download the 52 mb 'package' at the url above... which will be available for at least another year. 

 

Thanks!  Party On!

[Wingnut]

Hi kids!  Let's bring the dreaded "Tutorial Talk thread back to life... at least a LITTLE bit of life.

 

I have been working on a seriously-adjusted Basic Series tutorial 01, recently.  You can see it (a draft) here...

 

https://github.com/BabylonJS/Babylon.js/wiki/zzz-work-in-progress-01

 

Playground scene 01 will also look like the picture at the top of that tutorial, if everyone is cool with that.

 

Using this tutorial, AND tutorial #00 the Babylon.js Primer ( https://github.com/BabylonJS/Babylon.js/wiki/Babylon.js-Primer )...  gets the user done with file format concerns.  In other words, by the time the user arrives at tutorial 02, they are done learning "the support stuff".  When we (users) hit tutorial #2, we (they) are in full scene-coding mode.

 

Tutorial 02 is destined to grow, as it recently did, thanks to Kostar.  (tiled ground)

 

Also, CreateGround is not yet taught in 02, and since Playground scene 02 is already crowded, I decided to introduce CreateGround in tutorial #01 (zzz-work-in-progress-01).  "Basic Scene" is not quite as 'basic' anymore, but I think it is still ok. *shrug*

 

Look it all over, as wanted.  Comment at will.  It's all getting long.  I don't like long tutorials... but... sigh... it seems needed.

 

Next, I will remove most of the file formating talk from tutorial #02  (I will make a work-in-progress for tutorial #02). 

 

After that, we are in a pretty good position to roll on through the rest of the tutorials.  There won't be major changes.  Just removing their zips and instead pointing users to Playground scenes.  So, in general, most of the major changes will happen BEFORE the halfway point in tutorial #02. 

 

Recently we added torusknot, lines, tiled ground, and there has been talk of "circle" being added.  Tutorial 02 will be getting "busy", so I would like tutorial 02 to jump right into teaching basic shapes, without any reviews or file format talk.

 

(snore)    None of these changes are "official" adjustments yet, and the original tutorials 01 and 02 are safe on my harddrive, should they be needed.    Party on!

[Temechon]

Hey Wingnut, 

 

I liked the first version of the tutorial, with the big image, all the important link. Maybe you can create a Tutorial #0 with these parts from the tutorial v1

 

Let me explain : 

Tutorial #0 : 

   - Babylon.js Game Creation System!

   - The Browser

   - Useful Links

   - Scene File Layout

 

Tutorial #1 : Your tutorial zzz work in progress 01

 

What do you think about it ?

 

And just for your information : 

 

 

Before you start, be sure to have a WebGL compatible browser (e.g. “IE 11” on Windows 8.1).

 

Please please add Chrome and FF (and Safari, if it works ). I had some bad reactions to Babylon (on Reddit particularly) because "It's a Microsoft products, works only in IE, only MS tools, ...".  Adding Chrome and FF in the tutorial can help to reduce this kind of (stupid?) reactions.

 

Thanks

[Wingnut]

Yeah, there will be a 00 and a 01.  Both will be included in the list.  00 won't have a corresponding pre-installed playground scene.  In 00, I just reference a playground save that I made.  (red box).

 

 

(see update below)

 

So, 00 talks of file layout and a few thousand other things (probably too much). It's meant to be an open-ended document (easy for everyone to add things).

 

01 walks them thru playground/?01 (not installed yet) with a review of file layout... and a blatant "here's the whole file" at the end.  And in 02... we're talkin' shapes.

 

But yes, to clear up any confusion, 00 will be in the list (see update below), and so will 01.  They get a double dose of Wingnut yap-a-thon right off the bat.  Yay!  (not).  Sigh.  So much work, so little gumption.    Thanks for the comments, T.  Let's hear more.

 

The ie11/win8.1 line... umm... is editable only by whomever put it in, or "the boss".    It is one of those lines that... you know... a guy like me probably shouldn't adjust, even though I am in full agreement with you.    Go edit it up, T-willikers (I'll adjust my home versions to match your edit).  heh.  If big brawny thugs show up at your door and say "Hey, dude, we're from Microsoft... and we want to have a little talk with you"... um... I don't know you. 

 

UPDATE:  Because of technical considerations, there will not be a 00 in the Basic Tutorials list.  (Well, it WILL be on the list... just at the bottom).  The former tutorial #00 is now called The Babylon.js Primer and it is located here... https://github.com/BabylonJS/Babylon.js/wiki/Babylon.js-Primer

[Temechon]

Lol

 

Ok i will edit it. I ain't afraid of anyone ! xD

[burbonvagin]

Sorry if this is doesn't make sense. I am very tired and can rewrite it in the morning. In 14 Advanced Texturing > Mirror Textures. As a newcomer this is the first time I came across the BABYLON.Plane constructor. It was completely unclear to me what properties of the plane the 4 arguments were defining. And the documentation is not helpful (http://doc.babylonjs.com/page.php?p=24815). After a bit of experimentation I still didn't understand it.

 

PS: Great job updating the tutorial. Unless I just didn't notice the rest before. I'm super excited to add lens flares.

[Wingnut]

Hiya burbonvagin!  Yes, I agree.  Thanks for pointing that out, and for the kind words.  The plane constructor documentation could definitely use a bit of "fleshing".

 

I need to do some research.  That is not a standard mesh.  Maybe some experts can help us out with it.

[Dad72]

I need to make a clarification to the 14 for videos tutorial. on this line:

 

The VideoTexture object accepts an array of videos (to take in account various codecs) 

 

You might say what format to clarify the possible format.

 

• The format support  : .mp4,  .webm and .ogv ( who are the only format supported by HTML5) 

 

Thanks Wingnut

 

[Wingnut]

Hi Dad72... thanks for the input and good idea.  That change has now been done.

 

@burbonvagin - I am doing some research on your concern, and trying to determine if there is some better documentation that can be included somewhere.  The first three parameters are x, y, and z for a direction, and the fourth parameter sets the distance of the reflection.... from the reflected mesh.  How and why it does that... is unknown to me, but I will keep researching it, and maybe some experts can help us.

[Wingnut]

Hi kids!  I'm here to announce that the new Playpen Series tutorial #01 has been officially installed, pending kyboshing from admin Gods. 

 

https://github.com/BabylonJS/Babylon.js/wiki/01---Basic-scene

 

It is not quite as 'basic' as the original basic scene was, because I introduced CreateGround (along with CreateSphere, which was introduced in the previous version).  The camera was changed to a free camera.  It was formerly an arcRotate.  In the early days, users can be confused by arcRotate cameras, because users can THINK... that they are rotating the scene/mesh... instead of correctly knowing that they are orbiting the camera around the scene.  Thus, I opted for a freeCamera, so there would be no confusion.

 

I still would love to see a (likely 2d) "compass" made by anyone... so users always know which direction they are looking.  But, I think such a feature might require generating continuous cameraMove events, which would surely slow the smoothness of our cameras.  I am stilll going to look into it, though, when I have some moments.  If anyone has large thoughts on this, please start a new forum thread about it, and I'll be there with you.

 

Speaking of new user orientation (ar ar)... I ran a notion past deltakosh... about making all built-in playground demo scenes... have their initial camera facing somewhat in a +z direction.  He was cool with it, but it involves a chunk of workload.  Does anyone besides me... think that beginners would feel most natural with +z facing cameras?  IF we were able to make a tiny 'compass' located near the FPS read-out of the playground... then the +z modifications to the built-in playground scenes... would become unnecessary.  If anyone has any comments on this subject... please comment using The Wingnut Chronicles thread.  Thanks!

 

Soon, Playpen Tutorial #02 will be modified heavily.  It will lose all talk of file formating (mainTutos and scene_Tuto talk - leaving)... and will strictly talk about the built-in basic shapes (sometimes called primitives).  There are some concerns.

 

http://www.babylonjs.com/playground/?2 is the scene that applies to tutorial #2.  BUT, the scene is already 'crowded' and it contains no CreateGround or CreateTiledGround.  CreateGround is not talked about in Basic Tutorial #02, and CreateTiledGround is mentioned, but not overly-explained. 

 

CreateGround IS used in tutorial 01 though... but its parameters are not explained.  Also, Gwenael mentioned somewhere that CreateCircle, CreatePoly, CreateFace and similar... could be done, or already ARE done.  As these features go active, tutorial #02 is destined to become large, and playground /?2 will become even more crowded.  Feel free to throw ideas about this... at me... preferrably in the The Wingnut Chronicles thread.  Thanks.  Remember that we can give the URL's of MANY playground scenes... within playpen tutorial #02.  We are not required to ONLY reference playground ?02. 

 

So, maybe both types of CreateGround could be shown in ONE PG scene, and maybe all the CreateTriangle/Circle/Face/Poly could be shown in ANOTHER PG scene, etc.  I don't know.  All I know is that... if we add lots of primitives in the future, playground/?2 is going to get 'busy' (cluttered/crowded).  All comments welcome.  Thanks!

 

I guess that is enough for one post.    I want to thank everyone for indulging me in my attempts to 'align' the Playpen Series of tutorials with the playground demo scenes.  I hope I have not inconvenienced anyone or stepped on anyone's toes (hurt anyone's feelings or otherwise imposed on them).  Help me find wrong, confusing, and/or misleading things I've said or done (in Playpen Series #01 or in the Babylon.js Primer).  Both those documents are now officially installed (pending admin kybosh), so feel free to make edits... and those edits will "hold".  (I won't be pasting-in those documents from my home tutorial-editing software anymore.)

 

Party on!

[burbonvagin]

i noticed some things in the first page of the tutorial. the type attribute of the script element is unnecessary in html5. i think it is a bit odd to put script elements in the body instead of using window.addEventListener('load'.

[Wingnut]

Good comments, burbonvagin, thanks!  The type attribute has been removed.

 

The other comment... about script tags being in the body element... is to make it real easy for the user to get a scene running (without needing a load listener).  From what I read, there is not significant concern other than trying to keep scripts happening AFTER any html that is in the body.  But I am going to do some more research on this, and make sure we aren't causing some long-term problems by doing it this way.  Thanks for the comments!

 

Also, sorry to report that I have no news on your PLANE documentation concern.  It's still on my list of things to check-on, though.

[Wingnut]

Quick announcement.  Rough draft #1 of the 'newer' Basic Series tutorial 02 is viewable at https://github.com/BabylonJS/Babylon.js/wiki/zzz-work-in-progress-02 if anyone is bored.  Still lots of proof-reading and adjustments ahead, but comments welcome, as always.  Hope everyone is well!

[burbonvagin]

I don't think you are causing long term problems. Yeah it probably does make it easier.

[Dad72]

Thanks Wingnut for all official tutorials that are more complete.
 
on the tutorial 5 "camera" you can add a 6 th camera specialist.
 
The FollowCamera that has been recently add 
 
Thanks Wingnut

[Wingnut]

Thanks dad72... will do, and thanks for the kind words, too.  Looks like targetCamera also needs to be added.  I'm SO slow at this.

 

I wouldn't use the term "official" too often, Dad72,  even though I have used that term.  I'm really not smart enough to do anything official.  hehe.  After smarter people repair all my shortcomings and mistakes, THEN we can call them official, I suppose.  I just wanted to clarify this.  When I say "official", I mean that I am finished with home-editing the tutorial and have moved it from a 'zzz work-in-progress' location... to a more normal place.  So, I should have used the phrase "correctly located" instead. 

 

In short, I didn't realize how much the word "official" scares me... until I heard it said by someone else.  hehe

 

I have been thinking about scene file formats some more, recently, and I am thinking about a separate tutorial that shows many examples of ways to do scene files.  (single-file method, multi-file methods, scripts in head, scripts in body, scripts after body, eventListener startups, etc).  It is really more of a javascript thing than a framework thing, but, I don't think it hurts our cause at all... to have some "Javascript best practices" tutorials nearby.  It would be somewhat similar to our Naming Conventions documentation.  *shrug* 

 

In my quest to push 'createScene' on everyone (to help new users paste-to and copy-from the playground editor), I have somewhat ignored those who don't want to do it that way (been unfair to them).  I really don't like "railroading" people into doing things a certain way.  Something inside me... is yelling at me to show new users ALL of the ways to format scene files.

 

Now if I just knew javascript programming, huh?  Maybe somebody else will write the "All the ways to format scene files" tutorial, and I can learn from it myself.    I think, in the end, Deltakosh and other codebase maintainers are going to wish that they NEVER would have asked me to help with tutorials.  It's like asking a murderer to help maintain the community gun collection.  heh.  Party on!

[gryff]

I am thinking about a separate tutorial that shows many examples of ways to do scene files.  (single-file method, multi-file methods, scripts in head, scripts in body, scripts after body, eventListener startups, etc).

 

 

Wingy, I was thinking ways to do scene files last night. I've been going through Temechon's tuts, the "official" tuts, your thoughts on various threads, and looking at how other people elsewhere have laid out the whole process. It would be good to get more thoughts of the javascript gurus.

 

cheers, gryff

[GameMonetize]

AS far as I'm concerned all the above methods to create scene are ok. They are different but all deserve to be used

[Wingnut]

nod.

 

oh crap, gamePad camera too.  Three cameras that need adding to the camera tutorial (at the bottom?) and I don't know a single thing about how ANY of them work.  Ain't this fun?  hehe.  Pardon me while I have a nervous breakdown, okay?  Thanks! 

 

Okay, let's see...  I hereby offer 1 can of pilsner beer to whomever shows me the url to a working playround scene that demonstrates the followCamera, targetCamera, and gamepadCamera.

 

Hell, look at my description for the Oculus Rift camera.

 

"Keep checking back for more information."

 

Yeah, I taught buckets and buckets of good knowledge in that line, didn't I? I can do that for the three newest cameras, too.

 

"We have three brand new cameras... the FollowCamera, the TargetCamera, and the GamepadCamera.  Keep watching this tutorial for more information."  hehe.

[Temechon]

Hey Wingy, 

 

Hope these two examples will be useful !

 

TargetCamera : http://www.babylonjs.com/playground/#198GDI

The camera position is not updated, only the camera target.

 

FollowCamera : http://www.babylonjs.com/playground/#1CC7UC

The camera position and its target are updated.

 

I don't have my gamepad at home right now, so i'm won't be able to help you on the gamepad camera. However, the constructor is GamepadCamera(name, position, scene), I don't think there are any hidden problem here

 

Cheers, 

[Dad72]

TargetCamera is for FollowCamera. TargetCamera is add to operate FollowCamera. the two make a single camera.
 
FollowCamera :  (Sorry Temechon, I failed to understand your example)
http://www.babylonjs.com/playground/#1CC7UC#4
 
In my example, the camera track the cube on a ground. This camera also allows to follow the accelerations in the case of a racing car game
 
However rotationOffset does not work  (may be a bug) : 

camera.rotationOffset = 180; //rotate around the object (if it's you want to follow from the front)

[Wingnut]

Thanks, you guys!  Excellent!

 

Dad72, I found that camera.rotationOffset = 0; makes the camera follow from the front.

 

I see that there is some ease-in things happening here, too.  Interesting!

 

http://www.babylonjs.com/playground/#1CC7UC#6 ... Dad72's example with a front view follow, and a BIG ease-in.

 

Temechon, I put a ground into your TargetCamera scene, and then added a large amount of z-movement to the sphere... http://www.babylonjs.com/playground/#1ZXTPB  Then I made edits to switch back and forth between TargetCamera and FollowCamera, so I could watch.  It all did exactly what you said, cool.

 

I could test this myself, but instead I'll ask.  And let's, again, use d72's "actor" example, as if the box is a sim-person, and let's assume a rear-view followcam:

 

IF Dad72's actor traveled across the land for some distance, and then starts side-stepping left (left 'strafe'?), the followcam will left-translate along with the actor, correct?  (I assume the camera will NOT do any orbit arcs when that happens.)

 

Then, if the actor stops and TURNS left, the followcam would do a 90 degree orbit to the right, so it could stay in a rear view of the actor, correct?

 

Thanks!  Multiple people answering, each in their own wordings... is fine with me.  I can use it all. 

 

Have we got .whipInertia ? It sets the amount of followCam orbit arc 'overshoot' and recovery time, when the actor turns QUICKLY to the left or right?  ahem.  Nah, let's not go there.  It smells too much like physics.  We'll save the 'whip' things for our waterskiing game. 

 

Update: Ahh, AlexB has a thread going about this.  Alright!

[Wingnut]

Hi gang!  This morning I have been staring at the Basic Series cameras tutorial and trying to figure out how to make it less cluttered, and how to build playground scenes that demonstrate all (now 9) cameras.  It is difficult.  The ideal way is to have a different playground scene for each of the 9 cameras.

 

In the current cameras PG scene at http://www.babylonjs.com/playground/?5 , we just create 3 cameras, and only attach the free camera to the scene.  It would take quite a massive PG scene... to demonstrate all 9 of our cameras.

 

What we COULD do... is one of my big fat "buttons at the top" scenes for http://www.babylonjs.com/playground/?5 . It would not demonstrate any cameras itself, but would allow users to choose which camera demo to view.  Essentially, it would be a menu.  A place to choose any of 9 separate (and code-simple) camera playground scenes.

 

Another way to do this... is to modify the scene selector pulldown menu on the playground.  When you mouseover choice #5 (cameras) on the menu, another sub-menu opens to the left side, allowing users to choose which of the 9 camera demo scenes... the user wants to load-into the playground.  Doing this would be very cool, but COULD mean lots of added work to the playground, and some potentially-heavy maintenance concerns, as well.  Here is a demo of this...

 

http://www.script-tutorials.com/demos/244/index.html (mouse over choice 2, 3 and 4)

 

This would allow us to have a 9 (or more) item submenu which opens when a person mouses-over the 'cameras' choice on the PG's scene selector pulldown.  The 9 urls could be playground SAVE-issued urls, or they could be things like /?5_1, /?5_2, /?5_3, or something similar, but those styles of urls might not be easy for the playground's database to deal-with.

 

http://www.babylonjs.com/playground/?5 could also load an array of planes with 9 links (we'd need dynamicTexture text on each).... where users could select which camera demo to load-in.  This is similar to a scene with 9 html buttons - mentioned earlier, but using 3D mesh buttons instead.

 

Simply put, we/I could use some kind of branching for playground camera demos, because it is very difficult to show how to use 9 different cameras... in a single playground scene.  The same potential issue happens with lights.  We have 4 types, and demonstrating all 4 lights in a single PG demo... could be a substantial challenge (because lights can get in the way of each other). 

 

Comments and ideas certainly welcome... thanks.

[AlexB]

Thanks, you guys!  Excellent!

 

Dad72, I found that camera.rotationOffset = 0; makes the camera follow from the front.

 

I see that there is some ease-in things happening here, too.  Interesting!

 

http://www.babylonjs.com/playground/#1CC7UC#6 ... Dad72's example with a front view follow, and a BIG ease-in.

 

Temechon, I put a ground into your TargetCamera scene, and then added a large amount of z-movement to the sphere... http://www.babylonjs.com/playground/#1ZXTPB  Then I made edits to switch back and forth between TargetCamera and FollowCamera, so I could watch.  It all did exactly what you said, cool.

 

I could test this myself, but instead I'll ask.  And let's, again, use d72's "actor" example, as if the box is a sim-person, and let's assume a rear-view followcam:

 

IF Dad72's actor traveled across the land for some distance, and then starts side-stepping left (left 'strafe'?), the followcam will left-translate along with the actor, correct?  (I assume the camera will NOT do any orbit arcs when that happens.)

 

Then, if the actor stops and TURNS left, the followcam would do a 90 degree orbit to the right, so it could stay in a rear view of the actor, correct?

 

 

 

Yes, this is how it's supposed to work. I realized there were some errors that popped up in porting from AS3 to JS, so hopefully this fixes everything and it now works.

[Wingnut]

Thanks AlexB!

 

Ok, in other news... the 'new' Basic Elements tutorial #2 was installed today, and it is now open for public edits, and they will hold (no more home-editing done by me).  Edit away, gang.  Eliminate unnecessary yapping by Wingnut, as wanted.    There's a fine line between teaching thoroughly, and Wingnut yammering on and on.  hehe.

 

I am still questioning whether I should include contributor names in tutorials (such as the thanks to kostar111 for tiledGround).  And, I didn't even ask if it was ok with him!  Well, I sort-of asked him, in the tiledGround thread. 

 

I'm not sure if its approprate to put user names in tutorials.  *shrug*  I like crediting users for contributions, but I'm not sure when and where are the best ways to do it.  Also, we don't have a list of 'things contributed by who', so it's difficult to give credit to everyone who has contributed cool things to the framework.

 

Tutorial #03 has been renamed to 'position, rotation and scaling'... by me.  Its previous name was 'rotation and scaling'.  Playground scene 03 .. which is supposed to accompany tutorial #03... is still called 'rotation and scaling'... and will likely remain so, due to length limits with items in the pulldown scene selector panel.

 

Playground Scene 03 isn't very fancy, but, it's still not bad.  It uses only one Vector3 and that's on the hemiLight.  All the mesh is positioned, rotated, and scaled, using single axis components (I call it 'discrete' settings.  Somewhere I saw Deltakosh call it 'something component something'.)   

 

You know... .x, .y, and .z stuff (or .r, .g, and .b if working with colors).  All in all, playground scene #03 is simple yet interesting.  It also introduces parenting for the first time in the series.

 

Should playground demo scenes... be animated?  Maybe not until the more advanced scenes?  Would animating (playground scene 03)... help teach position, rotation, and scaling?  I dunno.  Thoughts, on anything, anyone? (thx)