Tuesday, May 17, 2011

Applying Texture to Point Sprite

After successfully drawing Point on screen, I want to apply texture to point sprite.

Texture image is

As usual code can be downloaded from Google Code.

Changes made compared to previous post are.

  1. Vertex Shader : No Changes
  2. Fragment Shader :
    1. Added a uniform variable for texture id.
    2. Instead of defining Fragment color, will read from texture
  3. Rendering :
    1. Activate and Bind Texture
    2. Point uniform variable declared Fragment Shader

Remaining everything is same.
Let's look into changes made in detail

Fragment Shader

String strFShader =
                            "precision mediump float;" +
                            "uniform sampler2D u_baseMap;" +
                                "void main()" +
                                "{" +
                                        "vec4 color;" +
                                        "color = texture2D(u_baseMap, gl_PointCoord);" +
                                        "gl_FragColor = color;" +
                                "}";

u_baseMap variable for holding texture id, specified in OnDrawFrame

texture2D , a built-in function to fetch texture map.

OnDrawFrame

 public void onDrawFrame(GL10 gl) {
                GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
                GLES20.glUseProgram(iProgId);
                GLES20.glVertexAttribPointer(iPosition, 3, GLES20.GL_FLOAT, false, 0, vertBuffer);
               
                GLES20.glEnableVertexAttribArray(iPosition);
               
                GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
                GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, texId);
               
                GLES20.glUniform1i(iBaseMap, 0);
               
                GLES20.glDrawArrays(GLES20.GL_POINTS, 0, 1);
        }

Yup, Only 3 lines of code, and first 2 lines of code is very familiar

Last line, GLES20.glUniform1i(iBaseMap, 0), is to load the uniform variable. which tells the shader to use the texture indexed 0.


5 comments:

  1. Hi
    when i am trying to run your project i am getting a black screen..please help

    ReplyDelete
  2. Not sure if your still active on this blog but...
    These are some awesome tutorials explaining the basics. However whenever I compile and run this particular code on my device it only displays a black screen. not sure whats going on, as it is your code and Im still a newbie when it comes to this.

    The code was downloaded.

    ReplyDelete
    Replies
    1. you need to have image to apply texture, which is not in code.
      please add an image with name "particle.png" in res/drawable-xxx/

      or change below line in PointTexRenderer.java
      texId = Utils.LoadTexture(curView, R.drawable.particle);


      Delete
    2. On newer devices your image dimensions need to be the power of 2.
      and placed in a folder called "drawable-nodpi".
      Images in this folder is unscaled.

      Delete
  3. Hey, these a great tutorials, thanks, just one question. How is it possible to draw 2 sprites with each using a different bitmap for it's texture? I've tried but they are both drawn with the same bitmap each time :-/

    ReplyDelete