Search the Community

Showing results for tags 'matrix'.

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

  1. It looks like mesh.lookAt() doesn 't work correctly if either the mesh and/or it's target are parented; is this intended or not? comment line 27 out for correct behavior.
  2. Hello. I want to make Sprite size (width, height) transform independent (constant sprite size). What I mean is whenever I change transformation matrix it should apply for coords, but not the size of the sprite. I've been looking into sources and found 2 ways to do that, but I don't like neither of them. 1) Different containers: Right now I change main container's (stage) matrix and it applies for all children in it, which is great, but not in my case. I can split objects that I want to be scale size independent into another container and only sync translation, which is a bit odd to me, because I still want the transform for this container (for coords). 2) Not sure if it will work: whenever I change main container's matrix, for every object that I want to make scale independent, change worldTransform (a, d) to 1. But I think it will break the coords. Is there a good way to achieve this?
  3. Hi everyoneIs there a tool to generate a live preview of the Matrix PIXI.I'm talking about being able to preview live the transformation of a sprite, and get the code.I find it very long and hard to do a lot of rending testing each faith to search the good behavior.It would be really great if someone could make a small live generation tool. (HTML) i made a sample on PS To help understand my need. I hope this overview helps to understand. Ideally, it be something similar to this awesome tools by Karl Matt (bigtimebuddy) I would be very happy if a similar tool would exist. thank
  4. 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
  5. Camera rotation

    I want to make my camera follow an object, but I also need the ability to look around, the only thing I need at the moment is the camera rotation quaterion or matrix. Is it possible to calculate it somehow? If I had Z vector of camera I could just move camera back by Z vector times n from player and it would work well. If there is a topic about it leave a link below.
  6. Is there any way to get references to the bones a mesh is influenced by? I see there is : I need to get the names of bones.
  7. When trying to achieve a task involving matrices I found I did not get the expected results on my mesh. Exploring further and checking out values using using the console I found I was getting integers not floating point values when displaying individual elements of a matrix. This is the same in Firefox and Chrome. If it is not some sort of console error then the use of individual elements for calculations within BJS could not be right (but BJS works?). Here is a PG example that shows what I mean After the matrix is computed the first four elements of the matrix are displayed, but always show as 1, 0, 0, 0 The matrix is displaced and the values in this matrix are floats as you would expect. However cloning the matrix (and matrix.clone() accesses individual matrix elements) and displaying the clone results in displaying the clone as the identity matrix. I have tries BJS2.3 and BJS2.4 and the results are the same. Everything I have read on Float32Array seems to suggest that accessing individual elements of such a matrix using array notation, eg [ ] should work An image of such a set of results is shown below. What is happening?
  8. Hello everyone, In the example above, on the left should be exactly what's on the right. But, the mesh should stay in place, I don't want to change its position to compensate for the new pivot point. ajustPosition bellow should be 0. var offsetUnit=2; var ajustPosition=offsetUnit; var box1 = BABYLON.Mesh.CreateBox("box1", 2, scene); box1.position.z = -2+ajustPosition; box1.setPivotMatrix(BABYLON.Matrix.Translation(0, 0, -offsetUnit)); How to set the pivot point and keeping the mesh in place without changing its position?
  9. I really need help understanding the GLSL versions of the provided BABYLON uniforms. I have seen them called so many different names depending on who's docs your reading. The ONLY ONE I know for sure is in babylon.js when you say 'worldViewProjection' that is the GLSL computation of 'gl_ProjectionMatrix * gl_ModelViewMatrix' or you can use the built-in shortcut 'gl_ModelViewProjectionMatrix' I need someone who know BABYLON JS GLSL Stuff to PLEASE PLEASE PLEASE... Tell me what the others equal in GLSL terms: view = gl_??? projection = gl_??? (maybe its: gl_ProjectionMatrix ) viewProjection = gl_??? * gl_??? world = gl_??? worldView = gl_??? worldViewProjection = 'gl_ProjectionMatrix * gl_ModelViewMatrix' or can be simplified as just 'gl_ModelViewProjectionMatrix' I am sorry i don't know the GLSL stuff, but if i can someone who does to simple fill out the five 'gl_???' place holders above... Ill be your friend for life Note: I and trying yo create a block of code that will run in both unity using GLSL stuff and BABYLON JS using native uniforms. By Babylon Macros: //BABYLON-VERTEX-MACROS-START attribute vec3 position; vec4 GL_POSITION_ATTRIBUTE() { return vec4(position, 1.0); } attribute vec3 normal; vec3 GL_NORMAL_ATTRIBUTE() { return normal; } attribute vec2 uv; vec2 GL_UV_ATTRIBUTE() { return uv; } attribute vec2 uv2; vec2 GL_UV2_ATTRIBUTE() { return uv2; } attribute vec2 uv3; vec2 GL_UV3_ATTRIBUTE() { return uv3; } attribute vec2 uv4; vec2 GL_UV4_ATTRIBUTE() { return uv4; } attribute vec2 uv5; vec2 GL_UV5_ATTRIBUTE() { return uv5; } attribute vec2 uv6; vec2 GL_UV6_ATTRIBUTE() { return uv6; } attribute vec4 color; vec4 GL_COLOR_ATTRIBUTE() { return color; } uniform mat4 view; mat4 GL_VIEW_UNIFORM() { return view; } uniform mat4 projection; mat4 GL_PROJECTION_UNIFORM() { return projection; } uniform mat4 viewProjection; mat4 GL_VIEWPROJECTION_UNIFORM() { return viewProjection; } uniform mat4 world; mat4 GL_WORLD_UNIFORM() { return world; } uniform mat4 worldView; mat4 GL_WORLDVIEW_UNIFORM() { return worldView; } uniform mat4 worldViewProjection; mat4 GL_WORLDVIEWPROJECTION_UNIFORM() { return worldViewProjection; } //BABYLON-VERTEX-MACROS-END My GLSL Equivalent Macros (as you can see I still need the gl_??? parts): //BABYLON-VERTEX-MACROS-START vec4 GL_POSITION_ATTRIBUTE() { return gl_Vertex; } vec3 GL_NORMAL_ATTRIBUTE() { return gl_Normal; } vec2 GL_UV_ATTRIBUTE() { return vec2(gl_MultiTexCoord0.xy); } vec2 GL_UV2_ATTRIBUTE() { return vec2(gl_MultiTexCoord1.xy); } vec2 GL_UV3_ATTRIBUTE() { return vec2(gl_MultiTexCoord2.xy); } vec2 GL_UV4_ATTRIBUTE() { return vec2(gl_MultiTexCoord3.xy); } vec2 GL_UV5_ATTRIBUTE() { return vec2(gl_MultiTexCoord4.xy); } vec2 GL_UV6_ATTRIBUTE() { return vec2(gl_MultiTexCoord5.xy); } vec4 GL_COLOR_ATTRIBUTE() { return gl_Color; } mat4 GL_VIEW_UNIFORM() { return gl_???; } mat4 GL_PROJECTION_UNIFORM() { return gl_??? ; } mat4 GL_VIEWPROJECTION_UNIFORM() { return gl_???; } mat4 GL_WORLD_UNIFORM() { return gl_???; } mat4 GL_WORLDVIEW_UNIFORM() { return gl_???; } mat4 GL_WORLDVIEWPROJECTION_UNIFORM() { return gl_ModelViewProjectionMatrix; } //BABYLON-VERTEX-MACROS-END I know some GLSL guy look at that GLSL BLOCK and see those gl_??? and know exactly with those be... no problem for him. If you are that guy, please help me
  10. Hi guys, I was trying to load obj meshes to the scene and for reusing them, I tried the method "createInstance". However, I can't set the matrix of each instance by assigning each mesh a "_worldMatrx". I am confused with the issue. Is there any methods for setting the mesh matrix? Sorry for the rookie question, any suggestion will be helpful. Thank you in advance.
  11. Hello everyone!I plan to use the Kinect v2 (that for xboxOne) to move an avatar in my scene.My idea was to gain the quaternions of jointOrientations and then change the appropriate bone matrix. Nevertheless, the jointOrientations are expressed in global rotations (each jointOrientation indicates the direction of the joint in absolute coordinates) while, if I understand it, I can only modify the local matrix of skeleton bone. So I am trying to convert local jointOrientation in local rotation:var joint; //the joint of kinectvar parent = joint.Parent();var localOrientation = BABYLON.Quaternion.Inverse(parent.Orientation).Multiply(joint.Orientation);But I'm having trouble in the transformation of the reference coordinate between kinect joints and avatar bones int the babylon scene... I tried to change the axes by swapping values (x, y, z), but I'm probably wrong var kinectOrientation; //orientation of the joint expressed in quaternionreturn new BABYLON.Quaternion(kinectOrientation.y, kinectOrientation.x, kinectOrientation.z, kinectOrientation.w); //this is just one example, I have tried in different casesDo you have any advice? Thanks in advance
  12. Help with Matrix algorithm

    I need some help to optimize algorithm. I have a matrix of sprites and I am highlighting a part of it. It can be rectangle or square it doesn't matter. I need to hide all sprites of this matrix that do not belong to the given area. I have this function which is highly non-optimized i.e 4 nested "for" cycles: hideMatrixArea: function(slotTwoDimArray, row, col, numRows, numCols) { var i = 0, j = 0, k = 0, t = 0, matrixWidth = slotTwoDimArray.length, matrixHeigth = slotTwoDimArray[0].length; for (i = 0; i < matrixWidth; i += 1, k += 1) { for (j = 0; j < matrixHeigth; j += 1, t += 1) { for (k = row; k < row + numRows; k += 1) { for (t = col; t < col + numCols; t += 1) { if (!(k === i && t === j)) { console.log("hello"); this.hideSlot(slotTwoDimArray, i, j); } } } } } return slotTwoDimArray; }, It prints "hello" 15600 times which is a lot. How can I hide slots that are not in the space (row, col) -> (row + numRows, col + numCols) i.e the inverse without using nested "for" loops? Any ideas?
  13. Is it possible to use Phaser's QuadTree without enabling the physics system? I don't really need Physics I just want to check if mouse is over a specific tile of a large matrix. I have a matrix of sprites and it can grow or shrink. Roughly it can have from 70 up to 1500 tiles. I can use nested "for" cycle to visit each sprite tile and check if mouse cursor is over it but this check happens mostly each update cycle which means 60 frames per second times 1500 checks, that is 90000 checks in the worst case every single second. Quad Tree uses adjacency tiles to find if mouse is over a specific one. It is more optimized.
  14. Hi, I know that the worldMatrix and projectionMatrix are computed from other properties (like position/rotation/rotationQuaternion/scaling for worldMatrix and fieldOfView/ZNear/ZFar for projectionMatrix). I would like to know if I can proceed the inverse way. I mean I want to set these 2 matrices and automatically update the other properties which depend on it. Thanks for your help,
  15. Problem with hue color shift

    I am working on a project within PIXI that requires me to shift the hue of a saturated rainbow gradient in a loop so it looks like its moving. I figured this would be cut and dry, since changing the hue of said image in Photoshop make it appear as if its moving. When starting out and getting the filter in place and animating, I was perplexed by the results. The colors looked nothing like I expected nor could have predicted. You can see a little demo of what I'm talking about and seeing on codepen here. I started digging to see what could be the problem, trying different image formats and color depths to no avail. I gave a shot at another canvas solution, GLFX, and can get the proper results I expected, as also seen on codepen here. My question to you guys is whats going on here? I am suspecting either an error in PIXI or my understanding of how hue rotation should work. I tried a few different PIXI revisions and didn't spot a difference. I dug a little further and came across an article explaining the difference between HSL and CSS hue rotations and its inaccuracies here. Though, that doesn't help me fix the issue with PIXI. Anyway to fix this on my end while staying within PIXI? Thank you.
  16. Matrix decompose() issue ?

    Not sure if this is a bug or just my misunderstanding. I am trying to make a mesh parent of another mesh without changing the transforms (position, rotation and scaling) of the child mesh in the world frame of reference Similar to this discussion Keep child's world position when parenting As shown in the above discussion I use the following kind of function to do this function makeParent(child, parent) { var invParentMatrix = Matrix.Invert(parent.getWorldMatrix()); var newMatrix = child.getWorldMatrix().multiply(invParentMatrix); newMatrix.decompose(child.scaling, child.rotationQuaternion, child.position); child.parent = parent; } This works fine as long as the scaling of the parent is the same in x, y and z direction. It breaks down if I change the parent scaling in any one of those direction. Here is a playground example Here we have two meshes - box1 and box2. I am trying to make box1 parent of box2. Clicking the canvas calls a parenting function (similar to the one above) to do so. To try First time, do a Run and then click the canvas. box1 will become parent of box2 and nothing will change on the screen - as expected. Second time uncomment line 19 - this changes the scale of box1 in the z direction. Again click run and then click the canvas. This time box2 is distorted. Sorry for the long post. I have spent hours on this and can't figure out what's wrong
  17. I've been studying Babylon and my teacher asked me to do this application, which I have to get the matrix values and display on canvas linking these points with a cylinder. But everytime I run the code, it says that there is a Compilation Error: matrix is undefined, even though it shows exactly what I need Running on an HTML page it says that the problem is at the 93 line matObjects.diffuseColor = new BABYLON.Color3(matrix[i][6], matrix[i][7], matrix[i][8]); What could be wrong? Playground:
  18. I'm sure this has been covered before and I've read some of the tutorials covering topics like this, but I'm still struggling. I have a mesh that is parented to my camera and I want to to be able to transform it from the parented position/rotation to the world's position/rotation. Doing position is easy since I can just get _absolutePosition, the rotation I am still stuck on. Could you please advise? Also, if you have any recommendations for references/resources on matrix operations and quaternions that would be greatly appreciated. I have advanced math education (including linear algebra), but it's been a while and I am out of practice. Thank you, amorgan
  19. Hi there, I've got an issue, and I guess "it's not a bug it's a feature", but when applying scaling to an object and setting an other object's parent as the aforementioned object, the scaling of both objects becomes the same, even if parenting is set up after applying scale on the parent. Here is a Playground to demonstrate the issue : Playground link Here you can see that the sphere's scaling should be (1, 1, 1), the default scaling, but instead it has the same scaling as its parent (2, 3, 5), even if the scaling has been set up before linking those objects. I guess that Babylon sets the scaling matrix of the parent to be the same as its childs (I'll investigate the source code to confirm that), but it shouldn't, every child should have their own scaling matrix, and change their scaling vector relatively according to their parent. That's how I would do it anyway... Thanks in advance for your answers
  20. I have a shader that I am trying to use at a specific sprite in my game, but filters seem not to be relative to the sprite, but rather world-pos 0, 0. I would like to render this filter at a different point, but also the "camera"/world may be zoomed in/out and rotated a bit. I am probably looking for a world-matrix of some sort, but can't find one, so I assume it doesn't have one. Here is my shader code for the filter: this.fragmentSrc = [ // Based on "#ifdef GL_ES", "precision mediump float;", "#endif", // Yuldashev Mahmud Effect took from shaderToy "uniform float time;", "uniform vec2 mouse;", "uniform vec2 resolution;", "uniform vec2 pos;", "uniform vec2 scale;", "uniform float rotation;", "uniform vec4 atmosphereColor;", "uniform float cloudsStart;", "uniform float atmosphereEnd;", "float snoise(vec3 uv, float res)", "{", "const vec3 s = vec3(1e0, 1e2, 1e3);", "uv *= res;", "vec3 uv0 = floor(mod(uv, res))*s;", "vec3 uv1 = floor(mod(uv+vec3(1.), res))*s;", "vec3 f = fract(uv); f = f*f*(3.0-2.0*f);", "vec4 v = vec4(uv0.x+uv0.y+uv0.z, uv1.x+uv0.y+uv0.z,", "uv0.x+uv1.y+uv0.z, uv1.x+uv1.y+uv0.z);", "vec4 r = fract(sin(v*1e-1)*1e3);", "float r0 = mix(mix(r.x, r.y, f.x), mix(r.z, r.w, f.x), f.y);", "r = fract(sin((v + uv1.z - uv0.z)*1e-1)*1e3);", "float r1 = mix(mix(r.x, r.y, f.x), mix(r.z, r.w, f.x), f.y);", "return mix(r0, r1, f.z)*2.-1.;", "}", "void main( void ) {", "vec2 UV = pos.xy / resolution.xy + gl_FragCoord.xy / resolution.xy * scale.xy;", "UV.x *= resolution.x / resolution.y;", "UV /= cloudsStart;", // ATMOSPHERE "float finalAtmosphere = 1.0 - (length(UV) / atmosphereEnd);", "finalAtmosphere = max(.0, finalAtmosphere);", "gl_FragColor = vec4(finalAtmosphere);", "}", ];Do we have an expert on this subject? If I could just access the world-matrix I think everything would work out. Otherwise, maybe I can do something we a rendertexture or alike and then translate it afterwards. I'm looking for a performance effective way that solves this problem. What I have now is something that seems to work as long as the player is in 0, 0 compared to the sprite with the filter, but when moving away it starts to rotate funny and offset as well.
  21. Scaling Matrix

    I read this blog post by OkijinGames: In the post, he explains how he handles scaling: Is there any way to do this in Phaser? The way I used to handle scaling was to apply a scaling factor to everything in the game, but OkijinGames' method seems much more convenient.
  22. Looking for filter matrices

    As the title says, I need the world and model matrix for my filter. What happens, as far as I can tell, is that no matter where I am in the game-world, the shader will always be at the center of the screen, it doesn't care about the game world. What I need is for it to be relative to the sprite it is actually being applied on. Is this built in, or do I need to set them using my own uniforms, and if so, can I get matrices from sprites? This is really annoying me as my filters doesn't work well when the game-world is being moved, scaled and rotated.
  23. Hello. I've been experimenting and enjoying Babylon.JS; thanks for all the hard work on the library. I've been trying to blend loaded model bone animations and run into issues. The simplest case would be idle->walk->run loops. This has been mentioned a while back (pre v2) here, here, and here. While you can call custom animations on each bone (ie, arms get one frame set, legs get another), this doesn't help with easing between animations that use the same bone. Another suggestion was storing the combined animations in the model, but that doesn't allow for smooth transitions (or permutes up very quickly) As a learning experiment, I dove into the code. Here's a demo of my results. The babylon.js it references is a hack experiment where I do the following: 1) allow multiple animations per target by not calling stopAnimation(target) on beginAnimation 2) on every call to a scene's animation, pass along a cache 3) on every animation._interpolate() where datatype == Animation.ANIMATIONTYPE_MATRIX, write the matrix to the cache 4) if the animation._interpolate() has a cache hit, invoke the otherwise unused matrixInterpolateFunction() with a factor value to interpolate between the 2 matrix The result plays the animations, mostly. The result is flipped, both in normals and on the z-axis, which I don't understand (my grasp of matrix math is not great). Most of the work revolved around getting data passed between the otherwise isolated animation instances so they could be aware of the other animation to blend. This hack also doesn't handle an arbitrary number of animations to merge or an easy way to work with them, since calls to stop use the target as the common factor. What is the best way to approach this? Is there something I missed in the library? Or how could I implement this correctly for Babylon.js? Thanks
  24. Matrix Invaders

    Hello people! I've now finished a game I recently started developing, called "Matrix Invaders". The game is some kind of action side-scrolling shooter, in which your mission is to destroy the mighty enemies. But wait.. Didn't you say MATRIX!? That's right, in this game all characters are colored matrixes. You are the green one, enemies are red. Simple! How about gameplay? Well let's see: Your goal, as I said before, is to destroy the enemies. You do that by blasting them with a bullet, launced with the space button. When enough enemies have been destroyed, you'll move on to the next level, in which the difficulty is increased. The game features a total of 5 level, but let me warn you, it's pretty hard! I got the idea when trying to create a matrix rain animation, but as my computer is not much of a gaming-pc, it could on take a few drops, and the animation suddenly reminded me of Space Invaders. So I thought: "Hey! I make games, why don't I make such a game!?" And so I did.. Further more the game supports full Xbox 360 controller support in Chrome, and soon in Firefox too. I hope you'll like my game Play it here!
  25. SetWorldMatrix

    Hello, I'd like to know if there is a method to calculate the position and the rotation from a transform matrix. In my case i calculate a transform matrix and i want to apply it to my mesh. I tried mesh.setPivotMatrix but i don't want to move the pivot, i want to move the mesh. So i have to move my mesh with mesh.position and mesh.rotation. It changes the worldmatrix of my mesh and i want this new worldmatrix equal to my transform matrix. That's why the function setWorldMatrix could be the theoretical solution of my issue. Thanks