René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"GLSL renders to squared output","articleBody":"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\n\n[jsFiddle here](http://jsfiddle.net/dfjcdg1p/4/)\n\nIf you will inspect the canvas, you will see that it has the proper sizes: 20x200\n\nI have used your shaders to render:\n\nVertex Shader:\n\n```\n        uniform float u_frameOffset;\n        uniform vec4 u_screenDims;\n        attribute vec2 centerPosition;\n        attribute float rotation;\n        attribute float perSpriteFrameOffset;\n        attribute float spriteSize;\n        attribute vec2 cornerOffset;\n        attribute vec2 spriteTextureSize;\n        attribute float spritesPerRow;\n        attribute float numFrames;\n        attribute vec4 textureWeights;\n        varying vec2 v_texCoord;\n        varying vec4 v_textureWeights;\n\n        void main() {\n          float frameNumber = mod(u_frameOffset + perSpriteFrameOffset, numFrames);\n          float row = floor(frameNumber / spritesPerRow);  // Compute the upper left texture coordinate of the sprite\n          vec2 upperLeftTC = vec2(spriteTextureSize.x * (frameNumber - (row * spritesPerRow)),\n                                  spriteTextureSize.y * row);\n          vec2 tc = upperLeftTC + spriteTextureSize * (cornerOffset + vec2(0.5, 0.5));\n          v_texCoord = tc;\n          v_textureWeights = textureWeights;\n          float s = sin(rotation);\n          float c = cos(rotation);\n          mat2 rotMat = mat2(c, -s, s, c);\n          // vec2 scaledOffset = spriteSize * cornerOffset;\n          vec2 scaledOffset = spriteSize * cornerOffset;\n          vec2 pos = centerPosition + rotMat * scaledOffset;\n          gl_Position = vec4(pos * u_screenDims.xy + u_screenDims.zw, 1.0, 1.0);\n        }\n```\n\nFragment Shader:\n\n```\n        precision mediump float;\n        uniform sampler2D u_texture0;\n        uniform sampler2D u_texture1;\n        uniform sampler2D u_texture2;\n        uniform sampler2D u_texture3;\n        varying vec2 v_texCoord;\n        varying vec4 v_textureWeights;\n        void main() {\n          vec4 color;\n          if (v_textureWeights.x \u003e 0.0)\n            color = texture2D(u_texture0, v_texCoord);\n          else if (v_textureWeights.y \u003e 0.0)\n            color = texture2D(u_texture1, v_texCoord);\n          else if (v_textureWeights.z \u003e 0.0)\n            color = texture2D(u_texture2, v_texCoord);\n          else // v_textureWeights.w \u003e 0.0\n            color = texture2D(u_texture3, v_texCoord);\n          gl_FragColor = color;\n        }\n```\n\nMy GLSL knowledge isn't very strong yet and I'd appreciate any help to make it render with the original width \u0026 height.\nRight now I see that the Vertex Shader accepts only spriteSize (which is only the width of the sprite) as a parameter when calculating position \u0026 sizes.\n","author":{"url":"https://github.com/catalinberta","@type":"Person","name":"catalinberta"},"datePublished":"2015-06-10T11:42:13.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/2/WebGLSamples.github.io/issues/2"}