Search the Community

Showing results for tags 'camera'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 236 results

  1. Hello everyone, I am pretty new to the Pixi.js so I'm seeking advice from community on what is the best approach to have easy and efficient camera. Basically what I want is to have two main containers in the scene: The first one to represent the game world. Since world can be quite big, the camera is required here to show only small portion of the world. The second container to display all GUI elements, such as player healthbar, menus, scores etc. Since this container will always be the size of the viewport, no camera is required here. I looked at how camera is implemented in Phaser.io (which uses Pixi.js as a graphical engine) and it seems that all they do is just move "root" container in the direction opposite to camera movement (and scale it to represent camera zoom in/out). While this approach works, it has two issues: It seems quite inefficient to move root container, since this will cause recalculation of transfom of all the objects in the scene tree. I would also like to be able to "flip" the Y-axis of default Pixi's coordinate system (i.e. I want Y-axis to be pointing up like in conventional Cartesian coordinate system, not down). Unfortunately, I don't see an easy way to achieve this with this camera approach. I think the better way would be to modify projection matrix before rendering "world" container, i.e.: set projection matrix according to current camera position / zoom render world container set projection matrix for rendering GUI container render GUI Does this look like a sensible approach? How can I achieve something like this with Pixi? Thanks for advice!
  2. I am having an issue where the movement of the camera will make certain meshes disappear. The disappearing meshes are consistent, in that they are the same ones that disappear. This issue seems to happen only with the binary version. I made a playground where you can see this happening. http://www.babylonjs-playground.com/#1PFI6D All you need to do to see the behavior is walk forward with the up arrow. As you move forward you will see the frame in the warehouse disappear. Has anyone come across this issue before?
  3. Hi, I implemented a two finger zoom using the game.camera.scale propierty to zoom the game. I also implemented a drag functionality using game.camera.x and game.camera.y propierties. But now I need to add static floating sprites, such that they are always in the same position on the screen regardless the zoom or the drag movement. But when I add them as sprites (game.add.sprite) they are affected by the camera propierties (x,y,scale). I read this and set fixedToCamera to true, it works partially, the (x,y) is static, but the when I zoom in (increase game.camera.scale) the size of the floating sprites also increases. Is there any way I could add sprites that are not dependent on the camera? Thanks!
  4. Hey guys, I'm playing around with Babylon a little bit and the posibilities are amazing! Maybe a little to much at the beginning. This question maybe sounds silly for you but I still hope you can and will help me. I tried to stop the camera zoom by mouseWheel but I want to keep the rotation but nothing I'm doing is working. When I do this: this.camera.attachControl(this.canvas, false, true) I can zoom with the wheel and rotate with the keyboard and the wheel. If I don't have this line I can't zoom but of course don't rotate either. Is there a line I have to add or a parameter I need to set to false? I'm thankful for every suggestion. Google wasn't much of a help. Thanks. Jay
  5. Hi all, I am using Universal Camera and I would like to improve differents features of it. This is the definition of my camera: var camera = new BABYLON.UniversalCamera("universalCamera", new BABYLON.Vector3(600, 200, -500), scene); camera.setTarget(new BABYLON.Vector3(0,0,0)); camera.speed = 1.5; camera.checkCollisions = true; camera.ellipsoid = new BABYLON.Vector3(1, 1, 1); camera.attachControl(canvas); The first question is about collisions. When I move arround the scene and I go to some building of, all the collisions are calculated and my camera is very slow. Are there any way to optimice this operation? When I am near of the different elements of my scene the movement of camera is very bad. The second question is relative to control of camera. I want change the arrow keys to "a","s","d" and "w". Do you know if is it possible? Thanks
  6. Hi all, I am using new UniversalCamera to allow access of application web from pc or mobile devices. However It doesnt work so good. I have been testing example of @davrous and It is perfect!. Maybe I need to reprograme some tips of this camera. Now I can only turn camera in my tablet but i cant move. The version of BabylonJS that I am using is v 2.6 alpha Params of my camera: var camera = new BABYLON.UniversalCamera("universalCamera", new BABYLON.Vector3(600, 200, -500), scene); camera.setTarget(new BABYLON.Vector3(0,0,0)); camera.speed = 5; camera.checkCollisions = true; camera.ellipsoid = new BABYLON.Vector3(2, 3, 2); camera.attachControl(canvas); Thanks you very much!!!
  7. Hi all, I want change between differents camera depends on the devices. I am developing an aplicaton web in BabylonJS and I must to define FPSCamera and TouchCamera. When this web is loaded at mobile device I have to activate the touch camera and if I visit it from pc I use FPSCamera. Do you know the way to manage it? Thanks!
  8. Hi there, I'm trying to zoom out the entire game world from the center.. unfortunately I see no method for the camera for zooming out so I'm scaling the game.world directly with this.game.world.scale.setTo(0.5, 0.5);Unfortunately, this scales around the top left of the screen. I've tried setting the anchor on the game.world as well as the pivot to the center of the world or the center of the stage to no avail. Is it possible to achieve what I'm trying to do? Thanks for any thoughts - Nick
  9. Hi, I've successfully created a mini map. Now I'm trying to give it a custom opacity value to make it a littler transparent. I did not find any way to do this. Any help would be appreciated. Here is a good starting point for your kind help: http://www.babylonjs-playground.com/#RE9QZ#3
  10. Hi, @jerome @Wingnut I have added a new element to my proyect. However I don't know how can I fix the plane on world when I resize window. If you test it in screen of (1920*1080) resolution, the scene is well. However if you change the window's size, the plane will disappear. I would like to set an unique position over right menu and avoid that plane could move to other place. Moreover, I want to remove specular or diffuse light in this plane so I set the property ( mon1.specularColor = new BABYLON.Color3(0, 0, 0)) but it doesnt work. To make this implementation, I have used the follow example:http://www.babylonjs-playground.com/#1WROZH#12 Link to my scene: http://217.217.131.1:8081/subsuelo/ Thanks you very much.
  11. in my scene I have created 3 cameras (free camera) in a blender SCENE and exported the scene, I want to get that camera in a different variable so I can use them to switch in between them. Is there anyway I can get those cameras from code like getMeshByName or getCameraby name. can anybody direct me the proper way?
  12. When using VR device orientation free camera ... My two eye cameras OVERLAP in the center... On all other mobile apps i am testing out there is CLEARLY a separation of the eye cameras ... A little BLACK space in between cameras... I thought set the VRCamersMetrics.lensSeperationDistance would allow me to change that... BUT it does not seems to do anything.... My VR cameras look like this: Any clues on how to move the camera apart so there is a little black space in between ???
  13. Is there any way to add a listener that triggers when a sprite is visible by the camera?. The object Sprite contains inCamera, but it seems to re compute the bounds of the sprite according to this: http://www.html5gamedevs.com/topic/8936-does-phaser-handle-object-visibility-according-to-camera/, and that can be expensive. In my case I need to do this for many sprites on the screen, so I want to know if there is a more efficient way to do it.
  14. Hi, How can I set initial target to freecamera?
  15. Hi all, I'm not able to start cameras importing an STL file. I'm able to view the file, but I'm not able to start a camera. I've experimented various camera settings and positions inside the code. Anyone can help me? You will find the code in files.zip attached. Thanks a lot files.zip
  16. http://babylonjs-playground.com/#A83GX#0 Hi All, I have been playing with babylonjs for a couple of days now and excited about it. It's one of the few friendly/easier frameworks that I have come across so far. I even managed to import a couple of models into BJS successfully. But I have a problem and need your help. : ) This is the playground link, right now an arcrotatecamera rotates around a mesh. It gives an illusion that the mesh itself is being rotated, but when I move the object away from (0,0,0) it starts to show that the camera is rotating and not the object. Instead of such a camera hack, I would like to rotate the mesh itself from wherever it is, I googled and found a couple of topics in the forum, but the solutions are not as smooth or eased as the camera solution. It will be great if someone can help me on this. Cheers and thanks for your help in advance.
  17. I'm wondering if there's a way to manually check for collisions. I'm making VR first person Pacman game for a project and I need the pacman to eat all the pellets in the direction the user is facing. I got the game working with gravity and collisions but the game was laggy and slow due to collisions with the ground and the pellet at the same time. This was my original function: camera.onCollide = function(collidedMesh) { if (arr[collidedMesh.uniqueId] !== undefined) { //console.log('gone'); arr[collidedMesh.uniqueId].dispose(); pellet.play(); score++; if (canvas2 === undefined) { canvas2 = create(scene, score); } else { canvas2.levelVisible = false; canvas2 = create(scene, score); } } }; Now I'm trying to move the camera as it renders but the collisions completely turn off, I'm wondering if there's a way to manually check/enforce for collisions? var moveCamera = function() { var camSpeed = 0.1; var forwards = new BABYLON.Vector3(parseFloat(Math.sin(camera.rotation.y)) * camSpeed, 0, parseFloat(Math.cos(camera.rotation.y)) * camSpeed); camera.position = camera.position.add(forwards); }; scene.registerBeforeRender(function() { moveCamera(); }); mazeRunner.jsx
  18. I'm trying, using my own shader, to make a billboard using a predefined XZ plane mesh. to do so, i first build the necessary vector (into my own material) to pass to the shader, var cam = scene.activeCamera; var look = cam.position.subtract(mesh.position).normalize(); var view = scene.getViewMatrix(); var up = new BABYLON.Vector3(view.m[1], view.m[5], view.m[9]); var right = BABYLON.Vector3.Cross(up, look); this._effect.setMatrix(__world_str, world); this._effect.setMatrix(__worldViewProjection_str, world.multiply(scene.getTransformMatrix())); this._effect.setVector3(__upVector_str, up); this._effect.setVector3(__rightVector_str, right); this._effect.setVector3(__center_str, mesh.position); then use the values into the shader as : vec3 newp = center + (upVector * position.x) + (rightVector * position.z); vec4 outPosition = worldViewProjection * vec4(newp, 1.); gl_Position = outPosition; where center is the center of the billboard. I use an ArcRotateCamera. However, this is NOT render properly. The plane is ALWAYS facing the camera, which is good, BUT it strectch vertically when spining arround.. What i have missed ???
  19. Hi, I noticed picking doesnt work correctly when using an orthographic camera. I could reproduce the problem modifying your samples on playground: http://www.babylonjs-playground.com/#XUDHE Result is always false: {hit: false, distance: 0, pickedPoint: null, pickedMesh: null, bu: 0…} Is this supposed to work, or do i need to use a different method for ortho projection? faljse
  20. Hey guys, first post, started using Babylon Friday, so I may be a little green. I'm done waiting for Unity3D's webgl porting to not be a steaming pile. Really liking everything so far, but I could use some advice on moving forward with an FPS camera. I extended it from the BABYLON.FreeCamera. Nailed down most of it, but realized that the built-in collision the camera uses has no real concept of friction. It's going to be a bit of a problem when I intended on having moving floor platforms. They just slide right out from under you as-is. I'd rather not start from scratch or fall back on TargetCamera because of all the input groundwork that FreeCamera provides. My best guess for moving forward is to dig in and start overriding the collision functions of FreeCamera like _collideWithWorld(), _updatePosition(), etc. and replace them with Oimo compatible logic. I just want to get the problem out there before I go down that rabbit hole. Is this a horrible idea? Or maybe I'm just missing something incredibly obvious about the built-in physics? Thanks in advance for any advice.
  21. Hi I have viarbox vr http://www.viarbox.com/b2c-viarbox-google-cardboard-shop Which camera sould I use "Web VR Free Camera" or "VR Device Orientation Free Camera" ? Is there any example(s) or tutorial(s) or playgound(s)? How can we have touch events on phone screen for navigation (moving roration) in scene? Can anybody help me to try this with babylonjs? Is there any blog or documentation how to do that. Especially how to move/rotate with touch events on mobile screen? Greetings Ian
  22. Hi guys! I make map with the dark forest and I need make center of the map with good light, but the closer to the forest, then map gets darker. I need something like the fog but without binding to the camera. Fog always in position 0, 0, 0 and if player go to coordinates 100, 100, 100 then his go to the dark. While I did just the fog attached to the camera and if the player closer to the forest, then fog far from the player and camera. And the forest does not seem so dark. Anybody haves some ideas how do it?
  23. Hey all! I have 4 game states - Splash, Tutorial, Play and GameOver. Splash and Tutorial load and render quickly, but when I go to Play, it takes a second, and it shows a black screen during that second. I want to have a more elegant state transition. So I started looking around and see lots of suggestions, which all focus on game.camera.fade and game.camera.flash. But I can't seem to use those functions. When I try to use them in create for the any state I get "Typeerror: game.camera.fade is not a function(…)", and same for flash. I've also tried this.camera.fade. What am I doing wrong?
  24. Hello, I don't know if this is something that could be merged into github but we had some projects (and therefore customers) that were highly loaded with objects, thus a bit slow in rendering. The camera inertia was then to long lasting to control the camera if you know what I mean. This is what I've changed to handle this: // Inertia var engineDelta = Math.min(this.getEngine().deltaTime,100), inertiaFactor = Math.min(1,16.66666 / engineDelta); if (this.inertialAlphaOffset !== 0 || this.inertialBetaOffset !== 0 || this.inertialRadiusOffset !== 0) { this.alpha += (this.beta <= 0 ? -this.inertialAlphaOffset : this.inertialAlphaOffset) / inertiaFactor; this.beta += this.inertialBetaOffset / inertiaFactor; this.radius -= this.inertialRadiusOffset / inertiaFactor; this.inertialAlphaOffset *= this.inertia * inertiaFactor; this.inertialBetaOffset *= this.inertia * inertiaFactor; this.inertialRadiusOffset *= this.inertia * inertiaFactor; if (Math.abs(this.inertialAlphaOffset) < BABYLON.Engine.Epsilon) this.inertialAlphaOffset = 0; if (Math.abs(this.inertialBetaOffset) < BABYLON.Engine.Epsilon) this.inertialBetaOffset = 0; if (Math.abs(this.inertialRadiusOffset) < BABYLON.Engine.Epsilon) this.inertialRadiusOffset = 0; } // Panning inertia if (this.inertialPanningX !== 0 || this.inertialPanningY !== 0) { if (!this._localDirection) { this._localDirection = BABYLON.Vector3.Zero(); this._transformedDirection = BABYLON.Vector3.Zero(); } this.inertialPanningX *= this.inertia * inertiaFactor; this.inertialPanningY *= this.inertia * inertiaFactor; if (Math.abs(this.inertialPanningX) < BABYLON.Engine.Epsilon) this.inertialPanningX = 0; if (Math.abs(this.inertialPanningY) < BABYLON.Engine.Epsilon) this.inertialPanningY = 0; this._localDirection.copyFromFloats(this.inertialPanningX / inertiaFactor, this.inertialPanningY / inertiaFactor, 0); this._viewMatrix.invertToRef(this._cameraTransformMatrix); BABYLON.Vector3.TransformNormalToRef(this._localDirection, this._cameraTransformMatrix, this._transformedDirection); this.target.addInPlace(this._transformedDirection); } It rotates by the given inertia amount depending on the time that proceeded during the renderings. The var engineDelta = Math.min(this.getEngine().deltaTime,100) is to avoid big camera jumps on frames that last longer than 100ms. In our project the render loop doesn't run continuesly. If someone likes to test this and/or push it into babylon I would be glad to have contributed a small thing :-) If not it's also completely okay as it's only needed in our project(s)! ;-) Best regards Kevin
  25. Hi everyone, I am currently working on a 3D scene that using VRDeviceOrientationFreeCamera and DeviceOrientationCamera, I experienced serious delay on both cameras. Based on what I have seen so far, it takes at least half a second for the camera to start rotate after I rotate my device. I try on other demo scenes with vr features enabled on babylonjs.com, there are also significant delay on the camera. Is this issue solvable by tweaking around the camera input or is it something we need to bear with if using the babylon default vr camera?