GLSL renders to squared output

Open
#2 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Stale

Research direction

Start with the jsFiddle linked in the issue and inspect the provided vertex shader, especially how spriteSize is used when calculating position. Confirm the fix by rendering a rectangular 20x200 sprite without forcing its height to match its width.

Written by the indexing model from the issue text.

Description

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.

Dominant language
Wolfram Language
Stars
982
Forks
292
Avg merge
1d 6h
Merged PRs (30d)
1

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from WebGLSamples/WebGLSamples.github.io

All issues in WebGLSamples/WebGLSamples.github.io

Similar issues

More Computer Graphics issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.