3D arcade machine

[KuroNo_]

Hi. I'm new to babylon.js and to WebGL in general. I've browsed through http://doc.babylonjs.com/tutorials but I'm still having difficulty in coming up on the correct ways on how I can achieve what I want.

So I'm trying to replicate this arcade machine ( on the image attached ). I'll list the ways I can think of on achieving this:

- for the bottom part that has a shape like this: \_/ 

  From what I've read, babylon.js has a library for common shapes like cube, spheres etc. but not shapes like that. So the only option left is to use ribbon?

- the controls

  I'm planning to make this using image texture and height map.

- upper part

  same problem as the bottom part

- lastly, the screen

  is there a way to make it somewhat glowing as if it was emitting light?

 

Any advice or tips will be very helpful.

 

[OMAR]

Hi @KuroNo_ welcome to Babylon!

First off, for the bottom part, I think you want to implement a frustum-type shape? 'Cause if so, it has already been discussed here:

And I believe you can use same technique for the upper part as well.

Second, the controls... I am not really sure what you mean there? Do you mean keyboard controls or virtual controls on the arcade machine itself? If you mean keyboard controls then they are easily handled with:

window.onkeydown = function(evt){
   if(evt.keyCode === keyboardKeyYouWantToUse){
      // do something
   }
}

Third, glowing effects. Well, those are called post-processes! You can find out more about them here: http://doc.babylonjs.com/tutorials/How_to_use_PostProcesses

You can also create your very own custom post-processes, but you need knowledge of shaders. @deltakosh who is the creator of Babylon has an interesting article about it you can check it here: https://blogs.msdn.microsoft.com/eternalcoding/2014/04/17/what-do-you-mean-by-shaders-learn-how-to-create-shaders-with-babylon-js/

Enjoy!  

 

[jerome]

About the shape of your arcade machine, using ribbons is not that straight forward unless you are able to manage your underlying geometry (I mean, there's no magic : the ribbon only creates a surface onto a geometry).

Maybe could you first have a look at the provided polyhedrons : http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#polyhedron

You can also get a standard box and update its vertex positions or use an imported Blender model ...

Many ways to go

[Pryme8]

advanced extrudes or cones with different diameters and 4 tessellation.

[ozRocker]

Isn't it better to use a 3D modelling application like Blender or Maya to build complicated objects then importing that into your Babylon.js script?  I'd go crazy trying to build models by code.

[Pryme8]

eh, depends on how intense you are going... building things by code becomes second nature once you start doing it, and then becomes really fun when you start using that to do procedural stuff, and are able to do really complex things (like different buildings, or plants) by just generating it with a seed.

The first steps though, would be to simplify this into basic shapes, and look into subtract modeling techniques and this:https://doc.babylonjs.com/classes/2.3/CSG

[KuroNo_]

13 hours ago, OMAR said:

Second, the controls... I am not really sure what you mean there? Do you mean keyboard controls or virtual controls on the arcade machine itself? If you mean keyboard controls then they are easily handled with:

window.onkeydown = function(evt){
   if(evt.keyCode === keyboardKeyYouWantToUse){
      // do something
   }
}

My bad for being unclear. What I mean there is the physical controller. I figured it would be more difficult to create the buttons 1 by 1 instead of just making a flat image of buttons then elevating the correct areas using height map.

Thanks for the response, will definitely check out the things you said.

[Pryme8]

not really...
var buttons = [];
for(var i =0; i < 3; i++){
    for(var j = 0; j < 2; j++){
          if(!buttons.length){
               buttons.push(createmesh- a sphere with a arc or slice set to 0.5);
                continue
          }
     buttons.push(buttons[0].clone('button'+buttons.length, null, true));
      buttons[buttons.length-1]position = new BABYLON.Vector3(i*100, 0, j*100);
   }
}

You would not need a physics controller for the buttons, just register click events or something or key events and animate accordingly.
You would only need a physics controller for you know physics stuff

[KuroNo_]

13 minutes ago, Pryme8 said:

not really...
var buttons = [];
for(var i =0; i < 3; i++){
    for(var j = 0; j < 2; j++){
          if(!buttons.length){
               buttons.push(createmesh- a sphere with a arc or slice set to 0.5);
                continue
          }
     buttons.push(buttons[0].clone('button'+buttons.length, null, true));
      buttons[buttons.length-1]position = new BABYLON.Vector3(i*100, 0, j*100);
   }
}

hmmm yes I've thought of this but since there are three different shaped buttons, I'll need to add some conditions so that's still basically 1 by 1 ( model wise ).

I get your point that you're making everything through code. I certainly want to do things like that too. Is it advisable to make models through code right from the start?

I'm thinking of using modeling softwares first (I don't even know it's possible if not from this post) and understand other concepts.

[KuroNo_]

btw I'm also planning to recreate those characters in the image and eventually turn this into a game

[Pryme8]

whoa whoa whoa, dude awesome sounding project, right now I am doing a tutorial on how to do a surface2air missile and I use nothing but primitive to construct it.  you would prolly be interested it when Im done.

After that Ill take a crack and making your arcade machine and attach some game pad controllers, which I will do with advance extrude methods.  This will be the best method to save on draw calls.

[ozRocker]

5 minutes ago, KuroNo_ said:

btw I'm also planning to recreate those characters in the image and eventually turn this into a game

if you want to create characters I strongly suggest using a 3D modelling application then importing it into Babylon.js.  All your 3D models, materials, textures, cameras and lights will be set up in one import command.

[KuroNo_]

8 minutes ago, Pryme8 said:

whoa whoa whoa, dude awesome sounding project, right now I am doing a tutorial on how to do a surface2air missile and I use nothing but primitive to construct it.  you would prolly be interested it when Im done.

After that Ill take a crack and making your arcade machine and attach some game pad controllers, which I will do with advance extrude methods.  This will be the best method to save on draw calls.

but ofcourse! If you'll be kind enough I won't be turning that off, I'm actually better on reading someone's code instead of creating things from scratch.

The game would be a multiplayer (will probably use socket.io here), sort of a liar game, where you'll convince the other players on teaming up with you and eventually killing them too since only 1 player will win.

Will use audio instead of a chatbox for communications.

It's really a big project. Will probably finish it in a year or so because I also have other things to do.

[Pryme8]

paid? publisher?

[KuroNo_]

2 minutes ago, ozRocker said:

if you want to create characters I strongly suggest using a 3D modelling application then importing it into Babylon.js.  All your 3D models, materials, textures, cameras and lights will be set up in one import command.

Is there a way to programmatically add animations or It's like "load it, view it"?

[KuroNo_]

1 hour ago, Pryme8 said:

paid? publisher?

Nah will just be a hobby of mine.

[ozRocker]

7 minutes ago, KuroNo_ said:

Is there a way to programmatically add animations or It's like "load it, view it"?

You can also export animation from 3D modelling applications.  Babylon.js is very restrictive with animation though.  There is no root motion, vertex morphing or combining animations, like running and shooting at the same time.  If your project is going to include all that you might want to use Unity3D webGL instead.

[GameMonetize]

We added animations blending recently

[ozRocker]

5 hours ago, Deltakosh said:

We added animations blending recently

Sweet!   Is root motion in the pipeline by any chance?  Its just a matter of moving transformation of the root bone (usually hip) to the whole mesh instead

[GameMonetize]

Asked about root motion in another thread  to be continued