GLSL renders to squared output

未关闭
#2 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
35/100
Issue 类型
缺陷
描述清晰度
需要澄清
活跃度
停滞

调研方向

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.

由索引模型根据 Issue 内容生成。

描述

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.

主要语言
Wolfram Language
星标
982
派生
292
平均合并
1 天 6 小时
30 天内合并 PR
1

贡献指南

这个仓库没有索引到贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

WebGLSamples/WebGLSamples.github.io 的其他 Issue

查看 WebGLSamples/WebGLSamples.github.io 的全部 Issue

相似的 Issue

更多 Computer Graphics Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。