Search the Community

Showing results for tags 'camera'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • 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 230 results

  1. 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: Link to my scene: Thanks you very much.
  2. 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?
  3. 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 ???
  4. 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:, 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.
  5. Hi, How can I set initial target to freecamera?
  6. 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 attached. Thanks a lot
  7. 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();; 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
  8. 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 ???
  9. Hi, I noticed picking doesnt work correctly when using an orthographic camera. I could reproduce the problem modifying your samples on playground: 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
  10. 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.
  11. Hi I have viarbox vr 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
  12. 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?
  13. 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 and But I can't seem to use those functions. When I try to use them in create for the any state I get "Typeerror: is not a function(…)", and same for flash. I've also tried What am I doing wrong?
  14. 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);; } 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
  15. 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, 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?
  16. Hi there, I'm stuck and I can't seem to find a workaround for achieving this, basically what I wanna do is set the Camera as a parent for a small Platform which has a Box impostor of Mass 0, and make a crate which also has physics (Mass 1) land on it. But the problem is that the platform acts as if it has no physics at all, instead of landing on it, the crate goes through , here is the PG : Any help would be really appreciated. Thanks.
  17. 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:
  18. Hey there, Several places in my code change the position of the camera. There's character following, shaking, manual camera moving, etc. I've overlaid a grid that matches the tile size of my tilemap and I'd like to update the position of the grid when the camera moves so it moves with the camera. I have a large tilemap so I'd rather not put a massive grid over it if I can help it... so I'll just reposition one the size of the screen when appropriate. I only need to do this when the camera moves... is there a way I can know when this has happened?
  19. This is my first post here and to begin with, I'd like to give big congratulations to Babylon.js team ! Your framework is really impressive and the best yet for my use case (pedagogical web game about simple astronomy facts) Now, my problem: I can't find a way for positioning the camera correctly according to the computed scene graph before the render... so the sphere at the center is jittering, and it gets worse if we increase the speed parameter. The complete system looks like this: I want the camera to stay at earth position and to center on the moon. I've tried fiddling with scene.beforeCameraRender with no success... I guess I don't understand something about the internal priorities used before rendering each frame. c.f. the not working: I've searched the forum but couldn't find any solution. Maybe it's related to: or ? Thanks a lot for any help if anyone has a clue ! Thanks anyway to the babylon engine community !
  20. I'm trying to figure out how to get the same functionalities in my project as in this example. I've got a rectangle which is the player, the rectangle should always be fixed in a greater world. So the canvas would be 1815x660 and the world bounds would be 1815x1980 for example, you can only navigate vertically unlike the example. When I'm adding the same code as in the example, my rectangle just "drops" to the lower right when I've set the velocity to zero. If I don't set the velocity to zero my rectangle keeps on dropping to the lower right. So without the physics it looks like this (and I can use my key bindings to move the rectangle up and down, but that's not what I'm trying to achieve. I want the rectangle to be fixed and the world to move around) : With the physics applied and the velocity set to zero I'm getting this (here my key bindings are not working): This is what I've tried in code: export default class Play extends Phaser.State { create() { this.initCanvas();, 0, 1815, 660 * this.timesHeight); this.physics.startSystem(Phaser.Physics.P2JS); this.initPlayer(); this.physics.p2.enable(this.player); // this.physics.enable(this.player, Phaser.Physics.ARCADE); // this.player.body.collideWorldBounds = true;; = new Phaser.Rectangle(100, 100, 600, 400); this.keys = this.input.keyboard.createCursorKeys(); } initCanvas() { this.timesHeight = 1; this.canvasWidth = 1815; this.canvasHeight = 660; this.trunkWidth = this.canvasWidth / 5.5; this.trunkHeight = this.canvasHeight / 4; this.background =; this.background.beginFill(0x3006AB); this.background.drawRect(0, 0, window.screen.width, window.screen.height); } initPlayer() { this.player =; this.player.beginFill(0xffffff); this.xPosPlayer = 4 * this.trunkWidth; this.yPosPlayer = 1.5 * this.trunkHeight; this.player.drawRect(this.xPosPlayer, this.yPosPlayer, this.trunkWidth, this.trunkHeight); } update() { this.player.body.setZeroVelocity(); if (this.keys.up.isDown) { this.player.y -= 10; } if (this.keys.down.isDown) { this.player.y += 10; } } } I actually want to achieve the effect as in the example where the red square (the deadzone) is my white rectangle... Thanks in advance for anyone trying to help EDIT I was able to achieve the same effects as needed by using sprites instead of a rectangle.
  21. I'm having a lot of trouble with my tiled game, Everything loads fine, and the FPS is 60, but once the camera begins to follow the player the framerate takes a nosedive. I looked on some Phaser examples, and found that the example posted suffers from the same problem: Checking the code, I've loaded in my layers the same way. Nothing seems to be different. It just appears that Tilemaps + Game.Camera don't mix at the moment.
  22. I'm developing a game that makes generous use of camera.shake. Since I've added shaders (filters), I've noticed that camera.shake only affects some layers of the graphics, resulting in artifacts like in the attached picture. A filter is applied on the lava. Notice the misalignment of the ground tiles with the other layers -- the ground tiles got moved by the shake, but everything else unexpectedly stayed in place. When disabling the filter, camera.shake works as expected. Am I doing something wrong? Is this a bug? Panning the camera manually through the x/y coordinates does not exhibit this artifact.
  23. Hey Delta... Did you get a chance to put the missing light.onDispose and camera.onDispose just like the mesh.onDispose has???
  24. In my game I have the camera following the main player. But im trying to display the health in the top left corner of the screen with images. The problem is when my player moves so that the camera has to follow, the hearts gets left behind. How can i fix that? Any help would be amazing thank you!
  25. Hello. This is my first post on this forum, i read the rules and i hope i'm not breaking them because i don't have a demo. I need a way to display a 2d galaxy map (it will be in 3d, but it will be a top view) for my game, i will use Babylon.js, however i need some help on some points. My map have 3 modes which depends on the zoom on the map; mode 1 where you see the planets (which are meshes); mode 2 where you see the solar systems (planets are hidden), mode 3 where you see the galaxies (solar systems are hidden). Here is a representation of mode 1 with the zoom bar on the right : The red bar is the current zoom level. My questions are : - How to make a top view camera with rotation blocked but keep the wheel for zooming in and out ? - How to make that i can move the camera on x,y with my mouse ? (Since the rotation will be disabled the mouse is free) I will use camera.radius to get the current zoom level and dynamicly update the planets / solar systems / galaxies display with AJAX as a function of x,y coordinates. Thank you so much.