Search the Community

Showing results for tags 'unproject'.

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 2 results

  1. Hi Again, Let me explain what I'm trying to do first: I want a panel of 3D objects which line up along the left-hand side of the canvas/viewport. I'm trying to create an object factory of sorts. The user will click and drag objects from the object factory into the scene proper, the code will clone the selected object when this occurs. I'm using two scenes for this, one is the main scene, with a ground and control-enabled camera receiving the clones and accumulating state; and another scene, for the factory, that is essentially static but has a camera and lights and meshes (the factory prototypes). As I've said, I want this factory to be arrayed down the left-hand side of the screen. If I choose just any position for the factory objects, they will go into and out of scope when the canvas aspect ratio changes. So I want to be able to calculate a ray which vertically cuts the camera's left-hand viewing-frustum plane, say somewhere in the middle, parallel to the near and far edges. I think this should be a vertical slice, abutting the left edge of the viewport. Here's how I tried to do it: First, I tried using getFrustumPlanes. But the planes it gave me were oddly skewed. When I generated geometric planes for each of the six, for instance, they did not form a convex solid. And even when I mentally tried to figure out which plane was which part of the frustum, I just couldn't make sense of the numbers. I would have expected 2 along each camera-centric axis (e.g. + & - along X, + & - along Y, + and - along Z--I setup a straight-on camera to help in understanding the numbers to no avail). Next, I tried a few of the unproject methods. I think these methods should have converted a 2D point on the screen to a 3D point (or ray) in the world. I read through many posts on this site to use what I thought were the best values for the camera's projection matrix, world matrix (identity), etc.... Never got anything even close to good numbers. Mostly they were NaN until I saw one post which accessed maxima from the engine. But when I positioned my mesh (using a sphere) at the returned 3D vector, it always seemed to go to the same, incorrect place (irrespective of my choice for 2D starting point). Next, I successfully wrote an iterative algorithm which used many of the same transformation matrices along with project. This way, I would choose a 3D point, test where it was in 2D, and knowing the fixed orientation of the camera, choose another 3D point which projected closer to the 2D point for which I was aiming, etc.... Sort of like a newton's method for iteratively approaching the correct value that unproject should give me in fixed time. OK, I can do it, but I want to do it correctly. So my last attempt, for which I have a playground, uses: createPickingRayInCameraSpace. I think this should give me a ray which looks like a point, but really rides the intersection of the left and top viewing-frustum planes (because I choose 0,0). However it does not. Playground demo: Please help. I don't care if I use any of these methods. Is there a better way? Should I be using the aspect ratio directly? Should I just do my own matrix math? Thanks, Ken
  2. I'm having a terrible time getting my tiles to align properly. I'm using the following routine to print them: var size = 54; var i = 0; for (var xx = 0; xx < size * this.mapData.MapWidth; xx += size) { for (var yy = 0; yy < size * this.mapData.MapHeight; yy += size) { var row = Math.floor(i / 10); var col = Math.floor(i % 10); var assetId = this.mapData.MapTiles[col][row].AssetId; var asset =; tile =, yy, 0, asset.Name, 0, this.tileGroup); tile.smoothed = false; tile.body.moves = false; tile.snap = 1; tile._project(); tile.anchor.set(0.5, 1); console.log("Placing (" + row + "," + col + ") at (" + xx + "," + yy + ") which is (" + tile.position.x + "," + tile.position.y + ")"); if (asset.Name == "water01") { this.waterTiles.push(tile); } i++; } }But I'm still getting these little slivers of space between some tiles and noticeable nicks in the map border, no matter what I adjust size to 96 x 48 is the diamond size, tiles have a 4px bottom on them making the images actually 96 x 52 I'm not really sure what the problem is. I'm not sure how to pick a good value for size... any help would be great. Thanks!