GLSL renders to squared output
还没有人认领这个 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
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
贡献指南
这个仓库没有索引到贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
WebGLSamples/WebGLSamples.github.io 的其他 Issue
-
难度 4/5 3-5 天 新手友好度 35/100
WebGLSamples/WebGLSamples.github.io#24 · 2 条评论 ·
-
难度 1/5 1 小时以内 新手友好度 35/100
WebGLSamples/WebGLSamples.github.io#17 · 1 条评论 ·
-
难度 3/5 1-2 天 新手友好度 25/100
WebGLSamples/WebGLSamples.github.io#15 · 1 条评论 ·
-
难度 5/5 一周以上 新手友好度 20/100
WebGLSamples/WebGLSamples.github.io#8 · 5 条评论 ·
查看 WebGLSamples/WebGLSamples.github.io 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 72/100
libsdl-org/SDL#16360 ·
-
Area:Math p5.js 2.0+
难度 2/5 1-3 小时 新手友好度 88/100
processing/p5.js#9197 · 3 条评论 · 已指派 1 人 ·
-
priority:low refactoring
难度 2/5 1-3 小时 新手友好度 84/100
CyberAgent/psd2svg#382 ·
-
Template: Bug
难度 2/5 1-3 小时 新手友好度 80/100
-
难度 2/5 1-3 小时 新手友好度 88/100