GLSL renders to squared output
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Idoneità per principianti
- 35/100
- Tipo di issue
- Bug
- Chiarezza
- Da chiarire
- Stato di attività
- Ferma
- Ambito
- computer-graphics
Direzione di ricerca
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.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
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.
- Lingua principale
- Wolfram Language
- Stelle
- 982
- Fork
- 292
- Merge medio
- 1g 6h
- PR unite (30g)
- 1
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di WebGLSamples/WebGLSamples.github.io
-
Difficoltà 4/5 3-5 giorni Idoneità per principianti 35/100
WebGLSamples/WebGLSamples.github.io#24 · 2 commenti ·
-
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 35/100
WebGLSamples/WebGLSamples.github.io#17 · 1 commento ·
-
Difficoltà 3/5 1-2 giorni Idoneità per principianti 25/100
WebGLSamples/WebGLSamples.github.io#15 · 1 commento ·
-
Difficoltà 5/5 Più di una settimana Idoneità per principianti 20/100
WebGLSamples/WebGLSamples.github.io#8 · 5 commenti ·
Tutte le issue di WebGLSamples/WebGLSamples.github.io
Issue simili
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
libsdl-org/SDL#16360 ·
-
Area:Math p5.js 2.0+
Difficoltà 2/5 1-3 ore Idoneità per principianti 88/100
processing/p5.js#9197 · 3 commenti · 1 assegnatario ·
-
priority:low refactoring
Difficoltà 2/5 1-3 ore Idoneità per principianti 84/100
CyberAgent/psd2svg#382 ·
-
Template: Bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 80/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 88/100