Presentation is loading. Please wait.

Presentation is loading. Please wait.

 Learn how you can use the shader through OpenGL ES  Add texture on object and make the object have a different look!!

Similar presentations


Presentation on theme: " Learn how you can use the shader through OpenGL ES  Add texture on object and make the object have a different look!!"— Presentation transcript:

1

2  Learn how you can use the shader through OpenGL ES  Add texture on object and make the object have a different look!!

3  Map the texture(2D) into the vertex

4  Texture Coordinate (0,1) (0,0) (1,1) (1,0)

5  In the previous example, we use string data to save the shader file Too messy!!! There are a lot of “”+ “”+...  RawResourceReader.java help you to load a text file(shader programs’ file format is glsl) from res/raw.

6  Add texture feature attribute vec2 a_TexCoordinate; varying vec2 v_TexCoordinate; v_TexCoordinate = a_TexCoordinate; The vertex’s texture coordinate. Note that in this example, we use per-pixel lighting, which calculate the final color by pixel shader. Therefore, we just pass the coordinate to pixel shader.

7  Add texture feature uniform sampler2D u_Texture; varying vec2 v_TexCoordinate; gl_FragColor = (v_Color * diffuse * texture2D(u_Texture, v_TexCoordinate)); u_Texture is the texture that we want to map onto the object’s face. texture2D(u_Texture, v_TexCoordinate) extract the color of the texture on the given coordinate.

8  Load the texture from an image. TextureHelper.java help you to do that. The loading process  Ask OpenGL to create a new handle for us  Decode the image file into an Android Bitmap object  Bind to the texture and set parameters  Load bitmaps directly into OpenGL

9  Ask OpenGL to create a new handle final int[] textureHandle = new int[1]; GLES20.glGenTextures(1, textureHandle, 0);  Decode the image into Bitmap object final BitmapFactory.Options options = new BitmapFactory.Options(); options.inScaled = false; // No pre-scaling final Bitmap bitmap = BitmapFactory.decodeResource(context.getResource s(), resourceId, options); You can create 2 or more handle for the textures.

10  Bind to the texture and set parameters GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureHandle[0]); GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST); GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_NEAREST); GL_TEXTURE_MIN_FILTER tells OpenGL what type of filtering to apply when drawing the texture smaller than the original size in pixels. GL_TEXTURE_MAG_FILTER tells OpenGL what type of filtering to apply when magnifying the texture beyond its original size in pixels.

11  Load bitmaps directly into OpenGL GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0); bitmap.recycle(); public static void texImage2D (int target, int level, Bitmap bitmap, int border) target : the texture target level : mip-mapping level bitmap : the image border : the border of the image

12  Texture coordinate data final float[] cubeTextureCoordinateData = { // Front face 0.0f, 0.0f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f, 0.0f, …

13  Setting up the texture mProgramHandle = ShaderHelper.createAndLinkProgram(vertexSha derHandle, fragmentShaderHandle, new String[] {"a_Position", "a_Color", "a_Normal", "a_TexCoordinate"}); mTextureDataHandle = TextureHelper.loadTexture(mActivityContext, R.drawable.bumpy_bricks_public_domain); Link the program, and bind the attributes Load the texture

14  When using the texture, you also need to set up mTextureUniformHandle = GLES20.glGetUniformLocation(mProgramHandle, "u_Texture"); mTextureCoordinateHandle = GLES20.glGetAttribLocation(mProgramHandle, "a_TexCoordinate"); GLES20.glActiveTexture(GLES20.GL_TEXTURE0); GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextureDataHandle); GLES20.glUniform1i(mTextureUniformHandle, 0); Get the shader locations for the texture data and texture coordinates Set active texture unit and bind the shader location.

15  In this example, you can put an image onto the object’s face.

16  Learn OpenGL ES http://www.learnopengles.com/ http://www.learnopengles.com/  OpenGL ES 2.0 Reference Pages  http://www.khronos.org/opengles/sdk/d ocs/man/ http://www.khronos.org/opengles/sdk/d ocs/man/  Texture Mapping http://en.wikipedia.org/wiki/Texture_ma pping http://en.wikipedia.org/wiki/Texture_ma pping


Download ppt " Learn how you can use the shader through OpenGL ES  Add texture on object and make the object have a different look!!"

Similar presentations


Ads by Google