Uniform Posted July 6, 2016 Share Posted July 6, 2016 Hello, I couldn't really find my issue in the official doc so I though maybe someone could help me. I am willing to move a cube towars a clicked position on the ground. It begins after the Action comment. Basically I am using the unit vector and translate function to move the box, the first movement is okay because it begins from the center but I don't know how to fix the next ones. I have attached the source file in case you want to try. Thanks in advance Uniform <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> <title>Babylon - Getting Started</title> <!--- link to the last version of babylon --> <script src="babylon.js"></script> <style> html, body { overflow: hidden; width : 100%; height : 100%; margin : 0; padding : 0; } #renderCanvas { width : 100%; height : 100%; touch-action: none; } </style> </head> <body> <canvas id="renderCanvas"></canvas> <script> window.addEventListener('DOMContentLoaded', function(){ // get the canvas DOM element var canvas = document.getElementById('renderCanvas'); // load the 3D engine var engine = new BABYLON.Engine(canvas, true); // createScene function that creates and return the scene var createScene = function(){ // create a basic BJS Scene object // This creates a basic Babylon Scene object (non-mesh) var scene = new BABYLON.Scene(engine); scene.clearColor = new BABYLON.Color3(0, 0, 0); // This creates and positions a free camera (non-mesh) var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); // This targets the camera to scene origin camera.position = new BABYLON.Vector3(0,20,0); //camera.setTarget(BABYLON.Vector3.Zero()); camera.setTarget(new BABYLON.Vector3(0,-50,0)); // This attaches the camera to the canvas camera.attachControl(canvas, true); // This creates a light, aiming 0,1,0 - to the sky (non-mesh) var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0,1,0), scene); light.intensity = 0.8; // Our built-in 'sphere' shape. Params: name, subdivs, size, scene var box = BABYLON.Mesh.CreateBox("box", 1.5, scene); box.isPickable = false; var ball = BABYLON.Mesh.CreateSphere("sphere", 2, 0.5, scene); ball.isPickable = false; // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene var ground = BABYLON.Mesh.CreateGround("ground1", 10, 10, 1, scene); // Materials var boxMat = new BABYLON.StandardMaterial("color1", scene); boxMat.diffuseColor = new BABYLON.Color3(1.0, 0, 0.3); box.material = boxMat; var sphereMat = new BABYLON.StandardMaterial("color3",scene); sphereMat.diffuseColor = new BABYLON.Color3(0,1,0); ball.material = sphereMat; var groundMat = new BABYLON.StandardMaterial("color2", scene); groundMat.diffuseColor = new BABYLON.Color3(0, 0.7, 1.0); ground.material = groundMat; // Actions var targetVec = BABYLON.Vector3.Zero(); var targetVecNorm = BABYLON.Vector3.Zero(); var initVec = box.position; var distVec = 0.0; scene.onPointerDown = function (evt, pickResult) { if (pickResult.hit && pickResult.pickedMesh == ground) { targetVec = pickResult.pickedPoint; initVec = box.position; targetVecNorm = BABYLON.Vector3.Normalize(targetVec); distVec = BABYLON.Vector3.Distance(targetVec,initVec); ball.position = targetVec; } }; scene.registerBeforeRender(function () { if (distVec > 0){ distVec -= 0.1; box.translate(targetVecNorm,0.1,BABYLON.Space.WORLD); console.log(box.position); } }); return scene; } // call the createScene function var scene = createScene(); // run the render loop engine.runRenderLoop(function(){ scene.render(); }); // the canvas/window resize event handler window.addEventListener('resize', function(){ engine.resize(); }); }); </script> </body> </html> babylon.zip Quote Link to comment Share on other sites More sharing options...
gryff Posted July 6, 2016 Share Posted July 6, 2016 Hi @Uniform - welcome to the forum You might want to have a look at this code by @ProfessorF : Basic Avatar Movement using ground taps It moves a rigged avatar - not just a box - to a clicked point cheers,gryff Boz 1 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted July 6, 2016 Share Posted July 6, 2016 Hi guys. We need to playground-up... for this one. http://playground.babylonjs.com/#22YD8R I think there MAY be some confusion between a "direction" vector and a "position" vector... happening here. @iiceman is pretty good at this "targeting stuff", too... so maybe he will visit. I think he had a hand in THIS demo. Notice our faithful .moveWithCollisions function... active in line 128. It is inherited from AbstractMesh, which is Mesh's daddy-o. It is used often. The first playground (22yd8r) shows another issue. After some time clicking-around, the camera/scene does a "shift of position". (The cyan ground changes position in relation to the cam.) Possibly, a framework bugski. Ok, that's all I got. Others may comment, but lots of folks are... out there havin' fun... in the warm California sun Quote Link to comment Share on other sites More sharing options...
Uniform Posted July 6, 2016 Author Share Posted July 6, 2016 Thank you guys, I appreciate your support! Hopefully a friend of mine and myself fixed it before seeing your replies. I put it on the side of my tiredness because this is very silly. Here is a demo for you to try: http://driver-chimpanzee-10603.bitballoon.com/ This is the interesting part: http://hpics.li/8bd2d4b Here is the source code whenever you feel like implementing it in the playground. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> <title>Babylon - Getting Started</title> <!--- link to the last version of babylon --> <script src="babylon.js"></script> <style> html, body { overflow: hidden; width : 100%; height : 100%; margin : 0; padding : 0; } #renderCanvas { width : 100%; height : 100%; touch-action: none; } </style> </head> <body> <canvas id="renderCanvas"></canvas> <script> window.addEventListener('DOMContentLoaded', function(){ // get the canvas DOM element var canvas = document.getElementById('renderCanvas'); // load the 3D engine var engine = new BABYLON.Engine(canvas, true); // createScene function that creates and return the scene var createScene = function(){ // create a basic BJS Scene object // This creates a basic Babylon Scene object (non-mesh) var scene = new BABYLON.Scene(engine); scene.clearColor = new BABYLON.Color3(0, 0, 0); // This creates and positions a free camera (non-mesh) var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); // This targets the camera to scene origin camera.position = new BABYLON.Vector3(0,20,0); //camera.setTarget(BABYLON.Vector3.Zero()); camera.setTarget(new BABYLON.Vector3(0,-50,0)); // This attaches the camera to the canvas camera.attachControl(canvas, true); // This creates a light, aiming 0,1,0 - to the sky (non-mesh) var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0,1,0), scene); light.intensity = 0.8; // Our built-in 'sphere' shape. Params: name, subdivs, size, scene var box = BABYLON.Mesh.CreateBox("box", 1.5, scene); box.isPickable = false; var ball = BABYLON.Mesh.CreateSphere("sphere", 2, 0.5, scene); ball.isPickable = false; // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene var ground = BABYLON.Mesh.CreateGround("ground1", 10, 10, 1, scene); // Materials var boxMat = new BABYLON.StandardMaterial("color1", scene); boxMat.diffuseColor = new BABYLON.Color3(1.0, 0, 0.3); box.material = boxMat; var sphereMat = new BABYLON.StandardMaterial("color3",scene); sphereMat.diffuseColor = new BABYLON.Color3(0,1,0); ball.material = sphereMat; var groundMat = new BABYLON.StandardMaterial("color2", scene); groundMat.diffuseColor = new BABYLON.Color3(0, 0.7, 1.0); ground.material = groundMat; // Point'n click logic var targetVec; var targetVecNorm; var initVec; var distVec; scene.onPointerDown = function (evt, pickResult) { if (pickResult.hit && pickResult.pickedMesh == ground) { targetVec = pickResult.pickedPoint; ball.position = targetVec.clone(); initVec = box.position.clone(); distVec = BABYLON.Vector3.Distance(targetVec,initVec); targetVec = targetVec.subtract(initVec); targetVecNorm = BABYLON.Vector3.Normalize(targetVec); } }; // Compute translation of the box scene.registerBeforeRender(function () { if (distVec > 0){ distVec -= 0.1; box.translate(targetVecNorm,0.1,BABYLON.Space.WORLD); console.log(box.position); } }); return scene; } // call the createScene function var scene = createScene(); // run the render loop engine.runRenderLoop(function(){ scene.render(); }); // the canvas/window resize event handler window.addEventListener('resize', function(){ engine.resize(); }); }); </script> </body> </html> gryff 1 Quote Link to comment Share on other sites More sharing options...
gryff Posted July 7, 2016 Share Posted July 7, 2016 3 hours ago, Uniform said: Here is the source code whenever you feel like implementing it in the playground. And here it is @Uniform : your code seems to work well Point and Click cheers,gryff Uniform 1 Quote Link to comment Share on other sites More sharing options...
Uniform Posted July 7, 2016 Author Share Posted July 7, 2016 3 hours ago, gryff said: And here it is @Uniform : your code seems to work well Point and Click cheers,gryff Neat! Do we have like a repo for all the playground files? Or a site that stores the links to them. Would be very useful. Quote Link to comment Share on other sites More sharing options...
iiceman Posted July 7, 2016 Share Posted July 7, 2016 Ah, you already solved it, so no need for me to worry about it anymore, eh? Sweet. It's fairly straight forward as long as you don't need any rotation to align your object with the direction of the movement. @Wingnut thanks for the notification, always interesting how other people approach a problem you once tried to solve @Uniform playgrounds are awesome, it's always a good idea to start right with a playground if you have a question. At least that's how I got pretty much all my question answered in almost no time You can search all the playgrounds that have ever been made with the playground search at the documentation page: http://doc.babylonjs.com/playground (thats what wingy used in his post, too) Or just browser the forum or use google. There are tons of links to playgrounds for almost everything. Sooo, congratz on solving this. Don't forget to show us the final result when everything is done! Wingnut 1 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted July 8, 2016 Share Posted July 8, 2016 Hi guys. Is anyone else seeing camera (or floor) "jump"? Click low, click high... keep clicking, and eventually you will might see the floor move. OR, the camera moves. The floor is not directly under the camera afterwards. The ground and camera .position is not showing change. No quaternions defined on ground or camera (which might have caused a ground or camera "tilt"). Possibly, a view matrix problem. Issue seen in both FF and IE. Thx for reports. I did some light testing... no reason discovered, yet. http://www.babylonjs-playground.com/#1JVKW2#6 Also seen at http://driver-chimpanzee-10603.bitballoon.com/ There seems to be a high-count of greyhound pictures, too, but I don't think that is a demo scene or framework situation. Quote Link to comment Share on other sites More sharing options...
eboo Posted July 8, 2016 Share Posted July 8, 2016 hi i ve this but not in a PG and with move with collision https://www.jouer.org/adept-beta.html try it, if it's your need, check animactor() Quote Link to comment Share on other sites More sharing options...
Uniform Posted July 8, 2016 Author Share Posted July 8, 2016 10 hours ago, Wingnut said: Hi guys. Is anyone else seeing camera (or floor) "jump"? Click low, click high... keep clicking, and eventually you will might see the floor move. OR, the camera moves. The floor is not directly under the camera afterwards. The ground and camera .position is not showing change. No quaternions defined on ground or camera (which might have caused a ground or camera "tilt"). Possibly, a view matrix problem. Issue seen in both FF and IE. Thx for reports. I did some light testing... no reason discovered, yet. http://www.babylonjs-playground.com/#1JVKW2#6 Also seen at http://driver-chimpanzee-10603.bitballoon.com/ There seems to be a high-count of greyhound pictures, too, but I don't think that is a demo scene or framework situation. The floor moves because the camera is not locked. Just comment out the line 18: camera.attachControl(canvas, true); Saved here http://www.babylonjs-playground.com/#1JVKW2#7 Quote Link to comment Share on other sites More sharing options...
Uniform Posted July 8, 2016 Author Share Posted July 8, 2016 2 hours ago, eboo said: hi i ve this but not in a PG and with move with collision https://www.jouer.org/adept-beta.html try it, if it's your need, check animactor() Very nice but it seems that the character does not go at the place I clicked. And i have some serious lags when there are several minions following me. By the way the next thing i will try to do is implementing a pathfinding library. http://www.easystarjs.com/ Quote Link to comment Share on other sites More sharing options...
Wingnut Posted July 8, 2016 Share Posted July 8, 2016 Nope, I'm not buying that as the reason for the camera "jump". Go back to #5... and just start a vertical drag. The camera tilting starts with a "jerk" or "jump", and then I cannot get the camera to return to original position. But you might not be seeing this... different browser or something. But yes, detaching camera control eliminates the problem. And thus... it is likely that I am accidentally dragging a tiny bit, as I click-around. During that accidental dragging... I have tilted the camera a tiny bit. But this "jump" is not a tiny bit. It is an immediate 2-3 degree tilt change. Just test using only camera drag-tilt. Hold down left mouse button, and drag up or down. Camera does an immediate 2-3 degree snap-tilt... not smooth at all. And it always "jumps" the same direction, no matter if I try up-drag or down-drag. Once that "snap" happens, it is impossible to put camera back to original starting position. The camera THINKS it is already directly above the ground. But, others may not see this. hmm. Still studying it. I think there's an issue with camera.inputs.attached... something weird in the BabylonJS core code... nothing that you or your scene did to cause it. hmm. Maybe my computer is going stupid. http://www.babylonjs-playground.com/#1JVKW2#8 There, I turned off box/sphere moving. Try a left-mouse-button-drag... up or down. Does it start with a violent "jerk" or "jump", for you or anyone? It does for me. It seems that camera has issues, but there has been recent work happening with our cameras. Still checking things. Quote Link to comment Share on other sites More sharing options...
adam Posted July 8, 2016 Share Posted July 8, 2016 @Wingnut It's due to the target and position of the camera (above looking down). I made some adjustments to the camera in this PG and it appears to fix the issue: http://www.babylonjs-playground.com/#1JVKW2#9 edit: At first I thought changing the camera.upVector = new BABYLON.Vector3(0, 0, 1) would easily fix this issue. I'm not sure why it doesn't. Quote Link to comment Share on other sites More sharing options...
Uniform Posted July 8, 2016 Author Share Posted July 8, 2016 @Wingnut Yeah I do experience this. Fixed it here with a better camera positioning. Don't know where it comes from. http://www.babylonjs-playground.com/#1JVKW2#12 Quote Link to comment Share on other sites More sharing options...
Wingnut Posted July 8, 2016 Share Posted July 8, 2016 thanks guys, yeah, with camera at 0, 5, 0.... straight overhead... umm... what? This is related to the thing where... a camera with gravity applied... won't start falling to the ground... until the camera is "bumped" or "nudged" with a cursor or mouse. I think there is a camera "epsilon" value that goes into effect... after we "nudge" this camera with the mouse. Ya know, a gimbal lock prevention epsilon value... that keeps the camera from being precisely polar. (What did he say?) It doesn't go active... until the camera is moved. That's why Uniform's latest demo (which starts at a higher value than the epsilon value)... shows no jump, but does not allow the camera to get completely polar (directly over 0, 0, 0 origin) (even when 0, 5, 0 is used in line 8 for cam position). Someone (I believe it was @Temechon) built a demo/PG where the camera was able to travel smoothly past the polar point and not do an inversion as it did. I think its laying around here somewhere, but it MAY have been an arcRotate cam. All in all, I went searching for that epsilon value... with no success. It might be in the camera's rotation matrices... as I saw some values in those, but I am not versed in matrix reading. But I see values in various camera matrix members (at demo RUN-time), and one would think we would see ALL zeros in those matrices. (Wingnut - feeling-around in the dark, in dangerous alleyways) heh. *scratch scratch* So, this would not be a bug. It would be an unfortunate and possibly-unavoidable side-effect of overhead-view free-cameras... and frankly, it sucks. Cam transitions from directly-overhead (view along y axis), to orthogonal (view along x or z axes)... is very common in 3D worlds and needs to happen smooth and nice... and go to 100% overhead (ignore any epsilon values preventing such). So, I dunno. Am I over-whiny about this? It probably belongs in a new topic, so Uniform can get-on with his project. Poor Uniform is being dragged-into things that he didn't sign-up-for. For those who don't understand epsilon values, they are tiny little values that keep things from moving to 0 or 100%... and thus avoids divide-by-zero errors. Think of them as thin pads on the walls and floors of children's play areas... to keep them from 100% smacking into walls or hitting that painful 0% altitude of the concrete floor. (okay, okay, maybe not a perfect description, but not bad for kiddy-level Wingnut, eh?) Quote Link to comment Share on other sites More sharing options...
adam Posted July 8, 2016 Share Posted July 8, 2016 I still think that changing the upVector to (0, 0, 1) should have fixed the problem. Quote Link to comment Share on other sites More sharing options...
Uniform Posted July 10, 2016 Author Share Posted July 10, 2016 Little update. @Wingnut I literraly used your algo http://www.babylonjs-playground.com/#Z3UOX#10 Implemented it in my stuff. Just changed the click detection from DOM event listener to proper babylon scene.onPointerDown function because it can be called 60 times per second. Before: http://golpher-camel-14043.bitballoon.com/ (click very quickly) After: http://chess-master-pass-63461.bitballoon.com/ I do have an issue now tho. When i click very quickly changing the clicked point a bit the mesh is flickering. I believe that I will have to divide the vector into nodes and dynamically update them if the new clicked point is bigger than the distance between the clicked point and the previous point or something like that. Would be nice to hear from you about that. Oh and for the moment I just stole your algo Wingnut, i will personalize it later but the link has very educational especially because I suck in linear algebra Quote Link to comment Share on other sites More sharing options...
Wingnut Posted July 10, 2016 Share Posted July 10, 2016 It's not mine, Uniform. I think @iiceman coded it. But ALL code in PG demos is free to use... unless explicitly stated not-so. Use whatever you need... no problems. It's good when something found in a playground demo... works for another project. We all LOVE when that happens. I don't see mesh flickering at http://chess-master-pass-63461.bitballoon.com/. I see quick box rotation (to face clicked-point), and I see occasional Firefox garbage collection "stuttering". I think it works pretty nice. I'm not sure what you are seeing, sorry. Feel free to explain further, as wanted. Quote Link to comment Share on other sites More sharing options...
eboo Posted July 10, 2016 Share Posted July 10, 2016 On 08/07/2016 at 3:30 PM, Uniform said: Very nice but it seems that the character does not go at the place I clicked. it was expected by script. with a "dist" variable to stop avatar running around the exact location. Quote Link to comment Share on other sites More sharing options...
Uniform Posted July 10, 2016 Author Share Posted July 10, 2016 @Wingnut Neat! Well I was trying to emulate league of legends movements. It works with nodes, subdivising the path to travel. And it uses epsilon values to see if it needs to calculate all the path again so there is almost no quick movement-rotation for each click like flickering. @eboo Got it Quote Link to comment Share on other sites More sharing options...
Uniform Posted July 15, 2016 Author Share Posted July 15, 2016 Hi Folks, @iiceman @Wingnut Thank you for your help I really appreciated. Here is the result. Pathfinding implemented (you can see stuff in console) http://importer-corinne-60430.bitballoon.com/ The code is rough and not optimized yet but It's there. gryff, adam, Wingnut and 3 others 6 Quote Link to comment Share on other sites More sharing options...
iiceman Posted July 16, 2016 Share Posted July 16, 2016 Very cool, good job Uniform! What kind of game are you making, if I my ask? Quote Link to comment Share on other sites More sharing options...
Uniform Posted July 16, 2016 Author Share Posted July 16, 2016 4 hours ago, iiceman said: Very cool, good job Uniform! What kind of game are you making, if I my ask? This is a dota based game. But I am not sure if my way to map the terrrain is the most effective one. Do you know any other way by any chance? I am using an abstract mesh to go over all the terrain every frame and depending if it is colliding with something build an abstract collision layer in the form of a matrix. Quote Link to comment Share on other sites More sharing options...
iiceman Posted July 18, 2016 Share Posted July 18, 2016 That sounds indeed like it would cost a lot of performance. I don't have a better approach right away. Why do you have to do it every frame? Does the terrain change? Quote Link to comment Share on other sites More sharing options...
Uniform Posted July 18, 2016 Author Share Posted July 18, 2016 8 hours ago, iiceman said: That sounds indeed like it would cost a lot of performance. I don't have a better approach right away. Why do you have to do it every frame? Does the terrain change? Nope but the objects moving on the terrain affect the terrain collision mapping. Oh and I don't calculate every frame, I calculate when you click. I am wondering if creating 2 Abstract mesh to map the terrain 2 times faster would really increase performace. By the way I have no performance issues so far. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.