Hello Guest

Texture displaying incorrectly with Slick-util + Shaders

  • 2 Replies
Texture displaying incorrectly with Slick-util + Shaders
« on: February 06, 2012, 11:36:13 »
Hi Guys,

I've recently been trying to get a basic 2D texture example working using my own shaders and matrix, I use slick util to load the textures but for some reason it appears the texture only goes 2/3 of the way across and down the triangle leaving a black strip to cover the rest. I've tested my shaders by making the output colour the same as the texture coordinate and they all seem to be correct. If anyone could point out something I'm doing wrong I would be very grateful  :)

I initialise OpenGL as:

Code: [Select]
   public Renderer(float viewWidth, float viewHeight) {
        defaultShader = ShaderManager.loadShaderProgram(Renderer.class.getResource("/shaders/default.vert").getFile(),
        GL11.glClearColor(0.0f, 0.5f, 0.0f, 0.0f);
        projectionMatrix = MatrixUtil.getProjectionMatrix(45, viewWidth / viewHeight, 0.1f, 1000);
        vertexLoc = GL20.glGetAttribLocation(defaultShader, "position");
        textureLoc = GL20.glGetAttribLocation(defaultShader, "texCoords0");
        samplerLoc = GL20.glGetUniformLocation(defaultShader, "s_texture");

The VBO Data:

Code: [Select]
float[] verts = {-0.5f, 0.5f, 0.0f,  // Position 0
                0.0f, 0.0f,        // TexCoord 0
                -0.5f, -0.5f, 0.0f,  // Position 1
                0.0f, 1.0f,        // TexCoord 1
                0.5f, -0.5f, 0.0f,  // Position 2
                1.0f, 1.0f        // TexCoord 2

I have a queue of objects to be rendered

Code: [Select]
private static Queue<RenderObject> renderQueue = new LinkedList<RenderObject>();
Texture loading:

Code: [Select]
String type = textureReference.substring(textureReference.length() - 3).toUpperCase();
                    Texture texture = TextureLoader.getTexture(type, new FileInputStream(textureReference));
                    textures.put(textureReference, texture);
                    Renderer.textureId = texture.getTextureId(); //Temporary till I get texture loading working correctly

Rendering code:

Code: [Select]
   public void render() {

        //View Matrix
        Matrix4f viewMatrix = new Matrix4f();
        viewMatrix.translate(new Vector3f(0, 0, 5));

        GL20.glUniformMatrix4(GL20.glGetUniformLocation(defaultShader, "projectionMatrix"), false, MatrixUtil.getMatrixAsFloatBuffer(projectionMatrix));
        GL20.glUniformMatrix4(GL20.glGetUniformLocation(defaultShader, "viewMatrix"), false, MatrixUtil.getMatrixAsFloatBuffer(viewMatrix));

        for (RenderObject ro : renderQueue) {
            GL20.glUniformMatrix4(GL20.glGetUniformLocation(defaultShader, "modelMatrix"), false, ro.getModelMatrixAsFloatBuffer());

            GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, ro.getVboId());


            GL20.glVertexAttribPointer(vertexLoc, 3, GL11.GL_FLOAT, false, ro.getStride(), ro.getStartingVertex());
            GL20.glVertexAttribPointer(textureLoc, 2, GL11.GL_FLOAT, false, ro.getStride(), 12);

            if(textureId != null){
                GL11.glBindTexture(GL11.GL_TEXTURE_2D, textureId);

            GL20.glUniform1(samplerLoc, BufferUtil.getIntAsBuffer(0));

            GL11.glDrawArrays(GL11.GL_TRIANGLES, ro.getStartingVertex(), ro.getNumVerts());

            GL15.glBindBuffer(GL15.GL_ARRAY_BUFFER, 0);


and finally the shaders:
Code: [Select]
#version 150 core

uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;

in vec3 position;
in vec2 texCoords0;

varying vec2 varTexCoords0;

void main(void)
     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
     varTexCoords0 = texCoords0;
Code: [Select]
#version 150 core
varying vec2 varTexCoords0;

uniform sampler2D s_texture;

out vec4 outColour;

void main()
   outColour = texture2D( s_texture, varTexCoords0 );

Sorry for the massive code dump and thanks!

Re: Texture displaying incorrectly with Slick-util + Shaders
« Reply #1 on: February 06, 2012, 13:39:31 »
The most likely cause of this is that you are using a texture whose size is not a power-of-two (128, 256, 512, etc.). SlickUtils then creates a texture by putting your texture onto a correctly sized texture (power-of-two) taking up only 2/3 of the result. I'm fairly certain the SlickUtils' Texture object can give you the correct texture coordinates of your texture. Otherwise you can just resize your texture to be a power-of-two.
Programmers will, one day, rule the world... and the world won't notice until its too late.Just testing the marquee option ;D

Re: Texture displaying incorrectly with Slick-util + Shaders
« Reply #2 on: February 06, 2012, 13:50:22 »
Yep that it  ;D

Thanks a lot, I can honestly say I never would of figured that out  :)