Modify mesh in a particular Viewport

[syncmaster]

Hi 

 

I am trying to develop very basic 2D car game. In the game I want to show a small map on top right side of the screen which is actually same track but with a zoomed out scene so that user can see what is coming ahead of the car. I was able to accomplish this but now my problem is in the zoomed out map car is very small mesh.

 

Is there any view where I can change size of a particular mesh(Car) and then create a view port

 

or can I change size of mesh(Car) in just one viewport. I am attaching screenshot of scenario and code by which I have implemented my existing code 

var camera1 = new BABYLON.FreeCamera("camera1",  new BABYLON.Vector3(0, 0, -8), scene);camera.viewport = new BABYLON.Viewport(0, 0, 1, 1);var camera2 = new BABYLON.FreeCamera("camera2",  new BABYLON.Vector3(0, 0, -50), scene);camera2.viewport = new BABYLON.Viewport(0.8, 0.8, 0.2, 0.2);scene.activeCameras.push(camera1);scene.activeCameras.push(camera2);

[iiceman]

Hi syncmaster and welcome to the forum!

 

Do you already know this tutorial bey temechon: http://www.pixelcodr.com/tutos/shooter/shooter.html

 

It is about a first person shooter but it also covers the mini map part. He explains how to use layer masks to show certain meshes only on certain layers. I think that idea might help you out. You can user a bigger mesh (or a totally different one) in the mini map few and your normal mesh in the other view. You then just update the position (or set the actual car mesh as it's parent) of the mini map mesh according to the real car mesh.

 

I wouldn't know nay other way to achieve what you want. I don't think you can manipulate the the mesh in just one view. Well, instead of simply adding a new mesh for the mini map view you can of course use instances to create a instance of your car mesh. Then you assign the instance to the mini map layer and parent ti to the car mesh. This way they share the same material and geometry but you can scale the mini map one individually.

 

I hope that helps. Your project looks fun, don't forget to show us you progress and/or the final game

[syncmaster]

Thanks alot iiceman the tutorial by temechon was really helpful for me to complete the task was trying to do. I didn't see layermask in the documentation of FreeCamera in the beginning after looking at the tutorial I went to actual Camera class and found layermask. My game is not complete yet but I will try to post it when I complete it for now here is screenshot of how car looks in minimap .

[Dad72]

For layermask:

 

Exemple:

 

cam1.layerMask = 2;

cam2.layerMask = 3;

 

mesh1.layerMask = 2;

mesh2.layerMask = 3;

 

this way mesh1 will be rendered only on cam1 and not cam2 and mesh2 will be rendered only on cam2 and not cam1

[iiceman]

Googd job, keep us updated!

[syncmaster]

Hello everyone here is version 1 of my game

 

http://wiu.edu/users/sm101/test.html

 

I am having two problems in the game

 

1)      I have a mini map in my game and in mini map car is big sphere. This is working but if we play the game in higher screens like 21 inches or 27 inches the sphere is not appearing and only car is appearing.

Here is the code

var camera = new BABYLON.FreeCamera("camera1",  new BABYLON.Vector3(20, 2, -10), scene);        //BABYLON.Viewport = function (x, y, width, height); (20, 2, -20)        camera.viewport = new BABYLON.Viewport(0, 0, 1, 1);        camera.layerMask = 2; // 010 in binary        //camera.attachControl(canvas, true);                var camera2 = new BABYLON.FreeCamera("camera2",  new BABYLON.Vector3(24, 14, -47), scene);        //camera2.viewport = new BABYLON.Viewport(0.8, 0.8, 0.2, 0.2);        //camera2.viewport = new BABYLON.Viewport(0.8, 0.8, 0.15, 0.22);        camera2.viewport = new BABYLON.Viewport(0.8, 0.6, 0.20, 0.40);        camera2.layerMask = 1;                scene.activeCameras.push(camera);        scene.activeCameras.push(camera2);	var s = BABYLON.Mesh.CreateSphere("player2", 16, 4, scene);                    var red = new BABYLON.StandardMaterial("red", this.scene);                    red.diffuseColor = BABYLON.Color3.Red();                    red.specularColor = BABYLON.Color3.Black();                    s.material = red;                    s.renderingGroupId = 1;                    s.layerMask = 1;                    s.registerBeforeRender(function() {                        s.position.x = car.position.x;                        s.position.y = car.position.y;                    });

2)      Second problem is game is very slow. If I play the game on bigger processes like i7 and i5 it works fine. But the game does not work smoothly on i3 or core 2 duo or even smaller computer. Is the engine dependent on graphics card or My game is using engine heavily? Please help me on this

[Wingnut]

Hi guys!

 

Hey syncmaster, for your #2 speed situation, I think you might be limited by the computer operating system (OS) key press repeat rate.

 

But the "render loop" for webGL can, and usually does... run at MUCH faster rates...  like 30 or more times per second.

 

Let's go play the classic game Asteroids for a moment.  http://www.onemotion.com/flash/asteroids-game/

 

There, you see that the longer you hold a keypress, the faster you fly.  This could apply to your car race game, too.  Inside the scene render loop (scene.registerBeforeRender function), the code is checking to see what the current throttle setting is, and moving the ship continuously and smoothly.  This is because the moving is not DIRECTLY connected to the key press.  Instead, the key presses are setting the throttle value and the steering value... and those values are polled/used in the render loop... 30+ times per second.

 

Essentially, you would no longer move the car with keypresses.  Instead, you use the up/down keypresses to set the value of 'throttle',  and this throttleValue is used in the render loop... to advance or slow the car.  When the car is stopped, the render loop is STILL checking the throttle 30+ times per second, but if throttleValue is zero, the render loop is continuously adding 0 value to the position of the car, and so the car is not moving.

 

So, essentially, you would have two function calls inside the render loop.  One might be called checkForSteeringValueAndMoveCar(), and the other might be checkForThrottleValueAndMoveCar().  The keypresses never move the car.  They only adjust the left/right steering value, or only adjust the throttle/braking value (variables).  Leave it to the render loop functions... to "poll" those values at 30+ times per second and move the car as needed.

 

Give this some thought.  I'm certainly no expert, but I have found success in other situations that use this 'constantly poll the values' theory.  In essence, you will have detached the keypresses from the moving of the car.  Instead, the keypresses change the throttle variable, and/or change the steering variable. 

 

Keep in mind that your two polling functions that get called from the render loop... checkForSteeringValueAndMoveCar() and checkForThrottleValueAndMoveCar()... are running continuously, and very fast.  Therefore those two functions should be "clean".  Don't waste time or code inside those functions.  Make them "tight".

 

Your other non-polling functions (NOT inside the render loop)... might be called increaseThrottleValue(), decreaseThrottleValue(), turnMoreLeft(), and turnMoreRight(), and those are the functions called each time a key is pressed.  Those 4 functions might adjust the values of two global variables, currentThrottleValue and currentSteeringValue, and it might be wise to allow positive and negative values in those variables.  For steering, positive numbers move the car to the right, and negative values... left.

 

Iceman, one of the super-cool guys who are hanging-out with us here in this thread... has done some nice work in turning a spacecraft to various angles.  Maybe he will remind us of the playground demo URLs where he did that work, and it might be applicable to your game, as well.  Local hero Dad72 is here with us, too, and he has certainly done plenty of 'moveWithCollisions()' work and knows how to turn things to angles, as well.  I think Dad72 was the first person to ever do walking, turning, hill-climbing character animation with BabylonJS.

 

I hope this helps.  I like your game.  Good luck with it.