Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GLSL renders to squared output #2

Open
catalinberta opened this issue Jun 10, 2015 · 0 comments
Open

GLSL renders to squared output #2

catalinberta opened this issue Jun 10, 2015 · 0 comments

Comments

@catalinberta
Copy link

After using square-sized sprites and everything worked great, the moment I have tried a rectangular sprite with the size of 20x200, I have realized that it forces the output to 20x20, it only considers the width of the sprite and forces the height to be the same as the width

jsFiddle here

If you will inspect the canvas, you will see that it has the proper sizes: 20x200

I have used your shaders to render:

Vertex Shader:

        uniform float u_frameOffset;
        uniform vec4 u_screenDims;
        attribute vec2 centerPosition;
        attribute float rotation;
        attribute float perSpriteFrameOffset;
        attribute float spriteSize;
        attribute vec2 cornerOffset;
        attribute vec2 spriteTextureSize;
        attribute float spritesPerRow;
        attribute float numFrames;
        attribute vec4 textureWeights;
        varying vec2 v_texCoord;
        varying vec4 v_textureWeights;

        void main() {
          float frameNumber = mod(u_frameOffset + perSpriteFrameOffset, numFrames);
          float row = floor(frameNumber / spritesPerRow);  // Compute the upper left texture coordinate of the sprite
          vec2 upperLeftTC = vec2(spriteTextureSize.x * (frameNumber - (row * spritesPerRow)),
                                  spriteTextureSize.y * row);
          vec2 tc = upperLeftTC + spriteTextureSize * (cornerOffset + vec2(0.5, 0.5));
          v_texCoord = tc;
          v_textureWeights = textureWeights;
          float s = sin(rotation);
          float c = cos(rotation);
          mat2 rotMat = mat2(c, -s, s, c);
          // vec2 scaledOffset = spriteSize * cornerOffset;
          vec2 scaledOffset = spriteSize * cornerOffset;
          vec2 pos = centerPosition + rotMat * scaledOffset;
          gl_Position = vec4(pos * u_screenDims.xy + u_screenDims.zw, 1.0, 1.0);
        }

Fragment Shader:

        precision mediump float;
        uniform sampler2D u_texture0;
        uniform sampler2D u_texture1;
        uniform sampler2D u_texture2;
        uniform sampler2D u_texture3;
        varying vec2 v_texCoord;
        varying vec4 v_textureWeights;
        void main() {
          vec4 color;
          if (v_textureWeights.x > 0.0)
            color = texture2D(u_texture0, v_texCoord);
          else if (v_textureWeights.y > 0.0)
            color = texture2D(u_texture1, v_texCoord);
          else if (v_textureWeights.z > 0.0)
            color = texture2D(u_texture2, v_texCoord);
          else // v_textureWeights.w > 0.0
            color = texture2D(u_texture3, v_texCoord);
          gl_FragColor = color;
        }

My GLSL knowledge isn't very strong yet and I'd appreciate any help to make it render with the original width & height.
Right now I see that the Vertex Shader accepts only spriteSize (which is only the width of the sprite) as a parameter when calculating position & sizes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant