GLSL纹理贴图 【转】

转载:http://blog.csdn.net/hgl868/article/details/7872466

简单的纹理贴图(Simple Texture)

为了在GLSL中应用纹理,我们需要访问每个顶点的纹理坐标。GLSL中提供了一些属性变量,每个纹理单元一个:

attribute vec4 gl_MultiTexCoord0;
attribute vec4 gl_MultiTexCoord1;
attribute vec4 gl_MultiTexCoord2;
attribute vec4 gl_MultiTexCoord3;
attribute vec4 gl_MultiTexCoord4;
attribute vec4 gl_MultiTexCoord5;
attribute vec4 gl_MultiTexCoord6;
attribute vec4 gl_MultiTexCoord7;

GLSL还为访问每个纹理的纹理矩阵提供了一个一致变量数组:

uniform mat4 gl_TextureMatrix[gl_MaxTextureCoords];

顶点shader可以通过上面所示的内容访问OpenGL程序中指定的纹理坐标。然后必须为每个顶点计算纹理坐标,并保存在预先定义的易变变量gl_TexCoord[i]中,i表示纹理单元号。

下面这条语句直接复制OpenGL程序中指定的纹理坐标,作为纹理单元0的顶点纹理坐标。

gl_TexCoord[0]  = gl_MultiTexCoord0;

下面是个简单的例子,在顶点shader中设置纹理单元0的纹理坐标。

void main()
{
   
gl_TexCoord[0] = gl_MultiTexCoord0;
    gl_Position
= ftransform();
}

如果你想使用纹理矩阵,可以这样操作:

void main()
{
   
gl_TexCoord[0] = gl_TextureMatrix[0] * gl_MultiTexCoord0;
    gl_Position
= ftransform();
}

前面说过,gl_TexCoord是一个易变变量,所以在片断shder中可以访问经过插值的纹理坐标。
为了访问纹理的数值,在片断shader中有必要声明一个特殊的变量,对一个2D纹理可以可以这样写:

uniform sampler2D tex;

如果是1D或者3D的纹理,可以改成sampler1D和sampler3D。
这个用户定义的变量tex包含我们将会使用的纹理单元,通过texture2D函数我们可以得到一个纹素(texel),这是一个纹理图片中的像素。函数参数分别为simpler2D以及纹理坐标:

vec4 texture2D(sampler2D, vec2);

函数的返回值已经考虑了所有在OpenGL程序中定义的纹理设置,比如过滤、mipmap、clamp等。
我们的片断shader可以写成如下形式:

uniform sampler2D tex;

void main()
{
    vec4 color =
texture2D(tex,gl_TexCoord[0].st);
    gl_FragColor
= color;
}

注意访问gl_TexCoord时选择子st的使用。在本教程前面关于数据类型和变量的讨论中说过,访问纹理坐标时可以使用如下选择子:s、t、p、q。(r因为和rgb选择子冲突而没有使用)

本节内容Shader Designer的工程下载地址:
http://www.lighthouse3d.com/wp-content/uploads/2011/03/textureSimple.zip

组合纹理与片断

OpenGL允许我们通过多种方式将纹理颜色和片断颜色联合到一起。下表显示了RGBA模式时可用的联合方式:

GL_REPLACE C =
Ct
A =
At
GL_MODULATE C =
Ct*Cf
A =
At*Af
GL_DECAL C =
Cf * (1 – At) + Ct * At
A =
Af

表中Ct和At表示纹理的颜色和alpha值,Cf和Af表示片断(fragment)的颜色和alpha值,C和A表示最终的颜色和alpha值。

上一节的例子就相当于使用了GL_REPLACE模式。下面我们我们准备在一个立方体上实现与GL_MODULATE等同的效果。两个shader只计算使用一个白色方向光的散射以及环境光成分,关于材质的完整定义请参照光照有关的章节。

因为使用了光照,所以顶点shader中必须处理法线信息。必须将法线变换到视图空间然后归一化,光线方向向量也必须归一化(光线方向向量已经由OpenGL变换到了视图空间)。现在新的顶点shader如下:

varying vec3 lightDir,normal;

void main()
{
    normal =
normalize(gl_NormalMatrix * gl_Normal);

lightDir =
normalize(vec3(gl_LightSource[0].position));
   
gl_TexCoord[0] = gl_MultiTexCoord0;

gl_Position
= ftransform();
}

在片断shader中,光照得到的片断的颜色和alpha值在cf和af中分别计算。shader中剩余代码按照GL_MODULATE的公式计算:

varying vec3 lightDir,normal;
uniform sampler2D tex;

void main()
{
    vec3
ct,cf;
    vec4
texel;
    float
intensity,at,af;

intensity =
max(dot(lightDir,normalize(normal)),0.0);
    cf =
intensity * (gl_FrontMaterial.diffuse).rgb +
                 
gl_FrontMaterial.ambient.rgb;
    af =
gl_FrontMaterial.diffuse.a;

texel =
texture2D(tex,gl_TexCoord[0].st);
    ct =
texel.rgb;
    at =
texel.a;

gl_FragColor
= vec4(ct * cf, at * af);
}

Shader Designer的工程下载地址:
http://www.lighthouse3d.com/wp-content/uploads/2011/03/textureComb.zip

多重纹理
在GLSL中实现多重纹理十分容易,我们只需要访问所有纹理即可。因为我们打算给每个纹理使用相同的纹理坐标,所以顶点shader不需要改动。片断shader中只需要进行些许改动,加上多个纹理的颜色值。

varying vec3 lightDir,normal;
uniform sampler2D tex;

void main()
{
    vec3
ct,cf;
    vec4
texel;
    float
intensity,at,af;

intensity =
max(dot(lightDir,normalize(normal)),0.0);
    cf =
intensity * (gl_FrontMaterial.diffuse).rgb +
                 
gl_FrontMaterial.ambient.rgb;
    af =
gl_FrontMaterial.diffuse.a;

texel =
texture2D(tex,gl_TexCoord[0].st) +
         
texture2D(l3d,gl_TexCoord[0].st);
    ct =
texel.rgb;
    at =
texel.a;

gl_FragColor
= vec4(ct * cf, at * af);
}

效果如下:

下面添加点不同的效果:在黑暗中发光。我们希望第二个纹理能在黑暗中发光,在没有光照时达到最亮,在有光照时变暗。

我们通过两步计算最终的颜色:首先将第一个纹理与片断颜色进行modulate计算,然后根据光照强度(indensity)加上第二个纹理单元。

如果indensity是0,第二个纹理单元取最大值,如果indensity为1,只取第二个纹理单元颜色的10%,当indensity在0和1之间时按这两个大小进行插值。可以使用smoothstep函数实现这个要求:

genType smoothStep(genType edge0, genType edge1, genType x);

如果x <= edge0结果是0,如果x >= edge1结果为1,如果edge0 < x <
edge1结果在0和1之间进行Hermite插值。在本例中我们按如下方式调用:
coef = smoothStep(1.0, 0.2, intensity);
下面的片断shader实现了需要的效果:

varying vec3 lightDir,normal;
uniform sampler2D tex,l3d;

void main()
{
    vec3
ct,cf,c;
    vec4
texel;
    float
intensity,at,af,a;

intensity =
max(dot(lightDir,normalize(normal)),0.0);

cf =
intensity * (gl_FrontMaterial.diffuse).rgb +
                     
gl_FrontMaterial.ambient.rgb;
    af =
gl_FrontMaterial.diffuse.a;

texel =
texture2D(tex,gl_TexCoord[0].st);

ct =
texel.rgb;
    at =
texel.a;

c = cf *
ct;
    a = af *
at;

float coef =
smoothstep(1.0,0.2,intensity);
    c += coef
*  vec3(texture2D(l3d,gl_TexCoord[0].st));

gl_FragColor
= vec4(c, a);
}

Shader Designer的工程下载地址:
http://www.lighthouse3d.com/wp-content/uploads/2011/03/textureGlow.zip

时间: 2024-11-01 09:24:16

GLSL纹理贴图 【转】的相关文章

(转)使用OpenGL显示图像(七)Android OpenGLES2.0——纹理贴图之显示图片

转:http://blog.csdn.net/junzia/article/details/52842816 前面几篇博客,我们将了Android中利用OpenGL ES 2.0绘制各种形体,并在上一篇博客中专门讲了GLSL语言.但是我们看到的基于OpenGL开发的应用和游戏,可不仅仅是那些规则形体和一些简单的色彩构成,而是各种不规则的形体构成了现实世界或者卡通世界的人和事物,他们都是外面穿着漂亮“衣服”的.本篇博客就是来讲解这些“衣服”的基础的.这些衣服就是纹理贴图. 什么是纹理贴图 一般说来

基于Cocos2d-x学习OpenGL ES 2.0系列——纹理贴图(6)

在上一篇文章中,我们介绍了如何绘制一个立方体,里面涉及的知识点有VBO(Vertex Buffer Object).IBO(Index Buffer Object)和MVP(Modile-View-Projection)变换. 本文将在教程4的基础之上,添加纹理贴图支持.最后,本文会把纹理贴图扩展至3D立方体上面. 基本方法 当我们把一张图片加载到内存里面之后,它是不能直接被GPU绘制出来的,纹理贴图过程如下: 首先,我们为之前的顶点添加纹理坐标属性并传到vertex shader里面去: 然后

windows下opengl扩展与多重纹理贴图

环境:windows8.1 参考: http://www.cnblogs.com/madfrog/archive/2010/06/25/1765243.html http://blog.csdn.net/xiangyunl/article/details/7933549 如果你在Windows平台下开发OpenGL程序,那么系统中自带的OpenGL库就是1.1的,如果想使用1.2或者更高版本的OpenGL库,那么只能使用OpenGL扩展.由于d3d的关系,windows对于opengl支持不是很

应用纹理贴图

为了在OpenGL  ES中启用纹理贴图功能,可以在Renderer实现类的onSurfaceCreated(GL10  gl  ,  EGLConfig   config)方法中启动纹理贴图,例如如下代码: //启用2D纹理贴图 gl.glEnable(GL10.GL_TEXTURE_2D); 接下来就需要准备一张图片来作为纹理贴图了,建议改图片的长宽是2的N次方,把这张准备贴图的位图放在Android项目的/res/drawable-mdpi目录下,方便应用程序加载该图片资源. 接下来程序开

[Unity] Shader(着色器)之纹理贴图

在Shader中,我们除了可以设定各种光线处理外,还可以增加纹理贴图. 使用 settexture 命令可以为着色器指定纹理. 示例代码: Shader "Sbin/ff2" { // 贴图采样 properties { // 变量名("描述名",类型)=值 _Color("主体", color)=(1,1,1,1) _Ambient("环境光", color)=(0.3,0.3,0.3,0.3) _Specular(&quo

用OpenGL进行立方体表面纹理贴图

一.目的: 掌握OpenGL中纹理对象的创建.绑定与使用方法. 二.简单介绍: 1,连接静态库 #pragma comment(lib, "glut32.lib") #pragma comment(lib, "glaux.lib") 2,载入位图图像到内存(这是固定用法) AUX_RGBImageRec *LoadBMP(CHAR *Filename) { FILE *File = NULL; // 文件句柄 if (!Filename) // 确保文件名已提供 {

纹理贴图移动(水流、电流效果)

纹理贴图移动特效产生岩浆.瀑布效果 原理是改变动态改变纹理坐标uv的值,使之移动 首先准备好一张贴图 建立一个shader 变量一览: _MainTex 主纹理贴图 _MainTint 主要颜色   _ScrollXSpeed x轴移动速度 _ScrollYSpeed  y轴移动速度 Properties { _MainTex ("Base (RGB)", 2D) = "white" {} _MainTint ("Diffuse Tint", C

【3.js探寻八】——法向材质与材质的纹理贴图

4.法向材质 法向材质可以将材质的颜色设置为其法向量的方向,有时候对于调试很有帮助. 法向材质的设定很简单,甚至不用设置任何参数: new THREE.MeshNormalMaterial() 材质的颜色与照相机与该物体的角度相关,下面我们只改变照相机位置,观察两个角度的颜色变化: camera.position.set(5, 25, 25);的效果: camera.position.set(25, 25, 25);的效果: 我们观察的是同样的三个面,但是由于观察的角度不同,物体的颜色就不同了.

Directx11学习笔记【十七】纹理贴图

本文由zhangbaochong原创,转载请注明出处http://www.cnblogs.com/zhangbaochong/p/5596180.html 在之前的例子中,我们实现了光照和材质使得场景大大增加了真实感,然而材质提供的细节只是在顶点级别上,要想在像素级别提供细节还得借助于纹理,这次让我们学习dx11中一些有关纹理的基础. 1.纹理坐标 1 在direct3d中,纹理坐标用一个二维向量(u,v)表示,纹理左上角为原点,u正方向沿纹理水平向右,v正方向沿纹理垂直向下,且0<=u,v<