【GLSL教程】（八）纹理贴图

最新推荐文章于 2023-05-04 13:43:56 发布
最新推荐文章于 2023-05-04 13:43:56 发布
阅读量765 收藏
点赞数
分类专栏： OpenGL 文章标签： shader float c
简单的纹理贴图（Simple Texture）
为了在GLSL中应用纹理，我们需要访问每个顶点的纹理坐标。GLSL中提供了一些属性变量，每个纹理单元一个：
[cpp] view plain copy print ?
  1. attribute vec4 gl_MultiTexCoord0;  
  2. attribute vec4 gl_MultiTexCoord1;  
  3. attribute vec4 gl_MultiTexCoord2;  
  4. attribute vec4 gl_MultiTexCoord3;  
  5. attribute vec4 gl_MultiTexCoord4;  
  6. attribute vec4 gl_MultiTexCoord5;  
  7. attribute vec4 gl_MultiTexCoord6;  
  8. attribute vec4 gl_MultiTexCoord7;  
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还为访问每个纹理的纹理矩阵提供了一个一致变量数组：
[cpp] view plain copy print ?
  1. uniform mat4 gl_TextureMatrix[gl_MaxTextureCoords];  
uniform mat4 gl_TextureMatrix[gl_MaxTextureCoords];
顶点shader可以通过上面所示的内容访问OpenGL程序中指定的纹理坐标。然后必须为每个顶点计算纹理坐标，并保存在预先定义的易变变量gl_TexCoord[i]中，i表示纹理单元号。
下面这条语句直接复制OpenGL程序中指定的纹理坐标，作为纹理单元0的顶点纹理坐标。
[cpp] view plain copy print ?
  1. gl_TexCoord[0]  = gl_MultiTexCoord0;  
gl_TexCoord[0]  = gl_MultiTexCoord0;
下面是个简单的例子，在顶点shader中设置纹理单元0的纹理坐标。
[cpp] view plain copy print ?
  1. void main()  
  2. {  
  3.     gl_TexCoord[0] = gl_MultiTexCoord0;  
  4.     gl_Position = ftransform();  
  5. }  
void main()
{
    gl_TexCoord[0] = gl_MultiTexCoord0;
    gl_Position = ftransform();
}
如果你想使用纹理矩阵，可以这样操作：
[cpp] view plain copy print ?
  1. void main()  
  2. {  
  3.     gl_TexCoord[0] = gl_TextureMatrix[0] * gl_MultiTexCoord0;  
  4.     gl_Position = ftransform();  
  5. }  
void main()
{
    gl_TexCoord[0] = gl_TextureMatrix[0] * gl_MultiTexCoord0;
    gl_Position = ftransform();
}
前面说过，gl_TexCoord是一个易变变量，所以在片断shder中可以访问经过插值的纹理坐标。
为了访问纹理的数值，在片断shader中有必要声明一个特殊的变量，对一个2D纹理可以可以这样写：
[cpp] view plain copy print ?
  1. uniform sampler2D tex;  
uniform sampler2D tex;
如果是1D或者3D的纹理，可以改成sampler1D和sampler3D。
这个用户定义的变量tex包含我们将会使用的纹理单元，通过texture2D函数我们可以得到一个纹素（texel），这是一个纹理图片中的像素。函数参数分别为simpler2D以及纹理坐标：
[cpp] view plain copy print ?
  1. vec4 texture2D(sampler2D, vec2);  
vec4 texture2D(sampler2D, vec2);
函数的返回值已经考虑了所有在OpenGL程序中定义的纹理设置，比如过滤、mipmap、clamp等。
我们的片断shader可以写成如下形式：
[cpp] view plain copy print ?
  1. uniform sampler2D tex;  
  2.   
  3. void main()  
  4. {  
  5.     vec4 color = texture2D(tex,gl_TexCoord[0].st);  
  6.     gl_FragColor = color;  
  7. }  
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_REPLACEC = CtA = At
GL_MODULATEC = Ct*Cf A = At*Af
GL_DECALC = Cf * (1 – At) + Ct * AtA = Af
表中Ct和At表示纹理的颜色和alpha值，Cf和Af表示片断（fragment）的颜色和alpha值，C和A表示最终的颜色和alpha值。
上一节的例子就相当于使用了GL_REPLACE模式。下面我们我们准备在一个立方体上实现与GL_MODULATE等同的效果。两个shader只计算使用一个白色方向光的散射以及环境光成分，关于材质的完整定义请参照光照有关的章节。
因为使用了光照，所以顶点shader中必须处理法线信息。必须将法线变换到视图空间然后归一化，光线方向向量也必须归一化（光线方向向量已经由OpenGL变换到了视图空间）。现在新的顶点shader如下：

[cpp] view plain copy print ?
  1. varying vec3 lightDir,normal;  
  2.   
  3. void main()  
  4. {  
  5.     normal = normalize(gl_NormalMatrix * gl_Normal);  
  6.   
  7.     lightDir = normalize(vec3(gl_LightSource[0].position));  
  8.     gl_TexCoord[0] = gl_MultiTexCoord0;  
  9.   
  10.     gl_Position = ftransform();  
  11. }  
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的公式计算：
[cpp] view plain copy print ?
  1. varying vec3 lightDir,normal;  
  2. uniform sampler2D tex;  
  3.   
  4. void main()  
  5. {  
  6.     vec3 ct,cf;  
  7.     vec4 texel;  
  8.     float intensity,at,af;  
  9.   
  10.     intensity = max(dot(lightDir,normalize(normal)),0.0);  
  11.     cf = intensity * (gl_FrontMaterial.diffuse).rgb +  
  12.                   gl_FrontMaterial.ambient.rgb;  
  13.     af = gl_FrontMaterial.diffuse.a;  
  14.   
  15.     texel = texture2D(tex,gl_TexCoord[0].st);  
  16.     ct = texel.rgb;  
  17.     at = texel.a;  
  18.   
  19.     gl_FragColor = vec4(ct * cf, at * af);  
  20. }  
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中只需要进行些许改动，加上多个纹理的颜色值。
[cpp] view plain copy print ?
  1. varying vec3 lightDir,normal;  
  2. uniform sampler2D tex;  
  3.   
  4. void main()  
  5. {  
  6.     vec3 ct,cf;  
  7.     vec4 texel;  
  8.     float intensity,at,af;  
  9.   
  10.     intensity = max(dot(lightDir,normalize(normal)),0.0);  
  11.     cf = intensity * (gl_FrontMaterial.diffuse).rgb +  
  12.                   gl_FrontMaterial.ambient.rgb;  
  13.     af = gl_FrontMaterial.diffuse.a;  
  14.   
  15.     texel = texture2D(tex,gl_TexCoord[0].st) +  
  16.           texture2D(l3d,gl_TexCoord[0].st);  
  17.     ct = texel.rgb;  
  18.     at = texel.a;  
  19.   
  20.     gl_FragColor = vec4(ct * cf, at * af);  
  21. }  
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函数实现这个要求：
[cpp] view plain copy print ?
  1. genType smoothStep(genType edge0, genType edge1, genType x);  
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实现了需要的效果：
[cpp] view plain copy print ?
  1. varying vec3 lightDir,normal;  
  2. uniform sampler2D tex,l3d;  
  3.   
  4. void main()  
  5. {  
  6.     vec3 ct,cf,c;  
  7.     vec4 texel;  
  8.     float intensity,at,af,a;  
  9.   
  10.     intensity = max(dot(lightDir,normalize(normal)),0.0);  
  11.   
  12.     cf = intensity * (gl_FrontMaterial.diffuse).rgb +  
  13.                       gl_FrontMaterial.ambient.rgb;  
  14.     af = gl_FrontMaterial.diffuse.a;  
  15.   
  16.     texel = texture2D(tex,gl_TexCoord[0].st);  
  17.   
  18.     ct = texel.rgb;  
  19.     at = texel.a;  
  20.   
  21.     c = cf * ct;  
  22.     a = af * at;  
  23.   
  24.     float coef = smoothstep(1.0,0.2,intensity);  
  25.     c += coef *  vec3(texture2D(l3d,gl_TexCoord[0].st));  
  26.   
  27.     gl_FragColor = vec4(c, a);  
  28. }  
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
flyrxue
关注
专栏目录
GLSL 纹理
u014267091的博客
07-17 1294
一个纹理实际上就是一个位图。可以在绘制的物体上进行贴图，那么这个图如何贴，反这贴，还是正着贴，就取决于纹理坐标和顶点坐标的对应关系。2D纹理坐标在x和y轴上，范围为0到1之间。使用纹理坐标获取纹理颜色叫做采样(Sampling)。纹理坐标起始于(0, 0)，也就是纹理图片的左下角，终始于(1, 1)，即纹理图片的右上角。而顶点坐标是以中心为原点，它们之间的映射关系// //顶点坐标。
GLSL教程 第13章：综合项目：创建一个完整的渲染场景
最新发布
qq_54098120的博客
08-01 1446
在这一节中，我们实现了阴影映射技术，包括生成阴影贴图和在场景渲染时应用阴影贴图。通过在光源视角下渲染场景，我们生成了深度贴图，然后在最终渲染中使用该贴图来决定哪些片段在阴影中，从而实现阴影效果。
GLSL之纹理演示
05-20
GLSL之纹理演示 http://www.cnblogs.com/zengqh/
GLSL 纹理贴图
weixin_33724046的博客
02-20 153
#include <ork/render/FrameBuffer.h> #include <ork/scenegraph/SceneManager.h> #include <ork/ui/GlutWindow.h> #include <pmath.h> #include <stbi/stb_image.h> #include...
GLSL入门2 关于GLSL中的纹理贴图
davidsu33的专栏
12-15 2958
我将注解以及源码直接放到这里了 // GLSL01.cpp : 定义控制台应用程序的入口点。 // #include "stdafx.h" #include #include #include #include #include using namespace std; static const int g_timer_id = 0; static const int g_tim
GLSL教程 pdf版
12-17
通过编写这两种着色器，我们可以实现诸如平滑着色、纹理贴图、光照模型等特效。 GLSL的语法与C/C++类似，但有一些关键的区别，例如数据类型和内存模型。例如，GLSL中常使用向量（vec2, vec3, vec4）和矩阵（mat3, ...
GLSL之多重纹理演示
05-20
首先，我们需要理解纹理贴图的基本概念。在3D图形渲染中，纹理是二维图像，被映射到3D模型表面，为模型增添细节和色彩。在GLSL中，我们可以使用纹理坐标（UV坐标）来指定每个顶点应如何从纹理中采样颜色。一个物体...
opengl GLSL教程
11-19
- **纹理坐标的生成与转换**：生成或调整顶点的纹理坐标，以适应后续的纹理贴图操作。 2. **图元安装和光栅化处理模块（Primitive Assembly and Rasterization）** - 此阶段的输入包括经过转换后的顶点数据以及...
opengl编程glsl-纹理
RSS_40728440的专栏
12-13 330
opengl编程入门，glsl语言的hello world，着色器，glsl语言简介 相关下载链接：http://download.csdn.net/download/yzqhao/10155697?utm_source=blogseo
Shader实现水波纹GLSL源码
08-16
Shader实现水波纹GLSL源码，通过修改unityshader植入相关代码便可实现。
GLSL语言常用语法
qq_39672409的博客
04-11 1009
本文转载于https://www.jianshu.com/p/53f6c3b4f0a0，个人纪录学习使用
GLSL实现水面倒影
yangchuankai's blog
12-24 5896
使用两相机，一个master相机， 主要负责场景的渲染， 另一个rtt相机， 和master相机建立为镜面投影相机，用于在和master相机的纵向镜像投影，从而获取master投影场景的逆场景， 渲染到纹理，进行镜面贴图，实现水面的倒影效果。 效果如图： 实现代码(需要一张天空背景图， 一张water法线图)： vertex shader： varying ve
GLSL中创建贴图
【计算机图形】Physics-Based Animation-小8君的专栏
01-13 1593
纹理贴图创建 在OpenGL程序中，通过glBindTexture来绑定纹理贴图，然后用glTexCoord来指定贴图坐标位置。这里，用glGenTexture函数可以用来表示纹理单元索引。 在使用多重纹理时，需要通过 void glActiveTexture(GLenum texture); 函数来指定纹理单元。例如，texure0的情况，声明如下： glActiveTex
【OpenGL学习】texture
miyazono_的博客
01-18 2407
学习纹理的使用
OpenGL(四)——纹理
GZ的博客
05-04 2846
为每个顶点添加颜色可以增加图形的细节，但是更多的点会导致运行效率下降。使用纹理可以增加细节，又不用指定额外的顶点。纹理是一个2D图片（也有1D和3D纹理）。除了图像外纹理也可以用来存储大量的数据，这些数据可以发送给着色器。要想把纹理映射到三角形上，必须指定三角形的每个顶点各自对应纹理的哪个部分。这样每个顶点就会关联一个纹理坐标（Texture Coordinate），表明该纹理图像的哪个片段采样，之后在图形的其它片段进行片段插值（Fragment interpolation）。
openGL &GLSL texture()函数详解
热门推荐
aoxuestudy的专栏
07-06 1万+
前言 一般，在三维项目添加纹理的时候，经常会看到有和纹理操作的函数，先看一段片元着色器程序：在片元着色器中 #version 450 core out vec4 FragColor; in vec2 TexCoords; uniform sampler2D depthMap; uniform float near_plane; uniform float far_plane; // required when using a perspective projection ma...
Layabox WebGL Shader编程教程
04-07
在Html5 3D游戏开发中WebGL Shader的作用非常重要，然而学习WebGL Shader的路却不是那么容易，第一它涉及到方方面面的知识和基础， 比如：3D数学，计算机图形学甚至硬件。第二各个Html5游戏引擎关于WebGL Shader的资源都比较少,不方便初学者入门学习。与其在互联网上四处搜索零散的资料，不如从头开始，系统全面的去学习WebGL Shader的“代码的艺术”。本教程“授人以渔”,为大家带来零起点的WebGL Shader教学，从图形硬件的发展史开始，讲GPU可编程管线，讲3D模型数据结构、贴图、光照、渲染，让大家能从一个纵深的过程中宏观的了解这种技术的前因后果。教程以LayaBox引擎为环境 ，重点放在GLSL语言的学习，经典光照的计算，各种纹理贴图的原理与使用，PBR、NPR、SSS等渲染类型的实现。 手把手在Layabox环境下进行逐行代码的教学，期望帮助大家进入WebGL Shader编程的大门，最终能在实际的工程实践中有些创造和创新。1. 课程为99课时，总时长约为2000分钟到2500分钟。2. 课程 源代码 在对应课时的课件资源中，可下载。
GLSL. 语法基础
分享编程和生活的快乐
06-13 1万+
GLSL语法跟C语言非常相似： 1.数据类型： GLSL包含下面几种简单的数据类型 float  bool :false or ture int 向量： vec   {2,3,4}     长度为2, 3, 4的float向量 bvec {2,3,4}     长度为2, 3, 4的bool向量 ivec  {2,3,4}     长度为2, 3, 4的int向量 矩阵： m
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值