玛雅中按什么键怎么启用纹理贴图?

发布网友发布时间：2022-04-22 10:11

我来回答

共7个回答

懂视网时间：2022-04-22 14:33

为了使图形能获得接近于真实物体的材质效果，一般会使用贴图，贴图类型主要包括两种：漫反射贴图和镜面高光贴图。其中漫反射贴图可以同时实现漫反射光和环境光的效果。
实际效果请看demo：纹理贴图

纹理贴图

2D纹理

实现贴图就需要用到纹理，常用的纹理格式有：2D纹理，立方体纹理，3D纹理。我们使用最基本的2D纹理就能实现本节需要的效果，我们来看一下使用纹理需要的api。相关教程：js视频教程

因为纹理的坐标原点位于左下角，和我们通常的左上角坐标原点刚好相反，下面就是将它按Y轴进行反转，方便我们设置坐标。

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);

激活和绑定纹理，gl.TEXTURE0 表示0号纹理，可以从0一直往上递增。TEXTURE_2D 则是表示2D纹理。

gl.activeTexture(gl.TEXTURE0);//激活纹理
gl.bindTexture(gl.TEXTURE_2D, texture);//绑定纹理

接着就是设置纹理参数，这个api非常重要，也是纹理最复杂的部分。

gl.texParameteri(target, pname, param) ，将param的值赋给绑定到目标的纹理对象的pname参数上。参数：

target: gl.TEXTURE_2D 或 gl.TEXTURE_CUBE_MAP

pname: 可指定4个纹理参数

放大（gl.TEXTURE_MAP_FILTER）:当纹理的绘制范围比纹理本身更大时，如何获取纹理颜色。比如，将16*16的纹理图像映射到32*32像素的空间时，纹理的尺寸变为原始的两倍。默认值为gl.LINEAR。
缩小（gl.TEXTURE_MIN_FILTER）: 当纹理的绘制返回比纹理本身更小时，如何获取纹素颜色。比如，将32*32的纹理图像映射到16*16像素空间里，纹理的尺寸就只有原始的一般。默认值为gl.NEAREST_MIPMAP_LINEAR。
水平填充（gl.TEXTURE_WRAP_S）: 表示如何对纹理图像左侧或右侧区域进行填充。默认值为gl.REPEAT。
垂直填充（gl.TEXTURE_WRAP_T）: 表示如何对纹理图像上方和下方的区域进行填充。默认值为gl.REPEAT。

param: 纹理参数的值

可赋给 gl.TEXTURE_MAP_FILTER 和 gl.TEXTURE_MIN_FILTER 参数的值
gl.NEAREST: 使用原纹理上距离映射后像素中心最近的那个像素的颜色值，作为新像素的值。
gl.LINEAR: 使用距离新像素中心最近的四个像素的颜色值的加权平均，作为新像素的值（和gl.NEAREST相比，该方法图像质量更好，但也会有较大的开销。）
可赋给 gl.TEXTURE_WRAP_S 和 gl.TEXTURE_WRAP_T 的常量：
gl.REPEAT: 平铺式的重复纹理
gl.MIRRORED_REPEAT: 镜像对称的重复纹理
gl.CLAMP_TO_EDGE: 使用纹理图像边缘值

设置样例如下所示：

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

gl.texImage2D，将 pixels 指定给绑定的纹理对象，这个api在 WebGL1 和 WebGL2 中的重载函数多达十几个，格式类型非常多样。pixels参数既可以是图像，canvas，也可以是视频，我们只看 WebGL1中的调用形式。

// WebGL1:
void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ArrayBufferView? pixels);
void gl.texImage2D(target, level, internalformat, format, type, ImageData? pixels);
void gl.texImage2D(target, level, internalformat, format, type, HTMLImageElement? pixels);
void gl.texImage2D(target, level, internalformat, format, type, HTMLCanvasElement? pixels);
void gl.texImage2D(target, level, internalformat, format, type, HTMLVideoElement? pixels);
void gl.texImage2D(target, level, internalformat, format, type, ImageBitmap? pixels);

// WebGL2:
//...

我封装出了一个纹理加载函数，每个api的调用格式可以查看资料，还是先实现我们想要的效果。

function loadTexture(url) {
 const texture = gl.createTexture();
 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
 gl.activeTexture(gl.TEXTURE0);
 gl.bindTexture(gl.TEXTURE_2D, texture);
 
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
 
 let textureInfo = {
 width: 1,
 height: 1,
 texture: texture,
 };
 const img = new Image();
 return new Promise((resolve,reject) => {
 img.onload = function() {
  textureInfo.width = img.width;
  textureInfo.height = img.height;
  gl.bindTexture(gl.TEXTURE_2D, textureInfo.texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
  resolve(textureInfo);
 };
 img.src = url;
 });
}

漫反射贴图

首先实现漫反射光贴图，从网上下载了个地板的贴图，里面包含了各种类型的贴图。

缓冲区要增加顶点对应的纹理坐标，这样才能通过纹理坐标找到对应的纹理像素，简称纹素。

const arrays = {
 position: [
 -1, 0, -1,
 -1, 0, 1,
 1, 0, -1,
 1, 0, 1
 ],
 texcoord: [
 0.0, 1.0,
 0.0, 0.0,
 1.0, 1.0,
 1.0, 0.0
 ],
 normal: [ 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1 ],
};

顶点着色器唯一区别是增加了纹理坐标，需要插值传入片元着色器

//...
attribute vec2 a_texcoord;
varying vec2 v_texcoord;

void main() { 
 //...
 v_texcoord = a_texcoord;
}

片元着色器修改的多一些。主要是使用 texture2D 获取对应坐标下的纹素，代替之前的颜色就可以了。下面就是片元着色器相关代码

//...
vec3 normal = normalize(v_normal);
vec4 diffMap = texture2D(u_samplerD, v_texcoord);

//光线方向
vec3 lightDirection = normalize(u_lightPosition - v_position);
// 计算光线方向和法向量夹角
float nDotL = max(dot(lightDirection, normal), 0.0);
// 漫反射光亮度
vec3 diffuse = u_diffuseColor * nDotL * diffMap.rgb;
// 环境光亮度
vec3 ambient = u_ambientColor * diffMap.rgb;
//...

js部分加载贴图对应的图片，传递纹理单元，然后渲染

//...
(async function (){
 const ret = await loadTexture('/model/floor_tiles_06_diff_1k.jpg')
 setUniforms(program, {
 u_samplerD: 0//0号纹理
 });
 //...
 draw();
})()

效果如下，镜面高光部分似乎太刺眼了，因为地板是不会有镜子一样光滑强烈的反光的。

漫反射贴图

镜面高光贴图

为了实现更逼真的高光效果，继续实现高光贴图，实现原理和漫反射一样，把对应的高光颜色替换成高光贴图纹素就可以了。
下面就是片元着色器增加修改高光部分

//...
vec3 normal = normalize(v_normal);
vec4 diffMap = texture2D(u_samplerD, v_texcoord);
vec4 specMap = texture2D(u_samplerS, v_texcoord);

//光线方向
vec3 lightDirection = normalize(u_lightPosition - v_position);
// 计算光线方向和法向量夹角
float nDotL = max(dot(lightDirection, normal), 0.0);
// 漫反射光亮度
vec3 diffuse = u_diffuseColor * nDotL * diffMap.rgb;
// 环境光亮度
vec3 ambient = u_ambientColor * diffMap.rgb;
// 镜面高光
vec3 eyeDirection = normalize(u_viewPosition - v_position);// 反射方向
vec3 halfwayDir = normalize(lightDirection + eyeDirection);
float specularIntensity = pow(max(dot(normal, halfwayDir), 0.0), u_shininess);
vec3 specular = (vec3(0.2,0.2,0.2) + specMap.rgb) * specularIntensity;
//...

js同时加载漫反射和高光贴图

//...
(async function (){
 const ret = await Promise.all([
 loadTexture('/model/floor_tiles_06_diff_1k.jpg'),
 loadTexture('/model/floor_tiles_06_spec_1k.jpg',1)
 ]);
 setUniforms(program, {
 u_samplerD: 0,//0号纹理
 u_samplerS: 1 //1号纹理
 });
 //...
 draw();
})()

最后实现的效果如下，明显更加接近真实的地板

高光贴图

热心网友时间：2022-04-22 11:41

按什么键可以直接启动那个纹理贴图呢？可以直接点击那个设置键就可以直接启动。

热心网友时间：2022-04-22 12:59

我见启用这个纹理贴图，那这个的话应该是用一个启动键就可以启动它的一个纹理贴图。

热心网友时间：2022-04-22 14:33

有些话只传输一个民间故事小马的申述，我真是。

热心网友时间：2022-04-22 16:25

怎么启用文理贴图这个具体情况我也不太会。

热心网友时间：2022-04-22 18:33

玛雅中，按什么键可以启动，文丽贴图应该按那个设置键应该。

热心网友时间：2022-04-22 20:57

马亚中按什么键？怎么启用文理贴图，这个可以按它的说明书，它的原理呀。