Flight Arcade Camera

[DellaFree]

Hi everybody ! I'm starting to learn Babylon.js , I just finished watching all the video made by the two Davids They are simply amazing. So I decided to start my own "simple" project, but there are a lot of feature that I don't understand clearly at all.
My aim is this :
I want to create a scene, like this http://blogs.msdn.com/b/eternalcoding/archive/2013/08/06/babylon-js-creating-a-convincing-world-for-your-game-with-custom-shaders-height-maps-and-skyboxes.aspx (since then that's no problem), and an airplane that flight around the island.
Is there any exmplample on how to create this kind of camera? I just want to realize something like the "Flight Arcade" (available on babylon siste)

Just for learning,  I use a cube (instead of an airplane), just for understanding the mechanicism (I don't know how to use Blender; I think i will learn how to use it, after I have understood these things).
Repeat, I am at the beginning, so I really want to learn how Babylon works, how to set the right camera, lights etc; so any suggestion (materials, tutorials , course etc..) will be appreciated. Thank a lot guys; thank you all for your patience.

[gryff]

Hi DellaFree - welcome to the BJS forum

 

I'm no expert on all the different cameras in BJS, but have you looked into using the Follow Camera ?

 

Which Camera for a Rollercoaster

 

cheers, gryff

[DellaFree]

Hi gryff ! Not yet;I'm going to study it. Really, thank you very much.

Another question: I'm using the playground, how can I specify the path of a resource (for example an image for creating an height map or a texture), in order to share later with yours? Thanks for all

[Wingnut]

Hi DF (and hi gryff) 

 

I once built The World's Worst Flight Sim ... a playground-based demo.  It has a few types of cameras, selectable with buttons at the top.  It is an experimental scene, and I'm not a very good programmer, so there might be broken things.  Be sure to try cursors and mouse dragging AFTER you select a different camera.  Most of those "airplane-following cameras" are still pan, tilt, and zoom-active even though they are parented-to, or targeted-at... the airplane.

 

There's a follow camera, and various parented cameras, and some non-working experimental cameras, assorted tests.  WASD QE controls the plane.  It's a large playground scene, but things are reasonably easy to understand.  Each camera-switch code is located on a general-use global object called myobj, which is there to make it easier to use playground-based html buttons (for their onclick targets). 

 

None of that is important.  Just have fun making adjustments to that playground and hitting RUN over and over, maybe use the GET ZIP to take a copy home, you know... its something.    Make new SAVES, send us the urls, you can't harm anyone's scenes by making more saves (but don't forget to bookmark those SAVE urls... if you want to visit them again, or continue work later).

 

I have not yet determined whether the followCamera works the best, or another type of camera... parented-to, or targeted-at... the airplane.  Try 'em all.  Most of our special cameras... start by being a FreeCamera.  FreeCamera and ArcRotateCamera seem to be the most popular types of cameras, and both types can be parented to craftParent, which is the parent for all my airplane pieces.  In your tests, you might want to .parent cameras to your flying box... and/or set a camera's .target (continuously in the redner loop?) to aim at your flying box.  It won't be long before you are a camera expert.

 

Maybe you want to add a button or two, for speed+ and speed-.  *shrug*  The elapsed-time, airSpeed, and turnSpeed stuff... begins about line 400.

 

Have you already hired the contractors... to install a runway on the island?  Have you hired your baggage handlers and mechanics? 

 

If you don't want to fly the airplane around the island yourself, there is simple math that does "orbiting", such as our playground demo #6. 

 

I have another playground I call "10-camera" and it once worked, but all its buttons are broken, now.  Deltakosh showed me what was wrong with it, but I have not yet fixed it (something to do with my poor use of scene.activeCameras).  Still, there is likely lots of camera code in there to steal.  Also, our class "hotlist" might be handy, providing an easy way to tour all the camera-classes.

 

Have fun, good luck, keep us posted.

 

Update:  http://urbanproductions.com/wingy/babylon/cameras/10cam/index.html  (.zip, too)  That is a version of 10-camera... running on BJS v1.14 on my server.  (see, dk?  I toadja there was a backward compat issue there.)   (He said something like "I don't see how that demo could have EVER worked")  hehe  (because of my poor .activeCameras activities). 

 

The gamepad camera is leaving its "A - to activate gamepad" message on-screen for other cameras, for some reason.  Probably poor scene.activeCameras activity on my part. 

 

The important thing is that DellaFree gets to see a followCamera in action.   See how it cannot be panned, tilted, or zoomed... after it is active?  It does most of those things automatically (with some 'easing' features, too), but your users might get bored during the flight.  heh

 

A camera that is parented to a moving mesh, or continually re-targeted to a moving mesh (see the flight sim cameras)... is a bit different.  The natural pan/tilt/zoom characteristics of THAT type of camera... will come along on the flight.  With me?  FollowCameras are cool and automated, but flying freecams and flying arc-rotate cams (and the MANY other steerable cams)...  are more fun during the flight.  You can look-around. 

[DellaFree]

Woooow It's simply incredible. Really THANK YOU VERY MUCH !!! TAHNKS A LOT GUYS Your advices really help me..I will have a lot of things to study this week. Your patience and availability , it's really unique. Again, thanks for all.

 

p.s

I have the same "problem"...How can I specify the path of a resource in the playground, in order to share with yours? I'm going to start my little project, and I would like to share with yours.

Thank you again

 

ah sorry for my english XD

[Wingnut]

I DF!  Yeah, paths to resources (in the playground and other not-in-your-home places) is controlled by the CORS security consideration.  There are a few models and scenes stored in .babylon files in the playground's /scenes folder (a rabbit, a walking guy, a skull, maybe a few others), and there are quite a few textures in the playground's /textures folders, all for playground tests and demos.

Textures that are brought-in from further away... need to be CORS-cleared.  One way to find CORS-clear images... is to use Google Image Search.

http://images.google.com/imghp?svnum=10&hl=en&lr=&btnG=Search

Please browse that when you have time.  Let's pretend we need a picture of a duck to use in a playground.  So, search for duck now.

When that gets done, click the SEARCH TOOLS button, then choose USAGE RIGHTS and then choose Labeled for reuse.

You should still see many duck pictures.  Let's pick one.  https://upload.wikimedia.org/wikipedia/commons/8/80/Biziura_lobata_-_Sandford.jpg

Now let's head to the playground, and look at a scene where I use a picture on a sphere that surrounds the scene.

http://playground.babylonjs.com/#1BIQIC  Ahh, some pretty satellite dishes, and a test of our cool PolygonMeshBuilder system.

See the url in line 13?   That url variable is used as an emissiveTexture for 'smat', which is the material for the sphere ( line 19 ).

So, lets try your duck url.   http://playground.babylonjs.com/#1BIQIC#1  (see line 13)  Work ok?   nod.

I do it a bit weird.... but generally... here's your code sequence.

var myReusableTexture = new BABYLON.Texture("someURL", scene);

A URL that isn't CORS-clear... just won't load.  Sometimes it takes some work to find a public reusable picture, pattern, or texture.  Once you do, you can use it in any or all of the material 'texture' slots... for playground-based scenes.

someMaterial.diffuseTexture = myReusableTexture;

     and/or
someMaterial.emissiveTexture = myReusableTexture;

     and/or

someMaterial.opacityTexture = myReusableTexture;

On and on.  It can be used on sprites, particles, godray emitters, mesh, all sorts of things.  BABYLON.Texture is very versatile. 

Let's head for our materials playground demo.  http://playground.babylonjs.com/?4

Here, the demo author used many textures gotten from the playground's /textures folder.  You are free to use those same urls in any playgrounds that you make.. no problems.  Gosh, that scene is boring.  Let's make it prettier with another method of using a background image... called a "layer".

http://playground.babylonjs.com/#1XQKP1#2

Hey, see that url in line 86?  Wikimedia... so it's probably CORS-clear.  (it is, I found it the same way that you found the duck) 

Skip down past the disabled godrays thing ... to line 110.  There is our url... being used on a "layer".  Cool.  You've got this figured out, eh?

Let's look at a few more.  I told you that some test models, stored in .babylon files... are in the playground's /scenes folder.  Let's see one.

http://playground.babylonjs.com/#LNEX4    Lines 14-21 load the skull model, and down in line 28... I use a texture (a CORS-clear one)... as the texture for the VLS godrays.    I use this one... http://upload.wikimedia.org/wikipedia/commons/f/f4/Color_circle_%28hue-sat%29_trans.png ...  a color wheel.  Then down in lines 36 and 37 ... in an area we often call the render loop... I'm spinning and rocking the color wheel back and forth.  FUN!

Want to see another demo with locally-loaded models?  I knew ya did.  http://playground.babylonjs.com/#1NSCXV#3

(I am not the modeler for ANY of these models, or the programmer of most of the code in these demos.  I just used/borrowed all this stuff, to make some test scenes.)

You can read about CORS when you get a chance.  It gets in our way often, but there are ways to work around it.  Good luck.

[Wingnut]

Well, now that I reread your post, I think I answered everything EXCEPT your question.  hehe.

 

DF, each time you SAVE a playground, a new URL is written in the URL field at the top of the browser.  You can highlight and copy that url, come to the forum, and paste it...  show everyone your playground.  We call it "show and tell" and yes, definitely show us and tell about your playground saves.  We love it.

 

Yes, the path to a playground... its URL... changes each time you SAVE a playground... and you can send that new URL to forums and friends. 

 

You can even save one of our pre-made playground demos, you can't over-write it.  Everything is safe.  All playground saving is safe, and its editor will try to find errors for you, and assist in your programming.  The playground is FUN FUN FUN, and a jet-powered way to learn Babylon JS.

 

I think this better answers your question.  Sorry I misunderstood.  Party on!

[DellaFree]

Hi Wingnut ! You've centered my problem, and you've solved ! Also you have answered to a lot of my future questions You (and all other members) are really helping me ! I will not stop to thank you for all the help you are giving me. This is exactly what I'm looking for Again, thank you so much.