Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

GLSL renders to squared output

Offen
#2 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
35/100
Issue-Typ
Bug
Klarheit
Muss geklärt werden
Aktivitätsstatus
Veraltet

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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.

Vorherrschende Sprache
Wolfram Language
Sterne
982
Forks
292
Ø Merge
1 T. 6 Std.
Gemergte PRs (30 T.)
1

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus WebGLSamples/WebGLSamples.github.io

Alle Issues in WebGLSamples/WebGLSamples.github.io

Ähnliche Issues

Weitere Issues zu Computer Graphics

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.