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

Slides:



Advertisements
Similar presentations
GlTF and rest3d Patrick Cozzi University of Pennsylvania CIS Fall 2013.
Advertisements

Texture Mapping. Texturing  process that modifies the appearance of each point on a surface using an image or function  any aspect of appearance can.
TEXTURE MAPPING JEFF CHASTINE 1. TEXTURE MAPPING Applying an image (or a texture ) to geometry 2D images (rectangular) 3D images (volumetric – such as.
MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Week 4 : GLSL Shaders Topics: Shader programs, vertex & fragment shaders, passing data into.
MAT 594CM S10Fundamentals of Spatial ComputingAngus Forbes Week 5 : GLSL Shaders Topics: Shader syntax, passing textures into shaders, per-pixel lighting,
MAT 594CM S2010Fundamentals of Spatial ComputingAngus Forbes Overview Today: - Make sure everyone is set up with an OpenGL environment - OpenGL basics:
GLSL I May 28, 2007 (Adapted from Ed Angel’s lecture slides)
GLSL I Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New Mexico.
TA: Zhicheng Yan, Sushma S Kini, Mary Pietrowicz
Mohan Sridharan Based on slides created by Edward Angel GLSL I 1 CS4395: Computer Graphics.
1 Lecture 12 Texture Mapping uploading of the texture to the video memory the application of the texture onto geometry.
CS 4731: Computer Graphics Lecture 17: Texturing Emmanuel Agu.
OpenGL 3.0 Texture Arrays Presentation: Olivia Terrell, Dec. 4, 2008.
Computer Graphics Texture Mapping Eriq Muhammad Adams
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
OpenGL Shading Language (Advanced Computer Graphics) Ernest Tatum.
Texture Mapping. Introduction What is Texture Mapping? Types of Texture Mapping –1D, 2D and 3D SDL and OpenGL.
CS 4363/6353 TEXTURE MAPPING PART II. WHAT WE KNOW We can open image files for reading We can load them into texture buffers We can link that texture.
CS380 LAB IV OpenGL Jonghyeob Lee Reference1. [OpenGL course slides by Rasmus Stenholt] Reference2. [
Lecture by: Martin Deschamps CSE 4431
CG1 Labs Wei Li. Back Face Culling // enable back-face culling glEnable( GL_CULL_FACE ); // orientation of front-facing polygons glFrontFace( GL_CCW );
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
TEXTURES & OTHER GOODIES Computer Graphics. glTexCoord2f(...); + =
1 3D API OPENGL ES v1.0 Owned by Silicon Graphics (SGL) Control was then transferred to Khronos Group Introduction.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
Shading in OpenGL Ed Angel Professor Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E.
OpenGL Shading Language (GLSL)
Project Two Adding Web Pages, Links, and Images Define and set a home page Add pages to a Web site Describe Dreamweaver's image accessibility features.
CSE 381 – Advanced Game Programming GLSL. Rendering Revisited.
OpenGL-ES 3.0 And Beyond Boston Photo credit :Johnson Cameraface OpenGL Basics.
OpenGL Shading Language (GLSL)
OpenGL Graphics Textures. Quiz You didn't see that coming!
Week 3 Lecture 4: Part 2: GLSL I Based on Interactive Computer Graphics (Angel) - Chapter 9.
1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping.
CSCI 440.  So far we have learned how to  build shapes  create movement  change views  add simple lights  But, our objects still look very cartoonish.
 Learn some important functions and process in OpenGL ES  Draw some triangles on the screen  Do some transformation on each triangle in each frame.
What are shaders? In the field of computer graphics, a shader is a computer program that runs on the graphics processing unit(GPU) and is used to do shading.
OpenGL Shading Language
3D Objects in WebGL Loading 3D model files. Announcement Midterm exam on 12/2 –No Internet connection. –Example code and exam questions will be on USB.
Mouse Input. For Further Reading Learning WebGL, Lesson 11: 2.
MP3 Frequently Asked Questions (IN OFFICE HOURS).
OpenGl Shaders Lighthouse3d.com.
Advanced Texture Mapping Bump Mapping & Environment Mapping (Reflection)
MP3.. Start at the very beginning. Almost. Either start from nothing yourself, or use the empty template for this MP. Run through the provided files are.
Module 05 –Bump mapping Module 05 – Bump mapping Module 05 Advanced mapping techniques: Bump mapping.
Build your own 2D Game Engine and Create Great Web Games using HTML5, JavaScript, and WebGL. Sung, Pavleas, Arnez, and Pace, Chapter 5 Examples 1.
Texture Mapping CEng 477 Introduction to Computer Graphics.
Shaders, part 2 alexandri zavodny.
Ying Zhu Georgia State University
Reflective Shadow Mapping By: Mitchell Allen.
Real-Time Rendering Buffers in OpenGL 3.3
Texture Mapping Part II
OpenGL Texture Mapping
Introduction to Computer Graphics with WebGL
Chapters VIII Image Texturing
GLSL I Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New Mexico.
Introduction to Computer Graphics with WebGL
Introduction to Shaders
Introduction to Computer Graphics with WebGL
ICG 2018 Fall Homework1 Guidance
Computer Graphics Practical Lesson 6
OpenGL Texture Mapping
Programming with OpenGL Part 3: Shaders
Mickaël Sereno Shaders Mickaël Sereno 25/04/2019 Mickaël Sereno -
Programming Textures Lecture 15 Fri, Sep 28, 2007.
Texture Mapping Ed Angel Professor Emeritus of Computer Science
CS 480/680 (Fall 2018) Part 2: Texture Loading
Textures in WebGL.
CS 480/680 Fall 2011 Dr. Frederick C Harris, Jr. Computer Graphics
Presentation transcript:

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

 Map the texture(2D) into the vertex

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

 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.

 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.

 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.

 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

 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.

 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.

 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

 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, …

 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

 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.

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

 Learn OpenGL ES  OpenGL ES 2.0 Reference Pages  ocs/man/ ocs/man/  Texture Mapping pping pping