Search the Community

Hi everyone, I'm trying to port an avatar editor made with AS3. The original app makes use of the gskinner Color Matrix class for adjusting brightness, contrast, saturation and hue of each part and stores those values in a DB. So imo I have two options here: 1. Port the class to js and try to use the stored values as they are. 2. Find an algorithm to transform those values to use them with PixiJS Color Matrix Filter directly. As I'm not very good at maths I've tried the 1st option so I ported the class to JS and tried to use it as the matrix for the color matrix filter. Saturation and hue seem ok but I cannot make brightness and contrast adjustments to look similar in as3 and pixi. I've been digging a bit and I've found that in the gskinner class, brightness and contrast are tweaked through the offset column while the color matrix filter in Pixi aren't. I've noticed as well the use of 'colorMatrix.frag' which is a WebGL shader impl but I don't know anything about them so I'm stuck. Do I need to implement a new custom matrix color filter or even a custom colorMatrix.frag (although I don't know anything about shaders as I said)? Any clues on option 2? Is there any other option I haven't take into account may be? Any help or directions would be very much appreciated. Thanks so much! You can see the ported matrix color code here (and I've attached the as3 code just in case): https://www.pixiplayground.com/#/edit/DIPYaphRukZ6rBqIRupVv as3-color-matrix-example.zip

Simple: I need the Rotation Matrix from the default Arcrotate Camera. I read somewhere in the forum, i need to decompose the Camera Matrix, i can' t find it anymore. Subquestion: It is possible to grab the data via mouseevents ? Thanks' Playground: https://www.babylonjs-playground.com/#SQP9E0

hi i get confused by the function Matrix decompose() api in this tutorial https://doc.babylonjs.com/resources/frame_of_reference i know mesh has its world matrix and its local frame of reference after apply some transform ( position, rotate and scale) whenever we want to get the mesh`s world matrix we can call mesh.getWorldMatrix(true); right? and i see lots of people use decompose() function after i checking its usage i thought the decompose() is for decompose a matrix like the mesh world matrix to get how the mesh be transformed that is to say how a identuty matrix [ BABYLON.Matrix.Identity()] be position, rotated and scaled by using decompose(scale?: Vector3, rotation?: Quaternion, translation?: Vector3) we can get those three components am i right ? till i see some people use it in this way m.decompose(BABYLON.Vector3.Zero(), BABYLON.Quaternion.Identity(), position) that make me confused how can i set the components the scale set to BABYLON.Vector3.Zero() the rotation set to BABYLON.Quaternion.Identity() can some one tell me why? and how the matrix decompose() exactly the correct usage regards

hi, I'm new to Phaser and recently translating a Cocos2dx extension to Phaser(2.8.7) with Typescript. This extension is written in C++ and basically is a skeleton animation run-time, it uses an additional matrix (3x3) to transform the cells (CCSprite object, similar to the Phaser.Sprite) of the skeleton. In Cocos2dx, the additional transformation is done by the following code, the CCSprite object stores this matrix as m_sAdditionalTransform, and re-calculate its local transformation matrix m_sTransform. (simplified from CCNode::nodeToParentTransform) // Translate values // m_obPosition = Phaser.Sprite.position float x = m_obPosition.x; float y = m_obPosition.y; // Rotation values // Change rotation code to handle X and Y // If we skew with the exact same value for both x and y then we're simply just rotating float cx = 1, sx = 0, cy = 1, sy = 0; // m_fRotationX = m_fRotationY = Phaser.Sprite.angle if (m_fRotationX || m_fRotationY) { float radiansX = -CC_DEGREES_TO_RADIANS(m_fRotationX); float radiansY = -CC_DEGREES_TO_RADIANS(m_fRotationY); cx = cosf(radiansX); sx = sinf(radiansX); cy = cosf(radiansY); sy = sinf(radiansY); } bool needsSkewMatrix = ( m_fSkewX || m_fSkewY ); // optimization: // inline anchor point calculation if skew is not needed // Adjusted transform calculation for rotational skew // m_obAnchorPointInPoints is similar to the PIXI.DisplayObject.pivot? x += cy * -m_obAnchorPointInPoints.x * m_fScaleX + -sx * -m_obAnchorPointInPoints.y * m_fScaleY; y += sy * -m_obAnchorPointInPoints.x * m_fScaleX + cx * -m_obAnchorPointInPoints.y * m_fScaleY; // Build Transform Matrix // Adjusted transform calculation for rotational skew m_sTransform = CCAffineTransformMake( cy * m_fScaleX, sy * m_fScaleX, -sx * m_fScaleY, cx * m_fScaleY, x, y ); // simple matrix multiplication, m_sTransform x m_sAdditionalTransform m_sTransform = CCAffineTransformConcat(m_sTransform, m_sAdditionalTransform); After doing some research and writing some test code, I know the only way to implement similar transformation is through the Sprite.transformCallback and modify the wt (Phaser.Matrix) parameter. By comparing with the source code within PIXI.DisplayObject.updateTransform, I found their code are very similar, but give different matrix: For example, if the parents of the sprite don't have any transformation, and m_sTransform represents a matrix (a, b, c, d, x, y) in Cocos2dx, in Phaser, the world transform matrix will be (a, -b, -c, d, wtx, wty), here (x, y) is the local position of the sprite and translated by the 'pivot' (anchorPointInPoints), (wtx, wty) is the world position of the sprite. I know the coordinate systems are different between these two engines(bottom-left vs top-left), and the pivot point also works in different way (in Cocos2dx the anchor point is the same as the pivot), I'm wondering is it possible to retrieve a local transform(node-to-parent)matrix of a sprite in Phaser/Pixi, so i can add the additional transform matrix to it and regenerate a correct world transform matrix. My english is not good so if you need more information or code sample just leave your comments

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

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

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? https://www.babylonjs-playground.com/#FZEH1H comment line 27 out for correct behavior.

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?

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) https://pixijs.github.io/pixi-text-style/# I would be very happy if a similar tool would exist. thank

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: http://www.babylonjs-playground.com/#1CHH2O#1 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

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.

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.

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 http://www.babylonjs-playground.com/#1ST43U#13 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?

Hello everyone, http://babylonjs-playground.com/#RZGEH#0 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?

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

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.

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?

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.

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,

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.

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 http://www.babylonjs-playground.com/#28IXSE#4 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

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:http://www.babylonjs-playground.com/#KNMZ0#15

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

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

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 http://glslsandbox.com/e#25456.0 "#ifdef GL_ES", "precision mediump float;", "#endif", // Yuldashev Mahmud Effect took from shaderToy [email protected] "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.